品牌，区域,监控

package-lock.json

@@ -4696,6 +4696,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1627591659555&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -10538,6 +10546,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -10777,6 +10790,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.nlark.com/table/download/table-5.4.6.tgz",
@@ -11529,6 +11551,46 @@
       "resolved": "https://registry.nlark.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1631141991995&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz",
       "integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "dom7": {
+          "version": "2.1.5",
+          "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+          "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+          "requires": {
+            "ssr-window": "^2.0.0"
+          },
+          "dependencies": {
+            "ssr-window": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+              "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+            }
+          }
+        },
+        "ssr-window": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+          "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+        },
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.nlark.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz?cache=0&sync_timestamp=1630882911486&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.11.0.tgz",

package.json

@@ -14,7 +14,9 @@
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.6",
+    "swiper": "^5.4.5",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/components/XForm.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="pending">
+    <el-form :inline="true" size="small">
+      <el-row :gutter="20">
+        <template v-for="item in formItems">
+          <el-col :span="item.col" :key="item.id">
+            <el-form-item :label="item.label">
+              <template v-if="item.type === 'input'">
+                <el-input
+                    style="width: 180px;"
+                    :placeholder="item.placeholder"
+                    v-model="formData[`${item.field}`]"
+                    clearable>
+                </el-input>
+              </template>
+              <template v-else-if="item.type === 'select'">
+                <el-select
+                    style="width: 180px;"
+                    :placeholder="item.placeholder"
+                    v-model="formData[`${item.field}`]"
+                    clearable>
+                  <el-option
+                      v-for="option in item.options"
+                      :key="option.value"
+                      :value="option.value"
+                      :label="option.label">
+                  </el-option>
+                </el-select>
+              </template>
+              <template v-else-if="item.type === 'datepicker'">
+                <el-date-picker
+                    v-model="formData[`${item.field}`]"
+                    :start-placeholder="item.placeholder[0]"
+                    :end-placeholder="item.placeholder[1]"
+                    type="daterange"
+                    clearable
+                    class="date-picker-reset">
+                </el-date-picker>
+              </template>
+              <template v-else-if="item.type === 'text'">
+                <span  :style="{cursor: 'pointer', color: item.value === day ? color : '#000' }" @click="onSelectText(item.value)">{{item.text}}</span>
+              </template>
+              <template v-else-if="item.type === 'button'">
+                <el-button @click="manage(item.click)">{{item.text}}</el-button>
+              </template>
+            </el-form-item>
+          </el-col>
+        </template>
+<!--        <el-col :span="4">-->
+<!--          <el-form-item label="栋舍">-->
+<!--            <el-select style="width: 180px;"></el-select>-->
+<!--          </el-form-item>-->
+<!--        </el-col>-->
+<!--        <el-col :span="4">-->
+<!--          <el-form-item label="单元">-->
+<!--            <el-select style="width: 180px;"></el-select>-->
+<!--          </el-form-item>-->
+<!--        </el-col>-->
+<!--        <el-col :span="1">-->
+<!--          <p style="line-height: 30px;">今日</p>-->
+<!--        </el-col>-->
+<!--        <el-col :span="1">-->
+<!--          <p style="line-height: 30px;">本周</p>-->
+<!--        </el-col>-->
+<!--        <el-col :span="1">-->
+<!--          <p style="line-height: 30px;">本月</p>-->
+<!--        </el-col>-->
+<!--        <el-col :span="6">-->
+<!--          <el-form-item>-->
+<!--            <el-date-picker-->
+<!--                v-model="dateRange"-->
+<!--                type="daterange"-->
+<!--                range-separator="至"-->
+<!--                start-placeholder="开始日期"-->
+<!--                end-placeholder="结束日期">-->
+<!--            </el-date-picker>-->
+<!--          </el-form-item>-->
+<!--        </el-col>-->
+<!--        <el-col :span="2">-->
+<!--          <el-form-item>-->
+<!--            <el-button>导出数据</el-button>-->
+<!--          </el-form-item>-->
+<!--        </el-col>-->
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: "XForm",
+  props: {
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    day: {
+      type: Number,
+      default: () => 2
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  methods: {
+    // 拿到方法
+    onSelectText(value) {
+      this.$emit('setDay', value)
+    },
+    manage(value) {
+      this.$emit('onClickType', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pending {
+  width: 100%;
+  height: 70px;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/views/Env/PigHouseEnv.vue

@@ -1,13 +1,177 @@
 <template>
-  <div>猪舍环境</div>
+  <div class="pigHouse">
+    <div style="height: 200px">
+      <swiper class="swiper" :options="swiperOption">
+        <swiper-slide v-for="item in 10" :key="item" style="padding-top: 10px">
+          <div class="box">
+            <p>育肥1栋1单元</p>
+            <div class="flex">
+              <div>
+                <i class="icon1"></i>
+              </div>
+              <div>
+                <span>36.6℃</span>
+              </div>
+            </div>
+            <div style="margin-top: 20px" class="flex">
+              <div>
+                <i class="icon2"></i>
+              </div>
+              <div>
+                <span>78RH</span>
+              </div>
+            </div>
+          </div>
+
+        </swiper-slide>
+        <div class="swiper-pagination" slot="pagination"></div>
+        <div class="swiper-button-prev" slot="button-prev"></div>
+        <div class="swiper-button-next" slot="button-next"></div>
+      </swiper>
+    </div>
+    <br/>
+    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+  </div>
 </template>
 
 <script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import XForm from "@/components/XForm";
+import 'swiper/css/swiper.css'
 export default {
-  name: "PigHouseEnv"
+  name: "PigHouseEnv",
+  components: {
+    swiper,
+    swiperSlide,
+    XForm
+    // Swiper,
+    // SwiperSlide
+  },
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: 8,
+        spaceBetween: 30,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          type: 'progressbar'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      },
+      formItems: [
+        {
+          id: 1,
+          type: 'select',
+          label: '栋舍：',
+          placeholder: '请选择栋舍',
+          field: 'areaId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 2,
+          type: 'select',
+          label: '单元：',
+          placeholder: '请选择单元',
+          field: 'unitId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 5,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 6,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 7,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      // 默认选择本周
+      day: 2
+    }
+  },
+  methods: {
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType(data) {
+      console.log(data)
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  .pigHouse {
+    width: 100%;
+    height: 100%;
+    padding: 20px 20px 0 20px;
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+  .box {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    padding: 30px 0;
+    text-align: center;
+    cursor: pointer;
+  }
+  .flex {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon1 {
+    width: 32px;
+    height: 32px;
+    background: url('../../assets/images/u3028.svg') no-repeat;
+    display: inline-block;
+  }
+  .icon2 {
+    width: 32px;
+    height: 32px;
+    background: url('../../assets/images/u3029.svg') no-repeat;
+    background-size: 100% 100%;
+    display: inline-block;
+  }
 </style>