支队值班情况日月切换，增加表格展示内容，警情时段分布增加平均值，增加点击双重展示单个平均值和当前值数据

src/assets/scss/element-ui.scss

@@ -81,6 +81,13 @@
     }
 }
 
+.el-table {
+    border-radius: 0.125rem;
+    &::before {
+        height: 0;
+    }
+}
+
 // tooltip样式
 .el-popper.is-dark {
     background: transparent;

src/components/bar/index.vue

@@ -27,8 +27,9 @@ export default {
         [200, 100, 220, 130, 240, 250, 260, 250, 280, 270, 300, 310, 220, 200],
         [220, 302, 231, 234, 190, 230, 220, 302, 231, 134, 190, 230, 120, 220],
       ];
-      echarts.init(this.$refs.echartD).setOption({
-        color: ["#14E1EA", "#EF6B3D", "#FADF2B"],
+      let echartsMap = echarts.init(this.$refs.echartD);
+      echartsMap.setOption({
+        color: ["#14E1EA","#14E1EA", "#EF6B3D","#EF6B3D", "#FADF2B", "#FADF2B"],
         tooltip: {
           trigger: "axis",
           textStyle: {
@@ -48,6 +49,7 @@ export default {
         legend: {
           // show:true,
           data: ["社会救助", "火灾", "抢险救援"],
+          selected: { 社会救助: true, 火灾: false, 抢险救援: false, 救助月平均值: true, 火灾月平均值: false, 救援月平均值: false },
           bottom: 10,
           itemGap: 20,
           textStyle: {
@@ -102,6 +104,12 @@ export default {
             barWidth: "50%",
             data: dataMap[0],
           },
+          {
+            name: "救助月平均值",
+            type: "line",
+            stack: "totalLine",
+            data: dataMap[0].map((val) => val + 40),
+          },
           {
             name: "火灾",
             type: "bar",
@@ -112,6 +120,12 @@ export default {
             barWidth: "50%",
             data: dataMap[1],
           },
+          {
+            name: "火灾月平均值",
+            type: "line",
+            stack: "totalLine",
+            data: dataMap[1].map((val) => val + 40),
+          },
           {
             name: "抢险救援",
             type: "bar",
@@ -122,26 +136,23 @@ export default {
             barWidth: "50%",
             data: dataMap[2],
           },
-        {
-            name: '社会救助',
-            type: 'line',
-            stack: 'totalLine',
-            data: dataMap[0].map(val=> val+40)
-        },
-        {
-            name: '火灾',
-            type: 'line',
-            stack: 'totalLine',
-            data: dataMap[1].map(val=> val+40)
-        },
-        {
-            name: '抢险救援',
-            type: 'line',
-            stack: 'totalLine',
-            data: dataMap[2].map(val=> val+40)
-        },
+          {
+            name: "救援月平均值",
+            type: "line",
+            stack: "totalLine",
+            data: dataMap[2].map((val) => val + 40),
+          },
         ],
       });
+      echartsMap.on("legendselectchanged", function (params) {
+        // 获取点击图例的选中状态
+        var isSelected = params.selected[params.name];
+        echartsMap.dispatchAction({
+            type: isSelected ? 'legendSelect' : 'legendUnSelect',
+            name: params.name === '社会救助' ? '救助月平均值' : params.name === '火灾' ? '火灾月平均值' : params.name === '抢险救援' ? '救援月平均值' :  '',
+
+        })
+      });
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

src/components/line-smooth/index.vue

@@ -9,7 +9,9 @@ export default {
     dataMap: { type: Array, default: () => [] },
   },
   data() {
-    return {};
+    return {
+      echartsMap: null,
+    };
   },
   watch: {
     dataMap(val) {
@@ -36,11 +38,15 @@ export default {
           302, 231, 234, 190, 230, 220, 302, 231, 134, 190, 230, 120,
         ],
       ];
-      echarts.init(this.$refs.echartD).setOption({
+      let echartsMap = echarts.init(this.$refs.echartD);
+      echartsMap.setOption({
         color: [
           "rgba(20, 225, 234,.8)",
+          "rgba(20, 225, 234,.8)",
+          "rgba(250, 223, 43,.8)",
           "rgba(250, 223, 43,.8)",
           "rgba(239,107,61,.8)",
+          "rgba(239,107,61,.8)",
         ],
         title: {
           show: false,
@@ -56,8 +62,9 @@ export default {
           position: "bottom",
         },
         legend: {
-          show:true,
+          show: true,
           data: ["社会救助", "火灾", "抢险救援"],
+          selected: { 社会救助: true, 火灾: false, 抢险救援: false, 救助月平均值: true, 火灾月平均值: false, 救援月平均值: false },
           bottom: 10,
           itemGap: 20,
           textStyle: {
@@ -103,7 +110,7 @@ export default {
           ],
           axisLabel: {
             color: "#FFFFFF",
-            rotate: 50
+            rotate: 50,
           },
           axisTick: {
             show: false,
@@ -124,7 +131,7 @@ export default {
           {
             name: "社会救助",
             type: "line",
-            stack: "总量",
+            stack: "lineFire",
             smooth: true,
             showSymbol: false,
             areaStyle: {
@@ -142,10 +149,31 @@ export default {
             },
             data: dataMap[0],
           },
+          {
+            name: "救助月平均值",
+            type: "line",
+            stack: "totalLine",
+            smooth: true,
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(20, 225, 234)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(20, 225, 234, .1)",
+                },
+              ]),
+            },
+            data: dataMap[0].map((val) => val + 40),
+          },
           {
             name: "火灾",
             type: "line",
-            stack: "总量",
+            stack: "lineFire",
             smooth: true,
             showSymbol: false,
             areaStyle: {
@@ -163,10 +191,31 @@ export default {
             },
             data: dataMap[1],
           },
+          {
+            name: "火灾月平均值",
+            type: "line",
+            stack: "totalLine",
+            smooth: true,
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.9,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(250, 223, 43,.5)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(250, 223, 43, .1)",
+                },
+              ]),
+            },
+            data: dataMap[1].map((val) => val + 40),
+          },
           {
             name: "抢险救援",
             type: "line",
-            stack: "总量",
+            stack: "lineFire",
             smooth: true,
             showSymbol: false,
             areaStyle: {
@@ -184,8 +233,37 @@ export default {
             },
             data: dataMap[2],
           },
+          {
+            name: "救援月平均值",
+            type: "line",
+            stack: "totalLine",
+            smooth: true,
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.9,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(239,107,61)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(239,107,61,.1)",
+                },
+              ]),
+            },
+            data: dataMap[2].map((val) => val + 40),
+          },
         ],
       });
+      echartsMap.on("legendselectchanged", function (params) {
+        // 获取点击图例的选中状态
+        var isSelected = params.selected[params.name];
+        echartsMap.dispatchAction({
+          type: isSelected ? "legendSelect" : "legendUnSelect",
+            name: params.name === '社会救助' ? '救助月平均值' : params.name === '火灾' ? '火灾月平均值' : params.name === '抢险救援' ? '救援月平均值' :  '',
+        });
+      });
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

src/http/api.js

@@ -19,6 +19,7 @@ let api = {
     },
     water: {
         unitBeOnDuty: '/unitBeOnDuty/one',
+        unitBeOnDutyList: '/unitBeOnDuty/list',
         fireWater: '/fireWater/page',
         fireWaterOne: '/fireWater/one',
         fireWaterStatistics: '/fireWater/fireWaterStatistics',

src/views/rescue-station.vue

@@ -9,11 +9,20 @@
             <el-button size="mini" @click="searchTime('month')" :class="{ btnClick: timeArea === 'month' }">月</el-button>
           </div>
           <el-row class="propSituation">
-            <el-col v-for="item in unitBeOnDutyList" :key="item.name">
-              <el-col class="rank">{{item.postName}}</el-col>
-              <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
-              <el-col class="propName">{{item.name}}</el-col>
-            </el-col>
+            <template v-if="timeArea === 'day'">
+              <el-col v-for="item in unitBeOnDutyList" :key="item.name">
+                <el-col class="rank">{{item.postName}}</el-col>
+                <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
+                <el-col class="propName">{{item.name}}</el-col>
+              </el-col>
+            </template>
+             <se-table
+             v-else
+              ref="seTable"
+              :dataMap="unitBeOnDutyListData"
+              :headerData="unitBeOnDutyHeaderList"
+              :key="windowWidth"
+            ></se-table>
           </el-row>
         </el-col>
         <el-col class="leftBot">
@@ -196,10 +205,11 @@
 <script>
 import linstener from "@c/mixins/linstener";
 import map from "@c/mixins/map";
+import seTable from "@c/se-table";
 export default {
   data() {
     return {
-      timeArea: "month",
+      timeArea: "day",
       tableData: [
         {
           type: "火灾",
@@ -381,10 +391,12 @@ export default {
         { prop: "status", name: "状况" },
       ],
       unitBeOnDutyList: [],
+      unitBeOnDutyHeaderList: [],
+      unitBeOnDutyListData: [],
     };
   },
   mixins: [linstener,map],
-  components: {},
+  components: {seTable},
   created() {
     this.getData();
   },
@@ -411,14 +423,37 @@ export default {
     },
     // 支队值班情况
     async getSiAeAllCollect() {
-      let res = await this.$axios.get(this.$api.water.unitBeOnDuty +
+      let res = await this.$axios.get(this.$api.water[this.timeArea === 'day' ? 'unitBeOnDuty' : 'unitBeOnDutyList'] +
           "?" +
           this.$qs.stringify({
-            startTime: "2020-03-03 00:00:00",
-            endTime: "2020-03-03 23:59:59",
+            startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
+            endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
           })
       );
-      if (res) this.unitBeOnDutyList = res.data;
+      if (res && this.timeArea === 'day') this.unitBeOnDutyList = res.data;
+      if (res && this.timeArea === 'month' && res.data[0]){
+        this.unitBeOnDutyHeaderList = Array.from(new Set(res.data[0].map(val=>val.postName))).map(val=>{
+          return {
+            name:val,
+            prop:val
+          }
+        })
+        this.unitBeOnDutyHeaderList.unshift({name:'日期',prop:'time'})
+        this.unitBeOnDutyListData = res.data.map(val=>{
+          let a = {}
+          let time = val[0].time.split(' ')[0].split('-')
+          time.shift()
+          a.time = time.join('-')
+          this.unitBeOnDutyHeaderList.map(value=>{
+            let b = val.filter(reaVal=>reaVal.postName === value.name)
+            a[value.name] = b.length>0 ? b.map(val=>val.name).join(',') :''
+          })
+          return a
+        })
+        console.log(this.unitBeOnDutyListData)
+      }else{
+         this.unitBeOnDutyListData = []
+      }
     },
     // 历史警情
     async getPage() {
@@ -458,6 +493,7 @@ export default {
     },
     searchTime(val){
       this.timeArea = val
+      this.getSiAeAllCollect();
     }
   },
 };
@@ -499,6 +535,7 @@ export default {
     .leftTop {
       padding: 0.375rem 0.475rem 0.1875rem;
       margin-bottom: 0.125rem;
+    width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -527,10 +564,12 @@ export default {
           border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
         }
       }
+      
       .propSituation {
         flex: 1;
         height: calc(100% - 1rem);
         // justify-content: center;
+        width: 100%;
         flex-wrap: wrap;
         align-items: center;
         margin-bottom: 0.125rem;
@@ -624,6 +663,7 @@ export default {
       .rightBot{
         margin-top: 10px;
         height: calc(40% - 10px);
+        padding-top: 0.35rem;
       }
       .tableExpendTitle {
         color: #00fffc;

src/views/water-sources.vue

@@ -13,11 +13,20 @@
             >
           </div>
           <el-row class="propSituation">
-            <el-col v-for="item in unitBeOnDutyList" :key="item.name">
-              <el-col class="rank">{{item.postName}}</el-col>
-              <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
-              <el-col class="propName">{{item.name}}</el-col>
-            </el-col>
+            <template v-if="timeArea === 'day'">
+              <el-col v-for="item in unitBeOnDutyList" :key="item.name">
+                <el-col class="rank">{{item.postName}}</el-col>
+                <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
+                <el-col class="propName">{{item.name}}</el-col>
+              </el-col>
+            </template>
+             <se-table
+             v-else
+              ref="seTable"
+              :dataMap="unitBeOnDutyListData"
+              :headerData="unitBeOnDutyHeaderList"
+              :key="windowWidth"
+            ></se-table>
           </el-row>
         </el-col>
         <el-col class="leftBot">
@@ -166,15 +175,18 @@ import linstener from "@c/mixins/linstener";
 import map from "@c/mixins/map";
 import waterGauge from "@c/water-gauge";
 import gauge from "@c/gauge";
+import seTable from "@c/se-table";
 import funnel from "@c/funnel";
 import AMap from 'AMap'
 export default {
   mixins: [linstener,map],
-  components: { waterGauge, funnel, gauge },
+  components: { waterGauge, funnel, gauge,seTable },
   data() {
     return {
-      timeArea: "month",
+      timeArea: "day",
       unitBeOnDutyList: [],
+      unitBeOnDutyHeaderList: [],
+      unitBeOnDutyListData: [],
       tableData: [],
       headerData: [
         { prop: "type", name: "类型" },
@@ -218,14 +230,37 @@ export default {
     },
     // 支队值班情况
     async getSiAeAllCollect() {
-      let res = await this.$axios.get(this.$api.water.unitBeOnDuty +
+      let res = await this.$axios.get(this.$api.water[this.timeArea === 'day' ? 'unitBeOnDuty' : 'unitBeOnDutyList'] +
           "?" +
           this.$qs.stringify({
-            startTime: "2020-03-03 00:00:00",
-            endTime: "2020-03-03 23:59:59",
+            startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
+            endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
           })
       );
-      if (res) this.unitBeOnDutyList = res.data;
+      if (res && this.timeArea === 'day') this.unitBeOnDutyList = res.data;
+      if (res && this.timeArea === 'month' && res.data[0]){
+        this.unitBeOnDutyHeaderList = Array.from(new Set(res.data[0].map(val=>val.postName))).map(val=>{
+          return {
+            name:val,
+            prop:val
+          }
+        })
+        this.unitBeOnDutyHeaderList.unshift({name:'日期',prop:'time'})
+        this.unitBeOnDutyListData = res.data.map(val=>{
+          let a = {}
+          let time = val[0].time.split(' ')[0].split('-')
+          time.shift()
+          a.time = time.join('-')
+          this.unitBeOnDutyHeaderList.map(value=>{
+            let b = val.filter(reaVal=>reaVal.postName === value.name)
+            a[value.name] = b.length>0 ? b.map(val=>val.name).join(',') :''
+          })
+          return a
+        })
+        console.log(this.unitBeOnDutyListData)
+      }else{
+         this.unitBeOnDutyListData = []
+      }
     },
     // 水源情况表格
     async getFireWater() {
@@ -240,7 +275,6 @@ export default {
       );
       if (res){
          this.tableData = res.data.records.map(val=>{
-           console.log(val.waterGage)
            return {
              ...val,
              waterGage:( + val.waterGage).toFixed(2) || 0
@@ -306,6 +340,7 @@ export default {
     },
     searchTime(val){
       this.timeArea = val
+      this.getSiAeAllCollect();
     }
   },
 };
@@ -381,6 +416,7 @@ export default {
         flex: 1;
         height: calc(100% - 1rem);
         // justify-content: center;
+        width: 100%;
         flex-wrap: wrap;
         align-items: center;
         margin-bottom: 0.125rem;