Merge branch 'mw2' of http://61.161.152.110:10101/r/electronic-map into sl

src/views/WindSite/components/gax6.vue

@@ -1,901 +0,0 @@
-<template>
-  <div class="gax6"></div>
-</template>
-
-<script>
-import { Graph } from '@antv/x6'
-import customNode from './customNode.js'
-
-export default {
-  // 名称
-  name: 'gax6',
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {},
-  // 自定义事件
-  emits: {},
-  // 数据
-  data() {
-    return {
-      graph: null,
-      color: {
-        red: '#b30461',
-        yellow: '#cbaa07'
-      },
-      data: [
-        {
-          id: 'M111',
-          x: 912.5,
-          y: 175,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M101',
-          x: 803,
-          y: 299,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M102',
-          x: 1023,
-          y: 299,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M301',
-          x: 803,
-          y: 380,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M302',
-          x: 1023,
-          y: 380,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M314',
-          x: 738,
-          y: 497,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M315',
-          x: 803,
-          y: 497,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M323',
-          x: 868,
-          y: 497,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M322',
-          x: 1023,
-          y: 497,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        }
-      ],
-      labels: [
-        {
-          id: 'mmx',
-          shape: 'tag-text-r',
-          x: 862,
-          y: 50,
-          label: '南风线'
-        },
-        {
-          id: '110kvmx',
-          shape: 'simple-text',
-          x: 772.5,
-          y: 200,
-          label: '110kV 母线'
-        },
-        {
-          id: '35kv1mx',
-          shape: 'simple-text',
-          x: 724,
-          y: 408,
-          label: '35kV I母线'
-        },
-        {
-          id: '35kv2mx',
-          shape: 'simple-text-r',
-          x: 1102,
-          y: 408,
-          label: '35kV II母线'
-        },
-        {
-          id: 'L111',
-          shape: 'simple-text',
-          x: 930,
-          y: 155,
-          label: '111'
-        },
-        {
-          id: 'L102',
-          shape: 'simple-text',
-          x: 1040,
-          y: 278,
-          label: '102'
-        },
-        {
-          id: 'L302',
-          shape: 'simple-text',
-          x: 1040,
-          y: 358,
-          label: '302'
-        },
-        {
-          id: 'L101',
-          shape: 'simple-text-r',
-          x: 785,
-          y: 278,
-          label: '101'
-        },
-        {
-          id: 'L301',
-          shape: 'simple-text-r',
-          x: 785,
-          y: 358,
-          label: '301'
-        },
-        {
-          id: 'L314',
-          shape: 'simple-text-r',
-          x: 725,
-          y: 470,
-          label: '314'
-        },
-        {
-          id: 'L315',
-          shape: 'simple-text-r',
-          x: 790,
-          y: 470,
-          label: '315'
-        },
-        {
-          id: 'L323',
-          shape: 'simple-text-r',
-          x: 850,
-          y: 470,
-          label: '323'
-        },
-        {
-          id: 'L322',
-          shape: 'simple-text-r',
-          x: 1005,
-          y: 470,
-          label: '322'
-        },
-        {
-          id: 'zb_1',
-          shape: 'tag-text-s',
-          x: 680,
-          y: 320,
-          label: '#1主变'
-        },
-        {
-          id: 'zb_2',
-          shape: 'tag-text-s',
-          x: 1080,
-          y: 320,
-          label: '#2主变'
-        },
-        {
-          id: 'jddl_1',
-          shape: 'tag-text',
-          x: 90,
-          y: 555,
-          label: '#1集电线路'
-        },
-        {
-          id: 'jddl_3',
-          shape: 'tag-text',
-          x: 1640,
-          y: 555,
-          label: '#4集电线路'
-        },
-        {
-          id: 'jddl_2',
-          shape: 'tag-text',
-          x: 90,
-          y: 815,
-          label: '#2集电线路'
-        },
-        {
-          id: 'jddl_4',
-          shape: 'tag-text',
-          x: 1640,
-          y: 815,
-          label: '#3集电线路'
-        }
-      ],
-      fans: [
-        {
-          id: '001',
-          shape: 'fan-blue',
-          x: 90,
-          y: 510,
-          label: '001'
-        },
-        {
-          id: '002',
-          shape: 'fan-gray',
-          x: 140,
-          y: 510,
-          label: '002'
-        },
-        {
-          id: '003',
-          shape: 'fan-orange',
-          x: 190,
-          y: 510,
-          label: '003'
-        },
-        {
-          id: '004',
-          shape: 'fan-red',
-          x: 240,
-          y: 510,
-          label: '004'
-        },
-        {
-          id: '005',
-          shape: 'fan-green',
-          x: 290,
-          y: 510,
-          label: '005'
-        },
-        {
-          id: '006',
-          shape: 'fan-green',
-          x: 340,
-          y: 510,
-          label: '006'
-        },
-        {
-          id: '007',
-          shape: 'fan-green',
-          x: 390,
-          y: 510,
-          label: '007'
-        },
-        {
-          id: '008',
-          shape: 'fan-green',
-          x: 440,
-          y: 510,
-          label: '008'
-        },
-        {
-          id: '009',
-          shape: 'fan-green',
-          x: 490,
-          y: 510,
-          label: '009'
-        },
-        {
-          id: '010',
-          shape: 'fan-green',
-          x: 540,
-          y: 510,
-          label: '010'
-        },
-        {
-          id: '011',
-          shape: 'fan-green',
-          x: 590,
-          y: 510,
-          label: '011'
-        },
-
-        {
-          id: '012',
-          shape: 'fan-green',
-          x: 90,
-          y: 770,
-          label: '012'
-        },
-        {
-          id: '013',
-          shape: 'fan-green',
-          x: 140,
-          y: 770,
-          label: '013'
-        },
-        {
-          id: '014',
-          shape: 'fan-green',
-          x: 190,
-          y: 770,
-          label: '014'
-        },
-        {
-          id: '015',
-          shape: 'fan-green',
-          x: 240,
-          y: 770,
-          label: '015'
-        },
-        {
-          id: '016',
-          shape: 'fan-green',
-          x: 290,
-          y: 770,
-          label: '016'
-        },
-        {
-          id: '017',
-          shape: 'fan-green',
-          x: 340,
-          y: 770,
-          label: '017'
-        },
-        {
-          id: '018',
-          shape: 'fan-green',
-          x: 390,
-          y: 770,
-          label: '018'
-        },
-        {
-          id: '019',
-          shape: 'fan-green',
-          x: 440,
-          y: 770,
-          label: '019'
-        },
-        {
-          id: '020',
-          shape: 'fan-green',
-          x: 490,
-          y: 770,
-          label: '020'
-        },
-        {
-          id: '021',
-          shape: 'fan-green',
-          x: 540,
-          y: 770,
-          label: '021'
-        },
-        {
-          id: '022',
-          shape: 'fan-green',
-          x: 590,
-          y: 770,
-          label: '022'
-        },
-
-        {
-          id: '034',
-          shape: 'fan-green',
-          x: 1200,
-          y: 510,
-          label: '034'
-        },
-        {
-          id: '035',
-          shape: 'fan-green',
-          x: 1250,
-          y: 510,
-          label: '035'
-        },
-        {
-          id: '036',
-          shape: 'fan-green',
-          x: 1300,
-          y: 510,
-          label: '036'
-        },
-        {
-          id: '037',
-          shape: 'fan-green',
-          x: 1350,
-          y: 510,
-          label: '037'
-        },
-        {
-          id: '038',
-          shape: 'fan-green',
-          x: 1400,
-          y: 510,
-          label: '038'
-        },
-        {
-          id: '039',
-          shape: 'fan-green',
-          x: 1450,
-          y: 510,
-          label: '039'
-        },
-        {
-          id: '040',
-          shape: 'fan-green',
-          x: 1500,
-          y: 510,
-          label: '040'
-        },
-        {
-          id: '041',
-          shape: 'fan-green',
-          x: 1550,
-          y: 510,
-          label: '041'
-        },
-        {
-          id: '042',
-          shape: 'fan-green',
-          x: 1600,
-          y: 510,
-          label: '042'
-        },
-        {
-          id: '043',
-          shape: 'fan-green',
-          x: 1650,
-          y: 510,
-          label: '043'
-        },
-       
-
-        // {
-        //     id: "fanA23-m",
-        //     shape: "fan-green",
-        //     x: 1150,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA24-m",
-        //     shape: "fan-green",
-        //     x: 1200,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA25-m",
-        //     shape: "fan-green",
-        //     x: 1250,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA26-m",
-        //     shape: "fan-green",
-        //     x: 1300,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA27-m",
-        //     shape: "fan-green",
-        //     x: 1350,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA28-m",
-        //     shape: "fan-green",
-        //     x: 1400,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA29-m",
-        //     shape: "fan-green",
-        //     x: 1450,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA31-m",
-        //     shape: "fan-green",
-        //     x: 1600,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA32-m",
-        //     shape: "fan-green",
-        //     x: 1650,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA33-m",
-        //     shape: "fan-green",
-        //     x: 1700,
-        //     y: 640,
-        //     label: "A01",
-        // },
-
-        {
-          id: '023',
-          shape: 'fan-green',
-          x: 1100,
-          y: 770,
-          label: '023'
-        },
-        {
-          id: '024',
-          shape: 'fan-green',
-          x: 1150,
-          y: 770,
-          label: '024'
-        },
-        {
-          id: '025',
-          shape: 'fan-green',
-          x: 1200,
-          y: 770,
-          label: '025'
-        },
-        {
-          id: '026',
-          shape: 'fan-green',
-          x: 1250,
-          y: 770,
-          label: '026'
-        },
-        {
-          id: '027',
-          shape: 'fan-green',
-          x: 1300,
-          y: 770,
-          label: '027'
-        },
-        {
-          id: '028',
-          shape: 'fan-green',
-          x: 1350,
-          y: 770,
-          label: '028'
-        },
-        {
-          id: '029',
-          shape: 'fan-green',
-          x: 1400,
-          y: 770,
-          label: '029'
-        },
-        {
-          id: '030',
-          shape: 'fan-green',
-          x: 1450,
-          y: 770,
-          label: '030'
-        },
-        {
-          id: '031',
-          shape: 'fan-green',
-          x: 1500,
-          y: 770,
-          label: '031'
-        },
-        {
-          id: '032',
-          shape: 'fan-green',
-          x: 1550,
-          y: 770,
-          label: '032'
-        },
-        {
-          id: '033',
-          shape: 'fan-green',
-          x: 1600,
-          y: 770,
-          label: '033'
-        }
-      ]
-    }
-  },
-  // 函数
-  methods: {
-    requestPower(showLoading) {
-      let that = this;
-      that.API.requestData({
-        showLoading,
-        method: "POST",
-        subUrl: "monitor/findGeneralAppearance",
-        data: {
-          wpId: that.wpId,
-        },
-        success(res) {
-          res.data.fjmap[0].forEach((e) => {
-            that.fans.forEach(i=>{
-              if(e.wtnum == i.id){
-                   if(e.fjzt=0)
-                   {
-                      i.shape ='fan-green'
-                   }else  if(e.fjzt=1)
-                   {
-                      i.shape ='fan-blue'
-                   }else  if(e.fjzt=2)
-                   {
-                      i.shape ='fan-red'
-                   }else  if(e.fjzt=3)
-                   {
-                      i.shape ='fan-gray'
-                   }else  if(e.fjzt=4)
-                   {
-                      i.shape ='fan-orange'
-                   }else  if(e.fjzt=5)
-                   {
-                      i.shape ='fan-green'
-                   }else  if(e.fjzt=6)
-                   {
-                      i.shape ='fan-green'
-                   }
-                 
-                }
-            });
-          });
-
-        },
-      });
-    },
-    initGraph: function() {
-      this.graph = new Graph({
-        container: this.$el, // 画布的容器
-        // width: undefined, // 默认使用容器宽度
-        // height: undefined, // 默认使用容器高度
-        autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
-        mousewheel: {
-          enabled: true,
-          modifiers: []
-        },
-        scroller: {
-          enabled: true,
-          pannable: true
-        },
-        interacting: false
-      })
-      this.graph.zoomTo(0.8)
-    },
-    initData: function() {
-      const data = {
-        nodes: [
-          {
-            id: 'back-line1',
-            x: 80,
-            y: 400,
-            shape: 'path',
-            attrs: {
-              body: {
-                d: `M942.9,99.76v44.39H1666
-                                M788,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666
-                                M723,99.76V401.51H1
-                                M658.11,99.76v44.39H1
-                                M803.52,34.42H643.62
-                                M1023.39,34.42H863.49
-                                M723.07,-19V33.42
-                                M942.94,-19V33.42
-                                M658.11,35.91V66.84
-                                M723,35.91V66.84
-                                M788,35.91V66.84
-                                M942.9,35.91V66.84`,
-                fill: 'transparent',
-                stroke: '#cbaa07',
-                'stroke-width': 3
-              }
-            },
-            movable: false
-          },
-          {
-            id: 'back-line2',
-            x: 772.5,
-            y: 100,
-            shape: 'path',
-            attrs: {
-              body: {
-                d: `M281,123.82H1
-                                M140,75v49
-                                M140,1V48.73
-                                M30.4,125.31v47
-                                M249.63,125.31v47`,
-                            fill: "transparent",
-                            stroke: "#b30461",
-                            "stroke-width": 3,
-                        },
-                    },
-                    movable: false,
-                },{
-                    id: "main-change-1",
-                    x: 803,
-                    y: 300,
-                    shape: "main-change",
-                    movable: false,
-                },{
-                    id: "main-change-2",
-                    x: 1023,
-                    y: 300,
-                    shape: "main-change",
-                    movable: false,
-                },{
-                    id: "top-arrow",
-                    x: 912.5,
-                    y: 86,
-                    shape: "arrow-vertical-top-left",
-                    attrs: {
-                        line: {
-                            height: 0,
-                        },
-                        arrow: {
-                            fill: "#b30461",
-                            refY: 0,
-                        }
-                    },
-                    movable: false,
-                }] 
-            };
-            this.data.forEach(item => {
-                switch (item.type) {
-                    case "switch":
-                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
-                        break;
-                    case "handcart":
-                        item.shape = `handcart${item.state1}${item.state2}`
-                        break;
-                    default:
-                        break;
-                }
-                let shape = `${item.shape}-${item.direction}`;
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: shape,
-                    movable: false,
-                }
-                data.nodes.push(node);
-            })
-            this.labels.forEach(item => {
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: item.shape,
-                    attrs: {
-                        label: {
-                            text: item.label,
-                        },
-                    },
-                    movable: false,
-                }
-                switch (item.shape) {
-                    case "form-text":
-                        node.attrs.value = {
-                            text: item.value,
-                        }
-                        break;
-                
-                    default:
-                        break;
-                }
-                data.nodes.push(node);
-            })
-            this.fans.forEach(item => {
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: item.shape,
-                    attrs: {
-                        label: {
-                            text: item.label,
-                        },
-                    },
-                    movable: false,
-                }
-                data.nodes.push(node);
-            })
-            this.graph.fromJSON(data);
-            this.graph.centerContent();
-            setTimeout(() => {
-                this.changeFanNodeById("fanA06", "fan-purple", "A01");
-                setTimeout(() => {
-                    this.changeFanNodeById("fanA06", "fan-white", "A01");
-                    setTimeout(() => {
-                        this.changeFanNodeById("fanA06", "fan-purple-stop", "A01");
-                    }, 2000);
-                }, 2000);
-            }, 2000);
-        },
-        // 通过id修改风机节点 fan-green fan-gray fan-blue fan-orange fan-red fan-purple fan-purple-stop fan-white
-        changeFanNodeById: function (id, shape, label) {
-            var view = this.graph.getMountedViews();
-            var node = view.find(t => t.cell.id == id);
-            node.cell.remove();
-            var cell = this.graph.createNode({
-                id: id,
-                shape: shape,
-                x: node.cell.position().x,
-                y: node.cell.position().y,
-                attrs: {
-                    label: {
-                        text: label,
-                    },
-                },
-            });
-            this.graph.addCell(cell);
-        },
-        initX6: function () {
-            // 注册自定义节点
-            customNode.register();
-            this.initGraph();
-            this.initData();
-        },
-    },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
-    },
-    created() {
-        // 创建后
-    },
-    beforeMount() {
-        // 渲染前
-    },
-    mounted() {
-        // 渲染后
-        this.initX6();
-    },
-    beforeUpdate() {
-        // 数据更新前
-    },
-    initX6: function() {
-      // 注册自定义节点
-      customNode.register()
-      this.initGraph()
-      this.initData()
-    
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-    this.initX6()
-    this.wpId = this.$route.params.wpId;
-    this.requestPower(false);
-  },
-  watch: {
-    $route(res) {
-      console.warn("router变化");
-      this.wpId = res.params.wpId;
-      this.requestPower(false);
-
-    },
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>

src/views/WindSite/components/generalappearance/xh/previewPicture.vue

@@ -1,732 +0,0 @@
-<template>
-  <div class="pop-up-main">
-    <div class="paln-box">
-      <div
-        class="movableItem"
-        :style="{ width: width, height: height }"
-        @mousewheel="rollImg($event)"
-        @mousedown="drag($event, 1)"
-        ref="bigImage"
-      >
-        <!-- 图片不可选中 或不可拖拽到新标签打开-->
-        <slot
-          name="svg"
-          oncontextmenu="return false;"
-          onselectstart="return false;"
-          draggable="false"
-        ></slot>
-        <template v-if="isEdit && iconWidth">
-          <img
-            ref="signImage"
-            :src="iconImgUrl"
-            @mousedown="dragSign($event, key)"
-            v-for="(item, key) in equipment"
-            :key="key"
-            :style="{
-              top: equipment[key].top + '%',
-              left: equipment[key].left + '%',
-              width: iconWidth,
-              height: iconHeight,
-            }"
-            class="equipment"
-          />
-        </template>
-        <el-popover
-          width="200"
-          placement="bottom-start"
-          trigger="hover"
-          :close-delay="100"
-          content="暂无描述"
-          v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
-          v-for="(item, key) in equipment"
-          :key="key"
-          popper-class="preview-popover"
-        >
-          <!-- &&arrIcon.length==equipment.length -->
-          <template>
-            <div v-if="equipment[key].describe" class="describe">
-              <p class="describe-top">
-                {{ equipment[key].describe.deviceName }}
-              </p>
-              <p class="describe-center">
-                {{ equipment[key].describe.remark }}
-              </p>
-              <p class="describe-bottom">
-                {{ equipment[key].describe.location }}
-              </p>
-            </div>
-          </template>
-          <!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
-						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
-						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
-						class="equipment" /> -->
-        </el-popover>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    equipment: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            iconImgUrl: "",
-            top: 0,
-            left: 0,
-          },
-        ];
-      },
-    },
-    isEdit: {
-      default: false,
-    },
-    imgUrl: {},
-  },
-
-  data() {
-    return {
-      // 定时器
-      timer: "",
-      // 图片加载失败
-      imgOnerror: false,
-      imgIndex: 0,
-      isChange: true,
-      // 图片显示默认大小
-      width: "1400px",
-      height: "0px",
-      // 可缩小倍数,为空则可无限缩小
-      minification: 3,
-      // 可放大倍数 为空则可无限放大
-      magnification: "",
-      bigMaxWidth: 1600,
-      bigMaxHeight: 800,
-
-      // 小图标信息
-      iconImgUrl: "",
-      iconWidth: "",
-      // 存储每个小图标处理好的宽高
-      iconHeight: "",
-      arrIcon: [],
-      iconMaxWidth: 32,
-      iconMaxHeight: 32,
-      tog: 1,
-    };
-  },
-  methods: {
-    // 获取图片大小
-    getImgInfo(
-      imgUrl,
-      MaxWidth,
-      MaxHeight,
-      StrWidth,
-      StrHeight,
-      Array = false,
-      arr,
-      num = 0
-    ) {
-      var img = new Image();
-
-      // img.src = imgUrl;
-      img = document.getElementsByClassName("svg");
-      let _this = this;
-      img.onerror = () => {
-        // console.log("加载失败！！", _this.arrIcon.length);
-        // console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
-        _this.imgOnerror = true;
-        _this.imgIndex =
-          _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
-        this.timer = setTimeout(() => {
-          if (num <= 5) {
-            _this.getImgInfo(
-              imgUrl,
-              MaxWidth,
-              MaxHeight,
-              StrWidth,
-              StrHeight,
-              Array,
-              arr,
-              num + 1
-            );
-          }
-          clearInterval(this.timer);
-        }, 2000);
-      };
-      img.onload = function (e) {
-        //  显示时 初始 最大宽度
-        let maxWidth = MaxWidth;
-        //  显示时 初始 最大高度
-        let maxHeight = MaxHeight;
-        if (
-          e.path[0].naturalWidth <= maxWidth &&
-          e.path[0].naturalHeight <= maxHeight
-        ) {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-        } else {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-          if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight <= maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = "1600px";
-            _this[StrHeight] = maxWidth / ratio + "px";
-          } else if (
-            e.path[0].naturalWidth <= maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = maxHeight * ratio + "px";
-            _this[StrHeight] = "800px";
-          } else if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            let w = maxWidth;
-            let h = w / ratio;
-            if (h > maxHeight) {
-              let ratio2 = w / h;
-              h = maxHeight;
-              w = h * ratio2;
-            }
-            _this[StrWidth] = w + "px";
-            _this[StrHeight] = h + "px";
-          }
-        }
-        if (Array) {
-          _this[arr].push({
-            iconWidth: _this[StrWidth],
-            iconHeight: _this[StrHeight],
-          });
-          // console.log(
-          // 	"tow#################################arrIcon",
-          // 	_this[arr].length
-          // );
-        }
-        // _this[StrWidth] = `${e.path[0].naturalWidth}px`;
-        // _this[StrHeight] = `${e.path[0].naturalHeight}px`;
-        // vm.$set(vm.imgInfo, "width", img.width);
-        // vm.$set(vm.imgInfo, "height", img.height);
-        // console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
-
-        // console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
-        // console.log("打印图片信息", e); // 打印图片信息
-        // console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
-        // console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
-      };
-    },
-    // 缩放
-    rollImg() {
-      var that = this;
-      // var oImg = document.getElementsByClassName("movableItem")[0];
-      var oImg = this.$refs.bigImage;
-      // console.log(
-      // 	"length",
-      // 	document.getElementsByClassName("movableItem").length
-      // );
-      // console.log("oImg", oImg);
-      var _this = this;
-
-      function fnWheel(obj, fncc) {
-        obj.onmousewheel = fn;
-        if (obj.addEventListener) {
-          obj.addEventListener("DOMMouseScroll", fn, false);
-        }
-
-        function fn(ev) {
-          var oEvent = ev || window.event;
-          var down = true;
-          if (oEvent.detail) {
-            down = oEvent.detail > 0;
-          } else {
-            down = oEvent.wheelDelta < 0;
-          }
-          if (fncc) {
-            fncc.call(this, down, oEvent);
-          }
-          if (oEvent.preventDefault) {
-            oEvent.preventDefault();
-          }
-          return false;
-        }
-      }
-      fnWheel(oImg, function (down, oEvent) {
-        var oldWidth = this.offsetWidth;
-        var oldHeight = this.offsetHeight;
-        var oldLeft = this.offsetLeft;
-        var oldTop = this.offsetTop;
-        var parent = oEvent.path[2];
-        // 获取父元素距离页面可视区域的位置
-        var parentLeft = parent.getBoundingClientRect().left;
-        var parentTop = parent.getBoundingClientRect().top;
-        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
-        var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
-        var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
-
-        let nowWidth = this.style.width.split("p")[0];
-        let initWidth = _this.width.split("p")[0];
-        let initHeight = _this.height.split("p")[0];
-
-        let miniFlag = true;
-        let magniFlag = true;
-        if (_this.minification) {
-          // 限制缩小范围
-          if (nowWidth <= parseInt(initWidth / _this.minification)) {
-            miniFlag = false;
-            // console.log("限制缩小范围");
-            // console.log(
-            // 	"限制缩小范围",
-            // 	nowWidth,
-            // 	parseInt(initWidth / _this.minification)
-            // );
-            this.style.width = parseInt(initWidth / _this.minification) + "px";
-            this.style.height =
-              parseInt(initHeight / _this.minification) + "px";
-          }
-          if (_this.magnification) {
-            // 限制放大范围
-            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
-              magniFlag = false;
-              // console.log("限制放大范围");
-              this.style.width =
-                parseInt(initWidth * _this.magnification) + "px";
-              this.style.height =
-                parseInt(initHeight * _this.magnification) + "px";
-            }
-          }
-        }
-
-        if (down && miniFlag) {
-          // console.log("缩小");
-          this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
-          this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
-
-          that.width = parseInt(this.offsetWidth * 0.9) + "px";
-          that.height = parseInt(this.offsetHeight * 0.9) + "px";
-        } else if (!down && magniFlag) {
-          // console.log("放大");
-          this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
-          this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
-          that.width = parseInt(this.offsetWidth * 1.1) + "px";
-          that.height = parseInt(this.offsetHeight * 1.1) + "px";
-        }
-        var newWidth = this.offsetWidth;
-        var newHeight = this.offsetHeight;
-
-        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
-        this.style.left =
-          Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
-        this.style.top =
-          Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
-      });
-      // console.log(that.width)
-    },
-    // },
-    //拖拽
-    drag(ev) {
-      // var ie = document.all;
-      // console.log(ev / 0);
-
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          oDragObj.style.top =
-            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
-          oDragObj.style.left =
-            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
-          return false;
-        }
-      }
-
-      function initDrag(e) {
-        // console.log("点击图片initDrag");
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[2].offsetWidth;
-          let height = e.path[2].offsetHeight;
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            // nTY = parseInt((50 * height) / 100 + 0);
-            nTY = 0;
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-      document.onmousemove = initDrag;
-      // document.onmouseup = new Function("isdrag=false");
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-    // 拖拽标记
-    // eslint-disable-next-line no-unused-vars
-    dragSign(ev, key) {
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-      let _this = this;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          this.equipmentKey = key;
-          // console.log("thisequipmentKey", this.equipmentKey);
-
-          let widthItem = e.path[1].style.width.split("p");
-          let heightItem = e.path[1].style.height.split("p");
-          let width = widthItem[0];
-          // eslint-disable-next-line no-unused-vars
-          let height = heightItem[0];
-          let top =
-            ((nn6
-              ? (nTY / 100) * height + e.clientY - y
-              : (nTY / 100) * height + event.clientY - y) /
-              height) *
-            100;
-          let left =
-            ((nn6
-              ? (nTX / 100) * width + e.clientX - x
-              : (nTX / 100) * width + event.clientX - x) /
-              width) *
-            100;
-
-          if (top >= 0 && top <= 100) {
-            _this.equipment[key].top = top;
-          }
-          if (left >= 0 && left <= 100) {
-            _this.equipment[key].left = left;
-          }
-
-          return false;
-        }
-      }
-      // eslint-disable-next-line no-unused-vars
-      function initDrag(e) {
-        // console.log("_this", _this);
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className.indexOf("equipment") == -1
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className.indexOf("equipment") != -1) {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[1].offsetWidth;
-          let height = e.path[1].offsetHeight;
-          // console.log(width, height);
-          console.log("oDragObj.style", oDragObj.style);
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            nTY = parseInt((50 * height) / 100 + 0);
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else if (oDragObj.style.top.indexOf("%") != -1) {
-            nTY = oDragObj.style.top.split("%")[0];
-            nTX = oDragObj.style.left.split("%")[0];
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-
-      // document.onmousedown = initDrag;
-      document.onmousemove = initDrag;
-
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "equipment"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "equipment") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-
-      // _this.equipmentKey = key;
-      // _this.equipment[_this.equipmentKey].left = l;
-      // _this.equipment[_this.equipmentKey].top = t;
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-  },
-
-  watch: {
-    equipment() {
-      if (this.equipment.length != 0) {
-        this.arrIcon = [];
-        let finish = true;
-        this.equipment.filter((item) => {
-          if (!item.iconImgUrl) {
-            finish = false;
-          }
-          return true;
-        });
-        console.log("finish", finish);
-        if (finish) {
-          this.equipment.filter((item, index) => {
-            if (index >= this.imgIndex) {
-              console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-              this.getImgInfo(
-                this.$baseUrl + item.iconImgUrl,
-                this.iconMaxWidth,
-                this.iconMaxHeight,
-                "iconWidth",
-                "iconHeight",
-                true,
-                "arrIcon"
-              );
-            }
-            // console.log("22filter", index);
-            return true;
-          });
-        }
-      }
-    },
-  },
-  created() {
-    this.getImgInfo(
-      this.imgUrl,
-      this.bigMaxWidth,
-      this.bigMaxHeight,
-      "width",
-      "height"
-    );
-    if (this.equipment.length != 0) {
-      this.arrIcon = [];
-      let finish = true;
-      this.equipment.filter((item) => {
-        if (!item.iconImgUrl) {
-          finish = false;
-        }
-        return true;
-      });
-      // console.log("finish", finish);
-      if (finish) {
-        this.equipment.filter((item, index) => {
-          if (index >= this.imgIndex) {
-            console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-            this.getImgInfo(
-              this.$baseUrl + item.iconImgUrl,
-              this.iconMaxWidth,
-              this.iconMaxHeight,
-              "iconWidth",
-              "iconHeight",
-              true,
-              "arrIcon"
-            );
-          }
-          // console.log("22filter", index);
-          return true;
-        });
-      }
-    }
-
-    this.iconImgUrl = JSON.parse(
-      JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
-    );
-    // console.log("imgUrl", this.imgUrl);
-    // console.log("equipment", this.equipment);
-    // //禁止鼠标右键
-    // document.oncontextmenu = function() {
-    //   return false;
-    // };
-  },
-};
-</script>
-<style lang="less">
-.preview-popover {
-  background-color: #d3edf7dd;
-  padding: 12px;
-
-  .popper__arrow::after {
-    border-bottom-color: #d3edf7dd !important;
-  }
-
-  .describe {
-    p {
-      padding-bottom: 5px;
-
-      &:last-child {
-        padding-bottom: 0px;
-      }
-    }
-
-    .describe-top {
-      // color: sandybrown;
-      // color: red;
-      color: rgb(21, 110, 110);
-    }
-
-    .describe-center {
-      color: rgb(79, 21, 206);
-    }
-
-    .describe-bottom {
-      color: rgb(30, 31, 29);
-    }
-  }
-}
-</style>
-<style lang="less" scoped>
-.pop-up-main {
-  width: 100%;
-  height: calc(100vh - 18vh);
-  overflow-y: hidden;
-
-  .paln-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .movableItem {
-      position: absolute;
-      // top: 75%;
-      left: 50%;
-      transform: translate(-50%, -10%);
-
-      img,
-      .svg {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      .equipment {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-        font-size: 40px;
-        // color: red;
-        // background: blue;
-        zoom: 1;
-      }
-    }
-
-    .shuaxin {
-      position: absolute;
-      z-index: 2;
-      font-size: 40px;
-      top: 20px;
-      left: 20px;
-      cursor: pointer;
-
-      &:hover {
-        color: yellowgreen;
-      }
-    }
-
-    .equipment {
-      color: white;
-    }
-
-    &/deep/.el-button {
-      z-index: 2;
-      position: absolute;
-      bottom: 60px;
-      right: 20px;
-      width: 60px;
-      height: 35px;
-
-      span {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      i {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 25%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-
-// body {
-// 		height: 100%;
-// 		overflow: hidden;
-// 		margin: 0;
-// 		padding: 0;
-// 	}
-</style>

src/views/WindSite/components/generalappearance/xs/xs.vue

@@ -5,7 +5,7 @@
         <previewPicture v-if="datas">
           <template v-slot:svg>
             <svg
-              clas="svg"
+              class="svg"
               version="1.0"
               id="图层_1"
               xmlns="http://www.w3.org/2000/svg"
@@ -7107,8 +7107,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
-// import { BoosterStation } from "./BoosterStation";
+import previewPicture from "../previewPicture.vue";
 export default {
   components: {
     previewPicture,

src/views/WindSite/components/generalappearance/xs/previewPicture.vue

@@ -1,732 +0,0 @@
-<template>
-  <div class="pop-up-main">
-    <div class="paln-box">
-      <div
-        class="movableItem"
-        :style="{ width: width, height: height }"
-        @mousewheel="rollImg($event)"
-        @mousedown="drag($event, 1)"
-        ref="bigImage"
-      >
-        <!-- 图片不可选中 或不可拖拽到新标签打开-->
-        <slot
-          name="svg"
-          oncontextmenu="return false;"
-          onselectstart="return false;"
-          draggable="false"
-        ></slot>
-        <template v-if="isEdit && iconWidth">
-          <img
-            ref="signImage"
-            :src="iconImgUrl"
-            @mousedown="dragSign($event, key)"
-            v-for="(item, key) in equipment"
-            :key="key"
-            :style="{
-              top: equipment[key].top + '%',
-              left: equipment[key].left + '%',
-              width: iconWidth,
-              height: iconHeight,
-            }"
-            class="equipment"
-          />
-        </template>
-        <el-popover
-          width="200"
-          placement="bottom-start"
-          trigger="hover"
-          :close-delay="100"
-          content="暂无描述"
-          v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
-          v-for="(item, key) in equipment"
-          :key="key"
-          popper-class="preview-popover"
-        >
-          <!-- &&arrIcon.length==equipment.length -->
-          <template>
-            <div v-if="equipment[key].describe" class="describe">
-              <p class="describe-top">
-                {{ equipment[key].describe.deviceName }}
-              </p>
-              <p class="describe-center">
-                {{ equipment[key].describe.remark }}
-              </p>
-              <p class="describe-bottom">
-                {{ equipment[key].describe.location }}
-              </p>
-            </div>
-          </template>
-          <!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
-						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
-						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
-						class="equipment" /> -->
-        </el-popover>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    equipment: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            iconImgUrl: "",
-            top: 0,
-            left: 0,
-          },
-        ];
-      },
-    },
-    isEdit: {
-      default: false,
-    },
-    imgUrl: {},
-  },
-
-  data() {
-    return {
-      // 定时器
-      timer: "",
-      // 图片加载失败
-      imgOnerror: false,
-      imgIndex: 0,
-      isChange: true,
-      // 图片显示默认大小
-      width: "1400px",
-      height: "0px",
-      // 可缩小倍数,为空则可无限缩小
-      minification: 3,
-      // 可放大倍数 为空则可无限放大
-      magnification: "",
-      bigMaxWidth: 1600,
-      bigMaxHeight: 800,
-
-      // 小图标信息
-      iconImgUrl: "",
-      iconWidth: "",
-      // 存储每个小图标处理好的宽高
-      iconHeight: "",
-      arrIcon: [],
-      iconMaxWidth: 32,
-      iconMaxHeight: 32,
-      tog: 1,
-    };
-  },
-  methods: {
-    // 获取图片大小
-    getImgInfo(
-      imgUrl,
-      MaxWidth,
-      MaxHeight,
-      StrWidth,
-      StrHeight,
-      Array = false,
-      arr,
-      num = 0
-    ) {
-      var img = new Image();
-
-      // img.src = imgUrl;
-      img = document.getElementsByClassName("svg");
-      let _this = this;
-      img.onerror = () => {
-        // console.log("加载失败！！", _this.arrIcon.length);
-        // console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
-        _this.imgOnerror = true;
-        _this.imgIndex =
-          _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
-        this.timer = setTimeout(() => {
-          if (num <= 5) {
-            _this.getImgInfo(
-              imgUrl,
-              MaxWidth,
-              MaxHeight,
-              StrWidth,
-              StrHeight,
-              Array,
-              arr,
-              num + 1
-            );
-          }
-          clearInterval(this.timer);
-        }, 2000);
-      };
-      img.onload = function (e) {
-        //  显示时 初始 最大宽度
-        let maxWidth = MaxWidth;
-        //  显示时 初始 最大高度
-        let maxHeight = MaxHeight;
-        if (
-          e.path[0].naturalWidth <= maxWidth &&
-          e.path[0].naturalHeight <= maxHeight
-        ) {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-        } else {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-          if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight <= maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = "1600px";
-            _this[StrHeight] = maxWidth / ratio + "px";
-          } else if (
-            e.path[0].naturalWidth <= maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = maxHeight * ratio + "px";
-            _this[StrHeight] = "800px";
-          } else if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            let w = maxWidth;
-            let h = w / ratio;
-            if (h > maxHeight) {
-              let ratio2 = w / h;
-              h = maxHeight;
-              w = h * ratio2;
-            }
-            _this[StrWidth] = w + "px";
-            _this[StrHeight] = h + "px";
-          }
-        }
-        if (Array) {
-          _this[arr].push({
-            iconWidth: _this[StrWidth],
-            iconHeight: _this[StrHeight],
-          });
-          // console.log(
-          // 	"tow#################################arrIcon",
-          // 	_this[arr].length
-          // );
-        }
-        // _this[StrWidth] = `${e.path[0].naturalWidth}px`;
-        // _this[StrHeight] = `${e.path[0].naturalHeight}px`;
-        // vm.$set(vm.imgInfo, "width", img.width);
-        // vm.$set(vm.imgInfo, "height", img.height);
-        // console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
-
-        // console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
-        // console.log("打印图片信息", e); // 打印图片信息
-        // console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
-        // console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
-      };
-    },
-    // 缩放
-    rollImg() {
-      var that = this;
-      // var oImg = document.getElementsByClassName("movableItem")[0];
-      var oImg = this.$refs.bigImage;
-      // console.log(
-      // 	"length",
-      // 	document.getElementsByClassName("movableItem").length
-      // );
-      // console.log("oImg", oImg);
-      var _this = this;
-
-      function fnWheel(obj, fncc) {
-        obj.onmousewheel = fn;
-        if (obj.addEventListener) {
-          obj.addEventListener("DOMMouseScroll", fn, false);
-        }
-
-        function fn(ev) {
-          var oEvent = ev || window.event;
-          var down = true;
-          if (oEvent.detail) {
-            down = oEvent.detail > 0;
-          } else {
-            down = oEvent.wheelDelta < 0;
-          }
-          if (fncc) {
-            fncc.call(this, down, oEvent);
-          }
-          if (oEvent.preventDefault) {
-            oEvent.preventDefault();
-          }
-          return false;
-        }
-      }
-      fnWheel(oImg, function (down, oEvent) {
-        var oldWidth = this.offsetWidth;
-        var oldHeight = this.offsetHeight;
-        var oldLeft = this.offsetLeft;
-        var oldTop = this.offsetTop;
-        var parent = oEvent.path[2];
-        // 获取父元素距离页面可视区域的位置
-        var parentLeft = parent.getBoundingClientRect().left;
-        var parentTop = parent.getBoundingClientRect().top;
-        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
-        var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
-        var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
-
-        let nowWidth = this.style.width.split("p")[0];
-        let initWidth = _this.width.split("p")[0];
-        let initHeight = _this.height.split("p")[0];
-
-        let miniFlag = true;
-        let magniFlag = true;
-        if (_this.minification) {
-          // 限制缩小范围
-          if (nowWidth <= parseInt(initWidth / _this.minification)) {
-            miniFlag = false;
-            // console.log("限制缩小范围");
-            // console.log(
-            // 	"限制缩小范围",
-            // 	nowWidth,
-            // 	parseInt(initWidth / _this.minification)
-            // );
-            this.style.width = parseInt(initWidth / _this.minification) + "px";
-            this.style.height =
-              parseInt(initHeight / _this.minification) + "px";
-          }
-          if (_this.magnification) {
-            // 限制放大范围
-            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
-              magniFlag = false;
-              // console.log("限制放大范围");
-              this.style.width =
-                parseInt(initWidth * _this.magnification) + "px";
-              this.style.height =
-                parseInt(initHeight * _this.magnification) + "px";
-            }
-          }
-        }
-
-        if (down && miniFlag) {
-          // console.log("缩小");
-          this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
-          this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
-
-          that.width = parseInt(this.offsetWidth * 0.9) + "px";
-          that.height = parseInt(this.offsetHeight * 0.9) + "px";
-        } else if (!down && magniFlag) {
-          // console.log("放大");
-          this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
-          this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
-          that.width = parseInt(this.offsetWidth * 1.1) + "px";
-          that.height = parseInt(this.offsetHeight * 1.1) + "px";
-        }
-        var newWidth = this.offsetWidth;
-        var newHeight = this.offsetHeight;
-
-        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
-        this.style.left =
-          Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
-        this.style.top =
-          Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
-      });
-      // console.log(that.width)
-    },
-    // },
-    //拖拽
-    drag(ev) {
-      // var ie = document.all;
-      // console.log(ev / 0);
-
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          oDragObj.style.top =
-            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
-          oDragObj.style.left =
-            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
-          return false;
-        }
-      }
-
-      function initDrag(e) {
-        // console.log("点击图片initDrag");
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[2].offsetWidth;
-          let height = e.path[2].offsetHeight;
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            // nTY = parseInt((50 * height) / 100 + 0);
-            nTY = 0;
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-      document.onmousemove = initDrag;
-      // document.onmouseup = new Function("isdrag=false");
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-    // 拖拽标记
-    // eslint-disable-next-line no-unused-vars
-    dragSign(ev, key) {
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-      let _this = this;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          this.equipmentKey = key;
-          // console.log("thisequipmentKey", this.equipmentKey);
-
-          let widthItem = e.path[1].style.width.split("p");
-          let heightItem = e.path[1].style.height.split("p");
-          let width = widthItem[0];
-          // eslint-disable-next-line no-unused-vars
-          let height = heightItem[0];
-          let top =
-            ((nn6
-              ? (nTY / 100) * height + e.clientY - y
-              : (nTY / 100) * height + event.clientY - y) /
-              height) *
-            100;
-          let left =
-            ((nn6
-              ? (nTX / 100) * width + e.clientX - x
-              : (nTX / 100) * width + event.clientX - x) /
-              width) *
-            100;
-
-          if (top >= 0 && top <= 100) {
-            _this.equipment[key].top = top;
-          }
-          if (left >= 0 && left <= 100) {
-            _this.equipment[key].left = left;
-          }
-
-          return false;
-        }
-      }
-      // eslint-disable-next-line no-unused-vars
-      function initDrag(e) {
-        // console.log("_this", _this);
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className.indexOf("equipment") == -1
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className.indexOf("equipment") != -1) {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[1].offsetWidth;
-          let height = e.path[1].offsetHeight;
-          // console.log(width, height);
-          console.log("oDragObj.style", oDragObj.style);
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            nTY = parseInt((50 * height) / 100 + 0);
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else if (oDragObj.style.top.indexOf("%") != -1) {
-            nTY = oDragObj.style.top.split("%")[0];
-            nTX = oDragObj.style.left.split("%")[0];
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-
-      // document.onmousedown = initDrag;
-      document.onmousemove = initDrag;
-
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "equipment"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "equipment") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-
-      // _this.equipmentKey = key;
-      // _this.equipment[_this.equipmentKey].left = l;
-      // _this.equipment[_this.equipmentKey].top = t;
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-  },
-
-  watch: {
-    equipment() {
-      if (this.equipment.length != 0) {
-        this.arrIcon = [];
-        let finish = true;
-        this.equipment.filter((item) => {
-          if (!item.iconImgUrl) {
-            finish = false;
-          }
-          return true;
-        });
-        console.log("finish", finish);
-        if (finish) {
-          this.equipment.filter((item, index) => {
-            if (index >= this.imgIndex) {
-              console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-              this.getImgInfo(
-                this.$baseUrl + item.iconImgUrl,
-                this.iconMaxWidth,
-                this.iconMaxHeight,
-                "iconWidth",
-                "iconHeight",
-                true,
-                "arrIcon"
-              );
-            }
-            // console.log("22filter", index);
-            return true;
-          });
-        }
-      }
-    },
-  },
-  created() {
-    this.getImgInfo(
-      this.imgUrl,
-      this.bigMaxWidth,
-      this.bigMaxHeight,
-      "width",
-      "height"
-    );
-    if (this.equipment.length != 0) {
-      this.arrIcon = [];
-      let finish = true;
-      this.equipment.filter((item) => {
-        if (!item.iconImgUrl) {
-          finish = false;
-        }
-        return true;
-      });
-      // console.log("finish", finish);
-      if (finish) {
-        this.equipment.filter((item, index) => {
-          if (index >= this.imgIndex) {
-            console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-            this.getImgInfo(
-              this.$baseUrl + item.iconImgUrl,
-              this.iconMaxWidth,
-              this.iconMaxHeight,
-              "iconWidth",
-              "iconHeight",
-              true,
-              "arrIcon"
-            );
-          }
-          // console.log("22filter", index);
-          return true;
-        });
-      }
-    }
-
-    this.iconImgUrl = JSON.parse(
-      JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
-    );
-    // console.log("imgUrl", this.imgUrl);
-    // console.log("equipment", this.equipment);
-    // //禁止鼠标右键
-    // document.oncontextmenu = function() {
-    //   return false;
-    // };
-  },
-};
-</script>
-<style lang="less">
-.preview-popover {
-  background-color: #d3edf7dd;
-  padding: 12px;
-
-  .popper__arrow::after {
-    border-bottom-color: #d3edf7dd !important;
-  }
-
-  .describe {
-    p {
-      padding-bottom: 5px;
-
-      &:last-child {
-        padding-bottom: 0px;
-      }
-    }
-
-    .describe-top {
-      // color: sandybrown;
-      // color: red;
-      color: rgb(21, 110, 110);
-    }
-
-    .describe-center {
-      color: rgb(79, 21, 206);
-    }
-
-    .describe-bottom {
-      color: rgb(30, 31, 29);
-    }
-  }
-}
-</style>
-<style lang="less" scoped>
-.pop-up-main {
-  width: 100%;
-  height: calc(100vh - 18vh);
-  overflow-y: hidden;
-
-  .paln-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .movableItem {
-      position: absolute;
-      // top: 75%;
-      left: 50%;
-      transform: translate(-50%, -10%);
-
-      img,
-      .svg {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      .equipment {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-        font-size: 40px;
-        // color: red;
-        // background: blue;
-        zoom: 1;
-      }
-    }
-
-    .shuaxin {
-      position: absolute;
-      z-index: 2;
-      font-size: 40px;
-      top: 20px;
-      left: 20px;
-      cursor: pointer;
-
-      &:hover {
-        color: yellowgreen;
-      }
-    }
-
-    .equipment {
-      color: white;
-    }
-
-    &/deep/.el-button {
-      z-index: 2;
-      position: absolute;
-      bottom: 60px;
-      right: 20px;
-      width: 60px;
-      height: 35px;
-
-      span {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      i {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 25%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-
-// body {
-// 		height: 100%;
-// 		overflow: hidden;
-// 		margin: 0;
-// 		padding: 0;
-// 	}
-</style>

src/views/WindSite/pages/GeneralAppearance.vue

@@ -1,256 +1,283 @@
 <template>
-  <div class="general-appearance">
-    <div class="btn-group-tabs">
-      <BtnGroup2
-        :btnGroups="btnGroups"
-        :rowIndex="rowIndex"
-        :index="selectIndex"
-        @select="select"
-      ></BtnGroup2>
-    </div>
-    <div class="panel-title">
-      <div class="panel-title-name">
-        <!-- <span class="svg-icon svg-icon-green svg-icon-sm">
-          <SvgIcon svgid="svg-wind-site"></SvgIcon>
-        </span>
-        <span class="green">某某某风电场总貌</span> -->
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">接入台数</span>
-          <span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/green.png" />
-          <span class="sub-title green">待机台数</span>
-          <span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/blue.png" />
-          <span class="sub-title blue">并网台数</span>
-          <span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/purple.png" />
-          <span class="sub-title pink">限电台数</span>
-          <span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/red.png" />
-          <span class="sub-title red">故障台数</span>
-          <span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/orange.png" />
-          <span class="sub-title orange">检修台数</span>
-          <span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">离线台数</span>
-          <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
-        </div>
-      </div>
-    </div>
-    <!-- <gax6 class="general-appearance-body"></gax6> -->
-    <div>
-      <XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
-      <XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
-    </div>
-  </div>
+	<div class="general-appearance">
+		<div class="btn-group-tabs">
+			<BtnGroup2 :btnGroups="btnGroups" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
+		</div>
+		<div class="panel-title">
+			<div class="panel-title-name">
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/black.png" />
+					<span class="sub-title gray">接入台数</span>
+					<span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/green.png" />
+					<span class="sub-title green">待机台数</span>
+					<span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/blue.png" />
+					<span class="sub-title blue">并网台数</span>
+					<span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/purple.png" />
+					<span class="sub-title pink">限电台数</span>
+					<span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/red.png" />
+					<span class="sub-title red">故障台数</span>
+					<span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/orange.png" />
+					<span class="sub-title orange">检修台数</span>
+					<span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/black.png" />
+					<span class="sub-title gray">离线台数</span>
+					<span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
+				</div>
+			</div>
+			<div class="query-actions btnR" v-if="wpId == 'PL01_GC' || wpId == 'PL02_GC'">
+				<button class="btn" :class="wpId == 'PL01_GC'?'green':''" @click="pl('PL01_GC')">平罗一期</button>
+				<button class="btn" :class="wpId == 'PL02_GC'?'green':''" @click="pl('PL02_GC')">平罗二期</button>
+			</div>
+		</div>
+		<div>
+			<MHS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MHS_FDC'" />
+			<NSS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'NSS_FDC'" />
+			<QS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'QS_FDC'" />
+			<SBQ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'SBQ_FDC'" />
+			<XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
+			<XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
+			<DWK class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'DWK_GDC'" />
+			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL01_GC'" />
+			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL02_GC'" />
+			<MCH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MCH_GDC'" />
+		</div>
+	</div>
 </template>
 
 <script>
-import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
-// import gax6 from "../components/gax6.vue";
-import XS from "../components/generalappearance/xs/xs.vue";
-import XH from "../components/generalappearance/xh/xh.vue";
-export default {
-  // 名称
-  name: "GeneralAppearance",
-  // 使用组件
-  components: {
-    // gax6,
-    BtnGroup2,
-    XS,
-    XH
-  },
-  // 数据
-  data() {
-    return {
-      timmer: undefined,
-      wpId: undefined, //场站
-      wpnumMap: {}, //风机监视数量
-      fjmap: [], //场站风机详情
-      zmmap: {},
-      selectIndex: 0,
-      rowIndex: 0,
-      btnGroups: [
-        {
-          icon: "svg-wind-site",
-          btns: [],
-        },
-        {
-          icon: "svg-photovoltaic",
-          btns: [],
-        },
-      ],
-    };
-  },
-  created() {
-    let that = this;
-    that.wpId = that.$route.params.wpId;
-    that.$nextTick(() => {
-      that.getWp();
-      that.timmer = setInterval(() => {
-        that.requestData();
-      }, that.$store.state.websocketTimeSec);
-    });
-  },
-  // 函数
-  methods: {
-    select(res) {
-      this.$router.replace({
-        path: `/monitor/windsite/generalappearance/${res.code}`,
-      });
-    },
-    getWp() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAllAjax",
-        success(res) {
-          let btnGroup = [
-            {
-              icon: "svg-wind-site",
-              btns: [],
-            },
-            {
-              icon: "svg-photovoltaic",
-              btns: [],
-            },
-          ];
+	import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+	import MHS from "../components/generalappearance/mhs.vue";
+	import NSS from "../components/generalappearance/nss.vue";
+	import QS from "../components/generalappearance/qs.vue";
+	import SBQ from "../components/generalappearance/sbq.vue";
+	import XS from "../components/generalappearance/xs.vue";
+	import XH from "../components/generalappearance/xh.vue";
+	import DWK from "../components/generalappearance/dwk.vue";
+	import PL1 from "../components/generalappearance/pl1.vue";
+	import PL2 from "../components/generalappearance/pl2.vue";
+	import MCH from "../components/generalappearance/mch.vue";
+	export default {
+		// 名称
+		name: "GeneralAppearance",
+		// 使用组件
+		components: {
+			BtnGroup2,
+			MHS,
+			NSS,
+			QS,
+			SBQ,
+			XS,
+			XH,
+			DWK,
+			PL1,
+			PL2,
+			MCH
+		},
+		// 数据
+		data() {
+			return {
+				timmer: undefined,
+				wpId: undefined, //场站
+				wpnumMap: {}, //风机监视数量
+				fjmap: [], //场站风机详情
+				zmmap: {},
+				selectIndex: 0,
+				rowIndex: 0,
+				btnGroups: [{
+						icon: "svg-wind-site",
+						btns: [],
+					},
+					{
+						icon: "svg-photovoltaic",
+						btns: [],
+					},
+				],
+			};
+		},
+		created() {
+			let that = this;
+			that.wpId = that.$route.params.wpId;
+			that.$nextTick(() => {
+				that.getWp();
+				that.timmer = setInterval(() => {
+					that.requestData();
+				}, that.$store.state.websocketTimeSec);
+			});
+		},
+		// 函数
+		methods: {
+			select(res) {
+				this.$router.replace({
+					path: `/monitor/windsite/generalappearance/${res.code}`,
+				});
+			},
+			getWp() {
+				let that = this;
+				that.API.requestData({
+					method: "GET",
+					subUrl: "powercompare/windfarmAllAjax",
+					success(res) {
+						let btnGroup = [{
+								icon: "svg-wind-site",
+								btns: [],
+							},
+							{
+								icon: "svg-photovoltaic",
+								btns: [],
+							},
+						];
 
-          res.data.forEach((ele, index) => {
-            if (ele.id.indexOf("FDC") !== -1) {
-              btnGroup[0].btns.push({
-                text: ele.name,
-                code: ele.id,
-              });
-            } else {
-              btnGroup[1].btns.push({
-                text: ele.name,
-                code: ele.id,
-              });
-            }
-          });
+						res.data.forEach((ele, index) => {
+							if (ele.id.indexOf("FDC") !== -1) {
+								btnGroup[0].btns.push({
+									text: ele.name,
+									code: ele.id,
+								});
+							} else {
+								if (ele.id == "PL_GDC") {
+									ele.id = 'PL01_GC';
+								}
+								btnGroup[1].btns.push({
+									text: ele.name,
+									code: ele.id,
+								});
+							}
+						});
 
-          that.btnGroups = btnGroup;
-          that.renderBtnActiveIndex();
-        },
-      });
-    },
-    requestData() {
-      let that = this;
-      that.API.requestData({
-        method: "POST",
-        subUrl: "monitor/findGeneralAppearance",
-        data: {
-          wpId: that.wpId,
-        },
-        success(res) {
-          if (res.code == 200) {
-            that.wpnumMap = res.data.fczbmap.jczbmap;
-            that.fjmap = res.data.fjmap[0];
-            that.zmmap = res.data.zmmap;
-          }
-        },
-      });
-    },
-    renderBtnActiveIndex() {
-      this.btnGroups.forEach((pEle, pIndex) => {
-        pEle.btns.forEach((cEle, cIndex) => {
-          if (cEle.code === this.wpId) {
-            this.rowIndex = pIndex;
-            this.selectIndex = cIndex;
-          }
-        });
-      });
-    },
-  },
-  unmounted() {
-    clearInterval(this.timmer);
-    this.timmer = null;
-  },
-  watch: {
-    $route(res) {
-      this.wpId = res.params.wpId;
-      if (res.params.wpId) {
-        this.requestData();
-        this.renderBtnActiveIndex();
-      }
-    },
-  },
-};
+						that.btnGroups = btnGroup;
+						that.renderBtnActiveIndex();
+					},
+				});
+			},
+			requestData() {
+				let that = this;
+				that.API.requestData({
+					method: "POST",
+					subUrl: "monitor/findGeneralAppearance",
+					data: {
+						wpId: that.wpId,
+					},
+					success(res) {
+						if (res.code == 200) {
+							that.wpnumMap = res.data.fczbmap.jczbmap;
+							that.fjmap = res.data.fjmap[0];
+							that.zmmap = res.data.zmmap;
+						}
+					},
+				});
+			},
+			renderBtnActiveIndex() {
+				this.btnGroups.forEach((pEle, pIndex) => {
+					pEle.btns.forEach((cEle, cIndex) => {
+						if (cEle.code === this.wpId) {
+							this.rowIndex = pIndex;
+							this.selectIndex = cIndex;
+						}
+					});
+				});
+			},
+			pl(a) { //单指平罗2个总貌
+				this.$router.replace({
+					path: `/monitor/windsite/generalappearance/${a}`,
+				});
+			}
+		},
+		unmounted() {
+			clearInterval(this.timmer);
+			this.timmer = null;
+		},
+		watch: {
+			$route(res) {
+				this.wpId = res.params.wpId;
+				if (res.params.wpId) {
+					this.requestData();
+					this.renderBtnActiveIndex();
+				}
+			},
+		},
+	};
 </script>
 
 <style lang="less" scoped>
-.general-appearance {
-  width: 100%;
-  height: calc(100vh - 90px);
-  display: flex;
-  flex-direction: column;
+	.general-appearance {
+		width: 100%;
+		height: calc(100vh - 90px);
+		display: flex;
+		flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-  }
+		.btn-group-tabs {
+			display: flex;
+			flex-direction: row;
+		}
 
-  .general-appearance-body {
-    flex-grow: 1;
-  }
+		.btnR {
+			flex: 1;
+			text-align: end;
+		}
 
-  .panel-title {
-    width: 100%;
-    background-color: fade(@darkgray, 40%);
-    margin-top: 1.481vh;
-    padding: 6px;
-    display: flex;
-    align-items: center;
+		.general-appearance-body {
+			flex-grow: 1;
+		}
 
-    .panel-title-name {
-      color: @green;
-      display: flex;
-      align-items: center;
-      line-height: 0;
-      font-size: 0;
+		.panel-title {
+			width: 100%;
+			background-color: fade(@darkgray, 40%);
+			margin-top: 1.481vh;
+			padding: 6px;
+			display: flex;
+			align-items: center;
 
-      i,
-      span {
-        margin: 0 0 0 1.481vh;
-        line-height: 0;
-        font-size: 13px;
-      }
-    }
+			.panel-title-name {
+				color: @green;
+				display: flex;
+				align-items: center;
+				line-height: 0;
+				font-size: 0;
 
-    .sub-title-item {
-      display: flex;
-      align-items: center;
-      margin-left: 16px;
+				i,
+				span {
+					margin: 0 0 0 1.481vh;
+					line-height: 0;
+					font-size: 13px;
+				}
+			}
 
-      .sub-title {
-        font-size: 13px;
-        margin-left: 6px;
-      }
+			.sub-title-item {
+				display: flex;
+				align-items: center;
+				margin-left: 16px;
 
-      .sub-count {
-        font-size: 13px;
-        font-weight: 500;
-      }
+				.sub-title {
+					font-size: 13px;
+					margin-left: 6px;
+				}
 
-      img {
-        height: 31px;
-      }
-    }
-  }
-}
+				.sub-count {
+					font-size: 13px;
+					font-weight: 500;
+				}
+
+				img {
+					height: 31px;
+				}
+			}
+		}
+	}
 </style>

src/views/warn/xdgl.vue

@@ -1,229 +1,392 @@
 <template>
-  <div class="knowledge-2">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="query-item">
-            <div class="lable">开始日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value1" @change="BeginChange(value1)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-            </div>
-          </div>
-          <div class="query-item">
-            <div class="lable">结束日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value2" @change="EndChange(value2)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-              <div class="unit svg-icon svg-icon-gray">
-                <svg-icon :svgid="''" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 1500px">
-        <button class="btn green" @click="onClickSearch">查询</button>
-      </div>
-    </div>
-    <div>
-      <ComTable :data="tableData" height="85vh"></ComTable>
-    </div>
-  </div>
+	<div class="knowledge-2">
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">场站：</div>
+					<div class="search-input">
+						<el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="query-item">
+						<div class="lable">开始日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+						</div>
+					</div>
+					<div class="query-item">
+						<div class="lable">结束日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+							<div class="unit svg-icon svg-icon-gray">
+								<svg-icon :svgid="''" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="query-actions" style="margin-right: 1500px">
+				<button class="btn green" @click="onClickSearch">查询</button>
+			</div>
+		</div>
+		<div>
+			<ComTable :data="tableData" height="85vh"></ComTable>
+		</div>
+		<el-dialog title="限电事件" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
+			:close-on-click-modal="false">
+			<table class="com-table tabLog">
+				<tr>
+					<td class="light"> 限电原因：</td>
+					<td>{{main.description}}</td>
+					<td class="light"> 限电类型：</td>
+					<td>{{main.stopTypeId}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电指令：</td>
+					<td>{{main.brownoutsdirective}}</td>
+					<td class="light"> 当时风速(m/s)：</td>
+					<td>{{main.windspeed}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电负荷(MW)：</td>
+					<td>{{main.limitload}}</td>
+					<td class="light"> 当时负荷(MW)：</td>
+					<td>{{main.thisload}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电时刻：</td>
+					<td>{{new Date(main.stoptime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+					<td class="light"> 恢复时刻：</td>
+					<td>{{new Date(main.starttime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电损失电量(KWh)：</td>
+					<td colspan="3">{{main.losspower}}</td>
+				</tr>
+			</table>
+			<div class="header">
+				<span class="herder-info">
+					限电事件记录
+				</span>
+			</div>
+			<ComTable :data="tableList" height="40vh"></ComTable>
+		</el-dialog>
+	</div>
 </template>
 
 <script>
-import ComTable from "@com/coms/table/table.vue";
+	import ComTable from "@com/coms/table/table.vue";
 
-export default {
-  components: { ComTable },
-  data () {
-    return {
-      value1: "",
-      value2: "",
-      wpId: "",
-      wpArray: [],
-      tableData: {
-        column: [
-          {
-            name: "编号",
-            field: "id",
-             width: "50px",
-            is_num: true,
-            is_light: false,
-          },
-          {
-            name: "限电时刻",
-            field: "stopTime",
-              width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "恢复时刻",
-            field: "startTime",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "停机类型",
-            field: "stopTypeId",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电时间",
-            field: "stopHours",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "损失电量(kWh)",
-            field: "lossPower",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电原因",
-            field: "description",
-             width: "200px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "关联风机",
-            field: "wts",
-            is_num: false,
-            is_light: false,
-          },
-        ],
-        data: [],
-      },
-    };
-  },
-  created () {
-    // this.requestSafeList();
-    this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
-    this.value2 = this.getTime(2);
-    this.getWp();
-    this.requestSafeList();
-  },
-  methods: {
-    getTime (val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
-      var date = new Date();
-      var year = date.getFullYear(),
-        month = date.getMonth() + 1,
-        day = date.getDate();
-      month >= 1 && month <= 9 ? (month = '0' + month) : '';
-      day >= 0 && day <= 9 ? (day = '0' + day) : '';
-      var begin = year + '-' + month + '-01';
-      var end = year + '-' + month + '-' + day;
-      if (val == 1) {
-        return begin;
-      } else if (val == 2) {
-        return end;
-      }
-    },
-    // 获取风场
-    getWp (reGetWp) {
-      let that = this;
-      that.API.requestData({
-        baseURL: "http://10.155.32.4:9001",
-        subUrl: "benchmarking/wplist",
-        success (res) {
-          that.wpArray = res.data;
-          that.wpId = res.data[0].id;
-          that.wpName = res.data[0].wpId;
-          // that.getWt(that.wpId, reGetWp);
-        }
-      });
-    },
+	export default {
+		components: {
+			ComTable
+		},
+		data() {
+			const that = this;
+			return {
+				value1: "",
+				value2: "",
+				wpId: "",
+				wpArray: [],
+				dialogVisible: false,
+				main:[],
+				tableList:{
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "风机",
+							field: "windturbineid",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机小时数",
+							field: "stophours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(KWh)",
+							field: "losspower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+					],
+					data: [],
+				},
+				tableData: {
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机类型",
+							field: "stopTypeId",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时间",
+							field: "stopHours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(kWh)",
+							field: "lossPower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电原因",
+							field: "description",
+							width: "200px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "关联风机",
+							field: "wts",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "操作",
+							field: "cz",
+							width: "50px",
+							is_num: false,
+							is_light: false,
+							template: function() {
+								return "<a class='action'>详情</a>";
+							},
+							click: function(event, data) {
+								that.API.requestData({
+									method: "POST",
+									subUrl: "/brownouts/getBrownouts",
+									data: {
+										mainId: data.id
+									},
+									success(res) {
+										if (res.code == 200) {
+											that.main = res.data.main;
+											
+											that.tableList.data = [];
+											if (res.data.list.length) {
+												let data = res.data.list;
+												for (var i = 0; i < data.length; i++) {
+													let obj = {
+														index: i + 1,
+														windturbineid:data[i].windturbineid,
+														stopTime: new Date(data[i].stoptime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														startTime: new Date(data[i].starttime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														stophours: data[i].stophours,
+														losspower: data[i].losspower
+													};
+													that.tableList.data.push(obj);
+													that.dialogVisible = true;
+												}
+											}
+										}
+									},
+								});
+							}
+						}
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			// this.requestSafeList();
+			this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
+			this.value2 = this.getTime(2);
+			this.getWp();
+			this.requestSafeList();
+		},
+		methods: {
+			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate();
+				month >= 1 && month <= 9 ? (month = '0' + month) : '';
+				day >= 0 && day <= 9 ? (day = '0' + day) : '';
+				var begin = year + '-' + month + '-01';
+				var end = year + '-' + month + '-' + day;
+				if (val == 1) {
+					return begin;
+				} else if (val == 2) {
+					return end;
+				}
+			},
+			// 获取风场
+			getWp(reGetWp) {
+				let that = this;
+				that.API.requestData({
+					baseURL: "http://10.155.32.4:9001",
+					subUrl: "benchmarking/wplist",
+					success(res) {
+						that.wpArray = res.data;
+						that.wpId = res.data[0].id;
+						that.wpName = res.data[0].wpId;
+						// that.getWt(that.wpId, reGetWp);
+					}
+				});
+			},
 
 
-    BeginChange (vl) {
-      this.value1 = vl;
-    },
-    EndChange (vl) {
-      this.value2 = vl;
-    },
-    typeChange (vl) {
-      this.type = vl;
-    },
-    // 搜索按钮
-    onClickSearch () {
-      this.requestSafeList();
-    },
-    // 获取限电事间
-    requestSafeList () {
-      let that = this;
+			BeginChange(vl) {
+				this.value1 = vl;
+			},
+			EndChange(vl) {
+				this.value2 = vl;
+			},
+			typeChange(vl) {
+				this.type = vl;
+			},
+			// 搜索按钮
+			onClickSearch() {
+				this.requestSafeList();
+			},
+			// 获取限电事间
+			requestSafeList() {
+				let that = this;
 
-      let data = {
-        tablepar: {
-          pageNum: 1,
-          pageSize: 1000,
-        },
-        beginDate: that.value1,
-        endDate: that.value2,
-        wpId: that.wpId,
-      };
+				let data = {
+					tablepar: {
+						pageNum: 1,
+						pageSize: 1000,
+					},
+					beginDate: that.value1,
+					endDate: that.value2,
+					wpId: that.wpId,
+				};
 
-
-
-      this.API.requestData({
-        method: "POST",
-        subUrl: "/brownouts/getBrownoutsList",
-        data,
-        success (res) {
-          if (res.code == 200) {
-            that.tableData.data = [];
-            if (res.data.list.length) {
-              let data = res.data.list;
-              for (var i = 0; i < data.length; i++) {
-                let obj = {
-                  id: i + 1,
-                  stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  stopTypeId: data[i].stopTypeId,
-                  stopHours: data[i].stopHours,
-                  lossPower: data[i].lossPower,
-                  description: data[i].description,
-                  wts: data[i].wts,
-                };
-                that.tableData.data.push(obj);
-              }
-            }
-          }
-        },
-      });
-    },
-  },
-};
+				this.API.requestData({
+					method: "POST",
+					subUrl: "/brownouts/getBrownoutsList",
+					data,
+					success(res) {
+						if (res.code == 200) {
+							that.tableData.data = [];
+							if (res.data.list.length) {
+								let data = res.data.list;
+								for (var i = 0; i < data.length; i++) {
+									let obj = {
+										index: i + 1,
+										id: data[i].id,
+										stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										stopTypeId: data[i].stopTypeId,
+										stopHours: data[i].stopHours,
+										lossPower: data[i].lossPower,
+										description: data[i].description,
+										wts: data[i].wts,
+									};
+									that.tableData.data.push(obj);
+								}
+							}
+						}
+					},
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.knowledge-2 {
-  .el-select {
-    width: 200px;
-  }
-  .el-input {
-    width: 200px;
-  }
-}
+	@titleGray: #9ca5a8;
+	@rowGray: #606769;
+	@darkBack: #536268;
+
+	.knowledge-2 {
+		.el-select {
+			width: 200px;
+		}
+
+		.el-input {
+			width: 200px;
+		}
+
+		.action {
+			text-decoration: underline;
+			color: @green;
+			cursor: pointer;
+		}
+
+		.com-table.tabLog {
+			tr {
+				height: 40px;
+			}
+
+			.light {
+				width: 10.5rem;
+				color: #05bb4c;
+			}
+		}
+		.header {
+			display: flex;
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background: fade(@gray, 60);
+			color: @white;
+		
+			.herder-info {
+				flex: 1 0 25%;
+				font-size: @fontsize-s;
+				padding-left: 1rem;
+				&:last-child {
+					flex: 1 0 50%;
+				}
+			}
+		}
+	}
 </style>