ECS5 / ECS5.0Web · Files

<template>
  <div>
    <div class="flex">
      <div class="left">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="组件库" name="1">
            <div class="btn" v-for="(item, index) in List" :key="index" :title="item"
              @mousedown="startDragToGraph(item, $event)" >
              <div style=" display: flex;flex-direction: column;width: 80px;align-items: center;">
                <div style="height: 50px;line-height: 50px;">
                  <img :width="item.width" :height="item.height" :src="item.imgs" />
                </div>
                <el-link :underline="false" :disabled="item.disabled">
                  {{ item.name }}
                </el-link>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="right" id="container"></div>
      <div style="position:absolute;right: 50px;top: 10px">
        <el-button @click="reset()">复位</el-button>
        <el-button @click="template()">模板</el-button>
        <el-button @click="save()">导出</el-button>
        <el-button @click="savetemplate()">上传模板</el-button>
        <input type="file" id="files" style="color:#fff" @change="savetemplate">
        <!-- <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
      </div>

    </div>
    <el-drawer
    title="属性编辑"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">
    <div class="demo-input-suffix">
      <el-form ref="form" :model="form" label-width="80px">
      <el-row v-if="disable">
        <el-col :span="12">
          <el-form-item label="货架方向">
            <el-select v-model="form.direction" placeholder="请选择货架方向">
              <el-option label="横向" value="0"></el-option>
              <el-option label="竖向" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货架数量">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="长">
            <el-input v-model="form.width"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽">
            <el-input v-model="form.height"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="文字描述">
            <el-input v-model="form.desc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文字位置">
            <el-select v-model="form.textdirection" placeholder="请选择文字位置">
              <el-option label="中" value="中"></el-option>
              <el-option label="上/左" value="上/左"></el-option>
              <el-option label="下/右" value="下/右"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="旋转方向">
            <el-select v-model="form.rotate" placeholder="请选择旋转方向">
              <el-option label="0°" value="0"></el-option>
              <el-option label="90°" value="90"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="箭头朝向">
            <el-select v-model="form.arrowDirection" placeholder="请选择箭头朝向">
              <el-option label="无" value="0"></el-option>
              <el-option label="左/上" value="1"></el-option>
              <el-option label="右/下" value="2"></el-option>
              <el-option label="双向" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="drawer__footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary"  @click="handleOk">确 定</el-button>
    </div>
  </el-drawer>
  <el-dialog
  title="模板"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-select v-model="seleceTemplate" placeholder="请选择模板">
    <el-option label="无" value="0"></el-option>
    <el-option label="左/上" value="1"></el-option>
    <el-option label="右/下" value="2"></el-option>
    <el-option label="双向" value="3"></el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
  import { Graph } from '@antv/x6'
  import { Dnd } from '@antv/x6-plugin-dnd'
  import {stacker_bak,stacker,conveyor,conveyor_v,direction,conveyor_right,conveyor_left,conveyor_center,pallet,rgv,one_track,two_track,storage,storage_bak2} from '/src/components/MapModule/flow/graph/images';
  import '/src/components/MapModule/flow/graph/shape.js'
  // import '/src/components/MapModule/flow/graph/images.js'
  import { getGUID } from '@/utils/index.js';

  export default {
    data() {
      return {
        imgs: '',
        graph: null,
        drawer:false,
        direction:'rtl',
        clicknode:{},
        disable:false,
        dialogVisible:false,
        form:{

        },
        // 节点
   

        // 拖拽
        activeNames: ['1'],
        // 此处提前定义好的假数据，也可利用接口请求从后端获取，相关参数可以自己定义
        List: [
          {
            id: 1,
            name: '输送线',
            disabled: false,
            imgs: conveyor,
            type:'Station',
            width: 60,
            height: 40
          },
          {
            id: 2,
            name: '堆垛机',
            disabled: false,
            imgs: stacker,
            type:'SRM',
            width: 32,
            height: 50
          },
          {
            id: 1,
            name: '连接',
            disabled: false,
            imgs: direction,
            type:'Station-D',
            width: 40,
            height: 40
         
          },
          {
            id: 1,
            name: 'RGV',
            disabled: false,
            imgs: rgv,
            type:'RGV',
            width: 40,
            height: 40
          },
          {
            id: 1,
            name: '单轨',
            disabled: false,
            imgs: one_track,
            type:'OneTrack',
            width: 50,
            height: 10
          },
          {
            id: 1,
            name: '双轨',
            disabled: false,
            imgs: two_track,
            type:'TwoTrack',
            width: 50,
            height: 40
          },
          {
            id: 1,
            name: '货架',
            disabled: false,
            imgs: storage,
            type:'Storage',
            width: 40,
            height: 40
          }
        ],
      }
    },
    mounted() {
      this.graph = new Graph({
        container: document.getElementById('container'),
        width: 1200,
        height: 580,
        background: {
          color: '#F2F7FA',

        },
        // 网格线设置
        grid: {
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#eee', // 主网格线颜色
              thickness: 1, // 主网格线宽度
            },
            {
              color: '#ddd', // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },
        // 缩放与平移
        mousewheel: true, //使用滚轮控制缩放
        panning: {
          enabled: true,
          //触发键盘事件进行平移：'alt' | 'ctrl' | 'meta' | 'shift'
          modifiers: [],
          //触发鼠标事件进行平移：'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
          eventTypes: ['leftMouseDown'],
        },
      })

      // this.graph.scale(1, 1);
      //   // 恢复初始位置
      // this.graph.translate(0, 0);
      // this.graph.centerContent()
      //双击事件
      this.graph.on('node:dblclick', ({ e, x, y, node, view }) => {
        console.log(e,x,y, node, view,'sssss')
        this.clicknode =  node
        this.drawer=true
        let clickres=node.store.data
        let tstextdirection = 0
        if(clickres.attrs.text.transform=='translate(0, -25)'){
          tstextdirection= '上/左'
        }else if(clickres.attrs.text.transform=='translate(0, 25)'){
          tstextdirection= '下/右'
        }else if(clickres.attrs.text.transform==''){
          tstextdirection= '中'
        }
        clickres.shape=="Storage" ? this.disable = true: this.disable = false
        
        this.form = {
          num:1,
          width:clickres.size.width,
          height:clickres.size.height,
          desc:node.store.previous.attrs.text.text,
          name:clickres.attrs.text.text,
          x:x,
          y:y,
          direction:'0',
          textdirection:tstextdirection,
          rotate:clickres.angle,
          arrowDirection:0,
        }
        console.log(this.form,'xxxxxxx')
      })

      this.graph.on('node:click',({node})=>{

        node.attr({
          btn: {
        refX: '100%',
        refX2: -28,
        y: 4,
        width: 24,
        height: 18,
        rx: 10,
        ry: 10,
        fill: 'rgba(255,255,0,0.01)',
        stroke: 'red',
        cursor: 'pointer',
        event: 'node:delete',
      },
      btnText: {
        fontSize: 14,
        fill: 'red',
        text: 'x',
        refX: '100%',
        refX2: -19,
        y: 17,
        cursor: 'pointer',
        pointerEvent: 'none',
      },
          // image: {
          //   event: 'node:delete',
          //   xlinkHref: 'trash.png',
          //   width: 20,
          //   height: 20,
          // },
        })
      })

      // 渲染节点和边
      this.graph.fromJSON({
        nodes: this.nodes,
        edges: this.edges,
      })
      // 实现画布内容居中
      this.graph.centerContent()
      reset()
    },
    methods: {

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },

      handlePreview(file) {
        console.log(file);
      },

      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

      template(){
        this.dialogVisible = true
      },
      
      savetemplate(e){
        // var reader = new FileReader();
        // var fileList = document.getElementById('files').files;
        // console.log(fileList,e)
        // reader.readAsText(fileList, "UTF-8");
        //   reader.onload = function (e) {
        //   const val = e.target.result;
        //   console.log(val)
        // }

          const file = event.target.files[0];
          const reader = new FileReader();
          reader.readAsText(file, "UTF-8");
          reader.onload = (evt) => {
          const fileContent = JSON.parse(evt.target.result);
          this.graph.fromJSON(fileContent)
          // fileContent.cells.forEach(i=>{
          //   graph.addNode(i)
          // })
        };  
      //   const file = event.target.files[0]
      // const reader = new FileReader()
      // reader.readAsText(file, "UTF-8")
      // reader.onload = (evt) => {
      //   const fileString = evt.target.result
      //   const count = fileString.trim().split('\n').length
      //   let dataArr = []
      //   for (let index = 1; index < count; index++) {
      //     const fileline = fileString.split("\r\n")[index].split(",")[0]
      //     const filelineNumber = (fileline.split(/\s+/)).map(Number)
      //     dataArr.push(filelineNumber)
      //     console.log(dataArr)
      //   }
      // }

      },
      reset(){
        // console.log(this.initialScale);
        // console.log(this.initialTranslate);
        // 恢复初始缩放比例
        this.graph.scale(1, 1);
        // 恢复初始位置
        this.graph.translate(0, 0);
    },
      save(){
        // // console.log(data.cells,'datadatadatadata')
        // let str = new Blob([data.cells], {type: 'text/plain;charset=utf-8'});
        // // 注意这里要手动写上文件的后缀名
        // saveAs(str, `组件json.txt`);

        const blob = new Blob([JSON.stringify(this.graph.toJSON())], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '组件json.text';
        document.body.appendChild(a);
        a.style.display = 'none';
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      },
      handleClose(done) {
        this.drawer=false
      },
      handleOk(done) {
        this.clicknode.prop('size', { width: this.form.width, height: this.form.height }) 
        this.clicknode.prop('data', { code: this.form.desc})
        if(this.form.textdirection=='上/左'){
          this.clicknode.prop('attrs/text', { text: this.form.desc,transform: 'translate(0, -25)'})
        }else if(this.form.textdirection=='下/右'){
          this.clicknode.prop('attrs/text', { text: this.form.desc,transform: 'translate(0, 25)'})
        }else{
          this.clicknode.prop('attrs/text', { text: this.form.desc,transform: ''})
        }
        
        this.clicknode.prop('angle', this.form.rotate)
        if(this.clicknode.store.data.shape=="Station"){
          if(this.form.arrowDirection==0){
          this.clicknode.attr('image/xlink:href', conveyor)
          }else if(this.form.arrowDirection==1){
            this.clicknode.attr('image/xlink:href', conveyor_left)
          }else if(this.form.arrowDirection==2){
            this.clicknode.attr('image/xlink:href', conveyor_right)
          }else if(this.form.arrowDirection==3){
            this.clicknode.attr('image/xlink:href', conveyor_center)
          }
        }

        
       for (let index = 0; index < this.form.num-1; index++) {
        console.log(index,this.form.x,this.form.y)
        if(this.form.direction==0){
          this.graph.addNode(
          { 
            // x: this.form.x+(40*index),
            // y: this.form.y,
            position: {
              x: this.form.x+(40*index)+20,
              y: this.form.y-20,
            },
            shape: 'Storage',
            size: {
              width: this.form.width,
              height: this.form.height
            },
            // class: 'flash-shrink-animation',
            id: getGUID(),
            zIndex: 2,
            data: {
              type: 'center',
            },
            attrs: {
              text: {
                text: index+2,
              },
          },
          },
        );
        }else{
          this.graph.addNode(
          { 
            // x: this.form.x+(40*index),
            // y: this.form.y,
            position: {
              x: this.form.x-20,
              y: this.form.y+(40*index)+20,
            },
            shape: 'Storage',
            size: {
              width: this.form.width,
              height: this.form.height
            },
            // class: 'flash-shrink-animation',
            id: getGUID(),
            zIndex: 2,
            data: {
              type: this.form.textdirection,
            },
            attrs: {
              text: {
                text: index+2,
              },
          },
          },
        );
        }

       }
        // graph.setData({
        //   size: {
        //       width: this.form.width,
        //       height: this.form.height
        //     },
        // })

        this.drawer=false
      }, 
      // 自定义一个拖拽方法，也可以单独封装成一个js文件(方便调用)
      // 这里直接写到vue文件的methods方法里了
      // 需求：未置灰的可以拖拽，置灰的无法拖拽即禁用状态
      startDragToGraph(item, e) {
        if (item.type == 'Storage') {
          const node = this.graph.createNode({
            attrs: {
              text: {
                text: '1',
              },
            },
            position: {
              x: 0,
              y: 0
            },
            size: {
              width: item.width,
              height: item.height
            },
            angle: 0,
            shape: item.type,
            id: '0698a6d6-4f48-42e3-ab59-5ff5713a62ec',
            zIndex: 4,
            data: {
              code: '',
              name: '',
              type: '',
              status: "0",
              pallet: "0",
              auto: "1"
            }
          })
          const dnd = new Dnd({
            target: this.graph,
            // ☆拖拽结束时，验证节点是否可以放置到目标画布中。
            validateNode: (node,options) => {
              console.log(node,options)
              console.log('成功拖拽至目标画布')
            },
          })
          dnd.start(node, e)
        } else {
          const node = this.graph.createNode({
            attrs: {
              text: {
                text: '',
                transform: 'translate(0, -25)', 
              },
            },
            position: {
              x: 0,
              y: 0
            },
            size: {
              width: item.width,
              height: item.height
            },
            angle: 0,
            shape: item.type,
            id: '0698a6d6-4f48-42e3-ab59-5ff5713a62ec',
            zIndex: 4,
            data: {
              code: '',
              name: '',
              type: '',
              status: "0",
              pallet: "0",
              auto: "1"
            }
          })
          const dnd = new Dnd({
            target: this.graph,
            // ☆拖拽结束时，验证节点是否可以放置到目标画布中。
            validateNode: (node,options) => {
              console.log(node,options)
              console.log('成功拖拽至目标画布')
            },
          })
          dnd.start(node, e)
        }

      },
    },
  }
</script>
<style scoped>
  .flex {
    display: flex;
  }

  .left {
    width: 250px;
    padding: 10px;
    border: 1px solid blue;
  }

  .right {
    margin-left: 10px;
    border: 1px solid blue;
  }

  .btn {
    cursor: move;
    margin-top: 10px
  }

  ::v-deep .el-collapse-item__content {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0 25px;
    justify-content: space-between;
  }
  .drawer__footer{
    position:absolute;
    bottom: 10px;
    right: 10px;
  }
</style>