Merge branch 'master' of http://192.168.1.7:3000/xsh1997/hyyfClient

src/utils/api.js

@@ -543,3 +543,22 @@ export function getListWater(data) {
     data: data
   })
 }
+
+/** 总用料量 **/
+export function getAllFodder(data) {
+  return axios({
+    url: '/produce/sysFodder/getAllFodder',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 单个查询用料量 **/
+
+export function getFodder(data) {
+  return axios({
+    url: '/produce/sysFodder/getFodder',
+    method: 'post',
+    data: data
+  })
+}

src/views/Env/Stark.vue

@@ -4,38 +4,42 @@
     <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
     <div class="echarts">
       <div class="echarts-l">
-        <chart-electro></chart-electro>
+        <chart-stark :starkCount="starkAllCount"></chart-stark>
       </div>
       <div class="echarts-r">
-        <chart-dl></chart-dl>
+        <chart-stark-bar :starkList="starkAllList"></chart-stark-bar>
       </div>
     </div>
     <br>
-    <div class="reply" :style="{color: color}">用电量详情</div>
+    <div class="reply" :style="{color: color}">用料量详情</div>
     <x-form :formItems="selectItems" :day="day1" @setDay="setDay1" @onClickType="onClickType1"></x-form>
     <div class="echarts">
       <div class="echarts-l">
-        <chart-electro :id="'1'"></chart-electro>
+        <chart-stark :id="'1'" :starkCount="starkCount"></chart-stark>
       </div>
       <div class="echarts-r">
-        <chart-dl :id="'1'"></chart-dl>
+        <chart-stark-bar-one :id="'1'" :starkList="starkList"></chart-stark-bar-one>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 import XForm from "@/components/XForm";
-import ChartElectro from "@/views/Env/chart/ChartElectro";
-import ChartDl from "@/views/dashboard/chart/ChartDl";
+import ChartStark from "./chart/ChartStark";
+import ChartStarkBar from "./chart/ChartStarkBar";
+import ChartStarkBarOne from "./chart/ChartStarkBarOne";
+import { getAllFodder, getFodder, getSchool } from "../../utils/api";
+import { timeDate } from "../../utils";
 
 export default {
   name: "Stark",
   components: {
     XForm,
-    ChartElectro,
-    ChartDl
+    ChartStark,
+    ChartStarkBar,
+    ChartStarkBarOne
   },
   data() {
     return {
@@ -83,7 +87,7 @@ export default {
           type: 'select',
           label: '栋舍：',
           placeholder: '请选择栋舍',
-          field: 'areaId',
+          field: 'floorId',
           options: [],
           col: 4
         },
@@ -124,24 +128,107 @@ export default {
         }
       ],
       day1: 1,
-      dataValue: [12, 13, 10, 13, 9, 23, 21, 21, 24, 23, 14, 21, 21]
+      starkCount: 0,
+      starkAllCount: 0,
+      starkList: [],
+      starkAllList: [],
     };
   },
   computed: {
     ...mapState(['color'])
   },
   methods: {
+    // 获取全部用料
+    init() {
+      getAllFodder({}).then(res => {
+        if(res.code === 10000) {
+          this.starkAllCount = res.data.value;
+          this.starkAllList = res.data.fodderList;
+        }
+      })
+      getFodder({}).then(res => {
+        if(res.code === 10000) {
+          this.starkCount = res.data.value;
+          this.starkList = res.data.fodderList;
+        }
+      })
+    },
+    getSchool() {
+      getSchool().then(res => {
+        if(res.code === 10000) {
+          res.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.floorName;
+          })
+          this.selectItems[0].options = res.data;
+        }
+      })
+    },
     setDay(data) {
       this.day = data;
     },
-    onClickType() {
-
+    onClickType(data) {
+      if(data.type === 'search') {
+        let params = {};
+        if(data.data.value1) {
+          params = {
+            startDate: data.data.value1[0],
+            endDate: data.data.value1[1],
+            type: 3
+          }
+        } else {
+          params = {
+            endDate: timeDate(new Date().getTime()),
+            type: this.day
+          }
+        }
+        getAllFodder(params).then(res => {
+          if(res.code === 10000) {
+            this.starkCount = res.data.value;
+            this.starkList = res.data.fodderList
+          }
+        })
+      }
     },
     setDay1(data) {
       this.day1 = data;
     },
-    onClickType1() {},
+    onClickType1(data) {
+      if(data.type === 'search') {
+        let data1 = data.data;
+        if (data1.floorId) {
+          let params;
+          if(data1.value1) {
+            params = {
+              floorId: data1.floorId,
+              startDate: data1.value1[0],
+              endDate: data1.value1[1],
+              type: 4,
+            }
+          } else {
+            let end = timeDate(new Date().getTime())
+            params = {
+              floorId: data1.floorId,
+              endDate: end,
+              type: this.day1
+            }
+          }
+          getFodder(params).then(res => {
+            if(res.code === 10000) {
+              this.starkCount = res.data.value;
+              this.starkList = res.data.fodderList;
+            }
+          })
+        } else {
+          this.$message.error('请选择栋舍查询');
+        }
+      }
+    },
 
+  },
+  mounted() {
+    this.getSchool()
+    this.init()
   }
 }
 </script>

src/views/Env/chart/ChartStark.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :id="'chart-stark-pie-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "ChartStark",
+  computed: {
+    ...mapState(['color'])
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    starkCount: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    },
+    starkCount(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      let data = [{name: '总用料量', value: this.starkCount.toString()}]
+      let formatNumber = function(num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ',');
+      }
+      let total = data.reduce((a, b) => {
+        return a + b.value * 1
+      }, 0);
+      let options = {
+        color: [this.color],
+        title: [
+          {
+            text: '{name|' + '总用料量' + '}\n{val|' + formatNumber(total) + 'Kg' +'}',
+            top: 'center',
+            left: 'center',
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: 'normal',
+                  color: '#666666',
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: 32,
+                  fontWeight: 'bold',
+                  color: '#333333',
+                },
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: 'pie',
+            radius: ['45%', '60%'],
+            center: ['50%', '50%'],
+            data: data,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                borderColor: '#fff',
+                borderWidth: 2
+              }
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 120,
+                lineStyle: {
+                  color: '#e6e6e6'
+                }
+              }
+            },
+            label: {
+              normal: {
+                formatter: params => {
+                  return (
+                      '{icon|●}{name|' + params.name + '}{value|' +
+                      formatNumber(params.value) + '}'
+                  );
+                },
+                padding: [0 , -100, 25, -100],
+                rich: {
+                  icon: {
+                    fontSize: 16
+                  },
+                  name: {
+                    fontSize: 14,
+                    padding: [0, 10, 0, 4],
+                    color: '#666666'
+                  },
+                  value: {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    color: '#333333'
+                  }
+                }
+              }
+            },
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-stark-pie-' + this.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Env/chart/ChartStarkBar.vue

@@ -0,0 +1,155 @@
+<template>
+  <div :id="'chart-stark-bar-'+ id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartStarkBar",
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    starkList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    starkList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      var time = [];
+      var data1 = [];
+      var data2 = [];
+      var data3 = []
+      this.starkList.forEach(item => {
+        time.push(item.screateTime);
+        data1.push(item.onevalue)
+        data2.push(item.twovalue)
+        data3.push(item.threevalue)
+      })
+      var option = {
+        legend: {
+          data: ['1号楼', '2号楼', '3号楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: time,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '用料统计情况',
+            axisLabel: {
+              formatter: '{value} 吨'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '1号楼',
+            data: data1,
+            type: 'bar',
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+          },
+          {
+            name: '2号楼',
+            data: data2,
+            type: 'bar',
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+          },
+          {
+            name: '3号楼',
+            data: data3,
+            type: 'bar',
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+          }
+        ]
+      };
+      this.myChart.setOption(option)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-stark-bar-' + this.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Env/chart/ChartStarkBarOne.vue

@@ -0,0 +1,114 @@
+<template>
+  <div :id="'chart-one-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartStarkBarOne",
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    starkList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    starkList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      var time = [];
+      var data1 = [];
+      this.starkList.forEach(item => {
+        time.push(item.createTime);
+        data1.push(item.value)
+      })
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: time,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '用料统计情况',
+            axisLabel: {
+              formatter: '{value} 吨'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '1号楼',
+            data: data1,
+            type: 'bar',
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+          },
+        ]
+      };
+      this.myChart.setOption(option)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-one-' + this.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>