2021-10-25

babel.config.js

@@ -1,5 +1,22 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-21 10:00:21
+ * @LastEditTime: 2021-10-25 15:47:00
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfScreen\babel.config.js
+ */
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
 }

package-lock.json

@@ -2393,6 +2393,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2462,6 +2470,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmmirror.com/babel-loader/download/babel-loader-8.2.3.tgz?cache=0&sync_timestamp=1634769533620&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.3.tgz",
@@ -2474,6 +2487,38 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.nlark.com/babel-plugin-dynamic-import-node/download/babel-plugin-dynamic-import-node-2.3.3.tgz?cache=0&sync_timestamp=1618846958717&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-plugin-dynamic-import-node%2Fdownload%2Fbabel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -2513,6 +2558,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -4213,8 +4279,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.nlark.com/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4679,6 +4744,19 @@
       "integrity": "sha1-ddaM4rOneDRpFq4Sk/gPOJ7PQ5w=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.6",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.6.tgz",
+      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz",
@@ -7927,6 +8005,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1633420549182&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -9705,6 +9788,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -10920,6 +11008,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.nlark.com/through/download/through-2.3.8.tgz?cache=0&sync_timestamp=1618847037651&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fthrough%2Fdownload%2Fthrough-2.3.8.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.21.4",
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
+    "element-ui": "^2.15.6",
     "lib-flexible": "^0.3.2",
     "swiper": "^5.4.5",
     "vue": "^2.6.11",
@@ -25,6 +26,7 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "compression-webpack-plugin": "^9.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

src/assets/Zoology/u5069.svg

@@ -0,0 +1 @@
+<svg t="1625116682166" class="icon" viewBox="0 0 1639 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4594" width="16" height="16"><path d="M1603.780608 219.136L902.135808 986.5216a110.1824 110.1824 0 0 1-165.6832 0L35.627008 219.136A130.2528 130.2528 0 0 1 117.547008 0h1401.0368a130.2528 130.2528 0 0 1 83.3536 219.136z" fill="#28BCCA" p-id="4595"></path></svg>

src/main.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-25 08:38:02
+ * @LastEditTime: 2021-10-25 15:47:44
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfScreen\src\main.js
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -5,9 +13,11 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
+import { DatePicker } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
+Vue.use(DatePicker)
 
 new Vue({
   router,

src/views/Production/Production.vue

@@ -1,10 +1,18 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-21 17:51:22
+ * @LastEditTime: 2021-10-22 09:11:45
+ * @LastEditors: your name
+ * @Description: 生产经营页面
+ * @FilePath: \hyyfScreen\src\views\Production\Production.vue
+-->
 <template>
   <div>生产经营</div>
 </template>
 
 <script>
 export default {
-name: "Production"
+  name: "Production"
 }
 </script>
 

src/views/Zoology/Zoology.vue

@@ -1,13 +1,323 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-21 17:51:22
+ * @LastEditTime: 2021-10-25 17:22:24
+ * @LastEditors: Please set LastEditors
+ * @Description: 生态监测页面
+ * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue
+-->
 <template>
-  <div>生态监测</div>
+  <div class="zoology">
+    <div class="left">
+      <div class="left-top">
+        <!-- 左上标题 -->
+        <div class="left-top-title">
+          <div class="left-top-title-left"></div>
+          <div class="left-top-title-center">
+            <span>育肥一栋</span>
+            <div class="left-top-title-icon" @click="leftTopSelect"></div>
+            <!-- 可选择的栋 -->
+            <div class="left-top-select" v-show="leftTopSelected">
+              <select-block :title="'一栋'">
+                <template v-slot:left>
+                  <select-column :list="simulatedData"></select-column>
+                </template>
+                <template v-slot:right>
+                  <select-column :floor="false" :type="1"></select-column>
+                </template>
+              </select-block>
+            </div>
+          </div>
+          <div class="left-top-title-right"></div>
+        </div>
+        <!-- 左上循环滑动 -->
+        <div class="left-top-content">
+          <swiper style="height: 600px;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+            <swiper-slide v-for="item in 10" :key="item">
+              <swiper-content :list="swiperData"></swiper-content>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+      <div class="left-middle">
+        <chart-board 
+          :title="'单元用水量'" 
+          :ifDate="true" 
+          @emitDates="getWaterDates">
+          <chart-line :data="waterData" :id="1"></chart-line>
+        </chart-board>
+      </div>
+      <div class="left-bottom">
+        <chart-board 
+          :title="'整栋用电量'" 
+          :ifDate="true" 
+          @emitDates="getElecDates">
+          <chart-line-and :data="waterData" :id="2"></chart-line-and>
+        </chart-board>
+      </div>
+    </div>
+
+    <div class="right">
+      <div class="right-top">
+        <div class="kuang"></div>
+      </div>
+      <div class="right-bottom">
+        <div class="right-bottom-left">
+          <chart-board 
+            :title="'单元用水量'" 
+            @emitDates="getWaterDates">
+            <chart-line :data="waterData" :id="4"></chart-line>
+          </chart-board>
+        </div>
+        <div class="right-bottom-right">
+          <chart-board 
+            :title="'单元用水量'" 
+            @emitDates="getWaterDates">
+            <chart-line :data="waterData" :id="5"></chart-line>
+          </chart-board>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import SelectBlock from './leftTop/SelectBlock.vue'
+import SelectColumn from './leftTop/SelectColumn.vue'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import SwiperContent from './leftTop/SwiperContent.vue'
+import ChartBoard from './charts/ChartBoard.vue'
+import ChartLine from './charts/ChartLine.vue'
+import ChartLineAnd from './charts/ChartLineAnd.vue'
+
 export default {
-name: "Zoology"
+  name: "Zoology",
+  components: {
+    SelectBlock,
+    SelectColumn,
+    swiper,
+    swiperSlide,
+    SwiperContent,
+    ChartBoard,
+    ChartLine,
+    ChartLineAnd
+  },
+  data() {
+    return {
+      leftTopSelected: false, // 左上是否点击了要选择
+      simulatedData: [ // 左上 —— 模拟的数据
+        { id: 1, name: '1' },
+        { id: 2, name: '11' },
+        { id: 3, name: '111' },
+        { id: 4, name: '1111' },
+        { id: 5, name: '1111' },
+        { id: 6, name: '11111' },
+        { id: 7, name: '111111' },
+        { id: 8, name: '1111111' },
+      ],
+      swiperOption: { // 左上 —— 循环滑动
+        direction: 'vertical',
+        slidesPerView: 3,
+        slidesPerColumn: 1,
+        slidesPerGroup: 3,
+        // spaceBetween: 30,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false
+        },
+        // pagination: {
+        //   el: '.swiper-pagination',
+        //   clickable: true
+        // }
+      },
+      swiperData: [
+        {
+          id: '121',
+          title: '育肥1栋1单元',
+          temp: 31.5,
+          rh: 81
+        },
+        {
+          id: '121a',
+          title: '育肥1栋1单元',
+          temp: 31.5,
+          rh: 84
+        },
+        {
+          id: '121s',
+          title: '育肥1栋1单元',
+          temp: 31.5,
+          rh: 81
+        },
+        {
+          id: '121d',
+          title: '育肥1栋1单元',
+          temp: 31.5,
+          rh: 81
+        }
+      ],
+      waterDates: [], // 用水量模拟
+      waterData: { // 左中 —— 模拟数据
+        xAxisName: '',
+        xAxisData: ['07-01', '07-02', '07-03', '07-04', '07-05'],
+        yAxisName: '吨',
+        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2]
+      },
+      elecDates: [] // 用电量时间
+    }
+  },
+  methods: {
+    leftTopSelect() { // 左上角的选择是否显示
+      this.leftTopSelected = !this.leftTopSelected
+    },
+    getWaterDates(value) { // 左中 获取时间
+      this.waterDates = value
+    },
+    getElecDates(value) { // 左下 获取时间
+      this.elecDates = value
+    }
+  },
 }
 </script>
 
 <style scoped>
+.zoology {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+}
 
+/** 左边 */
+.left {
+  /* background-color: #fff; */
+  width: 40%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+/* 左上 */
+.left-top {
+  width: 100%;
+  height: 30%;
+  background: linear-gradient(156deg, rgba(15, 21, 43, 1) 0%, rgba(0, 0, 0, 1) 100%);
+}
+/* 左上 - title */
+.left-top-title {
+  width: 100%;
+  height: 26px;
+  display: flex;
+}
+.left-top-title-left {
+  width: 325px;
+  height: 26px;
+  background: url("../../assets/BioSafety/u1717.svg") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.left-top-title-left::before {
+  content: '';
+  height: 85%;
+  border: 2px solid #66FFFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.left-top-title-center {
+  padding: 0 15px;
+  width: 130px;
+  height: 26px;
+  background: url("../../assets/BioSafety/u1719.svg") no-repeat;
+  background-size: 100% 100%;
+  line-height: 26px;
+  color: white;
+  font-size: 16px;
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+}
+.left-top-title-icon {
+  width: 20px;
+  height: 20px;
+  background: url("../../assets/Zoology/u5069.svg") no-repeat;
+  position: relative;
+  top: 5px;
+  cursor: pointer;
+}
+.left-top-title-right {
+  width: 325px;
+  height: 26px;
+  background: url("../../assets/BioSafety/u1718.svg") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.left-top-title-right::after{
+  content: '';
+  height: 85%;
+  border: 2px solid #66FFFF;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+/* 左上 - 点击下拉按钮后的选择框 */
+.left-top-select {
+  position: absolute;
+  top: 35px;
+  left: -340px;
+  border: 2px solid #66FFFF;
+  border-radius: 5px;
+  padding: 15px 10px;
+  display: flex;
+}
+/* 左上 - 滑动 */
+.left-top-content {
+  height: 100%;
+  overflow: hidden;
+}
+/* 左中 */
+.left-middle {
+  width: 100%;
+  height: 30%;
+}
+/* 左下 */
+.left-bottom {
+  background-color: rgb(228, 32, 32);
+  width: 100%;
+  height: 30%;
+}
+
+/** 右边 */
+.right {
+  width: 55%;
+  height: 100%;
+}
+/* 右上 */
+.right-top {
+  height: 70%;
+  width: 100%;
+  /* box-sizing: border-box; */
+  /* background-color: red; */
+  padding-left: 25px;
+}
+.kuang {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/BioSafety/kuang.png") no-repeat;
+  background-size: contain;
+}
+/* 右下 */
+.right-bottom {
+  display: flex;
+  background: rgb(3,16,50);
+}
+.right-bottom-left {
+  width: 50%;
+  border-right: 2px solid #66FFFF;
+}
+.right-bottom-right {
+  margin-left: 10px;
+  width: 50%;
+}
 </style>

src/views/Zoology/charts/ChartBoard.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 15:20:45
+ * @LastEditTime: 2021-10-25 16:11:45
+ * @LastEditors: Please set LastEditors
+ * @Description: 带标题的Echarts面板
+ * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartBoard.vue
+-->
+<template>
+  <div class="chart-board">
+    <div class="title-bar">
+      <div class="title">{{ title }}</div>
+      <div v-if="ifDate" class="date">
+        <el-date-picker
+          v-model="dates"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          size="mini"
+          @change="getDates">
+        </el-date-picker>
+      </div>
+    </div>
+    <div class="chart">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '温度'
+    },
+    ifDate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dates: []
+    }
+  },
+  methods: {
+    getDates(newValue) {
+      this.$emit('emitDates', newValue)
+    }
+  },
+}
+</script>
+<style scoped>
+.chart-board {
+  width: 100%;
+  height: 100%;
+  background: rgb(3,16,50);
+}
+.title-bar {
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.title {
+  color: #66FFFF;
+  font-size: 14px;
+  font-weight: 400;
+}
+</style>

src/views/Zoology/charts/ChartLine.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 16:13:34
+ * @LastEditTime: 2021-10-25 16:55:38
+ * @LastEditors: Please set LastEditors
+ * @Description: 折线图
+ * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartLine.vue
+-->
+<template>
+  <div :id="'chartLine' + id" class="chart-line">
+    
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    id: {
+      type: Number
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          top: '10%',
+          left: '10%',
+          bottom: '20%',
+          right: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            // name: this.data.xAxisName,
+            data: this.data.xAxisData,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(0, 255, 255)',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'value',
+            name: this.data.yAxisName,
+            nameTextStyle: {
+              color: 'red'
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              },
+              formatter: '{value}' + this.data.yAxisName
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(0, 255, 255)',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+        //],
+        series: [
+          {
+            name: this.data.yAxisName,
+            type: 'line',
+            smooth: false,
+            data: this.data.yAxisData,
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartLine' + this.id));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+.chart-line {
+  width: 100%;
+  height: 160px;
+}
+</style>

src/views/Zoology/charts/ChartLineAnd.vue

@@ -0,0 +1,154 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 16:13:34
+ * @LastEditTime: 2021-10-25 17:05:36
+ * @LastEditors: Please set LastEditors
+ * @Description: 折线图
+ * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartLine.vue
+-->
+<template>
+  <div :id="'chartLine' + id" class="chart-line">
+    
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    id: {
+      type: Number
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          top: '10%',
+          left: '10%',
+          bottom: '20%',
+          right: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            // name: this.data.xAxisName,
+            data: this.data.xAxisData,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(0, 255, 255)',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'value',
+            name: this.data.yAxisName,
+            nameTextStyle: {
+              color: 'red'
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              },
+              formatter: '{value}' + this.data.yAxisName
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(0, 255, 255)',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+        //],
+        series: [
+          {
+            name: this.data.yAxisName,
+            type: 'line',
+            smooth: false,
+            data: this.data.yAxisData,
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
+              }
+            }
+          },
+          {
+            name: this.data.yAxisName,
+            type: 'bar',
+            smooth: false,
+            barWidth: 20,
+            data: this.data.yAxisData,
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartLine' + this.id));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+.chart-line {
+  width: 100%;
+  height: 160px;
+}
+</style>

src/views/Zoology/leftTop/SelectBlock.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 10:46:40
+ * @LastEditTime: 2021-10-25 14:28:06
+ * @LastEditors: Please set LastEditors
+ * @Description: 生态监测 - 左上 - 选择的内容
+ * @FilePath: \hyyfScreen\src\views\Zoology\Select\SelectBlock.vue
+-->
+<template>
+  <div class="select-block">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '一栋'
+    }
+  }
+}
+</script>
+<style scoped>
+.select-block {
+  padding: 5px;
+  color: #66FFFF;
+  border: 2px solid #66FFFF;
+  border-radius: 5px;
+  margin: 0 5px;
+}
+.title {
+  text-align: center;
+}
+.content {
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/views/Zoology/leftTop/SelectColumn.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 10:53:42
+ * @LastEditTime: 2021-10-25 14:23:55
+ * @LastEditors: Please set LastEditors
+ * @Description: 一行
+ * @FilePath: \hyyfScreen\src\views\Zoology\Select\SelectColumn.vue
+-->
+<template>
+  <div class="select-column">
+    <div class="title">{{ types[type] }}</div>
+    <div v-for="count in floorCount" :key="list[count].name">
+      <div class="floor" :class="{'floor-border': type === 0}">
+        <div class="floor-num"><span>{{ count }}楼</span></div>
+        <div class="block-div">{{ list[count*3 - 3].id }}</div>
+        <div v-if="list[count*3 - 2] !== undefined" class="block-div">{{ list[count*3 - 2].id  }}</div>
+        <div v-if="list[count*3 - 1] !== undefined" class="block-div">{{ list[count*3 - 1].id }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    },
+    floor: {
+      type: Boolean,
+      default: true
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      types: ['育肥', '保育'],
+      floorCount: 0
+    }
+  },
+  mounted() {
+    this.floorCount = Math.ceil(this.list.length / 3)
+  },
+  watch: {
+    list(newValue) {
+      if (newValue) {
+        this.floorCount = Math.floor(newValue.length / 3)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.select-column {
+  padding: 0 5px;
+  width: 180px;
+}
+.title {
+  text-align: center;
+  font-size: 14px;
+}
+.floor {
+  font-size: 13px;
+  display: block;
+  text-align: left;
+}
+.floor-border {
+  border-right: 2px solid #66FFFF;
+}
+.floor-num {
+  width: 30px;
+  display: inline-block;
+}
+.block-div {
+  color: #fff;
+  background-color: rgb(2,125,180);
+  border-radius: 5px;
+  width: 40px;
+  height: 23px;
+  margin: 3px;
+  border: 1px solid #999;
+  line-height: 23px;
+  display: inline-block;
+  cursor: pointer;
+  text-align: center;
+}
+.block-div:hover {
+  background-color: #66FFFF;
+}
+</style>

src/views/Zoology/leftTop/SwiperContent.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 14:53:19
+ * @LastEditTime: 2021-10-25 15:16:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfScreen\src\views\Zoology\leftTop\SwiperContent.vue
+-->
+<template>
+  <div class="swiper-content">
+    <div v-for="item in list" :key="item.id" class="content">
+      <div class="title">{{ item.title }}</div>
+      <div class="item">
+        <div class="temp-icon"></div>
+        <div class="data">{{ item.temp }}℃</div>
+      </div>
+      <div class="item">
+        <div class="rh-icon"></div>
+        <div class="data">{{ item.rh }}RH</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+<style scoped>
+.content {
+  display: inline-block;
+  width: 110px;
+  margin: 10px;
+  background-color: rgb(15,21,43);
+  color: #66FFFF;
+  font-weight: 200;
+  padding: 20px;
+}
+.title {
+  font-size: 14px;
+}
+.item {
+  display: flex;
+  padding: 20px 10px 5px;
+}
+.temp-icon {
+  width: 35px;
+  height: 35px;
+  background: url("../../../assets/Zoology/u4898.svg") no-repeat;
+  background-size: contain;
+  /* display: inline-block; */
+}
+.rh-icon {
+  width: 35px;
+  height: 35px;
+  background: url("../../../assets/Zoology/u4899.svg") no-repeat;
+  background-size: contain;
+  /* display: inline-block; */
+}
+.data {
+  margin-left: 5px;
+}
+</style>