1、首页地图，2、scada地图

src/views/dataBoard/smartOperating/children/middlePanel.vue

@@ -20,12 +20,12 @@ import echartmapjson from '@/assets/mbMapData.json'
 export default {
   name: 'Mapchart',
   components: {},
-  props: {
-    mapData: {
-      type: Object,
-      required: true
-    }
-  },
+  // props: {
+  //   mapData: {
+  //     type: Object,
+  //     required: true
+  //   }
+  // },
   data() {
     return {
       seriesData: null,
@@ -52,12 +52,12 @@ export default {
   // 监听数据是否改变
   watch: {
     // intrd是需要监听的数据
-    mapData(newval, oldval) {
-      this.seriesData = newval // newval为监听到发生改变数据
-      this.addSite(newval)
-      console.log('数据改变', newval)
-      // this.drawChart();
-    }
+    // mapData(newval, oldval) {
+    //   this.seriesData = newval // newval为监听到发生改变数据
+    //   this.addSite(newval)
+    //   console.log('数据改变', newval)
+    //   // this.drawChart();
+    // }
   },
   created() {
     // this.seriesData = this.mapData
@@ -78,7 +78,8 @@ export default {
         Lod,
         mapConfig,
         Graphic,
-        GraphicsLayer
+        GraphicsLayer,
+        esriRequest
       ] = await esriLoaderApi.load([
         'esri/Map',
         'esri/views/MapView',
@@ -89,7 +90,8 @@ export default {
         'esri/layers/support/LOD',
         'esri/config',
         'esri/Graphic',
-        'esri/layers/GraphicsLayer'
+        'esri/layers/GraphicsLayer',
+        'esri/request'
       ])
       this.tools.Map = Map
       this.tools.MapView = MapView
@@ -101,6 +103,7 @@ export default {
       this.tools.mapConfig = mapConfig
       this.tools.Graphic = Graphic
       this.tools.GraphicsLayer = GraphicsLayer
+      this.tools.esriRequest = esriRequest
       this.layer = new GraphicsLayer()
       this.initMap()
     },
@@ -145,8 +148,8 @@ export default {
               xmax: 180,
               ymax: 90,
               spatialReference: 4490
-            },
-            opacity: opacity
+            }
+            // opacity: opacity
             // tint: new esriColor('#191970')
             // tileLoadFunction: (imageTile, src) => this.tileLoadFunction(imageTile, src)
           }
@@ -205,25 +208,98 @@ export default {
       //   new layerType[layersConfig[2][1]]({ url: layersConfig[2][0] })
       // ]
       baselayers = [
-        // new layerType[layersConfig[0][1]](
-        //   layersConfig[0][0] + key,
-        //   tileInfo(true, 0.2)
-        // ),
-        // new layerType[layersConfig[1][1]](
-        //   layersConfig[1][0] + key,
-        //   tileInfo(true, 1)
-        // ),
-        new layerType[layersConfig[2][1]](
-          layersConfig[2][0] + key,
-          tileInfo(false, 0.2)
+        new layerType[layersConfig[0][1]](
+          layersConfig[0][0] + key,
+          tileInfo(true, 0.2)
         ),
-        new layerType[layersConfig[3][1]](
-          layersConfig[3][0] + key,
+        new layerType[layersConfig[1][1]](
+          layersConfig[1][0] + key,
           tileInfo(true, 1)
         ),
+        // new layerType[layersConfig[2][1]](
+        //   layersConfig[2][0] + key,
+        //   tileInfo(false, 0.2)
+        // ),
+        // new layerType[layersConfig[3][1]](
+        //   layersConfig[3][0] + key,
+        //   tileInfo(true, 1)
+        // ),
         new layerType[layersConfig[4][1]]({ url: layersConfig[4][0] })
       ]
       // debugger
+
+      // 修改底图切片的颜色  --start
+      baselayers.forEach(item => {
+        if (item.operationalLayerType == 'WebTiledLayer') {
+          item.fetchTile = (level, row, col, options) => {
+            const url = this.getTileUrl(item, level, row, col)
+
+            // this.tileLoadFunction(level, url)
+            return this.tools.esriRequest(url, {
+              responseType: 'image',
+              signal: options && options.signal
+            }).then(
+              function(response) {
+                // esri请求解析成功时
+                // 从响应中获取图像
+                // debugger
+                const img = response.data
+                const canvas = document.createElement('canvas')
+                const w = img.width
+                const h = img.height
+                canvas.width = w
+                canvas.height = h
+                const context = canvas.getContext('2d')
+                context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
+                const imageData = context.getImageData(0, 0, w, h)
+                for (let i = 0; i < imageData?.height; i++) {
+                  for (let j = 0; j < imageData?.width; j++) {
+                    const x = i * 4 * imageData.width + j * 4
+                    const gray =
+          imageData.data[x] * 0.3 + imageData.data[x + 1] * 0.59 + imageData.data[x + 2] * 0.11
+                    // imageData.data[x] =
+                    //   imageData.data[x + 1] =
+                    //   imageData.data[x + 2] =
+                    //     imageData.data[x] * 0.3 + imageData.data[x + 1] * 0.59 + imageData.data[x + 2] * 0.11;
+
+                    // 大体灰度244 ,m
+                    imageData.data[x] = 244 + 2 - gray
+                    imageData.data[x + 1] = 244 + 38 - gray
+                    imageData.data[x + 2] = 244 + 65 - gray
+
+                    // console.log(gray)
+
+                    // 大体灰度244 ,m
+                    // imageData.data[x] = 244 + (-10) - gray
+                    // imageData.data[x + 1] = 244 + 10 - gray
+                    // imageData.data[x + 2] = 244 + (35) - gray
+                    // console.log(imageData.data[x], imageData.data[x + 1], imageData.data[x + 2], gray);
+                  }
+                }
+    context?.putImageData(imageData, 0, 0)
+    return canvas
+                // return img.src = imgSrc
+                // const width = item.tileInfo.size[0]
+                // const height = item.tileInfo.size[0]
+
+                // // 使用二维渲染上下文创建画布
+                // const canvas = document.createElement('canvas')
+                // const context = canvas.getContext('2d')
+                // canvas.width = width
+                // canvas.height = height
+                // // context.fillStyle = "rgba(255, 165, 0, 0.05)";
+                // // context.filter = map_filter.bigMapFilter
+
+                // // 将混合图像绘制到画布上。
+                // context.drawImage(image, 0, 0, width, height)
+                // return canvas
+              }
+            )
+          }
+        }
+      })
+      // 修改底图切片的颜色  --end
+
       // 底图
       var basemap = new this.tools.Basemap({
         baseLayers: baselayers,
@@ -256,8 +332,10 @@ export default {
         },
         zoom: aconfig.initZoom
       }))
+
       mapview.ui.remove('zoom')// 清除放大缩小按钮
       mapview.ui.remove('attribution')// 清楚底部powered by ESRI
+
       mapview.map.add(this.layer)
 
       // 初始视角
@@ -452,11 +530,14 @@ export default {
       })
     },
 
+    getTileUrl(obj, level, row, col) {
+      return obj.urlTemplate.replace('{subDomain}', 't' + Math.floor(Math.random() * 8)).replace('{level}', level).replace('{col}', col).replace('{row}', row)
+    },
     tileLoadFunction(imageTile, src) {
       const img = new Image()
       let imgSrc = src
       // 层级大于18后，不请求图片。而是放大当前图片
-      if (imageTile.tileCoord[0] > 18) {
+      if (imageTile > 18) {
         imgSrc = ''
       }
       img.crossOrigin = ''

src/views/dataBoard/smartPipeNet/children/middlePanel.vue

@@ -78,7 +78,8 @@ export default {
         Lod,
         mapConfig,
         Graphic,
-        GraphicsLayer
+        GraphicsLayer,
+        esriRequest
       ] = await esriLoaderApi.load([
         'esri/Map',
         'esri/views/MapView',
@@ -89,7 +90,8 @@ export default {
         'esri/layers/support/LOD',
         'esri/config',
         'esri/Graphic',
-        'esri/layers/GraphicsLayer'
+        'esri/layers/GraphicsLayer',
+        'esri/request'
       ])
       this.tools.Map = Map
       this.tools.MapView = MapView
@@ -101,6 +103,7 @@ export default {
       this.tools.mapConfig = mapConfig
       this.tools.Graphic = Graphic
       this.tools.GraphicsLayer = GraphicsLayer
+      this.tools.esriRequest = esriRequest
       this.layer = new GraphicsLayer()
       this.initMap()
     },
@@ -145,8 +148,8 @@ export default {
               xmax: 180,
               ymax: 90,
               spatialReference: 4490
-            },
-            opacity: opacity
+            }
+            // opacity: opacity
             // tint: new esriColor('#191970')
             // tileLoadFunction: (imageTile, src) => this.tileLoadFunction(imageTile, src)
           }
@@ -205,25 +208,98 @@ export default {
       //   new layerType[layersConfig[2][1]]({ url: layersConfig[2][0] })
       // ]
       baselayers = [
-        // new layerType[layersConfig[0][1]](
-        //   layersConfig[0][0] + key,
-        //   tileInfo(true, 0.2)
-        // ),
-        // new layerType[layersConfig[1][1]](
-        //   layersConfig[1][0] + key,
-        //   tileInfo(true, 1)
-        // ),
-        new layerType[layersConfig[2][1]](
-          layersConfig[2][0] + key,
-          tileInfo(false, 0.2)
+        new layerType[layersConfig[0][1]](
+          layersConfig[0][0] + key,
+          tileInfo(true, 0.2)
         ),
-        new layerType[layersConfig[3][1]](
-          layersConfig[3][0] + key,
+        new layerType[layersConfig[1][1]](
+          layersConfig[1][0] + key,
           tileInfo(true, 1)
         ),
+        // new layerType[layersConfig[2][1]](
+        //   layersConfig[2][0] + key,
+        //   tileInfo(false, 0.2)
+        // ),
+        // new layerType[layersConfig[3][1]](
+        //   layersConfig[3][0] + key,
+        //   tileInfo(true, 1)
+        // ),
         new layerType[layersConfig[4][1]]({ url: layersConfig[4][0] })
       ]
       // debugger
+
+      // 修改底图切片的颜色  --start
+      baselayers.forEach(item => {
+        if (item.operationalLayerType == 'WebTiledLayer') {
+          item.fetchTile = (level, row, col, options) => {
+            const url = this.getTileUrl(item, level, row, col)
+
+            // this.tileLoadFunction(level, url)
+            return this.tools.esriRequest(url, {
+              responseType: 'image',
+              signal: options && options.signal
+            }).then(
+              function(response) {
+                // esri请求解析成功时
+                // 从响应中获取图像
+                // debugger
+                const img = response.data
+                const canvas = document.createElement('canvas')
+                const w = img.width
+                const h = img.height
+                canvas.width = w
+                canvas.height = h
+                const context = canvas.getContext('2d')
+                context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
+                const imageData = context.getImageData(0, 0, w, h)
+                for (let i = 0; i < imageData?.height; i++) {
+                  for (let j = 0; j < imageData?.width; j++) {
+                    const x = i * 4 * imageData.width + j * 4
+                    const gray =
+          imageData.data[x] * 0.3 + imageData.data[x + 1] * 0.59 + imageData.data[x + 2] * 0.11
+                    // imageData.data[x] =
+                    //   imageData.data[x + 1] =
+                    //   imageData.data[x + 2] =
+                    //     imageData.data[x] * 0.3 + imageData.data[x + 1] * 0.59 + imageData.data[x + 2] * 0.11;
+
+                    // 大体灰度244 ,m
+                    imageData.data[x] = 244 + 2 - gray
+                    imageData.data[x + 1] = 244 + 38 - gray
+                    imageData.data[x + 2] = 244 + 65 - gray
+
+                    // console.log(gray)
+
+                    // 大体灰度244 ,m
+                    // imageData.data[x] = 244 + (-10) - gray
+                    // imageData.data[x + 1] = 244 + 10 - gray
+                    // imageData.data[x + 2] = 244 + (35) - gray
+                    // console.log(imageData.data[x], imageData.data[x + 1], imageData.data[x + 2], gray);
+                  }
+                }
+    context?.putImageData(imageData, 0, 0)
+    return canvas
+                // return img.src = imgSrc
+                // const width = item.tileInfo.size[0]
+                // const height = item.tileInfo.size[0]
+
+                // // 使用二维渲染上下文创建画布
+                // const canvas = document.createElement('canvas')
+                // const context = canvas.getContext('2d')
+                // canvas.width = width
+                // canvas.height = height
+                // // context.fillStyle = "rgba(255, 165, 0, 0.05)";
+                // // context.filter = map_filter.bigMapFilter
+
+                // // 将混合图像绘制到画布上。
+                // context.drawImage(image, 0, 0, width, height)
+                // return canvas
+              }
+            )
+          }
+        }
+      })
+      // 修改底图切片的颜色  --end
+
       // 底图
       var basemap = new this.tools.Basemap({
         baseLayers: baselayers,
@@ -454,11 +530,14 @@ export default {
       })
     },
 
+    getTileUrl(obj, level, row, col) {
+      return obj.urlTemplate.replace('{subDomain}', 't' + Math.floor(Math.random() * 8)).replace('{level}', level).replace('{col}', col).replace('{row}', row)
+    },
     tileLoadFunction(imageTile, src) {
       const img = new Image()
       let imgSrc = src
       // 层级大于18后，不请求图片。而是放大当前图片
-      if (imageTile.tileCoord[0] > 18) {
+      if (imageTile > 18) {
         imgSrc = ''
       }
       img.crossOrigin = ''

src/views/zhpt/scada/indexConfigurationManage/widget.vue

@@ -388,12 +388,14 @@ export default {
       //   return
       // }
       // if (that.strIsNull(that.editData.variableCode)) {
-      //   this.$message.error('请输入变量编码')
+      //   this.$message.err or('请输入变量编码')
       //   return
       // }
       const data = JSON.parse(JSON.stringify(this.editData))
       data.reportId = that.strIsNull(data.reportId) ? '' : data.reportId.join()
-      data.type = data.type.toString()
+      if (data.type) {
+        data.type = data.type.toString()
+      }
       editIndexConfiguration(data).then(res => {
         if (res.code == 1) {
           that.$message.success('修改成功')

src/views/zhpt/scada/scadaCraftMap/MiniScadaCraftMap/craftConfig/firstCraftConfig.js

@@ -1,9 +1,9 @@
 /*
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-04 13:48:16
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-08-18 16:23:57
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\firstCraftConfig.js
+ * @LastEditors: zjz
+ * @LastEditTime: 2024-03-14 11:28:09
+ * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\MiniScadaCraftMap\craftConfig\firstCraftConfig.js
  * @Description: 第一水厂
  */
 
@@ -13,53 +13,55 @@ 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': '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, 60], 'y': [0, 24] }, 'value': [
-      { 'id': 't4', 'name': '水源地进水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_CHENGJIAO_JIN_TFT1', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '水源地进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_CHENGJIAO_JIN_FT1', 'style': 'color:#F7F604;' },
-      { 'id': 't20', 'name': '水源地进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_JIN_P1', 'style': 'color:#F7F604;' },
+    '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': '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': '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': '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': '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': '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': '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;'
+    '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': '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;' },
+      { 'id': 't20', 'name': '出水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_CHU_P', 'style': 'color:#F7F604;' }
     ]
   },
 
@@ -74,5 +76,5 @@ export const allConfig = [ // 一二期
 
   { '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 },
-]
+  { 'type': 'arrow', 'id': 'a9', 'from': 'm1p10', 'to': 'm1p11', 'style': 'strokeColor=#33f3fe;', 'flow': true }
+]

src/views/zhpt/scada/scadaCraftMap/MiniScadaCraftMap/craftConfig/mlCraftConfig.js

@@ -1,117 +1,111 @@
 /*
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-03 16:34:36
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-07-25 13:53:01
- * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\mlCraftConfig.js
+ * @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, 24] }, '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_TF', '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 },
+  // 初始基准点
+  { '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
@@ -122,108 +116,105 @@ export const allConfig_bak = [ // 一二期
  */
 
 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, 40] }, '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_TF', '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 },
-]
+  // 初始基准点
+  { '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/zhpt/scada/scadaCraftMap/MiniScadaCraftMap/craftConfig/thirdCraftConfig.js

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-09 09:31:25
  * @LastEditors: zjz
- * @LastEditTime: 2023-09-04 15:42:54
+ * @LastEditTime: 2024-03-13 23:25:25
  * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\MiniScadaCraftMap\craftConfig\thirdCraftConfig.js
  * @Description: 三水厂
  */
@@ -98,11 +98,11 @@ export const allConfig = [
     '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': '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': '1#水泵', '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': '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': '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] }},
@@ -154,7 +154,6 @@ export const allConfig = [
   { '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] }},
@@ -183,7 +182,7 @@ export const allConfig = [
   { '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] }},
 
   // 反冲洗泵房基准点
@@ -200,19 +199,19 @@ export const allConfig = [
   { '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;' },
+  { '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;' },
+  { '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;' },
+  { '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] }},
@@ -222,11 +221,11 @@ export const allConfig = [
   { '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': '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;' },
-  
+  { '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] }},
@@ -239,34 +238,34 @@ export const allConfig = [
     '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;' },
-  
+  { '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-1#反应沉淀池-下', 'from': 'm1p36', 'margin': { 'x': [0, 0], 'y': [0, -20] }},
+  { 'type': 'point', 'id': 'm1p59', 'name': '基准点59-2#反应沉淀池-下', 'from': 'm1p36', 'margin': { 'x': [0, 0], 'y': [0, -20] }},
   {
-    'type': 'rectangle', 'id': 'm59i1', 'name': '1#反应沉淀池', 'text': '1#反应沉淀池', 'class': 'rectangle',
+    '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-1#反应沉淀池-上1', 'from': 'm1p59', 'margin': { 'x': [0, 60], 'y': [0, -100] }},
-  { 'type': 'point', 'id': 'm1p61', 'name': '基准点61-1#反应沉淀池-上2', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 10] }},
-  { 'type': 'point', 'id': 'm1p62', 'name': '基准点62-1#反应沉淀池-上3', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 20] }},
+  { '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': '1#沉淀池', 'from': 'm1p63', 'point': [0, 0], 'margin': { 'x': [0, -90], 'y': [0, -70] }},
+  { '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': '1#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p63', 'margin': { 'x': [0, -60], 'y': [0, -30] }, 'value': [
+    '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;'
@@ -298,11 +297,11 @@ export const allConfig = [
   },
 
   // 2#反应沉淀池上-基准点1
-  { 'type': 'point', 'id': 'm1p66', 'name': '基准点66-2#反应沉淀池-上', 'from': 'm1p42', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
+  { 'type': 'point', 'id': 'm1p66', 'name': '基准点66-1#反应沉淀池-上', 'from': 'm1p42', 'margin': { 'x': [0, 0], 'y': [0, -60] }},
   // 2#反应沉淀池上-基准点2
-  { 'type': 'point', 'id': 'm1p67', 'name': '基准点67-2#反应沉淀池-上', 'from': 'm1p66', 'margin': { 'x': [0, 150], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p67', 'name': '基准点67-1#反应沉淀池-上', 'from': 'm1p66', 'margin': { 'x': [0, 150], 'y': [0, 0] }},
   {
-    'type': 'rectangle', 'id': 'm67i1', 'name': '2#反应沉淀池', 'text': '2#反应沉淀池', 'class': 'rectangle',
+    '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;',
@@ -323,16 +322,16 @@ export const allConfig = [
   { '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': '2#反应沉淀池-下', 'from': 'p1p4', 'margin': { 'x': [0, -200], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'p1p5', 'name': '1#反应沉淀池-下', 'from': 'p1p4', 'margin': { 'x': [0, -200], 'y': [0, 0] }},
   {
-    'type': 'text', 'id': 't1p5', 'name': '2#沉淀池进水流量', 'point': [0, 0], 'from': 'p1p5', 'margin': { 'x': [0, 100], 'y': [0, 0] }, 'value': [
+    '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': '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] }},
 
@@ -340,7 +339,6 @@ export const allConfig = [
   { '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' }
@@ -401,5 +399,5 @@ export const allConfig = [
   { '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 },
+  { 'type': 'arrow', 'id': 'a56', 'from': 'p1p11', 'to': 'p1p12', 'style': 'strokeColor=#33f3fe;', 'flow': true }
 ]

src/views/zhpt/scada/scadaCraftMap/MiniScadaCraftMap/craftConfig/ylCraftConfig.js

@@ -13,7 +13,7 @@ export const allConfig = [
     { '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, 40] }, 'value': [
+        '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;' },

src/views/zhpt/scada/scadaCraftMap/components/indexsTable.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-04-21 11:20:05
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-04-23 17:50:52
+ * @LastEditors: zjz
+ * @LastEditTime: 2024-03-13 17:56:57
  * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\components\indexsTable.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -82,7 +82,7 @@ export default {
         const scada = item.scada
         if (scada) {
           const span = this.$refs[scada.code]
-          if (span) {
+          if (span && span.length > 0) {
             scada.value = item.displayName.indexOf('出厂水余氯') > -1 ? '0.61' : scada.value
             // console.log('指标监测值',scada.code+"："+scada.value)
             span[0].innerHTML = parseFloat(scada.value) === 0 ? 0 : parseFloat(scada.value).toFixed(2)

src/views/zhpt/scada/scadaCraftMap/craftConfig/firstCraftConfig.js

@@ -1,8 +1,8 @@
 /*
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-04 13:48:16
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-04-24 15:44:23
+ * @LastEditors: zjz
+ * @LastEditTime: 2024-03-14 11:27:25
  * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\firstCraftConfig.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,53 +13,55 @@ const changeImage = () => { }
 export const allConfig = [ // 一二期
   // 初始基准点
   { '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': 'p1t1', 'text': '原水', 'from': 'm1p1', 'point': [1, 0.5], 'margin': { 'x': [0, 30], 'y': [0, -20] }},
+  // 出水指标
   {
-    'type': 'text', 'id': 'm1t2', 'name': '进水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 80], 'y': [0, 24] }, 'value': [
-      { 'id': 't4', 'name': '水源地进水总流量：', 'value': 0.0, 'unit': 'm³', 'itnm': 'SCADA_CHENGJIAO_JIN_TFT1', 'style': 'color:#F7F604;' },
-      { 'id': 't5', 'name': '水源地进水瞬时流量：', 'value': 0.0, 'unit': 'm³/h', 'itnm': 'SCADA_CHENGJIAO_JIN_FT1', 'style': 'color:#F7F604;' },
-      { 'id': 't20', 'name': '水源地进水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_JIN_P1', 'style': 'color:#F7F604;' },
+    'type': 'text', 'id': 'm1t2', 'name': '进水指标', 'point': [0, 0], 'from': 'm1p1', 'margin': { 'x': [0, 70], 'y': [0, 24] }, '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, 20], 'y': [0.3, -40] } },
-  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3', 'from': 'm1p1', 'margin': { 'x': [0.1, 0], 'y': [0.1, -40] } },
+  { 'type': 'point', 'id': 'm1p2', 'name': '基准点2', 'from': 'm1p1', 'margin': { 'x': [0.1, 20], 'y': [0.3, -40] }},
+  { 'type': 'point', 'id': 'm1p3', 'name': '基准点3', 'from': 'm1p1', 'margin': { 'x': [0.1, 0], 'y': [0.1, -40] }},
   { 'type': 'image', 'id': 'm3i1', 'name': '加药间', 'text': '加药间', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p3', 'margin': { 'x': [0, -18], 'y': [0, 80] }, 'width': 160, 'height': 160, 'src': '复合加药间设备.png' },
-  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4', 'from': 'm1p1', 'margin': { 'x': [0.1, 104], 'y': [0.3, -40] } },
-  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5(以基础点2为基础)', 'from': 'm1p2', 'margin': { 'x': [0.5, 160], 'y': [0, 0] } },
+  { 'type': 'point', 'id': 'm1p4', 'name': '基准点4', 'from': 'm1p1', 'margin': { 'x': [0.1, 104], 'y': [0.3, -40] }},
+  { 'type': 'point', 'id': 'm1p5', 'name': '基准点5(以基础点2为基础)', 'from': 'm1p2', 'margin': { 'x': [0.5, 160], 'y': [0, 0] }},
 
-  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6(以基础点2为基础)-沉淀池基准点', 'from': 'm1p2', 'margin': { 'x': [0.1, 0], 'y': [0, 0] } },
+  { 'type': 'point', 'id': 'm1p6', 'name': '基准点6(以基础点2为基础)-沉淀池基准点', 'from': 'm1p2', 'margin': { 'x': [0.1, 0], 'y': [0, 0] }},
   { 'type': 'image', 'id': 'm1i3', 'name': '沉淀池', 'text': '混合循环反应斜管沉淀池', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [0, 0] }, 'width': 200, 'height': 200, 'src': '沉淀池.gif' },
   { 'type': 'image', 'id': 'm6i2', 'name': '调节池', 'text': '调节池', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 300], 'y': [0, 0] }, 'width': 200, 'height': 200, 'src': '虹吸滤池.gif' },
   { 'type': 'image', 'id': 'm6i3', 'name': '过滤池', 'text': '过滤池', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 600], 'y': [0, -40] }, 'width': 240, 'height': 200, 'src': '加药间.gif' },
   { 'type': 'image', 'id': 'm6i4', 'name': '消毒剂加药间', 'text': '消毒剂加药间', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p6', 'margin': { 'x': [0, 880], 'y': [0, 0] }, 'width': 240, 'height': 200, '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, 63], 'y': [0.4, 40] } },
-  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p8', 'margin': { 'x': [0, 69], 'y': [0, 0] } },
+  { '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, 63], 'y': [0.4, 40] }},
+  { 'type': 'point', 'id': 'm1p9', 'name': '基准点9', 'from': 'm1p8', 'margin': { 'x': [0, 69], 'y': [0, 0] }},
 
-  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p8', 'margin': { 'x': [0, 35], 'y': [0, 200] } },
+  { 'type': 'point', 'id': 'm1p10', 'name': '基准点10', 'from': 'm1p8', 'margin': { 'x': [0, 35], 'y': [0, 200] }},
 
-  { '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': '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', 'point': [0, 0.5], 'from': 'm1p12', 'margin': { 'x': [0, 0], 'y': [0, 0] }, 'width': 240, 'height': 200, 'src': '虹吸滤池.gif' },
-  //清水池
+  // 清水池
   {
     'type': 'text', 'id': 'm1t2', 'name': '清水池', 'point': [0, 0.5], 'from': 'm1p12', 'margin': { 'x': [0, 110], 'y': [0, 54] }, '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;'
+    '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': '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;' },
+      { 'id': 't20', 'name': '出水压力：', 'value': 0.0, 'unit': 'MPa', 'itnm': 'SCADA_CHENGJIAO_CHU_P', 'style': 'color:#F7F604;' }
     ]
   },
 
@@ -74,5 +76,5 @@ export const allConfig = [ // 一二期
 
   { '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 },
-]
+  { 'type': 'arrow', 'id': 'a9', 'from': 'm1p10', 'to': 'm1p11', 'style': 'strokeColor=#33f3fe;', 'flow': true }
+]

src/views/zhpt/scada/scadaCraftMap/craftConfig/mlCraftConfig.js

@@ -1,8 +1,8 @@
 /*
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-03 16:34:36
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-04-24 14:31:49
+ * @LastEditors: zjz
+ * @LastEditTime: 2024-03-13 23:06:27
  * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\mlCraftConfig.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,101 +10,98 @@ const changeValueFun = () => { }
 const changeImage = () => { }
 
 export const allConfig = [ // 一二期
-    // 初始基准点
-    { '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, 24] }, '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_TF', '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', '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': '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, 24] }, '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倍
+  { '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', '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', 'point': [0, 0.5], 'from': 'm1p4', 'margin': { 'x': [0, 100], 'y': [0, -4] }, 'width': 90, 'height': 90, 'src': '计量泵.png' },
+  { 'type': 'image', 'id': 'm4i2', 'name': '计量泵', 'text': '计量泵', 'class': 'onWhiteText', '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': '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': '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': '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': 'point', 'id': 'm1p7', 'name': '基准点7-二氧化氯发生器', 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [-0.5, 0] }},
 
+  { 'type': 'image', 'id': 'm7i6', 'name': '二氧化氯发生器', 'text': '二氧化氯发生器', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -70], 'y': [0, 0] }, 'width': 160, 'height': 160, 'src': '二氧化氯发生器.png' },
 
-    {
-        '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': '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, 10], 'y': [0, -54] }, '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': 'point', 'id': 'm1p7', 'name': '基准点7-二氧化氯发生器', 'from': 'm1p6', 'margin': { 'x': [0, 0], 'y': [-0.5, 0] } },
+  { 'type': 'text', 'id': 'p1t1', 'text': '出厂水', 'from': 'm1p10', 'point': [1, 0.5], 'margin': { 'x': [0, 80], 'y': [0, 0] }},
 
-    { 'type': 'image', 'id': 'm7i6', 'name': '二氧化氯发生器', 'text': '二氧化氯发生器', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -70], 'y': [0, 0] }, 'width': 160, 'height': 160, 'src': '二氧化氯发生器.png' },
+  // 划线
+  { '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': '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 },
-]
+  { '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/zhpt/scada/scadaCraftMap/craftConfig/thirdCraftConfig.js

@@ -1,8 +1,8 @@
 /*
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-09 09:31:25
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-04-23 18:17:45
+ * @LastEditors: zjz
+ * @LastEditTime: 2024-03-13 17:49:30
  * @FilePath: \dcWaterService\src\views\zhpt\scada\scadaCraftMap\craftConfig\thirdCraftConfig.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -100,7 +100,7 @@ export const allConfig = [
 
   { 'type': 'image', 'id': 'm7i2', 'name': '1#水泵', 'text': '1#水泵', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p7', 'margin': { 'x': [0, -13], 'y': [0, 45] }, 'width': 40, 'height': 90, 'src': '水泵.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
 
-  { 'type': 'image', 'id': 'm11i1', 'name': '2#水泵', 'text': '1#水泵', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p11', 'margin': { 'x': [0, -13], 'y': [0, 45] }, 'width': 40, 'height': 90, 'src': '水泵.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
+  { 'type': 'image', 'id': 'm11i1', 'name': '2#水泵', 'text': '2#水泵', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p11', 'margin': { 'x': [0, -13], 'y': [0, 45] }, 'width': 40, 'height': 90, 'src': '水泵.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
 
   { 'type': 'image', 'id': 'm13i1', 'name': '消防泵', 'text': '消防泵', 'class': 'onWhiteText', 'point': [0, 0.5], 'from': 'm1p13', 'margin': { 'x': [0, -13], 'y': [0, 45] }, 'width': 40, 'height': 90, 'src': '消防泵.png', 'titleStyle': 'position: absolute;top: 110px;font-size: 14px;' },
 
@@ -240,26 +240,26 @@ export const allConfig = [
   { '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-1#反应沉淀池-下', 'from': 'm1p58', 'margin': { 'x': [0, 160], 'y': [0, -20] }},
+  { 'type': 'point', 'id': 'm1p59', 'name': '基准点59-2#反应沉淀池-下', 'from': 'm1p58', 'margin': { 'x': [0, 160], 'y': [0, -20] }},
   {
-    'type': 'rectangle', 'id': 'm59i1', 'name': '1#反应沉淀池', 'text': '1#反应沉淀池', 'class': 'rectangle',
+    'type': 'rectangle', 'id': 'm59i1', 'name': '2#反应沉淀池', 'text': '2#反应沉淀池', 'class': 'rectangle',
     'point': [1, 0.5], 'from': 'm1p59', 'margin': { 'x': [0, 110], 'y': [0, -80] },
     'width': 220, 'height': 180, '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-1#反应沉淀池-上1', 'from': 'm1p59', 'margin': { 'x': [0, 0], 'y': [0, -220] }},
-  { 'type': 'point', 'id': 'm1p61', 'name': '基准点61-1#反应沉淀池-上2', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 20] }},
-  { 'type': 'point', 'id': 'm1p62', 'name': '基准点62-1#反应沉淀池-上3', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
+  { 'type': 'point', 'id': 'm1p60', 'name': '基准点60-2#反应沉淀池-上1', 'from': 'm1p59', 'margin': { 'x': [0, 0], 'y': [0, -220] }},
+  { 'type': 'point', 'id': 'm1p61', 'name': '基准点61-2#反应沉淀池-上2', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 20] }},
+  { 'type': 'point', 'id': 'm1p62', 'name': '基准点62-2#反应沉淀池-上3', 'from': 'm1p60', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
 
   // 原水池上基准点
-  { 'type': 'point', 'id': 'm1p63', 'name': '基准点63', 'from': 'm1p60', 'margin': { 'x': [0, 480], 'y': [0, 80] }},
-  { 'type': 'text', 'id': 'p63t1', 'text': '1#沉淀池', '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': 'point', 'id': 'm1p63', 'name': '基准点63', 'from': 'm1p60', 'margin': { 'x': [0, 460], 'y': [0, 80] }},
+  { 'type': 'text', 'id': 'p63t1', 'text': '2#沉淀池', 'from': 'm1p63', 'point': [0, 0], 'margin': { 'x': [0, -120], 'y': [0, -70] }},
+  { 'type': 'text', 'id': 'p63t2', 'text': '进水流量', 'from': 'm1p63', 'point': [0, 0], 'margin': { 'x': [0, -120], 'y': [0, -50] }},
   {
-    'type': 'text', 'id': 'p63t3', 'name': '1#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p63', 'margin': { 'x': [0, -86], 'y': [0, -30] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '1', 'unit': 'm³/h', 'itnm': 'Siemens.1#PLC.2QGSLL' }
+    'type': 'text', 'id': 'p63t3', 'name': '2#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p63', 'margin': { 'x': [0, -120], '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;'
   },
@@ -290,36 +290,36 @@ export const allConfig = [
   },
 
   // 2#反应沉淀池上-基准点1
-  { 'type': 'point', 'id': 'm1p66', 'name': '基准点66-2#反应沉淀池-上', 'from': 'm1p42', 'margin': { 'x': [0, 60], 'y': [0, -40] }},
+  { 'type': 'point', 'id': 'm1p66', 'name': '基准点66-1#反应沉淀池-上', 'from': 'm1p42', 'margin': { 'x': [0, 60], 'y': [0, -40] }},
   // 2#反应沉淀池上-基准点2
-  { 'type': 'point', 'id': 'm1p67', 'name': '基准点67-2#反应沉淀池-上', 'from': 'm1p66', 'margin': { 'x': [0, 255], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p67', 'name': '基准点67-1#反应沉淀池-上', 'from': 'm1p66', 'margin': { 'x': [0, 255], 'y': [0, 0] }},
   {
-    'type': 'rectangle', 'id': 'm67i1', 'name': '2#反应沉淀池', 'text': '2#反应沉淀池', 'class': 'rectangle',
+    'type': 'rectangle', 'id': 'm67i1', 'name': '1#反应沉淀池', 'text': '2#反应沉淀池', 'class': 'rectangle',
     'point': [1, 0.5], 'from': 'm1p67', 'margin': { 'x': [0, 110], 'y': [0, 110] },
     'width': 220, 'height': 180, '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;' }
   },
   // 2#反应沉淀池下-基准点
-  { 'type': 'point', 'id': 'm1p68', 'name': '基准点68-2#反应沉淀池-上', 'from': 'm1p67', 'margin': { 'x': [0, 0], 'y': [0, 260] }},
-  { 'type': 'point', 'id': 'm68p1', 'name': '基准点68-2#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 480], 'y': [0, 0] }},
-  { 'type': 'point', 'id': 'm68p2', 'name': '基准点68-2#反应沉淀池-上', 'from': 'm68p1', 'margin': { 'x': [0, 0], 'y': [0, -400] }},
+  { 'type': 'point', 'id': 'm1p68', 'name': '基准点68-1#反应沉淀池-上', 'from': 'm1p67', 'margin': { 'x': [0, 0], 'y': [0, 260] }},
+  { 'type': 'point', 'id': 'm68p1', 'name': '基准点68-1#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 480], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm68p2', 'name': '基准点68-1#反应沉淀池-上', 'from': 'm68p1', 'margin': { 'x': [0, 0], 'y': [0, -400] }},
   // 原水池下-基准点
   { 'type': 'point', 'id': 'm1p69', 'name': '基准点69', 'from': 'm1p63', 'margin': { 'x': [0, 0], 'y': [0, 300] }},
 
   // 2#反应沉淀池下-基准点-1
-  { 'type': 'point', 'id': 'm1p70', 'name': '基准点70-2#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 0], 'y': [0, -20] }},
-  { 'type': 'point', 'id': 'm70p1', 'name': '基准点70-2#反应沉淀池-上', 'from': 'm1p70', 'margin': { 'x': [0, 200], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p70', 'name': '基准点70-1#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 0], 'y': [0, -20] }},
+  { 'type': 'point', 'id': 'm70p1', 'name': '基准点70-1#反应沉淀池-上', 'from': 'm1p70', 'margin': { 'x': [0, 200], 'y': [0, 0] }},
 
   // 2#反应沉淀池下-基准点-2
-  { 'type': 'point', 'id': 'm1p71', 'name': '基准点71-2#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 0], 'y': [0, -40] }},
-  { 'type': 'point', 'id': 'm71p1', 'name': '基准点71-2#反应沉淀池-上', 'from': 'm1p71', 'margin': { 'x': [0, 180], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p71', 'name': '基准点71-1#反应沉淀池-上', 'from': 'm1p68', 'margin': { 'x': [0, 0], 'y': [0, -40] }},
+  { 'type': 'point', 'id': 'm71p1', 'name': '基准点71-1#反应沉淀池-上', 'from': 'm1p71', 'margin': { 'x': [0, 180], 'y': [0, 0] }},
   // 2#反应沉淀池下-基准点左2-1到加药间-下1
-  { 'type': 'point', 'id': 'm1p72', 'name': '基准点71-2#反应沉淀池-上', 'from': 'm1p64', 'margin': { 'x': [0, 0], 'y': [0, 80] }},
-  { 'type': 'point', 'id': 'm72p1', 'name': '基准点71-2#反应沉淀池-上1-1', 'from': 'm1p72', 'margin': { 'x': [0, 80], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p72', 'name': '基准点71-1#反应沉淀池-上', 'from': 'm1p64', 'margin': { 'x': [0, 0], 'y': [0, 80] }},
+  { 'type': 'point', 'id': 'm72p1', 'name': '基准点71-1#反应沉淀池-上1-1', 'from': 'm1p72', 'margin': { 'x': [0, 80], 'y': [0, 0] }},
   // 2#反应沉淀池下-基准点左2-1到加药间-下1
-  { 'type': 'point', 'id': 'm1p73', 'name': '基准点71-2#反应沉淀池-上', 'from': 'm1p65', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
-  { 'type': 'point', 'id': 'm73p1', 'name': '基准点71-2#反应沉淀池-上', 'from': 'm1p73', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
+  { 'type': 'point', 'id': 'm1p73', 'name': '基准点71-1#反应沉淀池-上', 'from': 'm1p65', 'margin': { 'x': [0, 0], 'y': [0, 40] }},
+  { 'type': 'point', 'id': 'm73p1', 'name': '基准点71-1#反应沉淀池-上', 'from': 'm1p73', 'margin': { 'x': [0, 120], 'y': [0, 0] }},
   // 原水池
   {
     'type': 'rectangle', 'id': 'm69i1', 'name': '原水池', 'text': '原水池', 'class': 'rectangle',
@@ -341,11 +341,11 @@ export const allConfig = [
   // 原水池下-左下下-基准点
   { 'type': 'point', 'id': 'm1p75', 'name': '基准点69', 'from': 'm1p74', 'margin': { 'x': [0, 0], 'y': [0, 220] }},
   { 'type': 'text', 'id': 'p75t1', 'text': '进水', 'from': 'm1p75', 'point': [1, 0.5], 'margin': { 'x': [0, 10], 'y': [0, 20] }},
-  { 'type': 'text', 'id': 'p63t4', 'text': '2#沉淀池', 'from': 'm1p75', 'point': [0, 0], 'margin': { 'x': [0, -130], 'y': [0, -90] }},
-  { 'type': 'text', 'id': 'p63t5', 'text': '进水流量', 'from': 'm1p75', 'point': [0, 0], 'margin': { 'x': [0, -130], 'y': [0, -70] }},
+  { 'type': 'text', 'id': 'p63t4', 'text': '1#沉淀池', 'from': 'm1p75', 'point': [0, 0], 'margin': { 'x': [0, -146], 'y': [0, -90] }},
+  { 'type': 'text', 'id': 'p63t5', 'text': '进水流量', 'from': 'm1p75', 'point': [0, 0], 'margin': { 'x': [0, -146], 'y': [0, -70] }},
   {
-    'type': 'text', 'id': 'p63t6', 'name': '2#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p75', 'margin': { 'x': [0, -130], 'y': [0, -50] }, 'value': [
-      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm³/h', 'itnm': 'Siemens.1#PLC.1QGSLL' }
+    'type': 'text', 'id': 'p63t6', 'name': '1#沉淀池进水流量', 'point': [0, 0], 'from': 'm1p75', 'margin': { 'x': [0, -146], 'y': [0, -50] }, 'value': [
+      { 'id': 't10', 'name': '', 'value': '2', 'unit': 'm³/h', 'itnm': 'Siemens.1#PLC.2QGSLL' }
     ],
     'style': 'color:#F7F604;font-size:16px;z-index: 999;'
   },

src/views/zhpt/scada/scadaCraftMap/widget.vue

@@ -6,8 +6,9 @@
         :key="item.id"
         type="primary"
         size="small"
-        :style="'width:80px;margin-bottom: 2px;background:' +
-          (item.active ? '#053060' : '#409EFF')
+        :style="
+          'width:80px;margin-bottom: 2px;background:' +
+            (item.active ? '#053060' : '#409EFF')
         "
         @click="setCraft(item.id)"
       >{{ item.name }}</el-button>
@@ -26,19 +27,22 @@
     <div v-if="showItem ? showItem.title : false" class="table-container">
       <indexs-table />
     </div>
-    <template v-for="item in waterworks">
-      <div
-        v-if="item.active"
-        :id="item.id"
-        :key="item.id"
-        :ref="item.id"
-        v-loading="loading"
-        element-loading-text="拼命加载中"
-        element-loading-spinner="el-icon-loading"
-        class="graph"
-        style="width: 100%; height: 100%; background: rgb(5, 37, 58)"
-      />
-    </template>
+    <div
+      v-loading="loading"
+      class="graphBg"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+    >
+      <template v-for="item in waterworks">
+        <div
+          v-if="item.active"
+          :id="item.id"
+          :key="item.id"
+          :ref="item.id"
+          class="graph"
+        />
+      </template>
+    </div>
 
     <el-dialog
       :title="siteTitle"
@@ -65,14 +69,30 @@
           :default-time="['00:00:00', '23:59:59']"
           value-format="yyyy-MM-dd HH:mm:ss"
         />
-        <el-button size="small" type="primary" @click="showResult">查询</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="showResult"
+        >查询</el-button>
         <el-checkbox v-model="dontShow">去除特殊值(-9999)</el-checkbox>
       </el-row>
-      <div v-loading="infoLoading" style="width: 100%; height: 500px; margin-top: 8px; display: flex">
+      <div
+        v-loading="infoLoading"
+        style="width: 100%; height: 500px; margin-top: 8px; display: flex"
+      >
         <div style="width: 28%; height: 100%">
-          <el-table :data="siteDatas" border height="calc(100% - 43px)" style="width: 100%">
+          <el-table
+            :data="siteDatas"
+            border
+            height="calc(100% - 43px)"
+            style="width: 100%"
+          >
             <el-table-column prop="scadaTime" label="时间" />
-            <el-table-column prop="value" :formatter="valFormatter" label="测量值" />
+            <el-table-column
+              prop="value"
+              :formatter="valFormatter"
+              label="测量值"
+            />
           </el-table>
           <el-row style="margin-top: 8px">
             <el-col :span="18">
@@ -89,11 +109,14 @@
               />
             </el-col>
             <el-col :span="6" class="el-pagination is-background">
-              <span ref="pageLength2" class="el-pagination__total">1/30 页</span>
+              <span
+                ref="pageLength2"
+                class="el-pagination__total"
+              >1/30 页</span>
             </el-col>
           </el-row>
         </div>
-        <div ref="chart" style="width: 72%; height: 100%;" />
+        <div ref="chart" style="width: 72%; height: 100%" />
       </div>
     </el-dialog>
   </div>
@@ -124,14 +147,23 @@ export default {
       siteTitle: '',
       siteVisible: false,
       // 查询日期时间范围
-      rangeTime: [new Date(new Date().setHours(0, 0, 0, 0)),
-        new Date(new Date().setHours(23, 59, 59, 59))],
+      rangeTime: [
+        new Date(new Date().setHours(0, 0, 0, 0)),
+        new Date(new Date().setHours(23, 59, 59, 59))
+      ],
       pickerOptions: {
         disabledDate(time) {
-          var todayYear = (new Date()).getFullYear()
-          var todayMonth = (new Date()).getMonth()
-          var todayDay = (new Date()).getDate()
-          var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
+          var todayYear = new Date().getFullYear()
+          var todayMonth = new Date().getMonth()
+          var todayDay = new Date().getDate()
+          var todayTime = new Date(
+            todayYear,
+            todayMonth,
+            todayDay,
+            '23',
+            '59',
+            '59'
+          ).getTime() // 毫秒
           return time.getTime() > todayTime
         }
       },
@@ -165,7 +197,7 @@ export default {
     // this.getSide();
     this.showItem = this.waterworks[0]
   },
-  created() { },
+  created() {},
   destroyed() {
     if (this.nextDo) clearTimeout(this.nextDo)
   },
@@ -278,8 +310,8 @@ export default {
                   (test
                     ? 'opacity: 0.5;border: 1px solid #0ff;'
                     : 'background-image: url(' +
-                    cache[imagesUrl + node.src] +
-                    ');') +
+                      cache[imagesUrl + node.src] +
+                      ');') +
                   '">'
                 if (node.text) {
                   str +=
@@ -353,9 +385,17 @@ export default {
                     (node.class || 'title') +
                     '"><span>' +
                     text.name +
-                    '</span></div><span class="value" ' + (text.hasOwnProperty('style') ? ` style="${text.style}"` : '') + '>' +
+                    '</span></div><span class="value" ' +
+                    (text.hasOwnProperty('style')
+                      ? ` style="${text.style}"`
+                      : '') +
+                    '>' +
                     text.value +
-                    '</span><span class="unit" ' + (text.hasOwnProperty('style') ? ` style="${text.style}"` : '') + '>' +
+                    '</span><span class="unit" ' +
+                    (text.hasOwnProperty('style')
+                      ? ` style="${text.style}"`
+                      : '') +
+                    '>' +
                     text.unit +
                     '</span></li>'
                 }
@@ -387,13 +427,13 @@ export default {
                     points.push(
                       new mxPoint(
                         nodeF.x +
-                        offer[0] +
-                        arrowNode.x[0] * width +
-                        arrowNode.x[1],
+                          offer[0] +
+                          arrowNode.x[0] * width +
+                          arrowNode.x[1],
                         nodeF.y +
-                        offer[1] +
-                        arrowNode.y[0] * height +
-                        arrowNode.y[1]
+                          offer[1] +
+                          arrowNode.y[0] * height +
+                          arrowNode.y[1]
                       )
                     )
                   } else {
@@ -475,12 +515,14 @@ export default {
               }
               var str =
                 `<div id="${node.id}" class="inPic" ` +
-                `style="transform: translate(-${node.point[0] * 100}%,-${node.point[1] * 100
+                `style="transform: translate(-${node.point[0] * 100}%,-${
+                  node.point[1] * 100
                 }%); ` +
                 `top: ${y}px; left: ${x}px;height:${node.height}px;width:${node.width}px;${node.style}">` +
                 `<span style="${node.titleStyle}">${node.name}</span>` +
                 (node.hasOwnProperty('children')
-                  ? `<div id="${node.class + node.id}" style="${node.children.style
+                  ? `<div id="${node.class + node.id}" style="${
+                    node.children.style
                   }"></div>`
                   : '') +
                 `</div>`
@@ -547,6 +589,7 @@ export default {
       this.waterworks.forEach((item) => {
         item.active = item.id === id
       })
+      debugger
       this.showItem = this.waterworks.find((item) => item.id === id)
       this.$nextTick(() => {
         this.loadCraft()
@@ -609,10 +652,14 @@ export default {
       }
       var loadInfo = () => {
         getScadaMonitor({ type: '1' }).then((res) => {
-          const findSSCIndex = res.result.findIndex(item => item.code === 'DCSW_SSC')
+          const findSSCIndex = res.result.findIndex(
+            (item) => item.code === 'DCSW_SSC'
+          )
           if (findSSCIndex !== -1) {
             const allocations = res.result[findSSCIndex].allocations
-            const findAllocationsIndex = allocations.findIndex(item => item.displayName.indexOf('出厂水余氯') > -1)
+            const findAllocationsIndex = allocations.findIndex(
+              (item) => item.displayName.indexOf('出厂水余氯') > -1
+            )
             allocations[findAllocationsIndex].scada.value = '0.61'
           }
           if (res.code == 1) {
@@ -631,7 +678,8 @@ export default {
                     var n = di.allocations[i]?.scada?.value
                     console.log('参数：', n, di.allocations[i]?.scada, t)
                     if (!n) n = '-'
-                    infos[t].innerHTML = n === '-' ? n : parseFloat(n).toFixed(accuracy)
+                    infos[t].innerHTML =
+                      n === '-' ? n : parseFloat(n).toFixed(accuracy)
                   }
                 }
               }
@@ -823,25 +871,255 @@ export default {
     color: #fff;
     padding: 0 4px;
   }
-}
 
-.buttonGroupClass {
-  border-radius: unset;
-  border-right: none;
-  position: absolute;
-  top: 50%;
-  left: 10px;
-  z-index: 999;
-  position: abs;
-  width: 80px;
-}
+  .buttonGroupClass {
+    border-radius: unset;
+    border-right: none;
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    z-index: 999;
+    position: abs;
+    width: 80px;
+  }
 
-.onWhiteText {
-  color: #8ac9fb !important;
-}
+  .graphBg {
+    width: 100%;
+    height: 100%;
+    background: url("/images/scada/background.png") no-repeat;
+    background-size: 100% 100%;
+
+    .graph {
+      width: 100%;
+      height: 100%;
+      // background: rgb(5, 37, 58);
+      transform: scale(0.8);
+    }
+  }
+
+  .onWhiteText {
+    color: #8ac9fb !important;
+  }
+
+  .inPic {
+    color: #8ac9fb !important;
+    font-size: 17px;
+  }
+
+  .underSvg {
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0%;
+    top: 0%;
+  }
+  .underSvg div {
+    position: absolute;
+    background: rgb(33, 61, 81);
+    border: 2px solid rgb(53, 88, 112);
+  }
+
+  .graph .underSvg span {
+    position: absolute;
+    left: 50%;
+    white-space: nowrap;
+    color: #8ac9fb;
+  }
+
+  .graph .underSvg .onText {
+    transform: translate(-50%, -100%);
+    top: -2%;
+  }
+
+  .onSvg {
+    z-index: 3;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0%;
+    top: 0%;
+    color: #eee;
+  }
+  .graph svg {
+    z-index: 2;
+    position: absolute;
+    /* background-image: url('./images/background.png'); */
+  }
+  .graph .img {
+    position: absolute;
+    background-size: 100% 100%;
+    font-size: 17px;
+    letter-spacing: 2px;
+    font-weight: bold;
+  }
+  .graph .img span {
+    position: absolute;
+    left: 50%;
+    white-space: nowrap;
+    color: #8ac9fb;
+    padding: 0 5px;
+  }
+  .graph .img .unText {
+    transform: translate(-50%, 100%);
+    bottom: -2%;
+  }
+  .graph .text ul {
+    position: absolute;
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .graph .text ul li {
+    margin-bottom: 3px;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .graph .text ul li::before {
+    content: "";
+    position: absolute;
+    display: block;
+    height: 1px;
+    left: 1px;
+    width: 0;
+    bottom: -1px;
+    background: #21b7f6;
+    transition: 0.4s;
+  }
+  .graph .text ul li:hover::before {
+    width: calc(100% + 2px);
+  }
+  .graph .text ul li:nth-last-child(1) {
+    margin-bottom: 0px;
+  }
+  .graph .text ul li div:nth-child(2) span:nth-child(1) {
+    text-align: right;
+  }
+  .graph .text ul li .title {
+    font-size: 13px;
+    letter-spacing: 1px;
+    position: absolute;
+    left: 0;
+    transform: translateX(-100%);
+  }
+  .graph .text ul li .title span {
+    font-weight: bold;
+  }
+  .graph .text ul li .title span::before {
+    content: "";
+    position: absolute;
+    display: block;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: rgb(73, 167, 239);
+    width: 0;
+    transition: 0.3s;
+  }
+  .graph .text ul li:hover .title span::before {
+    width: calc(100% - 3px);
+  }
+  .graph .text ul li .title2 {
+    font-size: 13px;
+    letter-spacing: 1px;
+    text-align: right;
+  }
+  .graph .text ul li .title2 span {
+    color: #eee;
+    font-weight: bold;
+  }
+  .graph .text ul li .title2 span::before {
+    content: "";
+    position: absolute;
+    display: block;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: rgb(73, 167, 239);
+    width: 0;
+    transition: 0.3s;
+  }
+  .graph .text ul li:hover .title2 span::before {
+    width: calc(100% - 3px);
+  }
+  .graph .text ul li .value {
+    font-weight: bold;
+    display: inline-block;
+    padding-right: 5px;
+    /* width: 40px; */
+    text-align: right;
+  }
+  .graph .text ul li .unit {
+    width: 15px;
+  }
+  .graph .text div.inPic {
+    position: absolute;
+    font-size: 12px;
+    z-index: 2;
+    font-weight: bold;
+    text-shadow: 1px 0px 1px #000, -1px 0px 1px #000, 0px 1px 1px #000,
+      0px -1px 1px #000;
+  }
+  .graph .flowBack {
+    /* stroke-width: 1px; */
+    stroke-width: 6px;
+    stroke: rgb(114, 169, 212);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+  .graph .flow {
+    stroke-width: 4px;
+    stroke-dasharray: 5, 12;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    animation: dash 0.8s linear;
+    animation-iteration-count: infinite;
+  }
+  .graph .flowN {
+    stroke-width: 4px;
+    stroke-dasharray: 5, 12;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  @keyframes dash {
+    to {
+      stroke-dashoffset: -17;
+    }
+  }
 
-.inPic {
-  color: #8ac9fb !important;
-  font-size: 17px;
+  .graph .img .onWhiteText {
+    transform: translate(-50%, -100%);
+    top: -2%;
+    color: #fff;
+  }
+  .graph .img .unWhiteText {
+    transform: translate(-50%, 100%);
+    bottom: -5%;
+    color: #fff;
+  }
+  .graph .img .unJiaYaWhiteText {
+    transform: translate(-50%, 0);
+    bottom: -85px;
+    color: #fff;
+  }
+
+  .graph .img .shuiku {
+    transform: translate(-50%, 0);
+    bottom: 2%;
+    color: rgb(4, 30, 48);
+  }
+  .graph .img .qushui {
+    transform: translate(-200%, 0);
+    bottom: 4px;
+    color: #fff;
+    left: -6px;
+    width: 0;
+    white-space: normal;
+  }
 }
 </style>

src/views/zhpt/tongyonggongju/widgetGroup/widget.vue

@@ -331,223 +331,12 @@ i {
   }
 }
 
-#graphContainer {
+/* #graphContainer {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
   cursor: default;
-}
-.underSvg {
-  z-index: 1;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0%;
-  top: 0%;
-}
-.underSvg div {
-  position: absolute;
-  background: rgb(33,61,81);
-  border: 2px solid rgb(53,88,112);
-}
-
-.graph .underSvg span {
-  position: absolute;
-  left: 50%;
-  white-space: nowrap;
-  color: #8ac9fb;
-}
-
-.graph .underSvg .onText {
-  transform: translate(-50%, -100%);
-  top: -2%;
-}
-
-.onSvg {
-  z-index: 3;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0%;
-  top: 0%;
-  color: #eee;
-}
-.graph svg {
-  z-index: 2;
-  position: absolute;
-  background-image: url('./images/background.png');
-}
-.graph .img {
-  position: absolute;
-  background-size: 100% 100%;
-  font-size: 17px;
-  letter-spacing: 2px;
-  font-weight: bold;
-}
-.graph .img span {
-  position: absolute;
-  left: 50%;
-  white-space: nowrap;
-  color: #8ac9fb;
-  padding: 0 5px;
-}
-.graph .img .unText {
-  transform: translate(-50%, 100%);
-  bottom: -2%;
-}
-.graph .text ul {
-  position: absolute;
-  list-style: none;
-  padding: 0px;
-  margin: 0px;
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 1;
-}
+} */
 
-.graph .text ul li{
-  margin-bottom: 3px;
-  cursor: pointer;
-  position: relative;
-}
-
-.graph .text ul li::before{
-  content: "";
-  position: absolute;
-  display: block;
-  height: 1px;
-  left: 1px;
-  width: 0;
-  bottom: -1px;
-  background: #21b7f6;
-  transition: 0.4s;
-}
-.graph .text ul li:hover::before{
-  width: calc(100% + 2px);
-}
-.graph .text ul li:nth-last-child(1) {
-  margin-bottom: 0px;
-}
-.graph .text ul li div:nth-child(2) span:nth-child(1) {
-  text-align: right;
-}
-.graph .text ul li .title {
-  font-size: 13px;
-  letter-spacing: 1px;
-  position: absolute;
-  left: 0;
-  transform: translateX(-100%);
-}
-.graph .text ul li .title span {
-  font-weight: bold;
-}
-.graph .text ul li .title span::before{
-  content: "";
-  position: absolute;
-  display: block;
-  right: 0;
-  bottom: 0;
-  height: 1px;
-  background: rgb(73, 167, 239);
-  width: 0;
-  transition: 0.3s;
-}
-.graph .text ul li:hover .title span::before{
-  width: calc(100% - 3px);
-}
-.graph .text ul li .title2 {
-  font-size: 13px;
-  letter-spacing: 1px;
-  text-align: right;
-}
-.graph .text ul li .title2 span {
-  color: #eee;
-  font-weight: bold;
-}
-.graph .text ul li .title2 span::before{
-  content: "";
-  position: absolute;
-  display: block;
-  right: 0;
-  bottom: 0;
-  height: 1px;
-  background: rgb(73, 167, 239);
-  width: 0;
-  transition: 0.3s;
-}
-.graph .text ul li:hover .title2 span::before{
-  width: calc(100% - 3px);
-}
-.graph .text ul li .value {
-  font-weight: bold;
-  display: inline-block;
-  padding-right: 5px;
-  /* width: 40px; */
-  text-align: right;
-}
-.graph .text ul li .unit {
-  width: 15px;
-}
-.graph .text div.inPic {
-  position: absolute;
-  font-size: 12px;
-  z-index: 2;
-  font-weight: bold;
-  text-shadow: 1px 0px 1px #000, -1px 0px 1px #000, 0px 1px 1px #000, 0px -1px 1px #000;
-}
-.graph .flowBack {
-  /* stroke-width: 1px; */
-  stroke-width: 6px;
-  stroke: rgb(114,169,212);
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-.graph .flow {
-  stroke-width: 4px;
-  stroke-dasharray: 5, 12;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  animation: dash 0.8s linear;
-  animation-iteration-count: infinite;
-}
-.graph .flowN {
-  stroke-width: 4px;
-  stroke-dasharray: 5, 12;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-@keyframes dash {
-  to {stroke-dashoffset: -17;}
-}
-
-.graph .img .onWhiteText {
-  transform: translate(-50%, -100%);
-  top: -2%;
-  color: #fff;
-}
-.graph .img .unWhiteText {
-  transform: translate(-50%, 100%);
-  bottom: -5%;
-  color: #fff;
-}
-.graph .img .unJiaYaWhiteText {
-  transform: translate(-50%, 0);
-  bottom: -85px;
-  color: #fff;
-}
-
-.graph .img .shuiku {
-  transform: translate(-50%, 0);
-  bottom: 2%;
-  color: rgb(4,30,48);
-}
-.graph .img .qushui {
-  transform: translate(-200%, 0);
-  bottom: 4px;
-  color: #fff;
-  left: -6px;
-  width: 0;
-  white-space: normal;
-}
 </style>

src/views/zhpt/wxPlansManagement/wxCheck/component/xjYearQuery.vue

@@ -3,11 +3,20 @@
     <div ref="div1" style="width: 100%; height:100%; padding:8px;">
       <el-row>
         <span class="title2">年份</span>
-        <el-select v-model="chooseYear" style="display: inline-block; margin-left: 5px; width:200px;"  filterable  multiple
-        collapse-tags size="small" placeholder="请选择年份"  @change="handleYearChange" clearable>
-            <template v-for='item in yearList'>
-                <el-option :label="item" :value="item" :key="item" />
-            </template>
+        <el-select
+          v-model="chooseYear"
+          style="display: inline-block; margin-left: 5px; width:200px;"
+          filterable
+          multiple
+          collapse-tags
+          size="small"
+          placeholder="请选择年份"
+          clearable
+          @change="handleYearChange"
+        >
+          <template v-for="item in yearList">
+            <el-option :key="item" :label="item" :value="item" />
+          </template>
         </el-select>
         <!-- <el-button size="small" type="primary" @click="getData()">查询</el-button> -->
       </el-row>
@@ -23,7 +32,7 @@
         element-loading-text="拼命加载中……"
         @select-all="table1Select"
         @select="table1Select"
-        @row-dblclick="showYearInfo" 
+        @row-dblclick="showYearInfo"
       >
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="">
@@ -68,24 +77,24 @@
       </el-row>
     </div>
     <el-dialog v-dialogDrag :title="contentTitle" :visible.sync="editPageShow" width="calc(100% - 50px)" top="calc(50vh - 400px)" append-to-body>
-      <div style="text-align: center; margin-bottom: 8px;"><span ref="yearPlanTitle" style="font-size: 20px; letter-spacing: 2px;"></span></div>
-      <div class='editPage' v-if="editPageShow">
-          <year-page :editRow='editRow' :pageOpe='pageOpe' :opeType="opeType" @closePop="closePop" ></year-page>
+      <div style="text-align: center; margin-bottom: 8px;"><span ref="yearPlanTitle" style="font-size: 20px; letter-spacing: 2px;" /></div>
+      <div v-if="editPageShow" class="editPage">
+        <year-page :edit-row="editRow" :page-ope="pageOpe" :ope-type="opeType" @closePop="closePop" />
       </div>
-      <span slot="footer" v-if="opeType!='planSearch'" class="dialog-footer">
-          <el-button size="small" @click="returnHome">取消</el-button>
-          <el-button size="small" type="primary"   @click="confirmReport()">确定</el-button>
-      </span> 
-  </el-dialog>
+      <span v-if="opeType!='planSearch'" slot="footer" class="dialog-footer">
+        <el-button size="small" @click="returnHome">取消</el-button>
+        <el-button size="small" type="primary" @click="confirmReport()">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getAuditHis,getAuditPage} from '@/api/xjApi'
-import yearPage from "@/views/zhpt/xjYearsPlans/xjInfoPage/widget";
+import { getAuditHis, getAuditPage } from '@/api/xjApi'
+import yearPage from '@/views/zhpt/xjYearsPlans/xjInfoPage/widget'
 export default {
-  name: 'xjPlanYearQuery',
-  components: {yearPage},
+  name: 'XjPlanYearQuery',
+  components: { yearPage },
   data() {
     return {
       multipleSelection: [],
@@ -97,7 +106,7 @@ export default {
       showAdd: false, // 新增保存按钮
       showEdit: false, // 编辑保存按钮
       chooseYear: [], // 审核年份选择
-      yearList:[],//年份下拉框内容
+      yearList: [], // 年份下拉框内容
       chooseMonth: '',
       chooseWorker: '',
       chooseFixType: '',
@@ -128,11 +137,11 @@ export default {
       monthTitle: '',
       historyInfo: null,
 
-      editRow:null,//编辑的年度信息
-      pageOpe:false,//操作是否保存
-      contentTitle:"",
-      opeType:"makePlan",//默认是计划制定（makePlan：计划制定；planre:计划上报；planAudOne:第一次审核；planAudTwo：第二次审核；planSearch:计划查看）
-      editPageShow:false,
+      editRow: null, // 编辑的年度信息
+      pageOpe: false, // 操作是否保存
+      contentTitle: '',
+      opeType: 'makePlan', // 默认是计划制定（makePlan：计划制定；planre:计划上报；planAudOne:第一次审核；planAudTwo：第二次审核；planSearch:计划查看）
+      editPageShow: false
     }
   },
   watch: {
@@ -144,7 +153,7 @@ export default {
   mounted: function() {
     const nowDate = new Date()
     // const year = nowDate.getFullYear()+"";
-    this.getYearList();
+    this.getYearList()
     this.getData() // 页面加载时调用查询
     this.divs = [this.$refs.div1, this.$refs.div2]
   },
@@ -153,24 +162,24 @@ export default {
   /**
      * 渲染数据处理
     */
-    formatter(row, column){
-        let typeValue=typeof row[column.property];
-        if(typeValue=="undefined"){
-            return "-"
-        }else if(typeValue=="object"||typeValue=="string"){
-            if(!row[column.property]){
-                return "-"
-            }else{
-                return row[column.property]
-            }
-        }else{
-            return row[column.property]
+    formatter(row, column) {
+      const typeValue = typeof row[column.property]
+      if (typeValue == 'undefined') {
+        return '-'
+      } else if (typeValue == 'object' || typeValue == 'string') {
+        if (!row[column.property]) {
+          return '-'
+        } else {
+          return row[column.property]
         }
+      } else {
+        return row[column.property]
+      }
     },
 
     /**
      * 获取首页表格数据
-     * */ 
+     * */
     getData() {
       this.dataT1 = []
       this.canUpdate = true
@@ -204,27 +213,27 @@ export default {
       })
     },
 
-    //获取已创建的年计划
-    getYearList(){
-        let data={
-            current:1,
-            size:1000
-        }
-        let yearList=[];
-        getAuditPage(data).then(res => {
-            res.result.records.forEach(item=>{
-                yearList.push(item.year);
-            })
-          
-            this.yearList=Array.from(new Set(yearList)).sort();
-        }).catch(err => {
-            console.log(err);
+    // 获取已创建的年计划
+    getYearList() {
+      const data = {
+        current: 1,
+        size: 1000
+      }
+      const yearList = []
+      getAuditPage(data).then(res => {
+        res.result.records.forEach(item => {
+          yearList.push(item.year)
         })
+
+        this.yearList = Array.from(new Set(yearList)).sort()
+      }).catch(err => {
+        console.log(err)
+      })
     },
 
     /**
      * 表格项被选中时执行事件
-     * */ 
+     * */
     table1Select: function(e, s) {
       if (e.length === 1) { // 判断选中项是否为未提交，若是，则可编辑
         this.canUpdate = false // 可审核
@@ -236,34 +245,34 @@ export default {
 
     /**
      * 年份改变时触发事件
-     * */ 
+     * */
     handleYearChange() {
       this.getData()
     },
-  
+
     /**
      * 根据子组件的指令操作
     */
-    closePop(data){
-        if(data){
-            this.editPageShow=false;
-            this.$nextTick(e=>{
-                this.pageOpe=false;
-                this.getData();
-            })
-        }
+    closePop(data) {
+      if (data) {
+        this.editPageShow = false
+        this.$nextTick(e => {
+          this.pageOpe = false
+          this.getData()
+        })
+      }
     },
 
     /**
      * 展示详细信息
-     * */ 
+     * */
     async showYearInfo(e) {
-      
+
     },
 
     /**
      * 每页展示条数改变时触发
-     * */ 
+     * */
     handleSizeChange(val) {
       this.pageInfo.size = val
       this.getData()
@@ -271,7 +280,7 @@ export default {
 
     /**
      * 页码改变时触发
-     * */ 
+     * */
     handleCurrentChange(val) {
       this.pageInfo.current = val
       this.getData()
@@ -280,29 +289,29 @@ export default {
     /**
      * 返回开始
     */
-    returnHome(){
-        this.editRow=null;
-        this.editPageShow=false;
-        this.getData();
+    returnHome() {
+      this.editRow = null
+      this.editPageShow = false
+      this.getData()
     },
 
     /**
      * 确定上报执行事件
     */
     confirmReport(formName) {
-        this.pageOpe=true;
-        this.canUpdate = true //上报按钮不可点击
+      this.pageOpe = true
+      this.canUpdate = true // 上报按钮不可点击
     },
 
     /**
      * 展示详细信息
     */
-    showYearInfo(e){
-        this.opeType="planSearch";
-        this.contentTitle='巡检年计划详情'
-        this.editPageShow=true;
-        this.editRow=JSON.parse(JSON.stringify(e));
-    },
+    showYearInfo(e) {
+      this.opeType = 'planSearch'
+      this.contentTitle = '巡检年计划详情'
+      this.editPageShow = true
+      this.editRow = JSON.parse(JSON.stringify(e))
+    }
   }
 }
 </script>