111

src/views/PdcData/Analysis.vue

@@ -122,7 +122,7 @@
         <div class="sales-content">
           <div class="sales-left">
             <div class="up">
-              <label>本月销售额</label>
+              <label>上月销售额</label>
               <span>{{ weekSales }}元</span>
               <div class="sales-change">
                 <div>
@@ -140,7 +140,7 @@
               </div>
             </div>
             <div class="down">
-              <label>本月销售量</label>
+              <label>上月销售量</label>
               <span>{{ weekSalesVolume }}头</span>
               <div class="sales-change">
                 <div>
@@ -159,7 +159,7 @@
                   >
                     {{ weekSalesVolumeChange }}%
                   </span>
-                  &nbsp;&nbsp;&nbsp;同比上月
+                  &nbsp;&nbsp;&nbsp;环比上月
                 </div>
               </div>
             </div>

src/views/PdcData/analysis/SalesChart.vue

@@ -27,7 +27,9 @@ export default {
     // },
     data: {
       type: Object,
-      default: () => {},
+      default: function() {
+        return  {}
+      },
     },
     // dataValue: {
     //   type: Array,
@@ -165,12 +167,17 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById("salesChart"));
-    // this.init()
+    this.init()
   },
   watch: {
-    data(newValue) {
-      console.log(newValue);
-      this.init();
+    data: {
+      handle(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init();
+        }
+      },
+      deep: true,
     },
     color(newVal) {
       if (newVal) {

src/views/dashboard/chart/ChartPig.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: "ChartPig",
   data() {
@@ -10,99 +12,144 @@ export default {
       myChart: null
     }
   },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    },
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    },
+  },
   methods: {
     init() {
-      let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'];
+      let dataAxis = this.data.timeList;
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
+      let quantityList = this.data.quantityList;
       let options = {
+        title: {
+          x: 60,
+          y: 20,
+          text: "近期销售情况",
+          textStyle: {
+            fontSize: 14,
+            color: "#6e7079",
+          },
+        },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
+          formatter: (params) => {
+            var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
+            for (var i = 0; i < params.length; i++) {
+              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
+              res +=
+                  `<div style="color: #fff;font-size: 14px; padding:0 12px;">
+                  <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
+                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
+                  ]};"></span>
+                  ${params[i].data}元
+                </div>` +
+                  `<div style="color: #fff;font-size: 14px; padding:0 12px;"><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
+                    params[i].color,
+                  ]};"></span>${quantityList[i]}头</div>`;
+            }
+            return res;
+          },
         },
-        color: ['#3BA272'],
-        dataZoom: [{
-          type: 'inside',
-          startValue: start,
-          endValue: end,
-          show: false
-          // zoomOnMouseWheel: false,
-          // zoomLock: true,
-        }],
-        // dataZoom: [
-        //
-        //   {
-        //     type: 'slider',
-        //     startValue: start,
-        //     endValue:end,
-        //     zoomOnMouseWheel: false,
-        //     zoomLock: true,
-        //   },
-        //   {
-        //     type: 'inside'
-        //   },
-        // ],
+        color: [this.color],
+        dataZoom: [
+          {
+            type: "inside",
+            startValue: start,
+            endValue: end,
+            show: false,
+            // zoomOnMouseWheel: false,
+            // zoomLock: true,
+          },
+        ],
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             data: dataAxis,
             axisPointer: {
-              type: 'shadow'
+              type: "none",
             },
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#6e7079',
-              }
+                color: "#6e7079",
+              },
             },
-            axisTick:{
-              show:false
+            axisTick: {
+              show: false,
             },
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value',
-            name: '水量统计情况',
+            type: "value",
+            // name: "元",
             axisLabel: {
-              formatter: '{value} KW·h'
+              formatter: "{value} 元",
+              show: true,
             },
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#6e7079',
-              }
+                color: "#6e7079",
+              },
             },
-            axisTick:{
-              show:false
+            axisTick: {
+              show: false,
             },
-          }
+          },
         ],
         series: [
           {
-            name: '水量',
-            type: 'line',
+            name: "元",
+            type: "line",
             // stack: 'Total',
             smooth: true,
             areaStyle: {},
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            itemStyle : {
-              color:'#3BA272',
-              borderColor:"#3BA272",
+            itemStyle: {
+              color: this.color,
+              borderColor: this.color,
               normal: {
-                label : {
+                label: {
                   show: true,
                   textStyle: {
-                    fontSize: 14
-                  }
-                }
-              }
+                    fontSize: 14,
+                  },
+                },
+              },
             },
-            data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210]
-          }
-        ]
-      }
+            data: this.data.moneyList,
+          },
+        ],
+      };
       this.myChart.setOption(options)
     }
   },
@@ -115,4 +162,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

src/views/dashboard/dashboard.vue

@@ -2,14 +2,14 @@
   <div class="box">
     <div class="header">
       <el-row :gutter="20">
-        <el-col v-for="item in 4" :key="item" :span="6">
+        <el-col v-for="(item, i) in iocnList" :key="i" :span="6">
           <el-card class="box-card">
             <div class="card-flex">
               <div class="flex-left">
-                <i class="el-icon-s-order" :style="{ fontSize: '72px', color: color }"></i>
+                <i :class="[item.icon]" :style="{ fontSize: '72px', color: color }"></i>
               </div>
               <div class="flex-right">
-                <p :style="{marginBottom: '8px', color: color}">今日报警总数</p>
+                <p :style="{marginBottom: '8px', color: color}">{{item.name}}</p>
                 <p>15</p>
               </div>
             </div>
@@ -39,7 +39,8 @@
       </div>
       <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
       <div style="width: 100%; height: 400px">
-        <chart-wsd :data="TempAndHumList"></chart-wsd>
+        <chart-wsd v-if="TempAndHumList.humidities.length > 0" :data="TempAndHumList"></chart-wsd>
+        <el-empty v-else description="暂无数据" style="width: 100%;"></el-empty>
       </div>
     </div>
     <br/>
@@ -49,26 +50,28 @@
         <el-button type="text" style="float: right; margin-right: 25px" @click="jump(2)">详情</el-button>
       </div>
       <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
-      <div class="pen-flex">
+      <div class="pen-flex" v-if="waterList.length > 0">
         <div class="pen-left">
           <div class="water">
-            <p>本月用水量</p>
-            <p>10000t</p>
+            <p>上月用水量</p>
+            <p>{{monthWater}}t</p>
             <p>
-              <i class="el-icon-caret-top" style="color: red"></i>
-              <span style="color: red">10%</span>
+              <i v-if="Number(monthWeekPercent) > 0" class="el-icon-caret-top" style="color: red"></i>
+              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span :style="{color: Number(monthWeekPercent) > 0 ?  'red' : '#1ABC9C'}">{{monthWeekPercent}}%</span>
               &nbsp;
-              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
             </p>
           </div>
           <div class="water">
-            <p>本周用水量</p>
-            <p>10000t</p>
+            <p>上周用水量</p>
+            <p>{{weekWater}}t</p>
             <p>
-              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
-              <span style="color: #1ABC9C">10%</span>
+              <i v-if="Number(weekWeekPercent) > 0" class="el-icon-caret-top" style="color: red"></i>
+              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span :style="{color: Number(weekWeekPercent) > 0 ?  'red' : '#1ABC9C'}">{{weekWeekPercent}}%</span>
               &nbsp;
-              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
+              <span style="font-size: 16px; color: #CFDBED">环比上周</span>
             </p>
           </div>
         </div>
@@ -76,6 +79,9 @@
           <chart-water :dataValue="waterList" :room="waterRoom"></chart-water>
         </div>
       </div>
+      <div v-else>
+        <el-empty description="暂无数据" style="width: 100%;"></el-empty>
+      </div>
     </div>
     <br/>
     <div class="pending">
@@ -93,7 +99,7 @@
               <i class="el-icon-caret-top" style="color: red"></i>
               <span style="color: red">10%</span>
               &nbsp;
-              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
             </p>
           </div>
           <div class="water">
@@ -116,33 +122,35 @@
     <div class="pending">
       <div class="title" :style="{color: color}">
         <span>卖猪统计</span>
-        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
+        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(4)">详情</el-button>
       </div>
       <div class="pen-flex">
         <div class="pen-left">
           <div class="water">
-            <p>本月销售总量</p>
-            <p>10000</p>
+            <p>上月销售总量</p>
+            <p>{{weekSales}}元</p>
             <p>
-              <i class="el-icon-caret-top" style="color: red"></i>
-              <span style="color: red">10%</span>
+              <i v-if="Number(weekSalesChange) > 0" class="el-icon-caret-top" style="color: red"></i>
+              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span :style="{color: Number(weekSalesChange) > 0 ?  'red' : '#1ABC9C'}">{{weekSalesChange}}%</span>
               &nbsp;
-              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
             </p>
           </div>
           <div class="water">
-            <p>本周用电量</p>
-            <p>10000</p>
+            <p>上月销售量</p>
+            <p>{{ weekSalesVolume }}头</p>
             <p>
-              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
-              <span style="color: #1ABC9C">10%</span>
+              <i v-if="Number(weekSalesVolumeChange) > 0" class="el-icon-caret-top" style="color: red"></i>
+              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span :style="{color: Number(weekSalesVolumeChange) > 0 ?  'red' : '#1ABC9C'}">{{weekSalesVolumeChange}}%</span>
               &nbsp;
-              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
+              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
             </p>
           </div>
         </div>
         <div style="width: 85%; height: 400px">
-          <chart-pig></chart-pig>
+          <chart-pig :data="salesChartData"></chart-pig>
         </div>
       </div>
     </div>
@@ -158,6 +166,7 @@ import ChartWater from "./chart/ChartWater";
 import ChartPig from "./chart/ChartPig";
 import { getByFloor, getByRoom, getListWater, getSchool, getUid} from "../../utils/api";
 import {timeDate} from "../../utils";
+import { getTheSales } from "../../utils/chenApi";
 export default {
   name: "dashboard",
   components: {
@@ -170,6 +179,24 @@ export default {
   data() {
     return {
       dialogVisible: false,
+      iocnList: [
+        {
+          icon: 'el-icon-s-order',
+          name: '今日报警总数'
+        },
+        {
+          icon:  'el-icon-shopping-bag-1',
+          name: '昨日卖猪总数'
+        },
+        {
+          icon:  'el-icon-coin',
+          name: '昨日出栏总数'
+        },
+        {
+          icon:   'el-icon-finished',
+          name: '近7天卖猪总数'
+        },
+      ],
       elements: [
         {
           id: 1,
@@ -271,7 +298,15 @@ export default {
       TempAndHumList: {},
       waterList: [],
       waterRoom: '',
-      rtsp: 'rtsp://36.26.62.70:9320/playback/pu/184?token=184'
+      weekWater: 0,
+      weekWeekPercent: 0,
+      monthWater: 0,
+      monthWeekPercent: 0,
+      weekSales: 0,
+      weekSalesChange: 0,
+      weekSalesVolume: 0,
+      weekSalesVolumeChange: 0,
+      salesChartData: {},
     }
   },
   computed: {
@@ -369,8 +404,24 @@ export default {
       getListWater({type: 2}).then(res => {
         if(res.code === 10000) {
           this.waterList = res.data.data;
-          console.log(this.waterList)
           this.waterRoom = res.data.room;
+          this.weekWater = res.data.weekWater;
+          this.weekWeekPercent = res.data.weekWeekPercent;
+          this.monthWater = res.data.monthWater;
+          this.monthWeekPercent = res.data.monthWeekPercent;
+        }
+      })
+      getTheSales({type: 2}).then(res => {
+        if (res.code === 10000) {
+          this.weekSales = res.data.money;
+          this.weekSalesChange = res.data.moneyPercent;
+          this.weekSalesVolume = res.data.quantity;
+          this.weekSalesVolumeChange = res.data.quantityPercent;
+          this.salesChartData = {
+            moneyList: res.data.moneyList,
+            quantityList: res.data.quantityList,
+            timeList: res.data.timeList,
+          };
         }
       })
     },
@@ -379,6 +430,8 @@ export default {
         this.$router.push('/pigHouseEnv');
       } else if(num === 2) {
         this.$router.push('/drinkWater');
+      } else if(num === 4) {
+        this.$router.push('/analysis');
       }
     }
   },