- 污水融合

src/router/_import.js

@@ -264,6 +264,11 @@ const map = {
   opsControlReportMonitoring:() => import('@/views/opsControl/report/monitoring/widget.vue'),
   opsControlReportPerformance:() => import('@/views/opsControl/report/performance/widget.vue'),
   opsControlReportWater:() => import('@/views/opsControl/report/water/widget.vue'),
+  // 
+  repOperation:() => import('@/views/reportBus/repOperation/widget.vue'),
+  repWaterQuality:() => import('@/views/reportBus/repWaterQuality/widget.vue'),
+  repWaterDosing:() => import('@/views/reportBus/repWaterDosing/widget.vue'),
+
 
 
   // 基础数据管理

src/utils/request.js

@@ -41,8 +41,6 @@ let requestTimes = 0
 // 请求拦截器
 service.interceptors.request.use(
   config => {
-    console.log('url', config.url)
-
     if (config.method === 'post' && config.url === '/auth/oauth/login') { // 请求为post    使用qs转换数据
       config.data = qs.stringify(config.data)
       config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

src/views/dataBoard/smartSewage/components/CPTopPanel.vue

@@ -0,0 +1,26 @@
+<template>
+  <transition
+    appear
+    name="animate__animated animate__move"
+    enter-active-class="animate__zoomIn"
+    leave-active-class="animate__zoomOut"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.animate__zoomIn,
+.animate__zoomOut {
+  animation-duration: 3s; //动画持续时间
+  animation-delay: 0s; //动画延迟时间
+}
+</style>

src/views/dataBoard/smartSewage/components/index.ts

@@ -5,4 +5,5 @@ export { default as sewageChart } from './sewageChart.vue'
 export { default as ratio } from './ratio.vue'
 export { default as warnNumChart } from './warnNumChart.vue'
 export { default as CPTSpecificTable } from './CPTSpecificTable.vue'
-export { default as suldgeChart } from './suldgeChart.vue'
+export { default as suldgeChart } from './suldgeChart.vue'
+export { default as sewageStatistics } from './sewageStatistics.vue'

src/views/dataBoard/smartSewage/components/map.vue

@@ -5,16 +5,52 @@
 
 <script>
 import MapUtil from '@/views/dataBoard/smartSewage/mapUtil/index.js'
+import { layerId, featureServerUrl, mapServerUrl } from '@/views/zhpt/basicInfoManage/config/index.ts'
+import flowPng from '@/views/dataBoard/img/flowValue.png'
+import GraphicUtil from '@/views/dataBoard/smartSewage/mapUtil/graphic.js'
 
 export default {
     data() {
         return {
             mapContainerId: 'mapView',
+            data: []
         }
     },
     methods: {
         createMap() {
-            this.mapUtil = new MapUtil(this.mapContainerId, { dark: true })
+            // 加载完后，定位污水厂点
+            const afterLoad = () => {
+                const url = `${mapServerUrl}/${layerId.wsc}`
+                this.mapUtil.queryUtil.sqlQuery(url).then(this.setMapPoint.bind(this))
+            }
+            const mapConfig = { dark: true, afterLoad }
+            this.mapUtil = new MapUtil(this.mapContainerId, mapConfig)
+        },
+        setMapPoint(res) {
+            this.data = res.features.map(({ attributes }) => {
+                return { name: attributes['NAME'], coors: [attributes['X'], attributes['Y']] }
+            })
+            this.setData()
+        },
+        setData(data) {
+            let features = [], baseImgFeatures = [];
+            this.data.forEach(({ name, coors }) => {
+                // 背景
+                const style1 = {
+                    point: { pic: flowPng, height:'30px', width:'69px', yoffset:'65px' }
+                }
+                const baseGraphicParams = { type: GraphicUtil.GTYPE.PIC, style: style1, coors }
+                baseImgFeatures.push(this.mapUtil.graphicUtil.getGraphic(baseGraphicParams))
+                // 数值
+               const style2 = {
+                    point: { txt: '2.1 m³/h', yoffset:'60px' }
+                }
+                const valueGraphicParams = { type: GraphicUtil.GTYPE.TXT, style: style2, coors }
+                features.push(this.mapUtil.graphicUtil.getGraphic(valueGraphicParams))
+            })
+            //
+            this.mapUtil.graphicUtil.addGraphics(baseImgFeatures)
+            this.mapUtil.graphicUtil.addGraphics(features)
         }
     },
     mounted() {

src/views/dataBoard/smartSewage/components/sewageStatistics.vue

@@ -0,0 +1,154 @@
+<template>
+  <CPTopPanel>
+    <div class="widget-CategoryStatistics">
+      <div class="wrap">
+        <div
+          class="category-item"
+          v-for="item in categoryList"
+          :key="item.name"
+          :class="{ 'pick-on': currentCategory == item.name }"
+        >
+          <div class="info-wrap">
+            <span class="category-name">{{ item.name }}：</span>
+            <div class="category-wrap">
+              <span class="category-value">{{ item.value }}</span>
+              <span class="category-unit">{{ item.unit }}</span>
+            </div>
+          </div>
+          <div class="sub-list" v-if="currentCategory == item.name">
+            <div class="split-bar"></div>
+            <div
+              class="sub-item"
+              v-for="sub of subList"
+              :key="sub"
+              :class="{ 'sub-active': childrenActive == sub }"
+              @click="activeChildren(sub)"
+            >
+              {{ sub }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </CPTopPanel>
+</template>
+
+<script>
+import { CPTopPanel } from './CPTopPanel.vue'
+export default {
+  name: 'CategoryStatistics',
+  components: { CPTopPanel },
+  data() {
+    return {
+      categoryList: [
+        { name: '运营污水厂（站）', value: 6, unit: '座' },
+        { name: '在建污水厂（站）', value: 4, unit: '座' },
+        { name: '设计处理能力', value: 1400, unit: '吨/天' }, 
+        { name: '平均实际处理量', value: 150, unit: '吨/天' }
+      ],
+      currentCategory: '',
+      subList: [],
+      childrenActive: null,
+    }
+  },
+  methods: {
+    setCategoryList (data) {
+      this.categoryList = data
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.widget-CategoryStatistics {
+  top: 20px;
+  left: 22%;
+  margin-left: 80px;
+  width: 820px;
+  position: absolute;
+  @mixin center() {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .wrap {
+    width: 110%;
+    display: flex;
+    justify-content: space-evenly;
+    user-select: none;
+    .category-item {
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      cursor: pointer;
+      margin: 5px;
+      .info-wrap {
+        @include center();
+      }
+      .category-name {
+        font-size: 16px;
+        font-family: Source Han Sans CN-Bold;
+        font-weight: bold;
+        color: #feffff;
+        white-space: nowrap;
+      }
+      .category-wrap {
+        display: flex;
+        background: linear-gradient(0deg, #30a0ff 0%, #03d6de 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 0px 2px 8px #30a0ff;
+      }
+      .category-value {
+        font-size: 32px;
+        font-family: DS-Digital;
+        font-weight: bold;
+      }
+      .category-unit {
+        line-height: 45px;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Bold;
+        font-weight: bold;
+      }
+      .sub-list {
+        width: 106px;
+        background: linear-gradient(180deg, rgba(48, 160, 255, 0.3) 0%, rgba(48, 160, 255, 0) 100%);
+        display: none;
+        .split-bar {
+          width: 100%;
+          height: 3px;
+          background: linear-gradient(180deg, #30a0ff 0%, rgba(48, 160, 255, 0) 100%);
+        }
+        .sub-item {
+          margin: 10px;
+          padding: 5px;
+          font-size: 14px;
+          font-family: Source Han Sans CN-Medium;
+          font-weight: 500;
+          color: #30a0ff;
+          text-align: center;
+        }
+        .sub-item:hover,
+        .sub-active {
+          color: #ffb142;
+        }
+      }
+    }
+    .category-item:hover .sub-list {
+      display: block;
+    }
+    .pick-on {
+      .info-wrap {
+        background: linear-gradient(0deg, #ffad38 0%, #ffffff 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .category-wrap {
+        background: linear-gradient(0deg, #ffad38 0%, #ffffff 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: unset;
+      }
+    }
+  }
+}
+</style>

src/views/dataBoard/smartSewage/index.vue

@@ -3,6 +3,7 @@
     <div class="map">
       <!-- 地图 -->
       <mainMap />
+      <sewageStatistics />
       <!-- 污水厂指标 -->
       <div class="map-box">
         <div class="icon">
@@ -49,7 +50,7 @@
         <div class="tl-2">
           <div class="tl-title">
             <img :src="require('@/views/dataBoard/img/arrow-r.png')">
-            <span class="text">污水处理量（万吨）</span>
+            <span class="text">污水处理量（吨）</span>
           </div>
           <sewageChart :data="sewageDetailData" />
         </div>
@@ -144,7 +145,7 @@
           <div>
             <span style="font-size:13px;">污泥生产量:&nbsp;&nbsp;</span>
             <span style="font-size:20px;">{{ 25 }}</span>
-            <span style="font-size:13px;">{{ `万吨` }}</span>
+            <span style="font-size:13px;">{{ `吨` }}</span>
           </div>
         </div>
         <suldgeChart :data="suldgeData" />
@@ -162,7 +163,8 @@ import {
   ratio,
   warnNumChart,
   CPTSpecificTable,
-  suldgeChart
+  suldgeChart,
+  sewageStatistics
 } from "./components/index.ts";
 import {
   getIndexDataByMonth,
@@ -173,6 +175,7 @@ import {
 
 export default {
   components: { 
+    sewageStatistics,
     mainMap, 
     process,
     PercentGaugeChart,
@@ -184,6 +187,7 @@ export default {
   },
   data() {
     return {
+      intervalTime: 60 * 1000,
       total: {
         num: '10',
         ratio: '10',
@@ -218,7 +222,6 @@ export default {
       warningTypeNum: [0, 0, 0],
       warningList: [
         { label: '报警污水厂', value: 'sewage', unit: '座' },
-        { label: '报警泵站', value: 'pump', unit: '个' },
         { label: '报警次数', value: 'warning', unit: '次' }
       ],
       warningData: {
@@ -227,9 +230,9 @@ export default {
         warning: []
       },
       // 
-      warn: { sum: 8, unit: '次' },
+      warn: { sum: 4, unit: '次' },
       warningStatictis: {
-        bsdata: [[2, 1, 3, 2]],
+        bsdata: [[1, 0, 2, 1]],
         xAxis: ['1月', '2月', '3月', '4月'],
         types: ['red'],
         yname: '（次）'
@@ -257,17 +260,17 @@ export default {
           { prop: 'vv', label: '瞬时流量', align: 'center', headerAlign: 'center', showOverflowTooltip: true },
       ],
       suldgeData: {
-        xAxis: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
+        xAxis: ['2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07'],
         wnData: [2, 1, 3, 2, 2, 1, 3, 2, 2, 1, 3, 2],
         // hslData
       },
       //
       sewageIndexs: [
-        { name: 'COD', value: '213.12', unit: 'mg/L' },
-        { name: '氨氮', value: '213.12', unit: 'mg/L' },
-        { name: '总氮', value: '213.12', unit: 'mg/L' },
-        { name: '总磷', value: '213.12', unit: 'mg/L' },
-        { name: '瞬时流量', value: '213.12', unit: 'm³/s' },
+        { name: 'COD', value: '13.1', unit: 'mg/L' },
+        { name: '氨氮', value: '3.2', unit: 'mg/L' },
+        { name: '总磷', value: '0.32', unit: 'mg/L' },
+        { name: '总氮', value: '13.3', unit: 'mg/L' },
+        { name: '瞬时流量', value: '7.32', unit: 'm³/h' },
       ]
     }
   },
@@ -276,17 +279,17 @@ export default {
     this.getMonitorData()
     this.timer = setInterval(this.getMonitorData, this.intervalTime)
   },
+  destroyed() {
+    this.timer && clearInterval(this.timer)
+  },
   methods: {
     // 实时数据
     getMonitorData(updateMap = true) {
       // 污水厂指标
-      let deptId = this.$store.state.comprehensivePage.currDept || this.$store.state.user.departmentId
+      let deptId = 54
       getSewageIndexData({ deptId }).then((res) => {
         let { code, result } = res
         if (res && code == 1) {
-          //
-          result = result.filter(({ name }) => name !== '复兴镇灵华污水处理站(新建)')
-          result = result.filter(({ name }) => name !== '青岗镇污水处理站')
           // 排序
           result = result.sort(({ indexRealValList }) => (indexRealValList && indexRealValList.length > 0 ? -1 : 1))
           // 表格数据
@@ -413,8 +416,9 @@ export default {
     getScreenData() {
       // 负荷率
       const loadRate = (res) => {
-        res = isTest ? { code: 1, result: LoadRate } : res
+        // 出口累计流量 / 污水处理能力
         if (res && res.code === 1) {
+          return
           this.loadRateData = res.result.map(({ stationName, loadrate }) => ({
             name: stationName,
             ratio: (loadrate > 100 ? 100 : loadrate),
@@ -426,10 +430,11 @@ export default {
       }
       // 生产情况总览
       const pruductOverview = (res) => {
+        console.log('生产总览数据', res)
         let resObj = res.result
         // 同比环比
-        this.percentChartList[0].value = isTest ? '2' : resObj.yearOnYearSewageWaterRate
-        this.percentChartList[1].value = isTest ? '5' : resObj.linkRatioSewageWaterRate
+        this.percentChartList[0].value = resObj.yearOnYearSewageWaterRate
+        this.percentChartList[1].value = resObj.linkRatioSewageWaterRate
         // 污水处理统计
         let ratio = resObj.sewageWaterPropY
         ratio = ratio > 100 ? 100 : (ratio < 0 ? 0 : ratio)
@@ -437,18 +442,19 @@ export default {
         let num = resObj.sewageWaterLastM
         let total = resObj.sewageWaterThisY
         //
-        this.total = isTest ? { num: '1462338.51', ratio: '9.24', total: '15826183.11' } : { num, ratio, total }
+        this.total = { num, ratio, total }
         // 顶部
         this.setTopData(resObj)
       }
       // 污泥处理情况、月污水处理和报警统计
       const sewageAndWarnningStatisMonthly = (res) => {
+        console.log('污泥处理', res)
         let xAxis = this.getPreMonthList()
         if (res && res.code == 1) {
-          let sewageData = new Array(12).fill(0)
-          let warningData = new Array(12).fill(0)
-          let wnData = new Array(12).fill(0)
-          let hslData = new Array(12).fill(0)
+          let sewageData = Array.from({ length: 12 }).fill(0)
+          let warningData = Array.from({ length: 12 }).fill(0)
+          let wnData = Array.from({ length: 12 }).fill(0)
+          let hslData = Array.from({ length: 12 }).fill(0)
           res.result.forEach(({ sewageWater, scadaTime, reportNum, sludgeWaterRate, sludgeDispose }) => {
             let index = xAxis.indexOf(scadaTime)
             if (index >= 0) {
@@ -462,24 +468,23 @@ export default {
           })
           // 污水处理
           let testMonth = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-          let xAxisTest = isTest ? testMonth : xAxis
+          let xAxisTest = xAxis
           let testData = [138.1, 134.7, 125.0, 142.2, 138.8, 143.4, 143.4, 165.4, 162.1, 142.9, 146.2, 0]
-          sewageData = isTest ? testData : sewageData
+          sewageData = sewageData
 
           this.sewageDetailData = { ...this.sewageDetailData, bsdata: [sewageData], xAxis: xAxisTest }
           // 报警
           this.warningStatictis = { ...this.warningStatictis, bsdata: [warningData], xAxis }
           // 污泥处置量和含水率
           let testData2 = [2776, 2761, 2785, 4402, 3903, 2938, 2740, 1675, 2441, 2740, 3321, 0]
-          wnData = isTest ? testData2 : wnData
-          console.log('含水率', hslData)
+          wnData = wnData
           this.suldgeData = { xAxis: xAxisTest, wnData, hslData }
         } else {
         }
       }
 
       let monthParams = this.getPreMonth()
-      let deptId = this.$store.state.comprehensivePage.currDept
+      let deptId = 54
       const promiseAndHandles = [
         { promise: getLoadRate({ deptId }), handle: loadRate },
         { promise: getIndexData({ deptId }), handle: pruductOverview }, // 污水厂相关值统计
@@ -491,22 +496,22 @@ export default {
         })
       })
     },
-      // 获取当月前12个月
+    // 获取当月前12个月
     getPreMonth() {
-      let endMonth = parseTime(new Date(), '{y}-{m}')
-      let [year, month] = endMonth.split('-')
-      month = (parseInt(month) + 1).toString().padStart(2, '0')
-      year = parseInt(year) - 1
-      let startMonth = `${year}-${month}`
+      let endMonth = this.$moment().format('YYYY-MM')
+      let startMonth = this.$moment().subtract(11, 'months').format('YYYY-MM')
       return { startMonth, endMonth }
     },
-    //
+    // 获取当前月份前12个月
     getPreMonthList() {
-      let arr = new Array(12).fill(0).map((_, i) => i + 1)
+      let arr = Array.from({ length: 12 }).map((_, i) => i + 1)
       let theMonth = new Date().getMonth() + 1
       let theYear = new Date().getFullYear()
       let arr2 = arr.splice(0, theMonth)
-      return [...arr, ...arr2].map((month) => `${theYear}-${String(month).padStart(2, '0')}`)
+      return [...arr, ...arr2].map((month, i) => {
+        let year = i < theMonth ? theYear - 1 : theYear
+        return `${year}-${String(month).padStart(2, '0')}`
+      })
     },
     showWarnList({ value }) {
       this.warningActiveName = value
@@ -609,7 +614,7 @@ $numFontfamily: 'DS-Digital';
   }
   .left-panel {
     position: relative;
-    width: 550px;
+    width: 500px;
     padding: 5px;
     background: linear-gradient(to right, #012037 0, rgba(1,32,55,0.9) 70%, rgba(1,32,55,0) 100%);
     & > div {
@@ -754,7 +759,7 @@ $numFontfamily: 'DS-Digital';
   }
   .right-panel {
     padding: 5px;
-    width: 550px;
+    width: 500px;
     position: relative;
     background: linear-gradient(to left, #012037 0, rgba(1,32,55,0.9) 70%, rgba(1,32,55,0) 100%);
     & > div {
@@ -776,7 +781,7 @@ $numFontfamily: 'DS-Digital';
           .warn-head {
             position: relative;
             display: flex;
-            justify-content: space-between;
+            justify-content: space-around;
             height: 55px;
             margin-top: 10px;
             .warn-head-item {

src/views/dataBoard/smartSewage/mapUtil/graphic.js

@@ -13,7 +13,8 @@ export default class GraphicUtil {
         POINT: 'point',
         TXT: 'text',
         MARKER: 'marker',
-        POINTBUF: 'pointerbuffer'
+        POINTBUF: 'pointerbuffer',
+        PIC: 'picture'
     }
     constructor(mapview) {
         this.mapview = mapview || {}
@@ -44,6 +45,11 @@ export default class GraphicUtil {
             this.layer.add(graphic)
         }
     }
+    addGraphics(graphics) {
+        if(this.layer && graphics && graphics.length) {
+            this.layer.addMany(graphics)
+        }
+    }
     // 移除要素
     remvoeGraphics(graphics) {
         if(this.layer && graphics) {
@@ -91,6 +97,7 @@ export default class GraphicUtil {
             case GraphicUtil.GTYPE.POINT:
             case GraphicUtil.GTYPE.TXT:
             case GraphicUtil.GTYPE.MARKER:
+            case GraphicUtil.GTYPE.PIC:
                 geometry.type = 'point'
                 geometry.x = coors[0]
                 geometry.y = coors[1]
@@ -114,18 +121,19 @@ export default class GraphicUtil {
     // 获取样式
     getSymbol(type, params = {}) {
         let symbol = {}
-        const { txt = {}, point = {}, line = {}, polygon = {} } = params
+        const { point = {}, line = {}, polygon = {} } = params
         switch (type) {
             case GraphicUtil.GTYPE.TXT:
                 symbol = {
                     type: 'text', 
                     color: 'white', 
-                    haloColor: 'black',
-                    haloSize: '1px',
-                    text: txt.t || '', 
-                    yoffset: '10px', 
+                    // haloColor: 'black',
+                    // haloSize: '1px',
+                    text: point.txt || '', 
+                    yoffset: point.yoffset || '10px',
+                    xoffset: point.xoffset || '0px', 
                     verticalAlignment: 'bottom',
-                    font: { size: '14px', weight: '500' }
+                    font: { size: '14px', weight: '900' }
                 }
                 break
             case GraphicUtil.GTYPE.MARKER:
@@ -138,7 +146,16 @@ export default class GraphicUtil {
                     yoffset: '15px',
                     xoffset: '0px',
                 }
-                // symbol = { url: locateImag, width: '46px', height: '46px', yoffset: '13px', xoffset: '0px', type: 'picture-marker' }
+                break
+            case GraphicUtil.GTYPE.PIC:
+                symbol = { 
+                    url: point.pic || locateImag, 
+                    width: point.width || '46px', 
+                    height: point.height || '46px', 
+                    yoffset: point.yoffset || '13px', 
+                    xoffset: point.xoffset || '0px', 
+                    type: 'picture-marker' 
+                }
                 break
             case GraphicUtil.GTYPE.POINT:
                 symbol = { 

src/views/dataBoard/smartSewage/mapUtil/index.js

@@ -34,10 +34,11 @@ export default class MapUtil {
     viewUtil = null // 视图
 
     darkMode = false
-    constructor(mapViewOrId, { dark }) {
+    constructor(mapViewOrId, { dark, afterLoad }) {
         // 地图 mapview 或者 地图容器 id
         let [mapview, container] = typeof mapViewOrId === 'string' ? [null, mapViewOrId] : [mapViewOrId, null]
         this.darkMode = !!dark
+        this.afterLoad = afterLoad
         if(mapview) {
             this.viewUtil = new viewUtil(mapview)
             this.init(mapview)
@@ -67,6 +68,7 @@ export default class MapUtil {
         mapview.IdentityManager.registerToken({ server: 'http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS', token: geteSessionStorage('arcgistoken') })
         // 加载图层
         this.viewUtil.addBaseLayers(layers, this.darkMode)
-        //
+        // 
+        this.afterLoad && this.afterLoad()
     }
 }

src/views/dataBoard/smartSewage/mapUtil/query.js

@@ -1,5 +1,5 @@
 import { appconfig } from 'staticPub/config'
-import axios from 'axios'
+import { load } from 'staticPub/esriLoaderAPI'
 
 export default class Query {
   constructor() {
@@ -19,22 +19,47 @@ export default class Query {
     }
     $.ajax({ url, data, type: 'POST', success: res => { callback && callback(JSON.parse(res)) } })
   }
-  // 综合查询（单图层）   
-  sqlQuery({ sqlText, geo = '', layerId, outFields = ["*"], callback }) {
-    const url = `${appconfig.gisResource.business_map.config[0].url}/${layerId}/query`
-    const data = {
-      where: sqlText || '1=1',
-      geometry: geo,
-      geometryType: geo == '' ? undefined : 'esriGeometryPolygon',
-      outFields,
-      f: 'pjson',
-      // returnGeometry: true
-    }
-    $.ajax({
-      url, data, type: 'POST', success: res => {
-        callback && callback(JSON.parse(res))
-      }
-    })
+  // 综合查询（单图层）
+  sqlQuery(url, sqlText = '1=1') {
+    console.log('综合查询', url)
+    return new Promise(async resolve => {
+      load(["esri/layers/FeatureLayer", "esri/config"]).then(async ([FeatureLayer, esriConfig]) => {
+        setConfigRequest(esriConfig)
+        var featureLayer = new FeatureLayer({ url });
+        await featureLayer
+          .queryFeatures({
+            where: sqlText, 
+            outFields: ["*"]
+          })
+          .then(results => {
+            
+            resolve(results);
+          });
+      });
+    });
   }
 }
 
+
+
+function setConfigRequest(config) {
+  const whiteUrls = [
+    // 排水分区
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/23",
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/23/query",
+
+    // 污水厂
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/FeatureServer/19",
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/19",
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/19/query", // 查询
+    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/FeatureServer/19/applyEdits", // 新增、修改、删除
+  ]
+  const handle = {
+    before: (params) => {
+      if(whiteUrls.includes(params.url)) {
+        params.requestOptions.query.token = sessionStorage.getItem('arcgistoken')
+      }
+    }
+  }
+  config.request.interceptors.push(handle)
+}

src/views/dataBoard/smartSewage/mapUtil/view.js

@@ -8,6 +8,10 @@ export default class TF_ARCMAP {
     container = null
     afterLoad = null
     static WKID = 4490
+    static viewConfig = {
+        zoom: 0,
+        center: [102.18017, 27.33482],
+    }
 
     constructor(container, mapview, afterLoad) {
         this.container = container
@@ -66,16 +70,16 @@ export default class TF_ARCMAP {
         })
     }
     initLods() {
-        const lods = [125000, 64000, 32000, 16000, 8000, 4000, 2000, 1000, 500, 100]
+        const lods = [250000, 125000, 64000, 32000, 16000, 8000, 4000, 2000, 1000, 500, 100]
         this.mapview.constraints.lods = lods.map((s, i) => new this.mapview.tfMap_LOD({ level: i, scale: s }))
     }
     initView() {
         this.mapview.center = { 
-            x: appconfig.initCenter.x, 
-            y: appconfig.initCenter.y, 
+            x: TF_ARCMAP.viewConfig.center[0], 
+            y: TF_ARCMAP.viewConfig.center[1], 
             spatialReference: this.mapview.spatialReference 
         }
-        this.mapview.zoom = appconfig.initZoom
+        this.mapview.zoom = TF_ARCMAP.viewConfig.zoom
     }
     // 默认明亮模式
     addBaseLayers(layers, isDark) {

src/views/dataBoard/smartTech/components/chart.vue

@@ -1,212 +1,182 @@
 <template>
-  <div class="GradientLineChart" ref="chart"></div>
+  <div class="chart-container">
+    <el-form :model="queryParams" size="small" inline>
+      <el-form-item label="时间范围">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="指标">
+        <el-select v-model="queryParams.indexName">
+          <el-option v-for="(t, i) in ids" v-bind="t" :key="`o${i}`"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="updateChart(null)">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div ref="chart" class="chart"></div>
+  </div>
 </template>
 
-<script lang="ts">
+<script>
 import echarts, { ECharts } from "echarts";
-import { fontSize } from '@/views/dataBoard/common/util.ts'
+import { fontSize } from "@/views/dataBoard/common/util.ts";
+import { getWarningData } from '@/views/dataBoard/api/smartSewage.ts'
+
 export default {
   props: {
-    chartSerie: { default: () => ({}) }
-  },
-  watch: {
-    chartSerie: {
-      handler() {
-        this.$nextTick(this.initialChart);
-      },
-      immediate: true
-    }
+    indexList: { default: () => ([]) },
+    sewageId: { default: '' },
   },
+
   data() {
     return {
-      myChart: null
+      myChart: null,
+      ids: [],
+      queryParams: {
+        date: [],
+        indexName: ''
+      }
     };
   },
   mounted() {
-    this.$nextTick(this.initialChart);
+    this.ids = this.indexList.map(({ indexName, deviceId }) => ({ label: indexName, value: deviceId }))
+    this.initChart();
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.myChart.resize);
+    this.myChart.dispose();
+    this.myChart = null;
   },
   methods: {
-    destroyChart() {
+    initChart() {
+      this.myChart = echarts.init(this.$refs.chart);
+      this.myChart.resize();
+      this.updateChart();
+      window.removeEventListener("resize", this.myChart.resize);
+      window.addEventListener("resize", this.myChart.resize);
+    },
+    setQueryParams() {
+      let currDate = this.$moment().format("YYYY-MM-DD");
+      this.queryParams.dateRange = [currDate, currDate];
+    },
+    async updateChart(data) {
       if (this.myChart) {
-        this.myChart.dispose();
-        this.myChart = null;
+        this.myChart.clear();
+      } else {
+        this.myChart = echarts.init(this.$ref.chart);
       }
+      if(!data) {
+        const [startTime, endTime] = this.queryParams.dateRange
+        const params = { 
+          stationIds: this.sewageId.toString(), 
+          startTime: `${startTime} 00:00:00`, 
+          endTime: `${endTime} 23:59:59`,
+          deviceIds: this.queryParams.indexName.toString(), 
+          isHistory: 1
+        }
+        let optionData =  this.getOption(await getWarningData(params))
+        data = optionData
+          .find(({ id }) => id == this.sewageId)
+          .deviceList
+          .find(({ id }) => id == this.queryParams.indexName)
+          .indexList
+          .sort((p, n) => new Date(p.scadaTime) - new Date(n.scadaTime))
+          .map(({ scadaTime, itVal }) => ([scadaTime, parseFloat(itVal)]))
+      }
+      const option = this.getOption(data)
+      this.myChart.setOption(option, { notMerge: true });
     },
-    getRandomColor() {
-      return `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(
-        Math.random() * 256
-      )}, ${Math.floor(Math.random() * 256)}, 1)`;
-    },
-    initialChart() {
-      if (!this.chartSerie) return;
-      this.destroyChart();
-      // 曲线颜色
-      let { bsdata, types, titles, yname, warnLine, xdata } = this.chartSerie;
-      let colorTypeBox = bsdata.map(_ => {
-        return {
-          color: new echarts.graphic.LinearGradient(
-            0,
-            0.5,
-            0,
-            1,
-            [
-              { offset: 0, color: this.getRandomColor() },
-              { offset: 0.7, color: "rgba(251, 238, 255, 1)" }
-            ],
-            false
-          )
-        };
-      });
-      const series = bsdata.map((data, index) => {
-        let name = (titles && titles[index]) || "";
-        return {
-          name,
-          type: "line",
-          smooth: true,
-          symbolSize: 0,
-          lineStyle: colorTypeBox[index],
-          data
-        };
-      });
-      // 标记警戒线
-      let markData = warnLine.map(num => ({ yAxis: num }));
-      series[0].markLine = {
-        silent: true,
-        label: {
-          formatter: `报警值: ${warnLine} mg/L`,
-          position: "middle",
-          show: true
-        },
-        lineStyle: { normal: { color: "red" } },
-        data: markData
-      };
-      // 最大值
-      let max = Math.max(...[...bsdata, warnLine].flat()) + 20;
-
-      let option = {
-        legend: {
-          show: true,
-          textStyle: {
-            color: "#99D0FE"
+    getOption(data) {
+      const dateList = data.map(arr => arr[0]);
+      const valueList = data.map(arr => arr[1]);
+      const option = {
+        visualMap: [
+          {
+            show: false,
+            type: "continuous",
+            seriesIndex: 0,
+            min: 0,
+            max: 1
           }
-        },
-        backgroundColor: "transparent",
+        ],
+        title: [
+          {
+            left: "center",
+            text: "指标变化曲线",
+            textStyle:{
+              color:'#A4D9F9',
+              fontSize:'14',
+            },
+          }
+        ],
         tooltip: {
-          borderWidth: 0,
-          trigger: "axis",
-          formatter: params => {
-            return params
-              .map(t => `${t.marker} ${t.name} : ${t.value} ${yname}`)
-              .join("<br/>");
-          },
-          axisPointer: {
-            lineStyle: {
-              type: "solid",
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(126,199,255,0)" // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.5,
-                    color: "rgba(126,199,255,1)" // 50% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(126,199,255,0)" // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            }
-          },
-          backgroundColor: "rgba(50,50,50,0.7)"
-        },
-        grid: {
-          //统计图距离边缘的距离
-          top: "10%",
-          left: "5%",
-          right: "3%",
-          bottom: "0%",
-          containLabel: true
+          trigger: "axis"
         },
-        // dataZoom: [
-        //   { start: 0, end: 20 }
-        // ],
         xAxis: [
           {
-            //x轴
-            type: "category", //数据类型为不连续数据
-            boundaryGap: false, //坐标轴两边是否留白
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: false
-            },
+            data: dateList,
             axisLabel: {
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: "#6a9cd5"
-              }
-            },
-            axisTick: { show: false }, //刻度点数轴
-            data: xdata
+              color: '#fff'
+            }
           }
         ],
         yAxis: [
           {
-            name: yname,
-            min: 0,
-            max,
-            nameTextStyle: {
-              color: "#99D0FE",
-              align: "left",
-              padding: [0, 0, 0, -30]
-            },
-            nameGap: 25,
-            //y轴的相关设置
-            type: "value", //y轴数据类型为连续的数据
-            splitLine: {
-              //y轴上的y轴线条相关设置
-              show: false
-            },
             axisLine: {
-              //y轴的相关设置
-              show: false
+              show:false,
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.24)"
+              }
             },
-            axisLabel: {
-              //y轴的标签相关设置
-              textStyle: {
-                color: "#6a9cd5"
+            splitNumber: 1,
+            splitLine:{
+              lineStyle:{
+                color: "rgba(255, 255, 255, 0.24)"
               }
             },
-            axisTick: { show: false } //刻度点数轴
+            axisLabel: {
+              color: '#fff'
+            }
           }
         ],
-        series
+        series: [
+          {
+            type: "line",
+            showSymbol: true,
+            data: valueList
+          }
+        ]
       };
-      this.creatChart(option, this.$refs.chart);
+      return option
+    },
+    destroyChart() {
+      if (this.myChart) {
+        this.myChart.dispose();
+        this.myChart = null;
+      }
     },
-    creatChart(option, ref) {
-      this.myChart = echarts.init(ref); //this.$refs.chart
-      this.myChart.resize();
-      this.myChart.setOption(option, { notMerge: true });
-      //图表大小自适应
-      window.removeEventListener("resize", this.myChart.resize);
-      window.addEventListener("resize", this.myChart.resize);
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.GradientLineChart {
+.chart-container {
+  position: relative;
   height: 100%;
   width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 20px;
+  .chart {
+    width: 100%;
+    height: 400px;
+  }
 }
 </style>

src/views/dataBoard/smartTech/components/index.ts

@@ -1,3 +1,3 @@
 export { default as techPic } from './tech.vue'
 export { default as searchTree } from './searchTree.vue'
-export { default as indexChart } from './indexChart.vue'
+export { default as indexChart } from './chart.vue'

src/views/dataBoard/smartTech/components/searchTree.vue

@@ -11,7 +11,7 @@
       icon-class="arrow-class"
       class="filter-tree"
       :data="data"
-      node-key="id"
+      :node-key="id"
       :props="defaultProps"
       default-expand-all
       :filter-node-method="filterNode"
@@ -41,7 +41,8 @@ export default {
       type: Array
     },
     placeholder: { default: "节点名称", type: String },
-    treeLevel: { default: 0, type: Number | String }
+    treeLevel: { default: 0, type: Number | String },
+    nodekey: {default: 'id', type: String },
   },
   data() {
     return {
@@ -54,6 +55,10 @@ export default {
     };
   },
   methods: {
+    setCheckedNodes(nodeKeys) {
+      console.log('设置勾选', nodeKeys)
+      this.$refs.tree.setCheckedNodes(nodeKeys)
+    },
     filterNode(value, data, node) {
       if (!value) {
         return true;
@@ -143,9 +148,14 @@ export default {
     color: #ccc;
     .el-tree-node {
       // width: 350px;
+      &.is-current {
+        .el-tree-node__content {
+          color: #38b6c2
+        }
+      }
     }
     .el-tree-node__content:hover {
-      color: rgb(56, 182, 194);
+      color: #38b6c2;
       background: transparent;
     }
     .el-tree-node:focus > .el-tree-node__content {

src/views/dataBoard/smartTech/components/tech.vue

@@ -23,7 +23,9 @@ import {
 import Echarts from 'echarts'
 
 export default {
-  props: {},
+  props: {
+    sewageId: { type: Number, default: 0 }
+  },
   data() {
     return {
       waterworks: config,
@@ -32,7 +34,7 @@ export default {
     }
   },
   mounted() {
-    this.loadCraft()
+    // this.loadCraft()
   },
   methods: {
     setSewage(id) {

src/views/dataBoard/smartTech/config/craftConfig.js

@@ -14,17 +14,11 @@ import { config as yonglangConfig } from './craftConfig/yonglangCraftConfig'
 import { config as wangsuoConfig } from './craftConfig/wangsuoCraftConfig'
 
 export const config = [
-  {
-    name: '麻栗污水处理站',
-    active: true,
-    id: 'graphContainer',
-    config: maliConfig,
-    title: true
-  },
   {
     name: '茨达污水处理站',
     active: false,
     id: 'graphContainer1',
+    sewageId: 1,
     config: cidaConfig,
     title: false
   },
@@ -32,6 +26,7 @@ export const config = [
     name: '宽裕污水处理站',
     active: false,
     id: 'graphContainer2',
+    sewageId: 2,
     config: kuanyuConfig,
     title: false
   },
@@ -39,6 +34,7 @@ export const config = [
     name: '热河污水处理站',
     active: false,
     id: 'graphContainer3',
+    sewageId: 4,
     config: reheConfig,
     title: false
   },
@@ -46,6 +42,7 @@ export const config = [
     name: '永郎污水处理站',
     active: false,
     id: 'graphContainer4',
+    sewageId: 6,
     config: yonglangConfig,
     title: false
   },
@@ -53,7 +50,16 @@ export const config = [
     name: '王所污水处理站',
     active: false,
     id: 'graphContainer5',
+    sewageId: 3,
     config: wangsuoConfig,
     title: false
   },
+  {
+    name: '麻栗污水处理站',
+    active: true,
+    id: 'graphContainer',
+    sewageId: 5,
+    config: maliConfig,
+    title: true
+  },
 ]

src/views/dataBoard/smartTech/config/craftConfig/firstCraftConfig.js

@@ -1,80 +0,0 @@
-/*
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2022-11-04 13:48:16
- * @LastEditors: zjz
- * @LastEditTime: 2024-03-14 11:28:09
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\MiniScadaCraftMap\craftConfig\firstCraftConfig.js
- * @Description: 第一水厂
- */
-
-const changeValueFun = () => { }
-const changeImage = () => { }
-
-export const allConfig = [ // 一二期
-  // 初始基准点
-  { 'type': 'point', 'id': 'm1p1', 'name': '基准点1', 'x': [0, 40], 'y': [0.1, 30] },
-  { 'type': 'text', 'id': 'p1t1', 'text': '原水', 'from': 'm1p1', 'point': [1, 0.5], 'margin': { 'x': [0, 30], 'y': [0, -30] }},
-  // 出水指标
-  {
-    'type': 'text', 'id': 'm1t2', 'name': '进水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 100], 'y': [0, 164] }, 'value': [
-      { 'id': 't4', 'name': '水源地进水总流量1：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_CHENGJIAO_JIN_TFT1', 'style': 'color:#F7F604;' },
-      { 'id': 't6', 'name': '水源地进水总流量2：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_CHENGJIAO_JIN_TFT2', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '水源地进水瞬时流量1：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_CHENGJIAO_JIN_FT1', 'style': 'color:#F7F604;' },
-      { 'id': 't7', 'name': '水源地进水瞬时流量2：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_CHENGJIAO_JIN_FT2', 'style': 'color:#F7F604;' },
-      { 'id': 't20', 'name': '水源地进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_JIN_P1', 'style': 'color:#F7F604;' }
-    ]
-  },
-  // 基准点2 以为基础点1为基准，X拼音向右0.1倍，y向下平移0.1倍
-  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.1, 30], 'y': [0.3, -40] }},
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3', 'from': 'm1p1', 'margin': { 'x': [0.1, -20], 'y': [0.1, -40] }},
-  { 'type': 'image', 'id': 'm3i1', 'name': '加药间', 'text': '加药间', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, 28], 'y': [0, 76] }, 'width': 100, 'height': 100, 'src': '复合加药间设备.png' },
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4', 'from': 'm1p1', 'margin': { 'x': [0.1, 84], 'y': [0.3, -40] }},
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5(以基础点2为基础)', 'from': 'm1p2', 'margin': { 'x': [0.5, 100], 'y': [0, 0] }},
-
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6(以基础点2为基础)-沉淀池基准点', 'from': 'm1p2', 'margin': { 'x': [0.1, -30], 'y': [0, 0] }},
-  { 'type': 'image', 'id': 'm1i3', 'name': '沉淀池', 'text': '混合循环反应斜管沉淀池', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 20], 'y': [0, 0] }, 'width': 120, 'height': 120, 'src': '沉淀池.gif' },
-  { 'type': 'image', 'id': 'm6i2', 'name': '调节池', 'text': '调节池', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 180], 'y': [0, 0] }, 'width': 120, 'height': 120, 'src': '虹吸滤池.gif' },
-  { 'type': 'image', 'id': 'm6i3', 'name': '过滤池', 'text': '过滤池', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 320], 'y': [0, 0] }, 'width': 140, 'height': 120, 'src': '加药间.gif' },
-  { 'type': 'image', 'id': 'm6i4', 'name': '消毒剂加药间', 'text': '消毒剂加药间', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 530], 'y': [0, 0] }, 'width': 140, 'height': 120, 'src': '加药间.png' },
-
-  { 'type': 'point', 'id': 'm1p7', 'name': '基准点7', 'from': 'm1p5', 'margin': { 'x': [0, 0], 'y': [-0.3, 0] }},
-  { 'type': 'point', 'id': 'm1p8', 'name': '基准点8', 'from': 'm1p7', 'margin': { 'x': [0, 43], 'y': [0.4, 40] }},
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p8', 'margin': { 'x': [0, 42], 'y': [0, 0] }},
-
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p8', 'margin': { 'x': [0, 21], 'y': [0, 160] }},
-
-  { 'type': 'point', 'id': 'm1p11', 'name': '基准点10', 'from': 'm1p10', 'margin': { 'x': [-0.6, 0], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p12', 'name': '基准点10', 'from': 'm1p10', 'margin': { 'x': [-0.3, 0], 'y': [0, 0] }},
-
-  { 'type': 'image', 'id': 'm12i2', 'name': '清水池', 'text': '清水池', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p12', 'margin': { 'x': [0, 0], 'y': [0, 0] }, 'width': 140, 'height': 120, 'src': '虹吸滤池.gif' },
-  // 清水池
-  {
-    'type': 'text', 'id': 'm1t2', 'name': '清水池', 'point': [0, 0.5], 'from': 'm1p12', 'margin': { 'x': [0, 70], 'y': [0, 34] }, 'value': [
-      { 'id': 't4', 'name': '液位：', 'value': 0.0, 'unit': 'm', 'itnm': 'SCADA_CHENGJIAO_CHU_YW', 'style': 'color:#000;' }
-    ],
-    'style': 'color:#000;font-size:16px;z-index: 999;'
-  },
-  { 'type': 'text', 'id': 'p1t2', 'text': '向城区用户供水', 'from': 'm1p11', 'point': [1, 0.5], 'margin': { 'x': [0.1, 30], 'y': [0, -20] }},
-
-  // 出水指标
-  {
-    'type': 'text', 'id': 'm11t1', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p11', 'margin': { 'x': [0, 120], 'y': [0, 24] }, 'value': [
-      { 'id': 't4', 'name': '出水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_CHENGJIAO_CHU_TFT', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '出水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_CHENGJIAO_CHU_FT', 'style': 'color:#F7F604;' },
-      { 'id': 't20', 'name': '出水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_CHU_P', 'style': 'color:#F7F604;' }
-    ]
-  },
-
-  // 划线
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p1', 'to': 'm1p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a2', 'from': 'm1p1', 'to': 'm1p4', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a3', 'from': 'm1p2', 'to': 'm1p5', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a4', 'from': 'm1p5', 'to': 'm1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a5', 'from': 'm1p7', 'to': 'm1p8', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a6', 'from': 'm1p7', 'to': 'm1p9', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a7', 'from': 'm1p8', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a8', 'from': 'm1p9', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a9', 'from': 'm1p10', 'to': 'm1p11', 'style': 'strokeColor=#33f3fe;', 'flow': true }
-]

src/views/dataBoard/smartTech/config/craftConfig/mlCraftConfig.js

@@ -1,220 +0,0 @@
-/*
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2022-11-03 16:34:36
- * @LastEditors: zjz
- * @LastEditTime: 2024-03-13 23:36:29
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\MiniScadaCraftMap\craftConfig\mlCraftConfig.js
- * @Description: 麻栗水厂
- */
-const changeValueFun = () => { }
-const changeImage = () => { }
-
-export const allConfig_bak = [ // 一二期
-  // 初始基准点
-  { 'type': 'point', 'id': 'm1p1', 'name': '基准点1', 'x': [0, 80], 'y': [0.2, 0] },
-  { 'type': 'text', 'id': 'p1t1', 'text': '原水', 'from': 'm1p1', 'point': [1, 0.5], 'margin': { 'x': [0, 30], 'y': [0, -20] }},
-  // 进水指标
-  {
-    'type': 'text', 'id': 'm1t3', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 70], 'y': [0, 124] }, 'value': [
-      { 'id': 't6', 'name': '进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_MaLi_Jin_P', 'style': 'color:#F7F604;' },
-      { 'id': 't7', 'name': '进水总流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_MaLi_Jin_TFT', 'style': 'color:#F7F604;' }
-
-    ]
-  },
-  // 基准点2 以为基础点1为基准，X拼音向右0.1倍，y向下平移0.1倍
-  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.1, 0], 'y': [0.1, -40] }},
-  // 基准点3 以为基础点2为基准，X拼音向左40px，y向下平移10px
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3-溶液搅拌器基准点', 'from': 'm1p2', 'margin': { 'x': [0, -38], 'y': [0, 10] }},
-  // 溶液搅拌器
-  { 'type': 'image', 'id': 'm3i1', 'name': '溶液搅拌器', 'text': '溶液搅拌器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, 10], 'y': [0, 0] }, 'width': 130, 'height': 130, 'src': '溶液搅拌器.png' },
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4-溶液搅拌器出水基准点', 'from': 'm1p3', 'margin': { 'x': [0, 130], 'y': [0, 38] }},
-
-  { 'type': 'image', 'id': 'm4i2', 'name': '计量泵', 'text': '计量泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p4', 'margin': { 'x': [0, 100], 'y': [0, -4] }, 'width': 90, 'height': 90, 'src': '计量泵.png' },
-
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5-溶液搅拌器出水基准点', 'from': 'm1p4', 'margin': { 'x': [0, 200], 'y': [0, 360] }},
-
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6', 'from': 'm1p5', 'margin': { 'x': [0, 640], 'y': [0, 0] }},
-
-  {
-    'type': 'rectangle', 'id': 'm6i2', 'name': '全自动净水器', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 610], 'y': [0, 0] },
-    'width': 580, 'height': 320, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #7BB2CD;border-width: 2px;border-style: dashed;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 230px;'
-  },
-
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '循环池', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 180], 'y': [0, 0] },
-    'width': 120, 'height': 160, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:50%;width:100%;background:#1185B5;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '沉淀池', 'text': '沉淀池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 380], 'y': [0, 0] },
-    'width': 120, 'height': 160, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i5', 'name': '滤池', 'text': '滤池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 580], 'y': [0, 0] },
-    'width': 120, 'height': 160, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 30px;',
-    'children': { 'style': 'height:76%;width:100%;background:#6552C6;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i6', 'name': '清水池', 'text': '清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 880], 'y': [0, 0] },
-    'width': 120, 'height': 160, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:90%;width:100%;background:#3A8DFF;position: absolute;bottom: 0px;' }
-  },
-
-  { 'type': 'point', 'id': 'm1p7', 'name': '基准点7-二氧化氯发生器', 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [-0.5, 0] }},
-
-  { 'type': 'image', 'id': 'm7i6', 'name': '二氧化氯发生器', 'text': '二氧化氯发生器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -70], 'y': [0, 0] }, 'width': 160, 'height': 160, 'src': '二氧化氯发生器.png' },
-
-  { 'type': 'point', 'id': 'm1p8', 'name': '基准点8', 'from': 'm1p7', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p6', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  // 清水池液位
-  {
-    'type': 'text', 'id': 'p9t1', 'name': '清水池液位', 'point': [0, 0], 'from': 'm1p9', 'margin': { 'x': [0, 150], 'y': [0, 10] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm', 'itnm': 'SCADA_MaLi_Chu_YW' }
-    ],
-    'style': 'color:#F7F604;font-size:16px;z-index: 999;'
-  },
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p9', 'margin': { 'x': [0.2, 0], 'y': [0, 0] }},
-  // 出水指标
-  {
-    'type': 'text', 'id': 'm10t2', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p10', 'margin': { 'x': [0, -20], 'y': [0, 24] }, 'value': [
-      { 'id': 't4', 'name': '出水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_MaLi_Chu_TFT', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '出水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_MaLi_Chu_TF', 'style': 'color:#F7F604;' }
-    ]
-  },
-
-  { 'type': 'text', 'id': 'p1t1', 'text': '出厂水', 'from': 'm1p10', 'point': [1, 0.5], 'margin': { 'x': [0, 80], 'y': [0, 0] }},
-
-  // 划线
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p1', 'to': 'm1p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a2', 'from': 'm1p4', 'to': 'm1p5', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a3', 'from': 'm1p5', 'to': 'm1p6', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a4', 'from': 'm1p6', 'to': 'm1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a5', 'from': 'm1p7', 'to': 'm1p8', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a6', 'from': 'm1p8', 'to': 'm1p9', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a7', 'from': 'm1p9', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true }
-]
-
-/*
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2022-11-09 09:31:25
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-07-25 13:48:19
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\ylCraftConfig.js
- * @Description: 银鹿水厂
- */
-
-export const allConfig = [
-  // 初始基准点
-  { 'type': 'point', 'id': 'm1p1', 'name': '基准点1', 'x': [0, 60], 'y': [0.15, 50] },
-  { 'type': 'text', 'id': 'p1t1', 'text': '原水', 'from': 'm1p1', 'point': [1, 1], 'margin': { 'x': [0, 30], 'y': [0, -10] }},
-  // 进水指标
-  {
-    'type': 'text', 'id': 'm1t3', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 60], 'y': [0, 100] }, 'value': [
-      { 'id': 't6', 'name': '进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_MaLi_Jin_P', 'style': 'color:#F7F604;' },
-      { 'id': 't7', 'name': '进水总流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_MaLi_Jin_TFT', 'style': 'color:#F7F604;' },
-      { 'id': 't8', 'name': '进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_MaLi_Jin_FT', 'style': 'color:#F7F604;' }
-    ]
-  },
-  // 基准点2 以为基础点1为基准，X平移向右0.1倍，y向下平移0.1倍向上平移40
-  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.1, 0], 'y': [0.1, -40] }},
-  // 基准点3 以为基础点2为基准，X平移向左40px，y向下平移30px
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3-溶液搅拌器基准点', 'from': 'm1p2', 'margin': { 'x': [0, -38], 'y': [0, 30] }},
-  // 溶液搅拌器
-  { 'type': 'image', 'id': 'm3i1', 'name': '溶液搅拌器', 'text': '溶液搅拌器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, 20], 'y': [0, -10] }, 'width': 90, 'height': 90, 'src': '溶液搅拌器.png' },
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4-溶液搅拌器出水基准点', 'from': 'm1p3', 'margin': { 'x': [0, 90], 'y': [0, 15] }},
-
-  { 'type': 'image', 'id': 'm4i2', 'name': '计量泵', 'text': '计量泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p4', 'margin': { 'x': [0, 40], 'y': [0, 0] }, 'width': 50, 'height': 50, 'src': '计量泵.png' },
-
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5-溶液搅拌器出水基准点', 'from': 'm1p4', 'margin': { 'x': [0, 100], 'y': [0, 180] }},
-
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6', 'from': 'm1p5', 'margin': { 'x': [0, 340], 'y': [0, 0] }},
-
-  {
-    'type': 'rectangle', 'id': 'm6i2', 'name': '全自动净水器', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 320], 'y': [0, 0] },
-    'width': 310, 'height': 220, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #7BB2CD;border-width: 2px;border-style: dashed;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 100px;'
-  },
-
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '循环池', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 110], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:50%;width:100%;background:#1185B5;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '沉淀池', 'text': '沉淀池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 210], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i5', 'name': '滤池', 'text': '滤池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 310], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 30px;',
-    'children': { 'style': 'height:76%;width:100%;background:#6552C6;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i6', 'name': '清水池', 'text': '清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 480], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:90%;width:100%;background:#3A8DFF;position: absolute;bottom: 0px;' }
-  },
-
-  { 'type': 'point', 'id': 'm1p7', 'name': '基准点7-二氧化氯发生器', 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [-0.5, 0] }},
-
-  { 'type': 'image', 'id': 'm7i6', 'name': '二氧化氯发生器', 'text': '二氧化氯发生器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -50], 'y': [0, 30] }, 'width': 120, 'height': 120, 'src': '二氧化氯发生器.png' },
-
-  { 'type': 'point', 'id': 'm1p8', 'name': '基准点8', 'from': 'm1p7', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p6', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  // 进水清水池
-  // {
-  //     'type': 'text', 'id': 'm9t2', 'name': '进水清水池', 'point': [0, 0], 'from': 'm1p9', 'margin': { 'x': [0, -140], 'y': [0, 74] }, 'value': [
-  //         { 'id': 't21', 'name': '进水清水池进水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_YinLu_Jin_QSTFT', 'style': 'color:#F7F604;' },
-  //         { 'id': 't22', 'name': '进水清水池进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_YinLu_Jin_QSFT', 'style': 'color:#F7F604;' }
-  //     ]
-  // },
-  // 清水池液位
-  {
-    'type': 'text', 'id': 'p9t1', 'name': '清水池液位', 'point': [0, 0], 'from': 'm1p9', 'margin': { 'x': [0, 150], 'y': [0, 10] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm', 'itnm': 'SCADA_MaLi_Chu_YW' }
-    ],
-    'style': 'color:#F7F604;font-size:16px;z-index: 999;'
-  },
-
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p9', 'margin': { 'x': [0.2, 0], 'y': [0, 0] }},
-  // 出水指标
-  {
-    'type': 'text', 'id': 'm10t2', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p10', 'margin': { 'x': [0, 20], 'y': [0, 84] }, 'value': [
-      { 'id': 't4', 'name': '出水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_MaLi_Chu_TFT', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '出水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_MaLi_Chu_TF', 'style': 'color:#F7F604;' }
-    ]
-  },
-  { 'type': 'text', 'id': 'p1t1', 'text': '出厂水', 'from': 'm1p10', 'point': [1, 0.5], 'margin': { 'x': [0, 40], 'y': [0, 0] }},
-
-  // 划线
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p1', 'to': 'm1p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a2', 'from': 'm1p4', 'to': 'm1p5', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a3', 'from': 'm1p5', 'to': 'm1p6', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a4', 'from': 'm1p6', 'to': 'm1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a5', 'from': 'm1p7', 'to': 'm1p8', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a6', 'from': 'm1p8', 'to': 'm1p9', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a7', 'from': 'm1p9', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true }
-]

src/views/dataBoard/smartTech/config/craftConfig/thirdCraftConfig.js

@@ -1,403 +0,0 @@
-/*
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2022-11-09 09:31:25
- * @LastEditors: zjz
- * @LastEditTime: 2024-03-13 23:25:25
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\MiniScadaCraftMap\craftConfig\thirdCraftConfig.js
- * @Description: 三水厂
- */
-export const allConfig = [
-  // 初始基准点
-  { 'type': 'point', 'id': 'm1p1', 'name': '基准点1', 'x': [0, 80], 'y': [0.8, -20] },
-  {
-    'type': 'text', 'id': 'm1t1', 'name': '出水', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 0], 'y': [0, 10] }, 'value': [
-      { 'id': 't2', 'name': '出水流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'Schneider.2#PLC.QSCCSLL', 'style': 'color:#F7F604;' },
-      { 'id': 't3', 'name': '出水余氯：', 'value': 0.0, 'unit': 'mg/l', 'itnm': 'Schneider.2#PLC.QSCYL', 'style': 'color:#F7F604;' }
-    ]
-  },
-  { 'type': 'text', 'id': 'p1t1', 'text': '至供水管网', 'from': 'm1p1', 'point': [1, 0.5], 'margin': { 'x': [0, 90], 'y': [0, -20] }},
-
-  // 基准点2 以为基础点1为基准，X平移向右0.1倍，y向下平移0.1倍
-  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.15, 100], 'y': [0, 0] }},
-
-  { 'type': 'point', 'id': 'm3p1', 'name': '基准点3-1', 'from': 'm1p1', 'margin': { 'x': [0.1, 50], 'y': [0, 0] }},
-
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3', 'from': 'm1p1', 'margin': { 'x': [0, 230], 'y': [-0.5, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm1i1', 'name': '3#清水池', 'text': '3#清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p2', 'margin': { 'x': [0, -10], 'y': [0, 0] },
-    'width': 70, 'height': 100, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 10%;margin-top: 50%;z-index: 999;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  // 3#清水池指标显示
-  {
-    'type': 'text', 'id': 'm1t6', 'name': '3#清水池液位', 'point': [0, 0], 'from': 'm3p1', 'margin': { 'x': [0, 50], 'y': [0, 30] }, 'value': [
-      { 'id': 't2', 'name': '', 'value': 0.0, 'unit': ' m', 'itnm': 'Schneider.1#PLC.2#QSCSW' }
-    ],
-    'style': 'color:#F7F604;font-size:14px;z-index: 999;'
-  },
-
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4', 'from': 'm1p3', 'margin': { 'x': [0, -97], 'y': [0.2, 60] }},
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5', 'from': 'm1p4', 'margin': { 'x': [0, 60], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm1i2', 'name': '2#清水池', 'text': '2#清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 40], 'y': [0, -30] },
-    'width': 70, 'height': 100, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 10%;margin-top: 50%;z-index: 999;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  // 2#清水池指标显示
-  {
-    'type': 'text', 'id': 'm1t5', 'name': '2#清水池液位', 'point': [0, 0], 'from': 'm1p5', 'margin': { 'x': [0, 0], 'y': [0, 0] }, 'value': [
-      { 'id': 't2', 'name': '', 'value': 0.0, 'unit': ' m', 'itnm': 'Schneider.1#PLC.1#QSCSW' }
-    ],
-    'style': 'color:#F7F604;font-size:14px;z-index: 999;'
-  },
-
-  // 1#清水池基准点
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6', 'from': 'm1p3', 'margin': { 'x': [0, -60], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm1i3', 'name': '1#清水池', 'text': '1#清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, 6], 'y': [0, 0] },
-    'width': 70, 'height': 100, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 10%;margin-top: 50%;z-index: 999;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  // 1#清水池指标显示
-  {
-    'type': 'text', 'id': 'm1t4', 'name': '1#清水池液位', 'point': [0, 0], 'from': 'm1p3', 'margin': { 'x': [0, -40], 'y': [0, 30] }, 'value': [
-      { 'id': 't2', 'name': '', 'value': 0.0, 'unit': ' m', 'itnm': 'Siemens.1#PLC.QSCYW' }
-    ],
-    'style': 'color:#F7F604;font-size:14px;z-index: 999;'
-  },
-  // 自用水泵房基准点
-  { 'type': 'point', 'id': 'm1p7', 'name': '基准点7', 'x': [0, 110], 'y': [0.3, 0] },
-  { 'type': 'point', 'id': 'm1p8', 'name': '基准点8', 'from': 'm1p7', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
-
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p8', 'margin': { 'x': [0, 90], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p9', 'margin': { 'x': [0, 0], 'y': [0.2, 60] }},
-
-  { 'type': 'point', 'id': 'm1p11', 'name': '基准点11', 'from': 'm1p7', 'margin': { 'x': [0, 30], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p12', 'name': '基准点12', 'from': 'm1p11', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
-
-  { 'type': 'point', 'id': 'm1p13', 'name': '基准点13', 'from': 'm1p11', 'margin': { 'x': [0, 30], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p14', 'name': '基准点14', 'from': 'm1p13', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
-
-  {
-    'type': 'text', 'id': 'm1t3', 'name': '泵房压力和开关', 'point': [0, 0], 'from': 'm1p8', 'margin': { 'x': [0, 60], 'y': [0, -44] }, 'value': [
-      { 'id': 't2', 'name': '供水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'Schneider.4#PLC.GDYL', 'style': 'color:#F7F604;' },
-      { 'id': 't2', 'name': '压力开关：', 'value': '开', 'unit': '', 'itnm': 'Schneider.4#PLC.YLKG', 'boolean': [] }
-    ]
-  },
-
-  {
-    'type': 'rectangle', 'id': 'm7i1', 'name': '自用水泵房', 'text': '自用水泵房', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, 110], 'y': [0, -10] },
-    'width': 140, 'height': 210, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #847B6C;border-width: 5px;border-style: solid;',
-    'titleStyle': 'position: absolute;bottom: 2px;font-size: 14px;letter-spacing: 1px;margin-left: 10px;'
-  },
-
-  { 'type': 'image', 'id': 'm7i2', 'name': '1#水泵', 'text': '1#水泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -8], 'y': [0, 25] }, 'width': 28, 'height': 70, 'src': '水泵.png', 'titleStyle': 'position: absolute;top: 80px;font-size: 10px;' },
-
-  { 'type': 'image', 'id': 'm11i1', 'name': '2#水泵', 'text': '2#水泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p11', 'margin': { 'x': [0, -8], 'y': [0, 25] }, 'width': 28, 'height': 70, 'src': '水泵.png', 'titleStyle': 'position: absolute;top: -10px;font-size: 10px;' },
-
-  { 'type': 'image', 'id': 'm13i1', 'name': '消防泵', 'text': '消防泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p13', 'margin': { 'x': [0, -8], 'y': [0, 25] }, 'width': 28, 'height': 70, 'src': '消防泵.png', 'titleStyle': 'position: absolute;top: 80px;font-size: 10px;' },
-
-  // 配水池基准点
-  { 'type': 'point', 'id': 'm1p15', 'name': '基准点15', 'from': 'm1p2', 'margin': { 'x': [0, 0], 'y': [-0.3, 0] }},
-  { 'type': 'point', 'id': 'm1p16', 'name': '基准点16', 'from': 'm1p15', 'margin': { 'x': [0, 30], 'y': [0, 0] }},
-  // 配水池
-  {
-    'type': 'rectangle', 'id': 'm16i1', 'name': '配水池', 'text': '配水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p16', 'margin': { 'x': [0, 80], 'y': [0, -20] },
-    'width': 80, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 18px;letter-spacing: 2px;margin-left: 20%;margin-top: 50%;z-index: 999;',
-    'children': { 'style': 'height:99%;width:100%;background:#3A8DFF;position: absolute;bottom: 0px;' }
-  },
-  // 单阀滤池左管线基准点1----1#清水池右边基准点
-  { 'type': 'point', 'id': 'm1p17', 'name': '基准点17', 'from': 'm1p6', 'margin': { 'x': [0, 40], 'y': [0, -30] }},
-  { 'type': 'point', 'id': 'm1p18', 'name': '基准点18', 'from': 'm1p17', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
-
-  {
-    'type': 'rectangle', 'id': 'm18i1', 'name': '单阀滤池', 'text': '单阀滤池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p18', 'margin': { 'x': [0, 130], 'y': [0, -20] },
-    'width': 150, 'height': 80, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 18px;letter-spacing: 2px;margin-left: 30%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#618EAE;position: absolute;bottom: 0px;' }
-  },
-
-  // 单阀滤池上基准点1
-  { 'type': 'point', 'id': 'm1p19', 'name': '基准点19', 'from': 'm1p18', 'margin': { 'x': [0, 0], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p20', 'name': '基准点20', 'from': 'm1p19', 'margin': { 'x': [0, 0], 'y': [0, -80] }},
-  // 单阀滤池上基准点2
-  { 'type': 'point', 'id': 'm1p21', 'name': '基准点21', 'from': 'm1p18', 'margin': { 'x': [0, 30], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p22', 'name': '基准点22', 'from': 'm1p21', 'margin': { 'x': [0, 0], 'y': [0, -80] }},
-  // 单阀滤池上基准点3
-  { 'type': 'point', 'id': 'm1p23', 'name': '基准点23', 'from': 'm1p18', 'margin': { 'x': [0, 70], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p24', 'name': '基准点24', 'from': 'm1p23', 'margin': { 'x': [0, 0], 'y': [0, -80] }},
-  // 单阀滤池上基准点4
-  { 'type': 'point', 'id': 'm1p25', 'name': '基准点25', 'from': 'm1p18', 'margin': { 'x': [0, 100], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p26', 'name': '基准点26', 'from': 'm1p25', 'margin': { 'x': [0, 0], 'y': [0, -80] }},
-  { 'type': 'point', 'id': 'm1p27', 'name': '基准点27', 'from': 'm1p20', 'margin': { 'x': [0, 150], 'y': [0, 0] }},
-
-  // 单阀滤池下基准点1
-  { 'type': 'point', 'id': 'm1p28', 'name': '基准点28', 'from': 'm1p18', 'margin': { 'x': [0, 0], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p29', 'name': '基准点29', 'from': 'm1p28', 'margin': { 'x': [0, 0], 'y': [0, 30] }},
-  // 单阀滤池下基准点2
-  { 'type': 'point', 'id': 'm1p30', 'name': '基准点30', 'from': 'm1p18', 'margin': { 'x': [0, 50], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p31', 'name': '基准点31', 'from': 'm1p30', 'margin': { 'x': [0, 0], 'y': [0, 30] }},
-  // 单阀滤池下基准点3
-  { 'type': 'point', 'id': 'm1p32', 'name': '基准点32', 'from': 'm1p18', 'margin': { 'x': [0, 100], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p33', 'name': '基准点33', 'from': 'm1p32', 'margin': { 'x': [0, 0], 'y': [0, 30] }},
-  // 单阀滤池下基准点4
-  { 'type': 'point', 'id': 'm1p34', 'name': '基准点34', 'from': 'm1p18', 'margin': { 'x': [0, 150], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p35', 'name': '基准点35', 'from': 'm1p34', 'margin': { 'x': [0, 0], 'y': [0, 30] }},
-
-  // 单阀滤池左下角出-基准点1
-  { 'type': 'point', 'id': 'm1p36', 'name': '基准点36', 'from': 'm1p29', 'margin': { 'x': [0, 200], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm36p1', 'name': '基准点36-1', 'from': 'm1p36', 'margin': { 'x': [0, 160], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm36p2', 'name': '基准点36-2', 'from': 'm1p36', 'margin': { 'x': [0, 0], 'y': [0, 80] }},
-
-  // 配水池下基准点
-  { 'type': 'point', 'id': 'm1p37', 'name': '基准点37', 'from': 'm1p16', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm37p1', 'name': '基准点37-1', 'from': 'm1p37', 'margin': { 'x': [0, 0], 'y': [0, 200] }},
-  { 'type': 'point', 'id': 'm1p38', 'name': '基准点39-1', 'from': 'm1p37', 'margin': { 'x': [0, 100], 'y': [0, 200] }},
-  // V型滤池基准点
-  { 'type': 'point', 'id': 'm1p39', 'name': '基准点39', 'from': 'm1p37', 'margin': { 'x': [0, 90], 'y': [0, 320] }},
-
-  {
-    'type': 'rectangle', 'id': 'm39i1', 'name': 'V型滤池', 'text': 'V型滤池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p39', 'margin': { 'x': [0, 110], 'y': [0, -150] },
-    'width': 160, 'height': 200, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 18px;letter-spacing: 2px;margin-left: 30%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#56819F;position: absolute;bottom: 0px;' }
-  },
-
-  // V型滤池基准点-左下
-  { 'type': 'point', 'id': 'm1p40', 'name': '基准点40', 'from': 'm1p39', 'margin': { 'x': [0, 90], 'y': [0, 0] }},
-  // V型滤池基准点-右上1
-  { 'type': 'point', 'id': 'm1p41', 'name': '基准点41', 'from': 'm1p39', 'margin': { 'x': [0, 0], 'y': [0, -170] }},
-  { 'type': 'point', 'id': 'm41p1', 'name': '基准点41-1', 'from': 'm1p39', 'margin': { 'x': [0, -90], 'y': [0, -140] }},
-  { 'type': 'point', 'id': 'm41p2', 'name': '基准点41', 'from': 'm1p41', 'margin': { 'x': [0, -90], 'y': [0, 0] }},
-  // V型滤池基准点-右上2
-  { 'type': 'point', 'id': 'm1p42', 'name': '基准点42', 'from': 'm1p41', 'margin': { 'x': [0, 90], 'y': [0, 0] }},
-
-  // { 'type': 'point', 'id': 'm42p1', 'name': '基准点42-1', 'from': 'm1p41', 'margin': { 'x': [0, 0], 'y': [0, 0] }},
-
-  // 反冲洗泵房基准点
-  { 'type': 'point', 'id': 'm1p43', 'name': '基准点43', 'from': 'm1p16', 'margin': { 'x': [0, 110], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm7i1', 'name': '反冲洗泵房', 'text': '反冲洗泵房', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p43', 'margin': { 'x': [0, 134], 'y': [0, -20] },
-    'width': 160, 'height': 160, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #847B6C;border-width: 5px;border-style: solid;',
-    'titleStyle': 'position: absolute;top: 8px;right:10px;font-size: 18px;letter-spacing: 1px;'
-  },
-
-  // 反冲洗泵左上基准点1
-  { 'type': 'point', 'id': 'm1p44', 'name': '基准点44', 'from': 'm1p16', 'margin': { 'x': [0, 0], 'y': [0, -70] }},
-  { 'type': 'point', 'id': 'm44p1', 'name': '基准点44-1', 'from': 'm1p44', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p45', 'name': '基准点45', 'from': 'm1p44', 'margin': { 'x': [0, 120], 'y': [0, 20] }},
-  { 'type': 'point', 'id': 'm45p1', 'name': '基准点45-1', 'from': 'm1p45', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  { 'type': 'image', 'id': 'm45i2', 'name': '2-1#水泵', 'text': '', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p45', 'margin': { 'x': [0, -28], 'y': [0, -10] }, 'width': 40, 'height': 27, 'src': '状态罗茨鼓风机2.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
-
-  // 反冲洗泵左上基准点2
-  { 'type': 'point', 'id': 'm1p46', 'name': '基准点46', 'from': 'm1p44', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
-  { 'type': 'point', 'id': 'm46p1', 'name': '基准点46-1', 'from': 'm1p46', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p47', 'name': '基准点47', 'from': 'm1p46', 'margin': { 'x': [0, 120], 'y': [0, 20] }},
-  { 'type': 'image', 'id': 'm47i2', 'name': '2-1#水泵', 'text': '', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p47', 'margin': { 'x': [0, -28], 'y': [0, -10] }, 'width': 40, 'height': 27, 'src': '状态罗茨鼓风机2.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
-
-  // 反冲洗泵左上基准点2
-  { 'type': 'point', 'id': 'm1p48', 'name': '基准点48', 'from': 'm1p46', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
-  { 'type': 'point', 'id': 'm48p1', 'name': '基准点48', 'from': 'm1p48', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p49', 'name': '基准点49', 'from': 'm1p48', 'margin': { 'x': [0, 120], 'y': [0, 20] }},
-  { 'type': 'image', 'id': 'm49i2', 'name': '2-1#水泵', 'text': '', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p49', 'margin': { 'x': [0, -28], 'y': [0, -10] }, 'width': 40, 'height': 27, 'src': '状态罗茨鼓风机2.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
-
-  // 反冲洗泵左上基准点1-1
-  { 'type': 'point', 'id': 'm1p50', 'name': '基准点50', 'from': 'm1p45', 'margin': { 'x': [0, 40], 'y': [0, 200] }},
-  // 反冲洗泵左上基准点2-1
-  { 'type': 'point', 'id': 'm1p51', 'name': '基准点51', 'from': 'm1p47', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  // 反冲洗泵左上基准点3-1
-  { 'type': 'point', 'id': 'm1p52', 'name': '基准点52', 'from': 'm1p49', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  // 反冲洗泵鼓风机基准点1
-  { 'type': 'point', 'id': 'm1p53', 'name': '基准点53', 'from': 'm1p51', 'margin': { 'x': [0, 30], 'y': [0, -30] }},
-  { 'type': 'image', 'id': 'm53i2', 'name': '2-1#水泵', 'text': '', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p53', 'margin': { 'x': [0, -26], 'y': [0, -2] }, 'width': 28, 'height': 21, 'src': '鼓风机.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
-
-  { 'type': 'point', 'id': 'm1p54', 'name': '基准点54', 'from': 'm1p53', 'margin': { 'x': [0, 0], 'y': [0, 70] }},
-  { 'type': 'image', 'id': 'm54i2', 'name': '2-1#水泵', 'text': '', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p54', 'margin': { 'x': [0, -26], 'y': [0, -2] }, 'width': 28, 'height': 21, 'src': '鼓风机.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
-
-  // 反冲洗泵鼓风机基准点2
-  { 'type': 'point', 'id': 'm1p55', 'name': '基准点55', 'from': 'm1p53', 'margin': { 'x': [0, 26], 'y': [0, 160] }},
-  { 'type': 'point', 'id': 'm1p56', 'name': '基准点56', 'from': 'm1p54', 'margin': { 'x': [0, 26], 'y': [0, 0] }},
-
-  // 空压机 螺旋风机 基准点
-  { 'type': 'point', 'id': 'm1p57', 'name': '基准点57', 'from': 'm1p43', 'margin': { 'x': [0, 210], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm57i1', 'name': '空压机', 'text': '空压机', 'class': 'rectangle',
-    'point': [0, 0], 'from': 'm1p43', 'margin': { 'x': [0, 140], 'y': [0, -60] },
-    'width': 140, 'height': 120, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #847B6C;border-width: 5px;border-style: solid;',
-    'titleStyle': 'position: absolute;bottom: 2px;left:6px;font-size: 12px;letter-spacing: 1px;'
-  },
-  { 'type': 'image', 'id': 'm57i2', 'name': '空压机', 'text': '1#', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p57', 'margin': { 'x': [0, -60], 'y': [0, -40] }, 'width': 40, 'height': 24, 'src': '空压机.png', 'titleStyle': 'position: absolute;top: 10px;font-size: 10px;' },
-  { 'type': 'image', 'id': 'm57i3', 'name': '空压机', 'text': '2#', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p57', 'margin': { 'x': [0, -60], 'y': [0, 0] }, 'width': 40, 'height': 24, 'src': '空压机.png', 'titleStyle': 'position: absolute;top: 10px;font-size: 10px;' },
-  { 'type': 'image', 'id': 'm57i4', 'name': '螺杆风机', 'text': '螺杆风机', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0], 'from': 'm1p57', 'margin': { 'x': [0, 0], 'y': [0, -50] }, 'width': 60, 'height': 60, 'src': '螺杆风机.png', 'titleStyle': 'position: absolute;top: 94px;font-size: 10px;' },
-
-  // 单阀滤池左下角出-基准点2
-  { 'type': 'point', 'id': 'm1p58', 'name': '基准点58', 'from': 'm1p36', 'margin': { 'x': [0, 160], 'y': [0, 80] }},
-  { 'type': 'point', 'id': 'm58p1', 'name': '基准点58', 'from': 'm1p58', 'margin': { 'x': [0, 160], 'y': [0, 0] }},
-  // 1#反应沉淀池下-基准点
-  { 'type': 'point', 'id': 'm1p59', 'name': '基准点59-2#反应沉淀池-下', 'from': 'm1p36', 'margin': { 'x': [0, 0], 'y': [0, -20] }},
-  {
-    'type': 'rectangle', 'id': 'm59i1', 'name': '2#反应沉淀池', 'text': '2#反应沉淀池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p59', 'margin': { 'x': [0, 170], 'y': [0, 0] },
-    'width': 180, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 18px;letter-spacing: 2px;margin-left: 30%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#56819F;position: absolute;bottom: 0px;' }
-  },
-  // 1#反应沉淀池上-基准点1
-  { 'type': 'point', 'id': 'm1p60', 'name': '基准点60-2#反应沉淀池-上1', 'from': 'm1p59', 'margin': { 'x': [0, 60], 'y': [0, -100] }},
-  { 'type': 'point', 'id': 'm1p61', 'name': '基准点61-2#反应沉淀池-上2', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 10] }},
-  { 'type': 'point', 'id': 'm1p62', 'name': '基准点62-2#反应沉淀池-上3', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 20] }},
-
-  // 原水池上基准点
-  { 'type': 'point', 'id': 'm1p63', 'name': '基准点63', 'from': 'm1p60', 'margin': { 'x': [0, 220], 'y': [0, 80] }},
-
-  { 'type': 'text', 'id': 'p63t1', 'text': '2#沉淀池', 'from': 'm1p63', 'point': [0, 0], 'margin': { 'x': [0, -90], 'y': [0, -70] }},
-  { 'type': 'text', 'id': 'p63t2', 'text': '进水流量', 'from': 'm1p63', 'point': [0, 0], 'margin': { 'x': [0, -86], 'y': [0, -50] }},
-  {
-    'type': 'text', 'id': 'p63t3', 'name': '2#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p63', 'margin': { 'x': [0, -60], 'y': [0, -30] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '1', 'unit': 'm³/h', 'itnm': 'Siemens.1#PLC.1QGSLL' }
-    ],
-    'style': 'color:#F7F604;font-size:16px;z-index: 999;'
-  },
-  { 'type': 'point', 'id': 'm63p1', 'name': '基准点63-1', 'from': 'm1p60', 'margin': { 'x': [0, 220], 'y': [0, 0] }},
-  // 加药间基准点-左1
-  { 'type': 'point', 'id': 'm1p64', 'name': '基准点64', 'from': 'm1p60', 'margin': { 'x': [0, 30], 'y': [0, 320] }},
-  { 'type': 'point', 'id': 'm64p2', 'name': '基准点64-1', 'from': 'm1p60', 'margin': { 'x': [0, 200], 'y': [0, 20] }},
-  // 加药间基准点-左1-2
-  { 'type': 'point', 'id': 'm64p1', 'name': '基准点64-1', 'from': 'm1p64', 'margin': { 'x': [0, 60], 'y': [0, 0] }},
-  // 加药间基准点-左2
-  { 'type': 'point', 'id': 'm1p65', 'name': '基准点65', 'from': 'm1p61', 'margin': { 'x': [0, 180], 'y': [0, 450] }},
-  // { 'type': 'point', 'id': 'm65p2', 'name': '基准点65-2', 'from': 'm1p61', 'margin': { 'x': [0, 180], 'y': [0, 20] }},
-  // 加药间基准点-左2
-  { 'type': 'point', 'id': 'm65p1', 'name': '基准点65-1', 'from': 'm1p65', 'margin': { 'x': [0, 100], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm65i2', 'name': '加药间', 'text': '加药间', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm64p1', 'margin': { 'x': [0, 60], 'y': [0, 40] },
-    'width': 40, 'height': 120, 'style': 'background:#ffffff;border-color: #505050;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 20%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#969696;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm65i2', 'name': '配电房', 'text': '配电房', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm64p1', 'margin': { 'x': [0, 60], 'y': [0, -75] },
-    'width': 40, 'height': 120, 'style': 'background:#ffffff;border-color:  #505050;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 20%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#969696;position: absolute;bottom: 0px;' }
-  },
-
-  // 2#反应沉淀池上-基准点1
-  { 'type': 'point', 'id': 'm1p66', 'name': '基准点66-1#反应沉淀池-上', 'from': 'm1p42', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
-  // 2#反应沉淀池上-基准点2
-  { 'type': 'point', 'id': 'm1p67', 'name': '基准点67-1#反应沉淀池-上', 'from': 'm1p66', 'margin': { 'x': [0, 150], 'y': [0, 0] }},
-  {
-    'type': 'rectangle', 'id': 'm67i1', 'name': '1#反应沉淀池', 'text': '1#反应沉淀池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p67', 'margin': { 'x': [0, 60], 'y': [0, 80] },
-    'width': 160, 'height': 200, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 18px;letter-spacing: 2px;margin-left: 30%;margin-top: 24%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#56819F;position: absolute;bottom: 0px;' }
-  },
-
-  // 原水池
-  {
-    'type': 'rectangle', 'id': 'm69i1', 'name': '原水池', 'text': '原水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p63', 'margin': { 'x': [0, 30], 'y': [0, 160] },
-    'width': 90, 'height': 320, 'style': 'background:#ffffff;border-color: #7BB2CD;    border-width: 6px;border-style: solid;',
-    'titleStyle': 'position: absolute;font-size: 14px;letter-spacing: 1px;margin-left: 30%;margin-top: 60%;z-index: 999;',
-    'children': { 'style': 'height:100%;width:100%;background:#56819F;position: absolute;bottom: 0px;' }
-  },
-
-  { 'type': 'point', 'id': 'p1p1', 'name': '原水池', 'from': 'm1p63', 'margin': { 'x': [0, 10], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'p1p2', 'name': '原水池', 'from': 'p1p1', 'margin': { 'x': [0, 0], 'y': [0, 360] }},
-  { 'type': 'text', 'id': 't1p2', 'text': '进水', 'from': 'p1p2', 'point': [1, 0.5], 'margin': { 'x': [0, 20], 'y': [0, 20] }},
-  { 'type': 'point', 'id': 'p1p3', 'name': '原水池', 'from': 'm1p63', 'margin': { 'x': [0, -10], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'p1p4', 'name': '原水池-左下', 'from': 'p1p3', 'margin': { 'x': [0, 0], 'y': [0, 380] }},
-  { 'type': 'point', 'id': 'p1p5', 'name': '1#反应沉淀池-下', 'from': 'p1p4', 'margin': { 'x': [0, -200], 'y': [0, 0] }},
-  {
-    'type': 'text', 'id': 't1p5', 'name': '1#沉淀池进水流量', 'point': [0, 0], 'from': 'p1p5', 'margin': { 'x': [0, 100], 'y': [0, 0] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm³/h', 'itnm': 'Siemens.1#PLC.2QGSLL' }
-    ],
-    'style': 'color:#F7F604;font-size:16px;z-index: 999;'
-  },
-
-  { 'type': 'point', 'id': 'p1p6', 'name': '2#反应沉淀池-右下2', 'from': 'p1p5', 'margin': { 'x': [0, 0], 'y': [0, -100] }},
-  { 'type': 'point', 'id': 'p1p7', 'name': '2#反应沉淀池-右下1', 'from': 'p1p5', 'margin': { 'x': [0, 0], 'y': [0, -140] }},
-  { 'type': 'point', 'id': 'p1p8', 'name': '2#反应沉淀池-下', 'from': 'p1p6', 'margin': { 'x': [0, 110], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'p1p9', 'name': '2#反应沉淀池-下', 'from': 'p1p7', 'margin': { 'x': [0, 110], 'y': [0, 0] }},
-
-  { 'type': 'point', 'id': 'p1p10', 'name': '加药间-左', 'from': 'p1p9', 'margin': { 'x': [0, 0], 'y': [0, -320] }},
-  { 'type': 'point', 'id': 'p1p11', 'name': '加药间-左', 'from': 'p1p9', 'margin': { 'x': [0, 10], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'p1p12', 'name': '加药间-左', 'from': 'p1p11', 'margin': { 'x': [0, 10], 'y': [0, -320] }},
-
-  {
-    'type': 'text', 'id': 'p69t6', 'name': '原水池', 'point': [0, 0], 'from': 'p1p3', 'margin': { 'x': [0, 10], 'y': [0, 100] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '0', 'unit': 'm', 'itnm': 'Siemens.1#PLC.YSCYW' }
-    ],
-    'style': 'color:#F7F604;font-size:14px;z-index: 999;'
-  },
-
-  // 画线
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p2', 'to': 'm1p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p3', 'to': 'm3p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a3', 'from': 'm1p5', 'to': 'm1p4', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  // { 'type': 'arrow', 'id': 'a4', 'from': 'm1p6', 'to': 'm1p3', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a5', 'from': 'm1p8', 'to': 'm1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a6', 'from': 'm1p9', 'to': 'm1p8', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a7', 'from': 'm1p4', 'to': 'm1p9', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  // { 'type': 'arrow', 'id': 'a8', 'from': 'm1p4', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a9', 'from': 'm1p12', 'to': 'm1p11', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a10', 'from': 'm1p14', 'to': 'm1p13', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a11', 'from': 'm1p15', 'to': 'm1p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a12', 'from': 'm1p16', 'to': 'm1p15', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a13', 'from': 'm1p18', 'to': 'm1p17', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a14', 'from': 'm1p20', 'to': 'm1p19', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a15', 'from': 'm1p22', 'to': 'm1p21', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a16', 'from': 'm1p24', 'to': 'm1p23', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a17', 'from': 'm1p26', 'to': 'm1p25', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a18', 'from': 'm1p27', 'to': 'm1p20', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a19', 'from': 'm1p29', 'to': 'm1p28', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a20', 'from': 'm1p31', 'to': 'm1p30', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a21', 'from': 'm1p33', 'to': 'm1p32', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a22', 'from': 'm1p35', 'to': 'm1p34', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a23', 'from': 'm1p36', 'to': 'm1p29', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a24', 'from': 'm1p36', 'to': 'm1p27', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a25', 'from': 'm37p1', 'to': 'm1p37', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a26', 'from': 'm1p38', 'to': 'm37p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a28', 'from': 'm1p41', 'to': 'm41p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a29', 'from': 'm44p1', 'to': 'm1p44', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a29', 'from': 'm1p45', 'to': 'm44p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a30', 'from': 'm46p1', 'to': 'm1p46', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a30', 'from': 'm1p47', 'to': 'm46p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a31', 'from': 'm48p1', 'to': 'm1p48', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a31', 'from': 'm1p49', 'to': 'm48p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a32', 'from': 'm45p1', 'to': 'm1p45', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a32', 'from': 'm1p50', 'to': 'm45p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a33', 'from': 'm1p51', 'to': 'm1p47', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a34', 'from': 'm1p52', 'to': 'm1p49', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a35', 'from': 'm1p53', 'to': 'm1p55', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a36', 'from': 'm1p54', 'to': 'm1p56', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a40', 'from': 'm1p60', 'to': 'm1p59', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a41', 'from': 'm1p63', 'to': 'm63p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a41', 'from': 'm63p1', 'to': 'm1p60', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a44', 'from': 'm1p67', 'to': 'm1p66', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a52', 'from': 'p1p2', 'to': 'p1p1', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a53', 'from': 'p1p3', 'to': 'p1p4', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a54', 'from': 'p1p4', 'to': 'p1p5', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a55', 'from': 'p1p8', 'to': 'p1p6', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a56', 'from': 'p1p9', 'to': 'p1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a56', 'from': 'p1p9', 'to': 'p1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a56', 'from': 'p1p11', 'to': 'p1p12', 'style': 'strokeColor=#33f3fe;', 'flow': true }
-]

src/views/dataBoard/smartTech/config/craftConfig/ylCraftConfig.js

@@ -1,115 +0,0 @@
-/*
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2022-11-09 09:31:25
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-08-18 10:04:46
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\ylCraftConfig.js
- * @Description: 银鹿水厂
- */
-
-export const allConfig = [
-  // 初始基准点
-  { 'type': 'point', 'id': 'm1p1', 'name': '基准点1', 'x': [0, 60], 'y': [0.15, 50] },
-  { 'type': 'text', 'id': 'p1t1', 'text': '原水', 'from': 'm1p1', 'point': [1, 1], 'margin': { 'x': [0, 30], 'y': [0, -10] }},
-  // 进水指标
-  {
-    'type': 'text', 'id': 'm1t3', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 60], 'y': [0, 100] }, 'value': [
-      { 'id': 't6', 'name': '原水出水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_YinLu_Chu_YSP', 'style': 'color:#F7F604;' },
-      { 'id': 't7', 'name': '进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_YinLu_Jin_P', 'style': 'color:#F7F604;' },
-      { 'id': 't8', 'name': '进水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_YinLu_Jin_YSTFT', 'style': 'color:#F7F604;' },
-      { 'id': 't9', 'name': '进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_YinLu_Jin_YSFT', 'style': 'color:#F7F604;' },
-      { 'id': 't10', 'name': '进水原水液位计：', 'value': 0.0, 'unit': 'm', 'itnm': 'SCADA_YinLu_Jin_YSYW', 'style': 'color:#F7F604;' }
-    ]
-  },
-  // 基准点2 以为基础点1为基准，X平移向右0.1倍，y向下平移0.1倍向上平移40
-  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.1, 0], 'y': [0.1, -40] }},
-  // 基准点3 以为基础点2为基准，X平移向左40px，y向下平移30px
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3-溶液搅拌器基准点', 'from': 'm1p2', 'margin': { 'x': [0, -38], 'y': [0, 30] }},
-  // 溶液搅拌器
-  { 'type': 'image', 'id': 'm3i1', 'name': '溶液搅拌器', 'text': '溶液搅拌器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, 20], 'y': [0, -10] }, 'width': 90, 'height': 90, 'src': '溶液搅拌器.png' },
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4-溶液搅拌器出水基准点', 'from': 'm1p3', 'margin': { 'x': [0, 90], 'y': [0, 15] }},
-
-  { 'type': 'image', 'id': 'm4i2', 'name': '计量泵', 'text': '计量泵', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p4', 'margin': { 'x': [0, 40], 'y': [0, 0] }, 'width': 50, 'height': 50, 'src': '计量泵.png' },
-
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5-溶液搅拌器出水基准点', 'from': 'm1p4', 'margin': { 'x': [0, 100], 'y': [0, 180] }},
-
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6', 'from': 'm1p5', 'margin': { 'x': [0, 340], 'y': [0, 0] }},
-
-  {
-    'type': 'rectangle', 'id': 'm6i2', 'name': '全自动净水器', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 320], 'y': [0, 0] },
-    'width': 310, 'height': 220, 'style': 'background-color: rgba(0,0,255,0.1);border-color: #7BB2CD;border-width: 2px;border-style: dashed;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 100px;'
-  },
-
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '循环池', 'text': '循环池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 110], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:50%;width:100%;background:#1185B5;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i3', 'name': '沉淀池', 'text': '沉淀池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 210], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:69%;width:100%;background:#127A83;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i5', 'name': '滤池', 'text': '滤池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 310], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 30px;',
-    'children': { 'style': 'height:76%;width:100%;background:#6552C6;position: absolute;bottom: 0px;' }
-  },
-  {
-    'type': 'rectangle', 'id': 'm6i6', 'name': '清水池', 'text': '清水池', 'class': 'rectangle',
-    'point': [1, 0.5], 'from': 'm1p5', 'margin': { 'x': [0, 480], 'y': [0, 0] },
-    'width': 90, 'height': 120, 'style': 'background:#ffffff;border-color: #7BB2CD;border-width: 10px;border-style: double;',
-    'titleStyle': 'position: absolute;top: -35px;font-size: 18px;letter-spacing: 2px;margin-left: 22px;',
-    'children': { 'style': 'height:90%;width:100%;background:#3A8DFF;position: absolute;bottom: 0px;' }
-  },
-
-  { 'type': 'point', 'id': 'm1p7', 'name': '基准点7-二氧化氯发生器', 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [-0.5, 0] }},
-
-  { 'type': 'image', 'id': 'm7i6', 'name': '二氧化氯发生器', 'text': '二氧化氯发生器', 'class': 'onWhiteText', 'titleStyle': 'font-size:14px;', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -50], 'y': [0, 30] }, 'width': 120, 'height': 120, 'src': '二氧化氯发生器.png' },
-
-  { 'type': 'point', 'id': 'm1p8', 'name': '基准点8', 'from': 'm1p7', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p6', 'margin': { 'x': [0, 20], 'y': [0, 0] }},
-  // 进水清水池
-  {
-    'type': 'text', 'id': 'm9t2', 'name': '进水清水池', 'point': [0, 0], 'from': 'm1p9', 'margin': { 'x': [0, -140], 'y': [0, 74] }, 'value': [
-      { 'id': 't21', 'name': '进水清水池进水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_YinLu_Jin_QSTFT', 'style': 'color:#F7F604;' },
-      { 'id': 't22', 'name': '进水清水池进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_YinLu_Jin_QSFT', 'style': 'color:#F7F604;' }
-    ]
-  },
-  // 清水池液位
-  {
-    'type': 'text', 'id': 'p9t1', 'name': '清水池液位', 'point': [0, 0], 'from': 'm1p9', 'margin': { 'x': [0, 150], 'y': [0, 10] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm', 'itnm': 'SCADA_YinLu_Chu_QSYW' }
-    ],
-    'style': 'color:#F7F604;font-size:16px;z-index: 999;'
-  },
-
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p9', 'margin': { 'x': [0.2, 0], 'y': [0, 0] }},
-  // 出水指标
-  {
-    'type': 'text', 'id': 'm10t2', 'name': '出水指标', 'point': [0, 0], 'from': 'm1p10', 'margin': { 'x': [0, 20], 'y': [0, 84] }, 'value': [
-      { 'id': 't4', 'name': '清水池出水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_YinLu_Chu_QSP', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '清水池出水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_YinLu_Chu_QSFT', 'style': 'color:#F7F604;' },
-      { 'id': 't20', 'name': '清水池出水总流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_YinLu_Chu_QSTFT', 'style': 'color:#F7F604;' }
-    ]
-  },
-  { 'type': 'text', 'id': 'p1t1', 'text': '出厂水', 'from': 'm1p10', 'point': [1, 0.5], 'margin': { 'x': [0, 40], 'y': [0, 0] }},
-
-  // 划线
-  { 'type': 'arrow', 'id': 'a1', 'from': 'm1p1', 'to': 'm1p2', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a2', 'from': 'm1p4', 'to': 'm1p5', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a3', 'from': 'm1p5', 'to': 'm1p6', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a4', 'from': 'm1p6', 'to': 'm1p7', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-
-  { 'type': 'arrow', 'id': 'a5', 'from': 'm1p7', 'to': 'm1p8', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a6', 'from': 'm1p8', 'to': 'm1p9', 'style': 'strokeColor=#33f3fe;', 'flow': true },
-  { 'type': 'arrow', 'id': 'a7', 'from': 'm1p9', 'to': 'm1p10', 'style': 'strokeColor=#33f3fe;', 'flow': true }
-]

src/views/dataBoard/smartTech/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="processInspect-page">
     <div class="tree-container">
-      <searchTree :data="searchTreeData" @nodeClick="nodeClick" placeholder='请输入工艺图名称'/>
+      <searchTree ref="tree" :data="searchTreeData" nodekey='sewageId' @nodeClick="nodeClick" placeholder='请输入工艺图名称'/>
     </div>
     <div 
       class="data-box" 
@@ -38,17 +38,16 @@
                   <i class="el-icon-picture-outline" style="color:white;"></i>
                 </div>
             </div>
-            <techPic ref="tech"/>
+            <techPic ref="tech" :sewageId='sewageId'/>
         </div>
         <div class="right">
-          <div class="sider-title">{{ `${sewageName}水质指标参数` }}</div>
+          <div class="sider-title">{{ `${sewageName}指标参数` }}</div>
           <div class="sider-content">
             <template v-if="siderData.length > 0">
               <div class="sider-content-item" v-for="(i, k) of siderData" :key="`sd${k}`">
-                <div class="item-header">
+                <!-- <div class="item-header">
                   <span>{{ i.title }}</span><br>
-                  <span>{{ i.time }}</span>
-                </div>
+                </div> -->
                 <template v-if="i.data.length > 0">
                   <div class="item-content" v-for="(d, m) of i.data" :key="`data${m}`" @click="showChartDialog(i, d)">
                     <div :title="d.label">{{ d.label }}:&nbsp;&nbsp;</div>
@@ -56,6 +55,9 @@
                       <span :class="{ 'warn': !!d.warn }" style="font-family:'DS-Digital';">{{ d.value }}</span>
                       <span :class="{ 'warn': !!d.warn }">{{ d.unit }}</span>
                     </div>
+                    <div>
+                        <span>{{ i.time }}</span>
+                    </div>
                   </div>
                 </template>
                 <div v-else style="padding:5px">
@@ -70,22 +72,33 @@
         </div>
       </div>
     </div>
-    <index-chart ref="chart" />
+    <el-dialog
+      :visible.sync="dialogVisible"
+      top='15vh'
+      width="900px"
+      title="指标"
+    >
+      <indexChart 
+        ref="chart" 
+        v-if="dialogVisible" 
+        :indexList='indexList'
+        :sewageId='sewageId'
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getWarningData } from '@/views/dataBoard/api/smartSewage.ts'
+import { getWarningData, getSewageIndexData } from '@/views/dataBoard/api/smartSewage.ts'
 import { getRemoteFileUrl, getRemoteFile } from '@/api/ftp.js'
 import { techPic, searchTree, indexChart } from "./components/index.ts";
 import { config } from './config/craftConfig.js'
 
-
 export default {
   components: { techPic, searchTree, indexChart },
   data() {
     return {
-      sewageName: '污水厂',
+      sewageName: '',
       indexData: [
         { title: '今日污水处理总量', num: '0', unit: '万吨', class: 'bg-blue', prop: 'todaySewageHandleVal' },
         { title: '指标总数', num: '0', unit: '个', class: 'bg-blue', prop: 'indexTotal' },
@@ -97,19 +110,74 @@ export default {
       routerName: '',
       picPath: '',
       //
-      plcData: []
+      plcData: [],
+      sewageId: '',
+      dialogVisible: false,
+      indexList: []
     }
   },
   watch: {
   },
   methods: {
+    showChartDialog(sewage, data) {
+      const currDate = this.$moment().format('YYYY-MM-DD')
+      const params = { 
+        stationIds: this.sewageId.toString(), 
+        startTime: `${currDate} 00:00:00`, 
+        endTime: `${currDate} 23:59:59`,
+        deviceIds: data.deviceId.toString(),
+        isHistory: 1
+      } 
+      this.dialogVisible = true
+      getWarningData(params).then(res => {
+        if(res && res.code ==1) {
+          let optionData = res.result
+            .find(({ id }) => id == this.sewageId)
+            .deviceList
+            .find(({ id }) => id == data.deviceId)
+            .indexList
+            .sort((p, n) => new Date(p.scadaTime) - new Date(n.scadaTime))
+            .map(({ scadaTime, itVal }) => ([scadaTime, parseFloat(itVal)]))
+          this.$refs.chart.updateChart(optionData)
+        } else {
+          this.$message.error('获取指标数据失败')
+        }
+      })
+    },
     nodeClick(row) {
+      const { label } = this.searchTreeData.find(({ id }) => id === row.id)
+      this.routerName = `${label}工艺图`
+      this.sewageName = `${label}指标参数`
+      //
       this.$refs.tech.setSewage(row.id)
+      this.getIndexData(row.sewageId)
     },
+    getIndexData(id) {
+      this.sewageId = id
+      getSewageIndexData().then(res => {
+        let sewageData = res.result.find(s => s.id === this.sewageId)
+        const { name, indexRealValList } = sewageData
+        this.indexData[1].num = indexRealValList.length
+        //
+        this.siderData = indexRealValList
+        .filter(({ indexName }) => !indexName.includes('调节池液位'))
+        .map(({ indexName, currentIndexVal, scadaTime, deviceName, deviceId }) => {
+          let value = currentIndexVal == '1' ? '运行' : '停止'
+          let warn = currentIndexVal !== '1'
+          const item = { label: indexName, value, unit: '', warn, deviceId }
+          this.indexList.push({ deviceId, indexName })
+          return { title: deviceName, time: scadaTime, data: [item] }
+        })
+      })
+    }
   },
   mounted() {
-    this.searchTreeData = config.map(i => {
-      return { label: i.name, id: i.id }
+    this.searchTreeData = config.map(i => ({ label: i.name, id: i.id, sewageId: i.sewageId }))
+    const { id, sewageId } = this.searchTreeData[0]
+    this.nodeClick({ id, sewageId })
+    //
+    this.$nextTick(_ => {
+      this.$refs.tree.setCheckedNodes([sewageId])
     })
   },
   destroyed () {
@@ -127,6 +195,33 @@ $size1920_40px: 40px;
 $size1920_20px: 20px;
 $size1920_10px: 10px;
 $size1920_5px: 5px;
+/deep/.el-dialog {
+  background: transparent;
+  background-image: url(~@/views/dataBoard/img/dialogbak.png);
+  background-size: 100% 100%;
+  .el-dialog__header {
+    background: unset;
+    display: flex;
+    align-items: center;
+    line-height: 30px;
+    height: 30px;
+    border: none;
+    padding-left: 30px;
+    .el-dialog__title {
+      color: white;
+      font-size: 13px;
+    }
+    .el-dialog__headerbtn {
+      top: 5px;
+      .el-dialog__close {
+        color: white;
+      } 
+    }
+  }
+  .el-el-dialog__body {
+    border: none;
+  }
+}
 
 /deep/.data-box {
   position: absolute;
@@ -135,12 +230,12 @@ $size1920_5px: 5px;
   z-index: 99;
   .data-item {
     .unit,.title {
-      font-size: 0.07rem;
+      font-size: 15px;
       font-family: 'sans-serif';
     }
     .value {
       font-family: 'DS-Digital';
-      font-size: 0.07rem;
+      font-size: 15px;
     }
   }
 }
@@ -182,7 +277,7 @@ $size1920_5px: 5px;
     .content-router {
       align-items: center;
       height: $size1920_40px;
-      line-height: 0.2rem;
+      line-height: 45px;
       display: flex;
       flex: 0.5;
       justify-content: space-between;
@@ -227,18 +322,18 @@ $size1920_5px: 5px;
         width: $siderWidth;
         padding-left: $size1920_20px;
         .sider-title {
-          height: 0.17rem;
           border: 1px solid #1d395c;
           border-bottom: none;
           background: rgb(7, 35, 59);
           color: #38b6c2;
           text-align: center;
-          font-size: 0.08rem;
+          font-size: 16px;
           font-weight: bold;
-          line-height: 0.17rem;
+          height: 40px;
+          line-height: 40px;
         }
         .sider-content {
-          height: calc(100% - 0.17rem);
+          height: calc(100% - 15px);
           border: 1px solid rgb(29, 57, 92);
           overflow-y: scroll;
           &-item {
@@ -248,31 +343,40 @@ $size1920_5px: 5px;
               text-align: center;
               span:nth-child(1) {
                 color: #38b6c2;
-                font-size: 0.08rem;
+                font-size: 16px;
                 font-weight: bold;
               }
               span:nth-child(2) {
                 color: #ddd;
-                font-size: 0.07rem;
+                font-size: 15px;
               }
             }
             .item-content {
               cursor: pointer;
-              letter-spacing: 1.2px;
               display: flex;
+              justify-content: start;
               margin-bottom: $size1920_5px;
-              font-size: 0.07rem;
+              font-size: 15px;
               div:nth-child(1) {
+                letter-spacing: 1.2px;
                 color: #ccc;
-                width: 0.65rem;
-                text-align: right;
+                width: 210px;
+                text-align: left;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
               }
               div:nth-child(2) {
+                text-align: left;
+                width: 60px;
                 color: #5991ff;
               }
+              div:nth-child(3) {
+                width: 120px;
+                text-align: right;
+                color: #6d9ac0;
+                font-size: 12px;
+              }
               .warn {
                 color: red;
               }

src/views/dataBoard/smartVideo/index.vue

@@ -214,7 +214,7 @@ export default {
     },
     // 视频点位配置信息
     getVideoConfigList() {
-      let deptId = this.$store.state.comprehensivePage.currDept || this.$store.state.user.departmentId
+      let deptId = 54
       getVideoConfigList({ deptId }).then((res) => {
         const { code, result } = res
         if (code === 1) {

src/views/reportBus/api/index.ts

@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+
+// 污水业务模块接口
+
+// 运行维护报表
+export function getOperationRep(params) {
+    return request({
+        url: '/monitor/tfywpndevicerunw/page',
+        method: 'get',
+        params
+    })
+}
+
+export function addOperationRep(data) {
+    return request({
+        url: '/monitor/tfywpndevicerunw',
+        method: 'post',
+        data
+    })
+}
+
+export function updateOperationRep(data) {
+    return request({
+        url: '/monitor/tfywpndevicerunw',
+        method: 'put',
+        data
+    })
+}
+
+
+
+// 进水流量记录表
+export function getWaterflowRep(params) {
+    return request({
+        url: '/monitor/tfywpninoutwaterw/page',
+        method: 'get',
+        params
+    })
+}
+
+export function deletWaterflowRep(id) {
+    return request({
+        url: `/monitor/tfywpninoutwaterw/${id}`,
+        method: 'delete'
+    })
+}
+
+export function addWaterflowRep(data) {
+    return request({
+        url: '/monitor/tfywpninoutwaterw',
+        method: 'post',
+        data
+    })
+}
+
+export function updateWaterflowRep(data) {
+    return request({
+        url: '/monitor/tfywpninoutwaterw',
+        method: 'put',
+        data
+    })
+}
+
+// 运行维护报表
+export function getWaterDosingRep(params) {
+    return request({
+        url: '/monitor/tfywpndrugaddw/page',
+        method: 'get',
+        params
+    })
+}
+
+export function addWaterDosingRep(data) {
+    return request({
+        url: '/monitor/tfywpndrugaddw',
+        method: 'post',
+        data
+    })
+}
+
+export function updateWaterDosingRep(data) {
+    return request({
+        url: '/monitor/tfywpndrugaddw',
+        method: 'put',
+        data
+    })
+}
+
+export function deletWaterDosingRep(id) {
+    return request({
+        url: `/monitor/tfywpndrugaddw/${id}`,
+        method: 'delete'
+    })
+}

src/views/reportBus/components/exportBtn.vue

@@ -0,0 +1,168 @@
+<template>
+    <el-button size="mini" style="background: #E1EBFC" @click="setExport2Excel">
+    <svg-icon icon-class="export" />
+    导出
+    </el-button>
+</template>
+
+<script>
+import XLSX2 from 'xlsx'
+import XLSX from 'xlsx-style'
+export default {
+  props: ['tableId', 'name'],
+  data() {
+    return {
+      todayTimeString: new Date().getTime()
+    }
+  },
+  methods: {
+    // 导出表格成excel
+    setExport2Excel() {
+      /* generate workbook object from table */
+      var wb = XLSX2.utils.table_to_sheet(document.querySelector(`#${this.tableId}`), { raw: true }) // mytable为表格的id名
+
+      // if (!wb['!merges']) {
+      //   this.$message.warning('无法导出：报表无数据')
+      //   return
+      // }
+      var isDate = (str) => {
+        var v = (str + '').split(' ')
+        if (v.length == 1) {
+          v = v[0].split('-')
+          if (v.length == 3) {
+            var [year, month, day] = v.map(e => +e)
+            if (year >= 1997 && month > 0 && month < 13 && day > 0 && day < 32) return true
+          }
+        } else if (v.length == 2) {
+          var v1 = v[0].split('-')
+          var v2 = v[1].split(':')
+          if (v1.length == 3 && v2.length == 3) {
+            var [year, month, day] = v1.map(e => +e)
+            var [hour, mins, sen] = v2.map(e => +e)
+            if (year >= 1997 && month > 0 && month < 13 && day > 0 && day < 32 &&
+              hour >= 0 && hour <= 24 && mins >= 0 && mins <= 60 && sen >= 0 && sen <= 60) return true
+          }
+        }
+        return false
+      }
+
+      for (var i = 0; i < 50; i++) {
+        wb['!cols'][i] = { wpx: 220 }
+      }
+      // 样式的文档地址
+      // https://www.npmjs.com/package/xlsx-style
+      var cells = {
+        '电量': row => row.s.numFmt = '0%' // (row.v *= 100, )
+      }
+      var cacheCells = {}
+      for (const key in wb) {
+        if (key.indexOf('!') > -1) continue
+        if (['', '操作', '详情', '编辑详情'].indexOf(wb[key].v) > -1) {
+          delete wb[key]
+          continue
+        } else {
+          var cellW = key[0]
+          var rowW = key[1]
+          wb[key].s = {
+            font: {
+              // 字体设置
+              sz: 13,
+              bold: false,
+              color: {
+                rgb: '000000' // 十六进制，不带#
+              }
+            },
+            alignment: {
+              // 文字居中
+              horizontal: 'center',
+              vertical: 'center',
+              wrap_text: true
+            },
+            border: {
+              // 设置边框
+              top: { style: 'thin' },
+              bottom: { style: 'thin' },
+              left: { style: 'thin' },
+              right: { style: 'thin' }
+            }
+          }
+
+          if (rowW == 1 && cells.hasOwnProperty(wb[key].v)) {
+            cacheCells[cellW] = cells[wb[key].v]
+          } else if (cacheCells.hasOwnProperty(cellW)) {
+            cacheCells[cellW](wb[key])
+          }
+
+          if (wb[key].z == 'm/d/yy') {
+            delete wb[key].z
+            wb[key].s.numFmt = 'yyyy-m-dd h:mm:ss'
+            wb[key].v -= 0.0004976851
+          }
+        }
+      }
+
+      var data = wb['!merges'] ? this.addRangeBorder(wb['!merges'], wb) : wb // 合并项添加边框
+      var filedata = this.sheet2blob(data)
+      this.openDownloadDialog(filedata, `${this.name}.xlsx`)
+    },
+    // 为合并项添加边框
+    addRangeBorder(range, ws) {
+      const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+      range.forEach(item => {
+        const startColNumber = Number(item.s.r)
+        const endColNumber = Number(item.e.r)
+        const startRowNumber = Number(item.s.c)
+        const endRowNumber = Number(item.e.c)
+        const test = ws[arr[startRowNumber] + (startColNumber + 1)]
+        for (let col = startColNumber; col <= endColNumber; col++) {
+          for (let row = startRowNumber; row <= endRowNumber; row++) {
+            ws[arr[row] + (col + 1)] = test
+          }
+        }
+      })
+      return ws
+    },
+    // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
+    sheet2blob(sheet, sheetName) {
+      sheetName = sheetName || 'sheet1'
+      var workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      }
+      workbook.Sheets[sheetName] = sheet // 生成excel的配置项
+
+      var wopts = {
+        bookType: 'xlsx', // 要生成的文件类型
+        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+        type: 'binary'
+      }
+      var wbout = XLSX.write(workbook, wopts)
+      var blob = new Blob([s2ab(wbout)], {
+        type: 'application/octet-stream'
+      }) // 字符串转ArrayBuffer
+      function s2ab(s) {
+        var buf = new ArrayBuffer(s.length)
+        var view = new Uint8Array(buf)
+        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+        return buf
+      }
+      return blob
+    },
+    openDownloadDialog(url, saveName) {
+      if (typeof url === 'object' && url instanceof Blob) {
+        url = URL.createObjectURL(url) // 创建blob地址
+      }
+      var aLink = document.createElement('a')
+      aLink.href = url
+      aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
+      var event
+      if (window.MouseEvent) event = new MouseEvent('click')
+      else {
+        event = document.createEvent('MouseEvents')
+        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+      }
+      aLink.dispatchEvent(event)
+    }
+  }
+}
+</script>

src/views/reportBus/config/index.ts

@@ -0,0 +1,164 @@
+export const sewageConfig = [
+    { 
+        name: '茨达污水处理站', 
+        indexName: [
+            { name: '1#累计读数（m³）', prop: 'sum1' },
+            { name: '2#累计读数（m³）', prop: 'sum2' },
+            { name: '合计累计读数（m³）', prop: 'amount' },
+            { name: '日进水量（m³）', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: 'grilleMachine' },
+            { name: '1#进水提升泵', prop: 'liftPump1' },
+            { name: '2#进水提升泵', prop: 'liftPump2' },
+            { name: '3#进水提升泵', prop: 'liftPump3' },
+            { name: '4#进水提升泵', prop: 'liftPump4' },
+            { name: '1#过滤器', prop: 'filter1' },
+            { name: '2#过滤器', prop: 'filter2' },
+            { name: '加药1#搅拌器', prop: 'agitator1' },
+            { name: '加药2#搅拌器', prop: 'agitator2' },
+            { name: '1#鼓风机', prop: 'blowingMachine1' },
+            { name: '2#鼓风机', prop: 'blowingMachine2' },
+            { name: '1#自吸泵', prop: 'selfprimingPump1' },
+            { name: '2#自吸泵', prop: 'selfprimingPump2' },
+            { name: '1#污泥回流泵', prop: 'sludgeRefluxPump1' },
+            { name: '2#污泥回流泵', prop: 'sludgeRefluxPump2' },
+            { name: '1#紫外线消毒', prop: 'ultravioletDisinfection1' },
+            { name: '2#紫外线消毒', prop: 'ultravioletDisinfection2' },
+        ]
+    },
+    { 
+        name: '宽裕污水处理站', 
+        indexName: [
+            { name: '出水累计流量（m³)', prop: 'amount' },
+            { name: '日处理水量（m³)', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: 'grilleMachine' },
+            { name: '1#进水提升泵', prop: 'liftPump1' },
+            { name: '2#进水提升泵', prop: 'liftPump2' },
+            { name: '3#进水提升泵', prop: 'liftPump3' },
+            { name: '4#进水提升泵', prop: 'liftPump4' },
+            { name: '1#过滤器', prop: 'filter1' },
+            { name: '2#过滤器', prop: 'filter2' },
+            { name: '加药1#搅拌器', prop: 'agitator1' },
+            { name: '加药2#搅拌器', prop: 'agitator2' },
+            { name: '1#鼓风机', prop: 'blowingMachine1' },
+            { name: '2#鼓风机', prop: 'blowingMachine2' },
+            { name: '1#自吸泵', prop: 'selfprimingPump1' },
+            { name: '2#自吸泵', prop: 'selfprimingPump2' },
+            { name: '1#污泥回流泵', prop: 'sludgeRefluxPump1' },
+            { name: '2#污泥回流泵', prop: 'sludgeRefluxPump2' },
+            { name: '1#紫外线消毒', prop: 'ultravioletDisinfection1' },
+            { name: '2#紫外线消毒', prop: 'ultravioletDisinfection2' },
+        ]
+    },
+    { 
+        name: '麻栗污水处理站', 
+        indexName: [
+            { name: '出水累计流量（m³)', prop: 'amount' },
+            { name: '日处理水量（m³)', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: 'grilleMachine' },
+            { name: '1#进水提升泵', prop: 'liftPump1' },
+            { name: '2#进水提升泵', prop: 'liftPump2' },
+            { name: '加药1#搅拌器', prop: 'agitator1' },
+            { name: '1#鼓风机', prop: 'blowingMachine1' },
+            { name: '2#鼓风机', prop: 'blowingMachine2' },
+            { name: '1#出水提升泵', prop: 'oliftPump1' },
+            { name: '2#出水提升泵', prop: 'oliftPump2' },
+            { name: '1#紫外线消毒', prop: 'ultravioletDisinfection1' },
+            { name: '1#气提机', prop: 'gasliftMachine1' },
+            { name: '2#气提机', prop: 'gasliftMachine2' },
+            { name: '3#气提机', prop: 'gasliftMachine3' },
+            { name: '4#气提机', prop: 'gasliftMachine4' },
+            { name: '5#气提机', prop: 'gasliftMachine5' },
+            { name: '6#气提机', prop: 'gasliftMachine6' },
+        ]
+    },
+    { 
+        name: '热河污水处理站', 
+        indexName: [
+            { name: '1#累计读数（m³）', prop: 'sum1' },
+            { name: '2#累计读数（m³）', prop: 'sum2' },
+            { name: '合计累计读数（m³）', prop: 'amount' },
+            { name: '日进水量（m³）', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: 'grilleMachine' },
+            { name: '1#进水提升泵', prop: 'liftPump1' },
+            { name: '2#进水提升泵', prop: 'liftPump2' },
+            { name: '3#进水提升泵', prop: 'liftPump3' },
+            { name: '4#进水提升泵', prop: 'liftPump4' },
+            { name: '1#过滤器', prop: 'filter1' },
+            { name: '2#过滤器', prop: 'filter2' },
+            { name: '加药1#搅拌器', prop: 'agitator1' },
+            { name: '加药2#搅拌器', prop: 'agitator2' },
+            { name: '1#鼓风机', prop: 'blowingMachine1' },
+            { name: '2#鼓风机', prop: 'blowingMachine2' },
+            { name: '1#自吸泵', prop: 'selfprimingPump1' },
+            { name: '2#自吸泵', prop: 'selfprimingPump2' },
+            { name: '1#污泥回流泵', prop: 'sludgeRefluxPump1' },
+            { name: '2#污泥回流泵', prop: 'sludgeRefluxPump2' },
+            { name: '1#紫外线消毒', prop: 'ultravioletDisinfection1' },
+            { name: '2#紫外线消毒', prop: 'ultravioletDisinfection2' },
+        ]
+    },
+    { 
+        name: '王所污水处理站', 
+        indexName: [
+            { name: '1#累计读数（m³）', prop: 'sum1' },
+            { name: '2#累计读数（m³）', prop: 'sum2' },
+            { name: '合计累计读数（m³）', prop: 'amount' },
+            { name: '日进水量（m³）', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: 'grilleMachine' },
+            { name: '1#进水提升泵', prop: 'liftPump1' },
+            { name: '2#进水提升泵', prop: 'liftPump2' },
+            { name: '3#进水提升泵', prop: 'liftPump3' },
+            { name: '4#进水提升泵', prop: 'liftPump4' },
+            { name: '1#过滤器', prop: 'filter1' },
+            { name: '2#过滤器', prop: 'filter2' },
+            { name: '加药1#搅拌器', prop: 'agitator1' },
+            { name: '加药2#搅拌器', prop: 'agitator2' },
+            { name: '1#鼓风机', prop: 'blowingMachine1' },
+            { name: '2#鼓风机', prop: 'blowingMachine2' },
+            { name: '1#自吸泵', prop: 'selfprimingPump1' },
+            { name: '2#自吸泵', prop: 'selfprimingPump2' },
+            { name: '1#污泥回流泵', prop: 'sludgeRefluxPump1' },
+            { name: '2#污泥回流泵', prop: 'sludgeRefluxPump2' },
+            { name: '1#紫外线消毒', prop: 'ultravioletDisinfection1' },
+            { name: '2#紫外线消毒', prop: 'ultravioletDisinfection2' },
+        ]
+    },
+    { 
+        name: '永郎污水处理站', 
+        indexName: [
+            { name: '1#累计读数（m³）', prop: 'sum1' },
+            { name: '2#累计读数（m³）', prop: 'sum2' },
+            { name: '合计累计读数（m³）', prop: 'amount' },
+            { name: '日进水量（m³）', prop: 'inflow' },
+        ],
+        equip: [
+            { name: '格栅机', prop: '' },
+            { name: '1#进水提升泵', prop: '' },
+            { name: '2#进水提升泵', prop: '' },
+            { name: '3#进水提升泵', prop: '' },
+            { name: '4#进水提升泵', prop: '' },
+            { name: '1#过滤器', prop: '' },
+            { name: '2#过滤器', prop: '' },
+            { name: '加药1#搅拌器', prop: '' },
+            { name: '加药2#搅拌器', prop: '' },
+            { name: '1#鼓风机', prop: '' },
+            { name: '2#鼓风机', prop: '' },
+            { name: '1#自吸泵', prop: '' },
+            { name: '2#自吸泵', prop: '' },
+            { name: '1#污泥回流泵', prop: '' },
+            { name: '2#污泥回流泵', prop: '' },
+            { name: '1#紫外线消毒', prop: '' },
+            { name: '2#紫外线消毒', prop: '' },
+        ]
+    },
+]

src/views/reportBus/repOperation/widget.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="main-page">
+    <!-- 查询 -->
+    <el-form :model="searchForm" inline size="small" class="search-form">
+      <div>
+        <el-form-item label="填报日期">
+          <el-date-picker
+            v-model="searchForm.censusTime"
+            type="date"
+            placeholder="选择日期"
+            style="width: 100%"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+        <el-form-item label="污水处理站">
+          <el-select v-model="searchForm.sewageStationName">
+            <el-option
+              v-for="(s, i) in sewageConfig"
+              :key="`s${i}`"
+              :value="s.name"
+              :label="s.name"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query" :loading="loading.query">查询</el-button>
+        </el-form-item>
+      </div>
+      <el-form-item label>
+        <el-button type="primary" @click="modify">{{ sewageCurr.dataId ? '修改' : '新增' }}</el-button>
+        <el-button type="success" @click="submit" :disabled="!isEdit && !!sewageCurr.dataId">提交</el-button>
+        <export-btn :tableId="tableId" :name="`${sewageCurr.name}设备运行记录表`"></export-btn>
+      </el-form-item>
+    </el-form>
+    <!-- 数据 -->
+    <el-table
+      :id="tableId"
+      :data="tableData"
+      style="width:100%"
+      :header-cell-style="headerCellStyle"
+      height="calc(100% - 55px)"
+      :row-class-name="rowClassName"
+      :span-method="spanMethod"
+      v-loading='loading.table'
+    >
+      <el-table-column :label="`${sewageCurr.name}设备运行记录表`" align="center">
+        <el-table-column :label="sewageCurr.date" align="right">
+          <el-table-column prop="equip" label="设备" align="center" width="180"></el-table-column>
+          <el-table-column
+            v-for="(t, i) in datetimes"
+            :key="`equip${i}`"
+            :prop="t.prop"
+            :label="t.name"
+            align="center"
+            width="100"
+          >
+            <template slot-scope="data">
+              <span
+                :style="rowStyle(data.row, t.prop)"
+                v-if="!isEdit || data.row.type ==='note'"
+              >{{ getValue(data.row[t.prop]) }}</span>
+              <el-input v-else-if='data.row.type === "person"' v-model="data.row[t.prop]"></el-input>
+              <el-select v-else v-model="data.row[t.prop]">
+                <el-option v-for="(s, i) in status" :key="`st${i}`" v-bind="s"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" align="center">
+            <template slot-scope="data">
+              <span v-if="!isEdit">{{ data.row.remark }}</span>
+              <el-input v-else v-model="data.row['remark']"></el-input>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { sewageConfig } from "@/views/reportBus/config/index.ts";
+import exportBtn from "../components/exportBtn.vue";
+import {
+  getOperationRep,
+  addOperationRep,
+  updateOperationRep,
+} from "@/views/reportBus/api/index.ts";
+
+export default {
+  components: {
+    exportBtn
+  },
+  data() {
+    return {
+      tableId: "repOperationTable",
+      status: [
+        { label: "√", value: "1", color: "#67C23A" },
+        { label: "o", value: "2", color: "#909399" },
+        { label: "△", value: "3", color: "#F56C6C" },
+        { label: "□", value: "4", color: "#E6A23C" }
+      ],
+      loading: {
+        table: false,
+        query: false
+      },
+      disabled: false,
+      isEdit: false,
+
+      searchForm: {
+        censusTime: "",
+        sewageStationName: "茨达污水处理站"
+      },
+      tableData: [],
+      sewageCurr: {},
+      sewageConfig,
+      headerCellStyle: {
+        color: "#000"
+      },
+      datetimes: [
+        { name: "0:00", prop: "t0" },
+        { name: "2:00", prop: "t2" },
+        { name: "4:00", prop: "t4" },
+        { name: "6:00", prop: "t6" },
+        { name: "8:00", prop: "t8" },
+        { name: "10:00", prop: "t10" },
+        { name: "12:00", prop: "t12" },
+        { name: "14:00", prop: "t14" },
+        { name: "16:00", prop: "t16" },
+        { name: "18:00", prop: "t18" },
+        { name: "20:00", prop: "t20" },
+        { name: "22:00", prop: "t22" }
+      ],
+    };
+  },
+  created() {
+      this.searchForm.censusTime = this.$moment().format("YYYY-MM-DD");
+      this.query();
+  },
+  methods: {
+    query() {
+      if(!this.searchForm.censusTime) {
+        return this.$message.warning('请选择填报日期')
+      }
+      const params = { ...this.searchForm, current: 1, size: 1e3 };
+      this.loading.query = true;
+      getOperationRep(params).then(res => {
+        this.loading.query = false;
+        if (res && res.code === 1) {
+          const { result: { records: [data] } } = res
+          //
+          this.sewageCurr = {
+            date: this.$moment(this.searchForm.censusTime).format('YYYY年MM月DD日'),
+            name: this.searchForm.sewageStationName,
+            dataId: data ? data.id : '' 
+          };
+          //
+          let equipData = []
+          // 是否新增
+          if(data) {
+            const { dutyUser, deviceData } = data
+            equipData = JSON.parse(deviceData)
+          } else {
+            // 默认填充
+            equipData = sewageConfig
+              .find(({ name }) => name === this.searchForm.sewageStationName)
+              .equip.map(({ name }) => {
+                let data = { type: 'data', equip: name, remark: "" };
+                this.datetimes.forEach(({ prop }) => {
+                  data[prop] = prop === "remark" ? "" : "1";
+                });
+                return data;
+              });
+          }
+          // 说明
+          const notes = [
+            {
+              type: "note",
+              equip: "说明",
+              t0: "运行：√",
+              t6: "备用：o",
+              t12: "故障：△",
+              t18: "正在检修：□"
+            },
+            { type: "person", equip: "值班人员", t0: data ? data.dutyUser : '' }
+          ];
+          this.tableData = [...equipData, ...notes];
+        } else {
+          this.$message.error("获取运行数据");
+        }
+      });
+    },
+    submit() {
+      const deviceData = JSON.stringify(this.tableData.filter(({ type }) => type === 'data'))
+      let postData = {
+        ...this.searchForm,
+        dutyUser: this.tableData[this.tableData.length - 1].t0,
+        deviceData
+      }
+      this.loading.table = true
+      if(this.sewageCurr.dataId) {
+        postData.id = this.sewageCurr.dataId
+        updateOperationRep(postData).then(res => {
+          this.isEdit = false;
+          this.loading.table = false
+          if(res && res.code === 1) {
+            this.query()
+            this.$message.success('修改报表成功')
+          } else {
+            this.$message.error('修改报表失败')
+          }
+        })
+      } else {
+        addOperationRep(postData).then(res => {
+          this.isEdit = false;
+          this.loading.table = false
+          if(res && res.code === 1) {
+            this.query()
+            this.$message.success('新增报表成功')
+          } else {
+            this.$message.error('新增报表失败')
+          }
+        })
+      }
+    },
+    modify() {
+      this.isEdit = true;
+
+    },
+    getValue(value) {
+      let findItem = this.status.find(i => i.value == value);
+      return findItem ? findItem.label : value;
+    },
+    rowStyle(row, prop) {
+      if (prop !== "remark") {
+        let findItem = this.status.find(i => i.value == row[prop]);
+        return findItem ? { color: findItem.color } : "#000";
+      } else {
+        return { color: "#000" };
+      }
+    },
+    spanMethod({ row, column, rowIndex, columnIndex }) {
+      if (row && row.type === "note") {
+        let noteIndexs = [1, 4, 7, 10];
+        if (noteIndexs.includes(columnIndex)) {
+          return { rowspan: 1, colspan: 3 };
+        } else if (columnIndex === 12 || columnIndex === 0) {
+          return { rowspan: 1, colspan: 1 };
+        } else {
+          return { rowspan: 0, colspan: 0 };
+        }
+      } else if (row && row.type === "person") {
+        if (columnIndex === 0) {
+          return { rowspan: 1, colspan: 1 };
+        } else if (columnIndex === 1) {
+          return { rowspan: 1, colspan: 12 };
+        } else {
+          return { rowspan: 0, colspan: 0 };
+        }
+      } else {
+        return { rowspan: 1, colspan: 1 };
+      }
+    },
+    rowClassName(rowParams) {
+      // 固定的列名
+      const fixedRows = ["note", "person"];
+      let { row } = rowParams;
+      return row.type && fixedRows.includes(row.type)
+        ? `fixed-row tr-${row.type}`
+        : "";
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.main-page {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 10px 20px;
+  .search-form {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+/deep/.el-table {
+  .fixed-row {
+    position: sticky;
+    width: 100%;
+  }
+  .tr-person {
+    bottom: 0;
+  }
+  .tr-note {
+    bottom: 40px;
+  }
+}
+</style>

src/views/reportBus/repWaterDosing/form.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-form :model="formData" size="small" label-width="auto">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="formData.censusTime"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="污水厂站">
+          <el-select v-model="formData.sewageStationName">
+            <el-option v-for="(s, i) in sewages" :key="`s${i}`" v-bind="s"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="药品">
+          <el-select v-model="formData.drugName">
+            <el-option v-for="(m, i) in medicines" :key="`m${i}`" v-bind="m"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="入库量">
+          <el-input type="number" v-model="formData.inStoreVal">
+            <template slot="append">kg</template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="出库量">
+          <el-input type="number" v-model="formData.outStoreVal">
+            <template slot="append">kg</template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="投加量">
+          <el-input type="number" v-model="formData.addVal">
+            <template slot="append">kg</template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="投加人">
+          <el-input v-model="formData.addUser"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-form-item label="备注">
+        <el-input type="textarea" v-model="formData.remark"></el-input>
+      </el-form-item>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import { sewageConfig } from '@/views/reportBus/config/index.ts'
+
+export default {
+  props: {
+    data: { default: () => null, type: Object },
+    medicines: { default: () => ([]), type: Array },
+  },
+  data() {
+    const sewages = sewageConfig.map(({ name }) => ({ label: name, value: name }))
+    return {
+      sewages,
+      formData: {
+        censusTime: '',
+        sewageStationName: '',
+        drugName: '',
+        inStoreVal: 0,
+        outStoreVal: 0,
+        addVal: 0,
+        addUser: '',
+        remark: ''
+      }
+    };
+  },
+  mounted() {
+    if(this.data) {
+      for(let key in this.formData) {
+        this.formData[key] = this.data[key] || ''
+      }
+    }
+  },
+  methods: {
+    getData() {
+      return this.formData
+    },
+    
+  }
+};
+</script>

src/views/reportBus/repWaterDosing/widget.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="main-page">
+    <el-form :model="searchForm" inline size="small" class="search-form">
+      <div>
+        <el-form-item label="填报月份:">
+            <el-date-picker
+              v-model="searchForm.queryTime"
+              type="month"
+              placeholder="选择月份"
+              value-format="yyyy-MM"
+            />
+        </el-form-item>
+        <el-form-item label="选择药品:">
+          <el-select v-model="searchForm.drugName" clearable>
+            <el-option v-for="(m, i) in medicines" :key="`s${i}`" v-bind="m"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="污水处理站:">
+          <el-select v-model="searchForm.sewageStationName" clearable>
+            <el-option v-for="(s, i) in sewageConfig" :key="`s${i}`" :value="s.name" :label="s.name"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query" :loading="loading.query">查询</el-button>
+        </el-form-item>
+      </div>
+      <el-form-item label="">
+        <el-button type="success" @click="add">新增</el-button>
+        <el-button type="danger" :disabled="!currRow"  @click="delet">删除</el-button>
+        <export-btn :tableId="tableId" :name="`${searchForm.sewageStationName}药品投加记录表`"></export-btn>
+      </el-form-item>
+    </el-form>
+    <el-table 
+      :data="tableData" 
+      style="width:100%" 
+      :header-cell-style='headerCellStyle'
+      height="calc(100% - 55px)"
+      :row-class-name="rowClassName"
+      highlight-current-row
+      @row-click='setCurr'
+      @row-dblclick='modify'
+    >
+      <el-table-column :label="`${searchForm.sewageStationName}药品投加记录表`" align="center">
+          <el-table-column 
+            v-for="(c, i) in cols" 
+            :key="`indexName${i}`" 
+            :prop="c.prop" 
+            :label="c.name" 
+            align="center"
+          ></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      :title="`${status}报表记录`"
+      :visible.sync="dialogVisible"
+      width='800px'
+      top="15vh"
+      append-to-body
+    >
+      <formItem ref="form" v-if="dialogVisible" :data='currRow' :medicines='medicines'/>
+      <slot name="footer">
+          <div style="text-align:right;">
+            <el-button type="primary" size="small" @click="submit" :loading="loading.submit" :disabled="disabled">提 交</el-button>
+            <el-button size="small" @click="onCancel">取 消</el-button>
+          </div>
+      </slot>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { sewageConfig } from '@/views/reportBus/config/index.ts'
+import formItem from './form.vue'
+import { getDicValueByKeys } from "@/api/base";
+import exportBtn from '../components/exportBtn.vue'
+import {
+  getWaterDosingRep,
+  addWaterDosingRep,
+  updateWaterDosingRep,
+  deletWaterDosingRep
+} from "@/views/reportBus/api/index.ts";
+
+export default {
+  components: {
+    formItem,
+    exportBtn
+  },
+  data() {
+    return {
+      tableId: 'repWaterdosingTable',
+      currRow: null,
+      dialogVisible: false,
+      loading: {
+        query: false,
+        submit: false
+      },
+      disabled: false,
+      searchForm: {
+        queryTime: '',
+        drugName: '',
+        sewageStationName: ''
+      },
+      cols: [
+        { name: '日期', prop: 'censusTimeFormat' },
+        { name: '入库量（kg）', prop: 'inStoreVal' },
+        { name: '出库量（kg）', prop: 'outStoreVal' },
+        { name: '投加量（kg）', prop: 'addVal' },
+        { name: '投加人', prop: 'addUser' },
+        { name: '备注', prop: 'remark' },
+      ],
+      tableData: [],
+      sewageConfig,
+      medicines: [],
+      headerCellStyle: {
+        color: '#000'
+      },
+      status: ''
+    }
+  },
+  created() {
+    this.init() 
+  },
+  methods: {
+    init() {
+      getDicValueByKeys({ pCid: 66616 }).then(res => {
+        if(res.code === 1) {
+          const { result: [{ codeList }] } = res
+          this.medicines = codeList.map(({ cname, id }) => {
+            return { label: cname, value: id }
+          })
+          // 初始化查询参数
+          this.searchForm = {
+            queryTime: this.$moment().format('YYYY-MM'),
+            drugName: '',
+            sewageStationName: this.sewageConfig[0].name
+          }
+          this.query()
+        } 
+      })
+    },
+
+    query() {
+      const params = { ...this.searchForm, current: 1, size: 1e3 };
+      this.loading.query = true
+      getWaterDosingRep(params).then(res => {
+        this.loading.query = false
+        if(res && res.code == 1) {
+          const { result: { records } } = res
+          this.tableData = records.map(i => {
+            i.censusTimeFormat = i.censusTime.split(' ')[0]
+            i.drugName = parseInt(i.drugName)
+            return i
+          })
+        }
+      })
+
+    },
+    onCancel() {
+      this.dialogVisible = false
+      this.currRow = null
+    },
+    submit() {
+      let data = this.$refs.form.getData()
+      if(this.currRow) {
+        data.id = this.currRow.id
+        updateWaterDosingRep(data).then(res => {
+          if(res && res.code === 1) {
+            this.dialogVisible = false
+            this.query()
+            this.$message.success('修改记录成功')
+          } else {
+            this.$message.error('修改记录失败')
+          }
+        })
+      } else {
+        addWaterDosingRep(data).then(res => {
+          if(res && res.code === 1) {
+            this.dialogVisible = false
+            this.query()
+            this.$message.success('新增记录成功')
+          } else {
+            this.$message.error('新增记录失败')
+          }
+        })
+      }
+    },
+    rowClassName(rowParams) {
+      const fixedRows = ['min', 'max', 'average']
+      let { row } = rowParams
+      return row.type && fixedRows.includes(row.type) ? 'fixed-row' : ''
+    },
+    add() {
+      this.status = '新增'
+      this.currRow = null
+      this.dialogVisible = true
+    },
+    delet() {
+      this.$confirm('是否需要删除这条报表记录', '提示',{
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(res => {
+        deletWaterDosingRep(this.currRow.id).then(res => {
+          if(res && res.code == 1) {
+            this.query()
+            this.$message.success('删除成功')
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+      }).catch(err => {
+        this.$message.info('已取消删除')
+      })
+    },
+    setCurr(row) {
+      this.setCurRow(row)
+    },
+    modify(row) {
+      this.status = '修改'
+      this.setCurRow(row)
+      this.dialogVisible = true
+    },
+    setCurRow(row) {
+      const { createTime, createUser, createUserName, queryTime, censusTimeFormat, ...elParams } = row
+      this.currRow = elParams
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.main-page {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 10px 20px;
+  .search-form {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+/deep/.el-table {
+  .tr-fixed:nth-child(1) {
+    position: sticky;
+    width: 100%;
+    bottom: 0;
+  }
+}
+</style>

src/views/reportBus/repWaterQuality/widget.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="main-page">
+    <el-form :model="searchForm" inline size="small" class="search-form">
+      <div>
+        <el-form-item label="填报月份">
+            <el-date-picker
+              v-model="searchForm.censusTime"
+              type="month"
+              placeholder="选择日期"
+              style="width: 100%"
+              value-format="yyyy-MM"
+            />
+        </el-form-item>
+        <el-form-item label="污水处理站">
+          <el-select v-model="searchForm.sewageStationName">
+            <el-option v-for="(s, i) in sewageConfig" :key="`s${i}`" :value="s.name" :label="s.name"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query" :loading="loading.query">查询</el-button>
+        </el-form-item>
+      </div>
+      <el-form-item label="">
+        <el-button type="primary" @click="modify">{{ sewageCurr.dataId ? '修改' : '新增' }}</el-button>
+        <el-button type="success" @click="submit" :disabled="!isEdit">提交</el-button>
+        <export-btn :tableId="tableId" :name="`${sewageCurr.name}进水流量记录表`"></export-btn>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :id="tableId"
+      :data="tableData" 
+      style="width:100%" 
+      :header-cell-style='headerCellStyle'
+      height="calc(100% - 55px)"
+      :row-class-name="rowClassName"
+    >
+      <el-table-column :label="`${sewageCurr.name}进水流量记录表`" align="center">
+        <el-table-column :label="sewageCurr.month" align="right">
+          <el-table-column label="日期" prop="date" align="center" width="120px"></el-table-column>
+          <el-table-column 
+            v-for="(e, i) in indexs" 
+            :key="`indexName${i}`" 
+            :prop="e.prop" 
+            :label="e.name" 
+            align="center"
+          >
+            <template slot-scope="data">
+              <span v-if="!isEdit || fixedRows.includes(data.row.type)">{{ data.row[e.prop] }}</span>
+              <el-input v-else v-model="data.row[e.prop]"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="记录人" prop="person" align="center">
+            <template slot-scope="data">
+              <span v-if="!isEdit || fixedRows.includes(data.row.type)">{{ data.row['person'] }}</span>
+              <el-input v-else v-model="data.row['person']"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" align="center">
+            <template slot-scope="data">
+              <span v-if="!isEdit || fixedRows.includes(data.row.type)">{{ data.row['remark'] }}</span>
+              <el-input v-else v-model="data.row['remark']"></el-input>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { sewageConfig } from '@/views/reportBus/config/index.ts'
+import exportBtn from '../components/exportBtn.vue'
+import {
+  getWaterflowRep,
+  addWaterflowRep,
+  updateWaterflowRep
+} from "@/views/reportBus/api/index.ts";
+
+
+export default {
+  components: {
+    exportBtn
+  },
+  data() {
+    return {
+      indexs: [],
+      tableId: "repWaterFlowTable",
+      fixedRows: ['min', 'max', 'average'],
+      loading: {
+        table: false,
+        query: false
+      },
+
+      searchForm: {
+        censusTime: '',
+        sewageStationName: '茨达污水处理站'
+      },
+      isEdit: false,
+      tableData: [],
+      sewageCurr: {},
+      sewageConfig,
+      headerCellStyle: {
+        color: '#000'
+      }
+    }
+  },
+  created() {
+    this.searchForm.censusTime = this.$moment().format('YYYY-MM')
+    this.indexs = sewageConfig.find(({ name }) => name === this.searchForm.sewageStationName).indexName
+    this.query()
+    
+  },
+  methods: {
+    query() {
+      if(!this.searchForm.censusTime) {
+        return this.$message.warning('请选择填报月份')
+      }
+      const params = { ...this.searchForm, current: 1, size: 1e3 };
+      this.loading.query = true;
+      getWaterflowRep(params).then(res => {
+        this.loading.query = false;
+        if (res && res.code === 1) {
+          const { result: { records: [data] } } = res
+          //
+          this.sewageCurr = {
+            month: this.$moment(this.searchForm.censusTime).format('YYYY年MM月'),
+            name: this.searchForm.sewageStationName,
+            dataId: data ? data.id : '' 
+          };
+          //
+          let indexData = []
+
+          // 是否新增
+          if(data) {
+            const { waterData } = data
+            indexData = JSON.parse(waterData)
+          } else {
+            // 默认填充
+            let month = this.$moment().daysInMonth()
+            indexData = Array.from({ length: month }).map((_, i) => {
+              let data = { type: 'data', date: i + 1, person: '-', remark: '-' }
+              this.sewageConfig
+              .find(({ name }) => name === this.searchForm.sewageStationName)
+              .indexName.forEach(({ name, prop }) => {
+                data[prop] = '0'
+              })
+              return data
+            })
+            
+          }
+          // 说明
+          let elRows = [
+            { date: '最小值', type: 'min', person: '-', remark: '-' },
+            { date: '最大值', type: 'max', person: '-', remark: '-' },
+            { date: '平均值', type: 'average', person: '-', remark: '-' },
+          ]
+          this.sewageConfig.find(({ name }) => name === this.searchForm.sewageStationName)
+          .indexName.forEach(({ name, prop }) => {
+            const valueArr = indexData.map(i => i[prop])
+            elRows[0][prop] = Math.min.apply(null, valueArr) // 最小值
+            elRows[1][prop] = Math.max.apply(null, valueArr) // 最大值
+            elRows[2][prop] = (valueArr.reduce((p,n) => parseFloat(p) + parseFloat(n)) / valueArr.length).toFixed(2) // 平均值
+          })
+          //
+          this.tableData = [...indexData, ...elRows];
+        } else {
+          this.$message.error("获取运行数据");
+        }
+      });
+    },
+    rowClassName(rowParams) {
+      let { row } = rowParams
+      return row.type && this.fixedRows.includes(row.type) ? `fixed-row tr-${row.type}` : ''
+    },
+    random() {
+      return Math.random() * 5
+    },
+    submit() {
+      const waterData = JSON.stringify(this.tableData.filter(({ type }) => type === 'data'))
+      let postData = { ...this.searchForm, waterData }
+      this.loading.table = true
+      if(this.sewageCurr.dataId) {
+        postData.id = this.sewageCurr.dataId
+        updateWaterflowRep(postData).then(res => {
+          this.isEdit = false;
+          this.loading.table = false
+          if(res && res.code === 1) {
+            this.query()
+            this.$message.success('修改报表成功')
+          } else {
+            this.$message.error('修改报表失败')
+          }
+        })
+      } else {
+        addWaterflowRep(postData).then(res => {
+          this.isEdit = false;
+          this.loading.table = false
+          if(res && res.code === 1) {
+            this.query()
+            this.$message.success('新增报表成功')
+          } else {
+            this.$message.error('新增报表失败')
+          }
+        })
+      }
+    },
+    modify() {
+      this.isEdit = true
+    },
+    exportReport() {
+
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.main-page {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 10px 20px;
+  .search-form {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+/deep/.el-table {
+  .tr-min {
+    bottom: 80px;
+    background-color: rgb(240, 245, 239);
+  }
+  .tr-max {
+    bottom: 40px;
+    background-color: rgb(253, 246, 236);
+  }
+  .tr-average {
+    bottom: 0;
+    background-color: rgb(254, 240, 240);
+  }
+  .fixed-row {
+    position: sticky;
+    width: 100%;
+  }
+}
+</style>

src/views/zhpt/basicInfoManage/config/index.ts

@@ -5,13 +5,13 @@ export const featureServerUrl = "http://36.138.232.112:6080/arcgis/rest/services
 export const mapServerUrl = "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer"
 
 export const layerId = {
-    js: 0,
-    ps: 18,
-    wsc: 19,
-    psfq: 23
+    js: 0, // 给水
+    ps: 18, // 排水
+    wsc: 19, // 污水厂
+    psfq: 23 // 排水分区
 }
 
 // 查询需要添加 token 的 url 
 export const whiteUrls = [
-    "http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/19"
+    `http://36.138.232.112:6080/arcgis/rest/services/PIPE_DCSW_CS/MapServer/${layerId.wsc}`
 ]

src/views/zhpt/common/olMapUtil/geoserverQuery.ts

@@ -6,21 +6,8 @@
  * @FilePath: \psjgxt_web\src\views\zhpt\common\olMapUtil\geoserverQuery.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import TileLayer from 'ol/layer/Tile'
-import VectorLayer from 'ol/layer/Vector'
-import { Vector as VectorSource, XYZ } from 'ol/source'
-import { WMTS } from 'ol/source'
-import * as olExtent from 'ol/extent'
-import WMTSTileGrid from 'ol/tilegrid/WMTS'
-import * as olProj from 'ol/proj'
-import { get as getProjection } from 'ol/proj'
-import { getWidth, getTopLeft } from 'ol/extent'
-
-
 
 import { appconfig } from 'staticPub/config'
-import { resolve } from 'q'
-import { reject } from 'lodash'
 import axios from 'axios'
 
 export class TFGeoQuery {
@@ -33,35 +20,6 @@ export class TFGeoQuery {
      *               flag:1 是否启用
     * */
      static queryLayerfields(viewparams){
-        let queryServer = appconfig.gisResource.geoserver_resource.queryServer
-        const url = queryServer.url
-        const params = {
-            service: queryServer.service,
-            version: queryServer.version,
-            request: queryServer.request,
-            typeName: queryServer.typeName_layerfields,
-            outputformat: queryServer.outputformat,
-            viewparams: viewparams
-          }
-        return new Promise((resolve,reject)=>{
-            axios({
-                method: 'POST',
-                url: url,
-                params: params,
-            }).then(res => {
-                resolve({
-                    code:1,
-                    results:res,
-                    message:'success!'
-                })
-            }).catch(e=>{
-                reject({
-                    code:1,
-                    results:e,
-                    message:'查询异常!'+e
-                })
-            })
-        })
     }
     
     /**