2021-07-23

package-lock.json

@@ -4607,6 +4607,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1623167264935&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
+      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12069,6 +12077,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz",
+      "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
     }
   }
 }

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "element-ui": "^2.15.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/main.js

@@ -4,9 +4,11 @@ import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import echarts from 'echarts'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);
+Vue.prototype.$echarts = echarts
 
 new Vue({
   router,

src/views/collectData/charts/hisChart.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="his-chart">
+    <div id="his" class="his"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data: [22, 23, 24, 25, 22, 23, 23, 24],
+      dates: ['杭州牧场', '宁波牧场', '温州牧场', '绍兴牧场', '嘉兴牧场', '台州牧场', '金华牧场', '湖州牧场']
+    }
+  },
+  methods: {
+    drawLine () {
+      const hisChart = this.$echarts.init(document.getElementById('his'))
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: this.dates
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: this.data,
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      }
+      hisChart.setOption(option)
+    }
+  },
+  mounted () {
+    this.drawLine()
+  }
+}
+</script>
+<style scoped>
+.his {
+  min-height: 250px;
+}
+</style>

src/views/collectData/charts/lineChart.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="line-chart">
+    <div id="line" class="line"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data: [22, 23, 24, 25, 22, 23, 23, 24, 25, 23],
+      dates: ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-18', '07-19']
+    }
+  },
+  methods: {
+    drawLine () {
+      const lineChart = this.$echarts.init(document.getElementById('line'))
+      const option = {
+        xAxis: {
+        type: 'category',
+        data: this.dates
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+          {
+            data: this.data,
+            type: 'line',
+            smooth: true
+          }
+        ]
+      }
+      lineChart.setOption(option)
+    }
+  },
+  mounted () {
+    this.drawLine()
+  }
+}
+</script>
+<style scoped>
+.line {
+  min-height: 250px;
+}
+</style>

src/views/collectData/collectData.vue

@@ -1,13 +1,145 @@
 <template>
-  <div>汇总数据</div>
+  <div class="collectData">
+    <!-- 汇总数据的 nav -->
+    <div class="box">
+      <label for="area">区域选择：</label>
+      <el-select id="area" v-model="areaSelected">
+        <el-option
+          v-for="item in areas"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <div class="box_item" v-for="item in boxList" :key="item.id">
+        <p>{{item.name}}</p>
+        <p>{{item.value}}</p>
+      </div>
+    </div>
+
+    <!-- 以下为图表 -->
+    <div>
+      <div class="chartDiv">
+        <div class="title">
+          <span>母猪总存栏走势</span>
+        </div>
+        <line-chart></line-chart>
+      </div>
+      <div class="chartDiv">
+        <div class="title">
+          <span>各牧场母猪存栏比较</span>
+        </div>
+        <his-chart></his-chart>
+      </div>
+      <div class="chartDiv">
+        <div class="title">
+          <span>综合实力排名</span>
+        </div>
+        <div>表格</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import lineChart from './charts/lineChart.vue'
+import hisChart from './charts/hisChart.vue'
 export default {
-  name: "collectData"
+  name: "collectData",
+  data () {
+    return {
+      areas: [ // 区域选择 select 的 option
+        {
+          value: 1,
+          label: '浙江省'
+        },
+        {
+          value: 2,
+          label: '杭州市'
+        },
+        {
+          value: 3,
+          label: '宁波市'
+        },
+        {
+          value: 4,
+          label: '温州市'
+        },
+        {
+          value: 5,
+          label: '绍兴市'
+        }
+      ],
+      areaSelected: 1,
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 25000,
+        },
+        {
+          id: 2,
+          name: '预计年出栏量',
+          value: 500000
+        },
+        {
+          id: 3,
+          name: '母猪目标存栏',
+          value: 40000
+        },
+        {
+          id: 4,
+          name: '目标年出栏量',
+          value: 800000
+        }
+      ]
+    }
+  },
+  components: {
+    lineChart,
+    hisChart
+  }
 }
 </script>
 
 <style scoped>
+.box {
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* 汇总数据块的顶栏 */
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+
+/* 图表结构的大局 */
+.chartDiv {
+  margin: 10px;
+  margin-top: 20px;
+  border: 1px solid #ddd;
+  height: 305px;
+  background-color: #fff;
+}
 
+.title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 50px;
+  line-height: 50px;
+  padding-left: 50px;
+  font-size: 14px;
+  border-bottom: 1px solid #ddd;
+}
 </style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -1,13 +1,99 @@
 <template>
-  <div>设备管理</div>
+  <div class="device-management">
+    <!-- 查询条件 -->
+    <div class="box">
+      <el-form inline :model="searchForm" size="mini">
+        <el-form-item label="注册时间：">
+          <el-input v-model="searchForm.registerTime" placeholder=""></el-input>
+        </el-form-item>
+        <el-form-item label="设备编码：">
+          <el-input v-model="searchForm.deviceCode" placeholder=""></el-input>
+        </el-form-item>
+        <el-form-item label="地县：">
+          <el-input v-model="searchForm.county" placeholder="地县/编码"></el-input>
+        </el-form-item>
+        <el-form-item label="牧场：">
+          <el-input v-model="searchForm.farm" placeholder="牧场名/牧场编号"></el-input>
+        </el-form-item>
+        <el-form-item label="栋舍：">
+          <el-input v-model="searchForm.pigsty" placeholder=""></el-input>
+        </el-form-item>
+        <el-form-item label="状态：">
+          <el-input v-model="searchForm.status" placeholder="正常/异常"></el-input>
+        </el-form-item>
+        <el-form-item style="margin-left: 20px">
+          <el-button plain @click="init">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 按钮栏 -->
+    <div class="title">
+      <div class="title-left">
+        <i class="el-icon-s-unfold"></i>
+        <span>设备列表</span>
+        <el-button plain size="mini" class="button-margin">批量上传</el-button>
+        <el-button type="primary" plain size="mini">新增设备</el-button>
+      </div>
+      <div class="title-right">
+
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "deviceAdmin"
+  name: "deviceAdmin",
+  data() {
+    return {
+      searchForm: {
+        registerTime: '',
+        deviceCode: '',
+        county: '',
+        farm: '',
+        pigsty: '',
+        status: ''
+      }
+    }
+  },
+  methods: {
+    // 初始化
+    init () {
+
+    }
+  },
 }
 </script>
 
 <style scoped>
+.box {
+  width: 100%;
+  background-color: #fff;
+  margin: 30px 0px 10px;
+  border: 1px solid #ddd;
+  padding: 20px;
+  padding-bottom: 10px;
+}
+
+.title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 50px;
+  line-height: 50px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  font-size: 12px;
+}
 
+.title-left {
+  margin-left: 20px;
+}
+
+.title-left span {
+  margin-left: 2px;
+}
+
+.button-margin {
+  margin: 0 5px 0 20px;
+}
 </style>