2021-07-26 -1

package-lock.json

@@ -2440,6 +2440,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608609324963&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.nlark.com/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -2984,7 +2992,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/call-bind/download/call-bind-1.0.2.tgz?cache=0&sync_timestamp=1610403020286&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcall-bind%2Fdownload%2Fcall-bind-1.0.2.tgz",
       "integrity": "sha1-sdTonmiBGcPJqQOtMKuy9qkZvjw=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5550,8 +5557,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
     },
     "for-in": {
       "version": "1.0.2",
@@ -5646,8 +5652,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.nlark.com/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -5671,7 +5676,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/get-intrinsic/download/get-intrinsic-1.1.1.tgz",
       "integrity": "sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -5795,7 +5799,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.nlark.com/has/download/has-1.0.3.tgz",
       "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -5815,8 +5818,7 @@
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.2.tgz?cache=0&sync_timestamp=1614443557459&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-symbols%2Fdownload%2Fhas-symbols-1.0.2.tgz",
-      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM=",
-      "dev": true
+      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM="
     },
     "has-value": {
       "version": "1.0.0",
@@ -7127,9 +7129,8 @@
     },
     "lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.nlark.com/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1618847150612&other_urls=https%3A%2F%2Fregistry.nlark.com%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
-      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
-      "dev": true
+      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz",
+      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
     },
     "lodash-es": {
       "version": "4.17.21",
@@ -7794,8 +7795,7 @@
     "object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.nlark.com/object-inspect/download/object-inspect-1.11.0.tgz",
-      "integrity": "sha1-nc6xRs7dQUig2eUauI00z1CZIrE=",
-      "dev": true
+      "integrity": "sha1-nc6xRs7dQUig2eUauI00z1CZIrE="
     },
     "object-is": {
       "version": "1.1.5",
@@ -9024,10 +9024,12 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.nlark.com/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "version": "6.10.1",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.10.1.tgz",
+      "integrity": "sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "4.3.4",
@@ -9360,6 +9362,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -9753,6 +9763,16 @@
       "integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/side-channel/download/side-channel-1.0.4.tgz",
+      "integrity": "sha1-785cj9wQTudRslxY1CkAEfpeos8=",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz?cache=0&sync_timestamp=1592843131591&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsignal-exit%2Fdownload%2Fsignal-exit-3.0.3.tgz",

package.json

@@ -8,10 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.3",
+    "lodash": "^4.17.21",
+    "qs": "^6.10.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/views/collectData/charts/hisChart.vue

@@ -17,16 +17,71 @@ export default {
       const option = {
         xAxis: {
           type: 'category',
+          axisLabel: { // 坐标轴文字
+            textStyle: {
+              color: '#000000'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#00ffff'
+            }
+          },
+          axisTick: { // 刻度线
+            show: false
+          },
           data: this.dates
         },
         yAxis: {
+          name: '百头', // 坐标轴单位
+          nameTextStyle: { // 坐标轴单位
+            padding: [0, 30, 0, 0], // 位置设定
+            color: '#000000'
+          },
+          axisLabel: { // 坐标轴文字
+            textStyle: {
+              color: '#000000'
+            }
+          },
+          axisLine: { // 坐标轴
+            lineStyle: {
+              color: '#00ffff'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: { // 刻度线
+            show: false
+          },
+          max: function (value) { // y轴最大值
+            return value.max + 5
+          },
           type: 'value'
         },
         series: [
           {
             data: this.data,
             type: 'bar',
-            showBackground: true,
+            barWidth: 20, // 柱宽
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    { offset: 0, color: '#96Bfdd' }, // 柱图渐变色 - 顶部
+                    { offset: 0.5, color: '#44C0cf' }, // 柱图渐变色 - 中部
+                    { offset: 1, color: '#71C8ff' }, // 柱图渐变色 - 底部
+                  ]
+                ),
+                label: { // 显示数值
+                  show: true,
+                  position: 'top' // 柱体上方显示
+                },
+                barBorderRadius: [5, 5, 0, 0] // 左上 右上 右下 左下
+              }
+            },
+            showBackground: false,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             }
@@ -42,6 +97,10 @@ export default {
 }
 </script>
 <style scoped>
+.his-chart {
+  width: 1000px;
+  margin: auto;
+}
 .his {
   min-height: 250px;
 }

src/views/collectData/charts/lineChart.vue

@@ -16,16 +16,64 @@ export default {
       const lineChart = this.$echarts.init(document.getElementById('line'))
       const option = {
         xAxis: {
-        type: 'category',
-        data: this.dates
+          type: 'category',
+          axisLabel: { // 坐标轴文字
+            textStyle: {
+              color: '#000000'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#00ffff'
+            }
+          },
+          axisTick: { // 刻度线
+            show: false
+          },
+          data: this.dates
         },
         yAxis: {
-            type: 'value'
+          name: '千头', // 坐标轴单位
+          nameTextStyle: { // 坐标轴单位
+            padding: [0, 30, 0, 0], // 位置设定
+            color: '#000000'
+          },
+          axisLabel: { // 坐标轴文字
+            textStyle: {
+              color: '#000000'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#00ffff'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: { // 刻度线
+            show: false
+          },
+          max: function (value) { // y轴最大值
+            return value.max + 5
+          },
+          type: 'value'
         },
         series: [
           {
             data: this.data,
             type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#5599f0', // 折线点颜色
+                lineStyle: { // 折线颜色
+                  color: '#5599fe'
+                },
+                label: { // 显示数值
+                  show: true
+                }
+              }
+            },
             smooth: true
           }
         ]
@@ -39,6 +87,10 @@ export default {
 }
 </script>
 <style scoped>
+.line-chart {
+  width: 1000px;
+  margin: auto;
+}
 .line {
   min-height: 250px;
 }

src/views/collectData/collectData.vue

@@ -22,6 +22,21 @@
       <div class="chartDiv">
         <div class="title">
           <span>母猪总存栏走势</span>
+          <div class="right">
+            <el-date-picker
+              v-model="timeSelected"
+              type="daterange"
+              range-separator="—"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="mini">
+            </el-date-picker>
+          </div>
+          <div class="right">
+            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 1, 'borderLeft': true}" @click="scopeDay(1)">日</span>
+            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 2}" @click="scopeDay(2)">月</span>
+            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 3, 'borderRight': true}" @click="scopeDay(3)">年</span>
+          </div>
         </div>
         <line-chart></line-chart>
       </div>
@@ -92,13 +107,34 @@ export default {
           name: '目标年出栏量',
           value: 800000
         }
-      ]
+      ],
+      daySelected: 1, // 年月日选中值，默认日
+      timeSelected: '' // 时间选择器选中的时间
     }
   },
   components: {
     lineChart,
     hisChart
-  }
+  },
+  methods: {
+    /* 年月日选择 */
+    scopeDay (val) {
+      this.daySelected = val
+      switch (val) {
+        case 1: // 日
+           
+          break;
+        case 2: // 月
+           
+          break;
+        case 3: // 年
+           
+          break;
+        default:
+          break;
+      }
+    }
+  },
 }
 </script>
 
@@ -142,4 +178,35 @@ export default {
   font-size: 14px;
   border-bottom: 1px solid #ddd;
 }
+
+.right {
+  float: right;
+  margin-right: 20px;
+  font-size: 12px;
+}
+
+/** 年月日选择 */
+.scopeEle {
+  display: inline-block;
+  border: 1px solid #ccc;
+  width: 75px;
+  text-align: center;
+  height: 26px;
+  line-height: 26px;
+  margin-left: -1px;
+  cursor: pointer;
+  background-color: #fff;
+}
+.borderLeft {
+  border-radius: 5px 0 0 5px;
+}
+.borderRight {
+  border-radius: 0 5px 5px 0 ;
+}
+/* 如果选中了 */
+.ifScoped {
+  background-color: #1abc9c;
+  color: #fff;
+  border: 1px solid #1abc9c;
+}
 </style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="device-management">
-    <!-- 查询条件 -->
+    <!-- 设备管理 -->
     <div class="box">
+      <div class="box_item" v-for="item in boxList" :key="item.id">
+        <p>{{item.name}}</p>
+        <p>{{item.value}}</p>
+      </div>
+    </div>
+    <!-- 查询条件 -->
+    <div class="conditions">
       <el-form inline :model="searchForm" size="mini">
         <el-form-item label="注册时间：">
           <el-input v-model="searchForm.registerTime" placeholder=""></el-input>
@@ -35,18 +42,72 @@
         <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 class="title-right">
+        <el-select v-model="pageSize" size="mini" style="width: 70%">
+          <el-option
+            v-for="item in pageSizeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div> -->
     </div>
+    <!-- 表格 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      :default-sort="{prop: 'date', order: 'descending'}"
+      size="mini"
+      v-loading="dataListLoading">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="日期"
+        sortable
+        width="180">
+      </el-table-column>
+    </el-table>
+    <table-footer
+      :totals="totalPages"
+      :size="pageSize"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange">
+    </table-footer>
   </div>
 </template>
 
 <script>
+import TableFooter from "../../components/TableFooter";
 export default {
   name: "deviceAdmin",
   data() {
     return {
+      boxList: [
+        {
+          id: 1,
+          name: '采集设备总数',
+          value: 2500,
+        },
+        {
+          id: 2,
+          name: '正常设备总数',
+          value: 2498
+        },
+        {
+          id: 3,
+          name: '异常设备总数',
+          value: 1
+        },
+        {
+          id: 4,
+          name: '注销设备总数',
+          value: 1
+        }
+      ],
       searchForm: {
         registerTime: '',
         deviceCode: '',
@@ -54,20 +115,93 @@ export default {
         farm: '',
         pigsty: '',
         status: ''
-      }
+      },
+      pageSizeList: [ // 表格显示条数
+        {
+          value: 0,
+          label: '显示条数'
+        },
+        {
+          value: 10,
+          label: '10条/页'
+        },
+        {
+          value: 20,
+          label: '20条/页'
+        },
+        {
+          value: 50,
+          label: '50条/页'
+        }
+      ],
+      pageSize: 0, // 表格显示条数
+      tableData: [], // 表格数据
+      totalPages: 0, // 共 n 条数据
+      pageIndex: 1, // 表格当前页数
+      dataListLoading: true
     }
   },
+  components: {
+    TableFooter
+  },
   methods: {
     // 初始化
     init () {
-
-    }
+      this.$http({
+        url: this.$http.adornUrl('/managercollectorregiste/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'farmCode': this.form.farmCode || undefined,
+          'registerStartTime': this.form.registerStartTime || undefined,
+          'registerEndTime': this.form.registerEndTime || undefined,
+          'deviceCode': this.form.deviceCode || undefined,
+          'countyName': this.form.countyName || undefined,
+          'farmName': this.form.farmName || undefined,
+          'acqStatus': this.form.acqStatus || undefined,
+          'sortord': this.form.sortord || undefined,
+        }, false)
+      }).then(async({data}) => {
+        console.log(data);
+        this.dataListLoading = false
+      })
+    },
+    // 显示条数改变
+    sizeChange () {},
+    // 页数改变
+    pageChange () {}
   },
+  mounted() {
+    this.init()
+  }
 }
 </script>
 
 <style scoped>
-.box {
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+
+/** 选择条件 */
+.conditions {
   width: 100%;
   background-color: #fff;
   margin: 30px 0px 10px;
@@ -76,6 +210,7 @@ export default {
   padding-bottom: 10px;
 }
 
+/** 设备列表 */
 .title {
   background-color: rgba(243, 243, 243, 1);
   height: 50px;
@@ -84,16 +219,18 @@ export default {
   border: 1px solid #ddd;
   font-size: 12px;
 }
-
 .title-left {
   margin-left: 20px;
+  display: inline-block;
+  width: 300px;
 }
-
 .title-left span {
   margin-left: 2px;
 }
-
 .button-margin {
   margin: 0 5px 0 20px;
 }
+.title-right {
+  float: right;
+}
 </style>