手动抄表提交

ems-ui/src/views/warn/strategy.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <p>选择节点</p>
-    <div class="antvBox">
-      <div class="menu-list">
-        <div v-for="item in moduleList" :key="item.id" draggable="true" @dragend="handleDragEnd($event, item)">
-          <img :src="item.image" alt="" />
-          <p>{{ item.name }}</p>
-        </div>
-      </div>
-      <div class="canvas-card">
-        <div id="container" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Graph } from '@antv/x6'
-export default {
-  name: 'antvX6',
-  data() {
-    return {
-      moduleList: [
-        {
-          id: 1,
-          name: '节点1',
-          image: require('@/assets/images/profile.jpg')
-        },
-        {
-          id: 8,
-          name: '节点2',
-          image: require('@/assets/images/profile.jpg')
-        },
-        {
-          id: 2,
-          name: '节点3',
-          image: require('@/assets/images/profile.jpg')
-        },
-        {
-          id: 3,
-          name: '节点4',
-          image: require('@/assets/images/profile.jpg')
-        }
-      ],
-      graph: null
-    }
-  },
-  mounted() {
-    this.initGraph()
-  },
-  methods: {
-    initGraph() {
-      const container = document.getElementById('container')
-      this.graph = new Graph({
-        container: container, // 画布容器
-        width: container.offsetWidth, // 画布宽
-        height: container.offsetHeight, // 画布高
-        background: false, // 背景（透明）
-        snapline: true, // 对齐线
-        // 配置连线规则
-        connecting: {
-          snap: true, // 自动吸附
-          allowBlank: false, // 是否允许连接到画布空白位置的点
-          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
-          allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
-          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
-          highlighting: {
-            magnetAdsorbed: {
-              name: 'stroke',
-              args: {
-                attrs: {
-                  fill: '#5F95FF',
-                  stroke: '#5F95FF'
-                }
-              }
-            }
-          },
-          router: {
-            // 对路径添加额外的点
-            name: 'orth'
-          },
-          connector: {
-            // 边渲染到画布后的样式
-            name: 'rounded',
-            args: {
-              radius: 8
-            }
-          }
-        },
-        panning: {
-          enabled: false
-        },
-        mousewheel: {
-          enabled: true, // 支持滚动放大缩小
-          zoomAtMousePosition: true,
-          modifiers: 'ctrl',
-          minScale: 0.5,
-          maxScale: 3
-        },
-        grid: {
-          type: 'dot',
-          size: 20, // 网格大小 10px
-          visible: true, // 渲染网格背景
-          args: {
-            color: '#a0a0a0', // 网格线/点颜色
-            thickness: 2 // 网格线宽度/网格点大小
-          }
-        }
-      })
-    },
-    // 拖动后松开鼠标触发事件
-    handleDragEnd(e, item) {
-      console.log(e, item) // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
-      this.addHandleNode(e.pageX - 500, e.pageY - 200, new Date().getTime(), item.image, item.name)
-    },
-    // 添加节点到画布
-    addHandleNode(x, y, id, image, name) {
-      this.graph.addNode({
-        id: id,
-        shape: 'image', // 指定使用何种图形，默认值为 'rect'
-        x: x,
-        y: y,
-        width: 60,
-        height: 60,
-        imageUrl: image,
-        attrs: {
-          body: {
-            stroke: '#ffa940',
-            fill: '#ffd591'
-          },
-          label: {
-            textWrap: {
-              width: 90,
-              text: name
-            },
-            fill: 'black',
-            fontSize: 12,
-            refX: 0.5,
-            refY: '100%',
-            refY2: 4,
-            textAnchor: 'middle',
-            textVerticalAnchor: 'top'
-          }
-        },
-        ports: {
-          groups: {
-            group1: {
-              position: [30, 30]
-            }
-          },
-          items: [
-            {
-              group: 'group1',
-              id: 'port1',
-              attrs: {
-                circle: {
-                  r: 6,
-                  magnet: true,
-                  stroke: '#ffffff',
-                  strokeWidth: 2,
-                  fill: '#5F95FF'
-                }
-              }
-            }
-          ]
-        },
-        zIndex: 10
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.dashboard-container {
-  .antvBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    color: black;
-    padding-top: 20px;
-    .menu-list {
-      height: 100%;
-      width: 300px;
-      padding: 0 10px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-content: flex-start;
-      flex-wrap: wrap;
-      > div {
-        margin-bottom: 10px;
-        border-radius: 5px;
-        padding: 0 10px;
-        box-sizing: border-box;
-        cursor: pointer;
-        color: black;
-        width: 105px;
-        display: flex;
-        flex-wrap: wrap;
-
-        justify-content: center;
-        img {
-          height: 50px;
-          width: 50px;
-        }
-        P {
-          width: 90px;
-          text-align: center;
-        }
-      }
-    }
-    .canvas-card {
-      width: 1700px;
-      height: 750px;
-      box-sizing: border-box;
-      > div {
-        width: 1400px;
-        height: 750px;
-        border: 2px dashed #2149ce;
-      }
-    }
-  }
-}
-</style>