更改到本地地址

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
 import store from './store'
+import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css';
 import { hasBtnPermission } from './utils/permission';

src/store/index.js

@@ -9,7 +9,8 @@ export default new Vuex.Store({
     color: '#31C3A6',
     mode: true,
     // 按钮权限
-    buttons: []
+    buttons: [],
+    ip: 'http://192.168.1.165:8010',
   },
   mutations: {
     setColor(state, data) {

src/utils/http.js

@@ -15,7 +15,7 @@ let removePending = (ever) => {
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://47.97.219.115:8010'
+  baseURL: 'http://192.168.1.165:8010'
 })
 
 // 请求拦截器

src/views/Env/Electro.vue

@@ -1,13 +1,191 @@
 <template>
-  <div>用电监测</div>
+  <div class="electro">
+    <div class="reply" :style="{color: color}">全场用电情况</div>
+    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+    <div class="echarts">
+      <div class="echarts-l">
+        <chart-electro></chart-electro>
+      </div>
+      <div class="echarts-r">
+        <chart-dl></chart-dl>
+      </div>
+    </div>
+    <br>
+    <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>
+      </div>
+      <div class="echarts-r">
+        <chart-dl :id="'1'"></chart-dl>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import XForm from "@/components/XForm";
+import ChartElectro from "@/views/Env/chart/ChartElectro";
+import ChartDl from "@/views/dashboard/chart/ChartDl";
 export default {
-  name: "Electro"
+  name: "Electro",
+  components: {
+    XForm,
+    ChartElectro,
+    ChartDl
+  },
+  data() {
+    return {
+      formItems: [
+        {
+          id: 1,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 2,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 5,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      day: 2,
+      selectItems: [
+        {
+          id: 1,
+          type: 'select',
+          label: '栋舍：',
+          placeholder: '请选择栋舍',
+          field: 'areaId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 2,
+          type: 'select',
+          label: '单元：',
+          placeholder: '请选择单元',
+          field: 'unitId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 5,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 6,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 7,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      day1: 2,
+      dataValue: [12, 13, 10, 13, 9, 23, 21, 21, 24, 23, 14, 21, 21]
+    };
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  methods: {
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {
+
+    },
+    setDay1(data) {
+      this.day1 = data;
+    },
+    onClickType1() {},
+
+  }
 }
 </script>
 
 <style scoped>
-
+  .electro {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .reply {
+    width: 100%;
+    border: 1px solid #ddd;
+    border-bottom: 0;
+    height: 50px;
+    background-color: #F3F3F3;
+    line-height: 50px;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+  .echarts {
+    width: 100%;
+    height: 401px;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    border-top: 0;
+    display: flex;
+  }
+  .echarts-l {
+    width: 30%;
+    height: 100%;
+  }
+  .echarts-r {
+    width: 70%;
+    height: 100%;
+  }
 </style>

src/views/Env/chart/ChartElectro.vue

@@ -0,0 +1,129 @@
+<template>
+  <div :id="'chart-electro-pie-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "ChartElectro",
+  computed: {
+    ...mapState(['color'])
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      let data = [{name: '总用电量', value: '123.1'}]
+      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) + '度' +'}',
+            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-electro-pie-' + this.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Login/Login.vue

@@ -32,7 +32,7 @@
             </el-input>
           </el-col>
           <el-col :span="9">
-            <img id="kaptchaImage" src="http://47.97.219.115:8010/admin/my/send" @click="refset" alt="">
+            <img id="kaptchaImage" :src=" ip + '/admin/my/send'" @click="refset" alt="">
           </el-col>
         </el-row>
         <div style="height: 20px"></div>
@@ -44,6 +44,7 @@
 
 <script>
 import { Login } from '../../utils/api';
+import { mapState } from 'vuex'
 export default {
   name: "Login",
   data() {
@@ -53,6 +54,9 @@ export default {
       code: '',
     }
   },
+  computed: {
+    ...mapState(['ip'])
+  },
   methods: {
     onSubmit() {
       let params = {
@@ -81,7 +85,7 @@ export default {
     // 刷新
     refset() {
       let img = document.getElementById('kaptchaImage');
-      img.setAttribute('src', 'http://47.97.219.115:8010/admin/my/send?'+ Math.floor(Math.random() * 100));
+      img.setAttribute('src', this.ip + '/admin/my/send?'+ Math.floor(Math.random() * 100));
     }
   }
 }

src/views/Zoology/Sewage.vue

@@ -1,13 +1,153 @@
 <template>
-  <div>污水排放</div>
+  <div class="sewage">
+    <div class="reply" :style="{ color: color }">污水监测</div>
+    <div class="sewage-box">
+      <div class="box" v-for="item in echartList" :key="item.id">
+        <chart-sewage-corona :config-obj="item"></chart-sewage-corona>
+      </div>
+    </div>
+    <br>
+    <div class="echarts-line">
+      <div class="reply1" :style="{ color: color }">污水监测</div>
+      <div class="echarts-box" v-for="item in lineList" :key="item.id">
+        <chart-sewage-line :line-config="item"></chart-sewage-line>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import ChartSewageCorona from "@/views/Zoology/chart/ChartSewageCorona";
+import ChartSewageLine from "@/views/Zoology/chart/ChartSewageLine";
+import { mapState } from 'vuex'
 export default {
-  name: "Sewage"
+  name: "Sewage",
+  components: {
+    ChartSewageCorona,
+    ChartSewageLine
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      echartList: [
+        {
+          id: 1,
+          data: 52.1,
+          unit: 'mg/L',
+          max: 200,
+          name: '总氮'
+        },
+        {
+          id: 2,
+          data: 52.1,
+          unit: 'mg/L',
+          max: 200,
+          name: '化学需氧量'
+        },
+        {
+          id: 3,
+          data: 52.1,
+          unit: 'mg/L',
+          max: 200,
+          name: '总磷'
+        },
+        {
+          id: 4,
+          data: 52.1,
+          unit: 'mg/L',
+          max: 200,
+          name: '氨氮量'
+        },
+        {
+          id: 5,
+          data: 1124,
+          unit: 'T/HT',
+          max: 2000,
+          name: '累计流量'
+        },
+      ],
+      lineList: [
+        {
+          id: 1,
+          unit: 'mg/L',
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '总氮'
+        },
+        {
+          id: 2,
+          unit: 'mg/L',
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '化学需氧量'
+        },
+        {
+          id: 3,
+          unit: 'mg/L',
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '总磷'
+        },
+        {
+          id: 4,
+          unit: 'mg/L',
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '氨氮量'
+        },
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  .sewage{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .reply {
+    width: 100%;
+    border: 1px solid #ddd;
+    height: 50px;
+    background-color: #F3F3F3;
+    line-height: 50px;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+  .sewage-box {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #ddd;
+    border-top: 0;
+  }
+  .box {
+    width: 19%;
+    height: 100%;
+  }
+  .echarts-line {
+    width: 100%;
+    border: 1px solid #ddd;
+  }
+  .reply1 {
+    width: 100%;
+    height: 50px;
+    background-color: #F3F3F3;
+    line-height: 50px;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+  .echarts-box {
+    width: 100%;
+    height: 400px;
+    border-top: 1px solid #ddd;
+  }
 </style>

src/views/Zoology/chart/ChartSewageLine.vue

@@ -0,0 +1,162 @@
+<template>
+  <div :id="'chart-sewage-line-' + lineConfig.id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: "ChartSewageLine",
+  computed: {
+    ...mapState(['color'])
+  },
+  props: {
+    lineConfig: {
+      type: Object,
+      default: function () {
+        return {
+          id: 0,
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '默认',
+          unit: '%'
+        }
+      }
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      // 时间
+      let dataAxis = this.lineConfig.time;
+      let start = dataAxis.length - 12;
+      let end = dataAxis.length - 1;
+      // 数据
+      let data = this.lineConfig.data;
+      // 单位
+      let unit = this.lineConfig.unit;
+      // 名称
+      let name = this.lineConfig.name;
+      let options = {
+        title: {
+          text: name,
+          top: "5%",
+          left: '2%',
+          textStyle: {
+            color: this.color,
+            fontSize: 16,
+            fontWeight: 300,
+          },
+          padding: 5,
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: [this.color],
+        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'
+        //   },
+        // ],
+        xAxis: [
+          {
+            type: 'category',
+            data: dataAxis,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '近一周统计',
+            axisLabel: {
+              formatter: `{value}${unit}`
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: name,
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-sewage-line-' + this.lineConfig.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/chart/ChartDl.vue

@@ -1,15 +1,33 @@
 <template>
-  <div id="chartDl" style="width: 100%; height: 100%"></div>
+  <div :id="'chartDl-' + id" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
   name: "ChartDl",
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
   data() {
     return {
       myChart: null
     }
   },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
   methods: {
     init() {
       let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'];
@@ -19,7 +37,7 @@ export default {
         tooltip: {
           trigger: 'axis',
         },
-        color: ['#49A9EE'],
+        color: [this.color],
         dataZoom: [{
           type: 'inside',
           startValue: start,
@@ -88,8 +106,8 @@ export default {
               focus: 'series'
             },
             itemStyle : {
-              color:'#73C0DE',
-              borderColor:"#a3c8d8",
+              color: this.color,
+              borderColor: this.color,
               normal: {
                 label : {
                   show: true,
@@ -107,7 +125,7 @@ export default {
     }
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartDl'));
+    this.myChart = this.$echarts.init(document.getElementById('chartDl-' + this.id));
     this.init()
   }
 }