pic analysis

package.json

@@ -4,7 +4,7 @@
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build && node deploy/index.js  --mode stage",
+    "build": "vue-cli-service build && node deploy/index.js                                                              ",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",

src/styles/index.scss

@@ -5,6 +5,28 @@
 @import './sidebar.scss';
 @import './common.scss';
 
+// 修改浏览器默认滚动条样式
+// 滚动条整体部分 
+::-webkit-scrollbar {
+	width: 6px;
+}
+// 滚动条两端的按钮
+::-webkit-scrollbar-button{
+  display: none;
+}
+// 外层轨道
+::-webkit-scrollbar-track {
+  background: none;
+}
+// 内层滚动槽
+::-webkit-scrollbar-track-piece{
+  background: none;
+}
+::-webkit-scrollbar-thumb {
+	background-color: rgba(144,147,153,.3);
+	border-radius: 3px;
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

src/views/history/api.js

@@ -3,6 +3,7 @@ import request from '@/utils/request'
 const path = {
   MonitorStatusList: 'sysHistoryMonitorStatus/selectPage',
   MonitorStatusDelete: 'sysHistoryMonitorStatus/batchDeleteHistoryMonitorStatus',
+  pictorialStatement: 'sysHistoryMonitorStatus/pictorialStatement',
 
   MonitorMaintainList: 'sysHistoryMonitorMaintain/selectPage',
   MonitorMaintainDelete: 'sysHistoryMonitorMaintain/batchDeleteHistoryMonitorMaintain',
@@ -24,6 +25,9 @@ export function MonitorStatusList() {
 export function MonitorStatusDelete() {
   return request.post(path.MonitorStatusDelete, ...arguments)
 }
+export function pictorialStatement() {
+  return request.post(path.pictorialStatement, ...arguments)
+}
 
 export function MonitorMaintainList() {
   return request.post(path.MonitorMaintainList, ...arguments)

src/views/history/leakyCableStatus/components/picAnalysis.vue

+<template>
+  <el-dialog title="驻波比图形分析" :visible.sync="visible" width="60%" @close="cancel">
+    <div ref="chartLine" class="chartLine"></div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel">关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { pictorialStatement } from '../../api.js'
+import * as echarts from "echarts"
+export default {
+  props: {
+    flag: {
+      type: Number,
+      default: 0
+    },
+    curInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  watch: {
+    flag: {
+      immediate: true,
+      handler(newV) {
+        this.visible = !!newV
+      }
+    },
+    curInfo(newV) {
+      if (newV) {
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      pictorialStatement(this.curInfo).then((res) => {
+        let keyList = Object.keys(res.collect)
+        let valueList = Object.values(res.collect)
+        let finallyList = []
+        let obj = {}
+        let source = []
+        if(keyList.length == 1) {
+          valueList[0].map(item => {
+            let arr = []
+            arr.push(parseInt(item.distance),parseInt(item.value))
+            source.push(arr)
+          })
+          obj.dimensions = ['float',  `${keyList[0]}`]
+          obj.source = source
+          finallyList.push(obj)
+          finallyList.length ? this.getLine(finallyList) : ''
+        } else {
+          for(var i = 0; i < keyList.length; i++) {
+            let obj = {}
+            let source = []
+            valueList[i].map(item => {
+              let arr = []
+              arr.push(parseInt(item.distance), parseInt(item.value))
+              source.push(arr)
+            })
+            obj.dimensions = ['',  `${keyList[i]}`]
+            obj.source = source
+            finallyList.push(obj)
+          }
+          console.log(finallyList, 'finallyList');
+          finallyList.length ? this.getLine(finallyList) : ''
+        }
+        
+      })
+    },
+    getLine(data) {
+      this.myChartLine = echarts.init(this.$refs.chartLine)
+      let option = {
+        legend: {},
+        tooltip: {},
+        dataset: data,
+        xAxis: {
+          type: "value",
+          boundaryGap: false,
+          axisLabel: {
+            //show:true,
+            // interval:2
+            // rotate:60,
+            color: "#30eee9",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#397cbc",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#2ad1d2",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#195384",
+              },
+            },
+          },
+        ],
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          {
+            type: 'line',
+            datasetIndex: 0
+          },
+          {
+            type: 'line',
+            datasetIndex: 1
+          }, {
+            type: 'line',
+            datasetIndex: 2
+          }, {
+            type: 'line',
+            datasetIndex: 3
+          }, {
+            type: 'line',
+            datasetIndex: 4
+          }
+        ]
+      };
+      this.lineOption = option
+      this.myChartLine.setOption(option)
+      // })
+    },
+    cancel() {
+      this.visible = false
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style>
+.chartLine {
+  width: 100%;
+  height: 500px;
+}
+</style>
\ No newline at end of file

src/views/history/leakyCableStatus/index.vue

@@ -13,6 +13,7 @@
         <el-button
           :type="multipleSelection.length ? 'primary' : 'info'"
           :disabled="!multipleSelection.length"
+          @click="multiPic"
           >图形报表
         </el-button>
       </div>
@@ -35,8 +36,10 @@
       </el-table-column>
       <el-table-column prop="uploadTime" label="上传日期" align="center" />
       <el-table-column label="图形分析" align="center">
-        <el-button type="text">生成图表</el-button> </el-table-column
-      >>
+        <template slot-scope="scope">
+          <el-button type="text" @click="generateChart(scope.row)">生成图表</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <Pagination
       :limit="params.size"
@@ -45,15 +48,17 @@
       class="pagination"
       @pagination="handlePageChange"
     />
+    <picAnalysis :flag="flag" :curInfo="curInfo" @cancel="cancel" />
   </div>
 </template>
 
 <script>
 import { MonitorStatusList, MonitorStatusDelete } from "../api";
 import search from "./components/search.vue";
+import picAnalysis from "./components/picAnalysis.vue";
 import download from "@/utils/download";
 import { exportLeakyStatusHistory } from "@/api/export";
-import { successAlert, warningAlert } from "@/utils/alert";
+
 export default {
   data() {
     return {
@@ -63,17 +68,33 @@ export default {
       },
       total: 10,
       tableData: [],
-      multipleSelection: [],
+      multipleSelection: [], // 多选id
+      multipleTarget: [], // 多选对象
       isQuery: false,
       istrue:0,
       searchOption: {},
       exids: [],
+      flag: 0,
+      curInfo: []
     };
   },
   components: {
     search,
+    picAnalysis
   },
   methods: {
+    multiPic() {
+      this.flag = 1
+      this.curInfo = this.multipleTarget
+    },
+    generateChart(row) {
+      this.curInfo = []
+      this.flag = 1
+      this.curInfo.push(row.alarmTarget)
+    },
+    cancel() {
+      this.flag = 0
+    },
     // 表格背景图颜色
     cellClassFn({ row, column, rowIndex, columnIndex }) {
       if (row.level === "紧急" && column.label === "告警级别") {
@@ -115,7 +136,8 @@ export default {
       });
     },
     handleSelectionChange(val) {
-      let deleteIds = val.map((item) => item.id);
+      this.multipleTarget = val.map(item => item.alarmTarget)
+      let deleteIds = val.map(item => item.id);
       this.multipleSelection = deleteIds;
     },
     deleteCable() {

vue.config.js

@@ -12,7 +12,7 @@ const port = process.env.port || process.env.npm_config_port || 8886 // dev port
 const rewriteDefaultConfig = {
   changeOrigin: true,
   target: 'http://8.142.143.40:8886',
-  // target: 'http://192.168.0.123:8886',
+  // target: 'http://192.168.0.122:8886',
   // ws: true,
   headers: {
     referer: 'laddercloud.cn'