ECS5 / ECS5.0Web · Files

<template>
  <div class="flex">
    <div class="left" :style="{ height: componeentsHeight }">
      <el-collapse style="width: 180px" 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: 50px;
                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>
    <map-canvas ref="map"></map-canvas>
  </div>
</template>

<script>
import {
  stacker_bak,
  stacker,
  conveyor,
  conveyor_v,
  direction,
  conveyor_right,
  conveyor_left,
  conveyor_center,
  pallet,
  rgv,
  one_track,
  two_track,
  storage,
  storage_bak2,
  point,
  charging,
  hoist,
  shuttleCar,
} from "/src/components/MapModule/flow/graph/images";
import "/src/components/MapModule/flow/graph/shape.js";
import mapCanvas from "./mapCanvas.vue";

export default {
  name: "mapComponent",
  components: {
    mapCanvas,
  },
  props: {},
  data() {
    return {
      //画布
      graph: null,

      // 拖拽
      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: 40,
          height: 55,
        },
        {
          id: 3,
          name: "中转站",
          disabled: false,
          imgs: direction,
          type: "Station-D",
          width: 40,
          height: 40,
        },
        {
          id: 4,
          name: "RGV",
          disabled: false,
          imgs: rgv,
          type: "RGV",
          width: 40,
          height: 40,
        },
        {
          id: 5,
          name: "单轨",
          disabled: false,
          imgs: one_track,
          type: "OneTrack",
          width: 60,
          height: 10,
        },
        {
          id: 6,
          name: "双轨",
          disabled: false,
          imgs: two_track,
          type: "TwoTrack",
          width: 60,
          height: 40,
        },
        {
          id: 7,
          name: "货架",
          disabled: false,
          imgs: storage,
          type: "Storage",
          width: 40,
          height: 40,
        },
        {
          id: 8,
          name: "点位",
          disabled: false,
          imgs: point,
          type: "Point",
          width: 40,
          height: 40,
        },
        {
          id: 9,
          name: "充电桩",
          disabled: false,
          imgs: charging,
          type: "Charging",
          width: 40,
          height: 40,
        },
        {
          id: 10,
          name: "提升机",
          disabled: false,
          imgs: hoist,
          type: "Hoist",
          width: 40,
          height: 40,
        },
        {
          id: 11,
          name: "文本",
          disabled: false,
          //   imgs: null,
          text: "",
          type: "Text",
          width: 40,
          height: 40,
        },
        {
          id: 12,
          name: "穿梭车",
          disabled: false,
          imgs: shuttleCar,
          text: "",
          type: "ShuttleCar",
          width: 40,
          height: 40,
        },
        {
          id: 13,
          name: "托盘",
          disabled: false,
          imgs: pallet,
          text: "",
          type: "Pallet",
          width: 40,
          height: 40,
        },
      ],
    };
  },
  computed: {
    componeentsHeight() {
      return `calc(100vh - 140px )`;
    },
  },
  mounted() {},
  methods: {
    // 自定义一个拖拽方法，也可以单独封装成一个js文件(方便调用)
    // 这里直接写到vue文件的methods方法里了
    // 需求：未置灰的可以拖拽，置灰的无法拖拽即禁用状态
    startDragToGraph(item, e) {
      //   console.log(item, e);
      var text = null;
      if (item.type == "Storage") {
        text = {
          text: "1-1",
          "font-weight": "bold",
        };
      } else if (item.type == "Point") {
        text = {
          text: "",
          transform: "",
          "font-weight": "bold",
        };
      } else if (item.type == "Text") {
        text = {
          text: "文本",
          transform: "",
        };
      } else {
        text = {
          text: "",
          transform: "translate(0, -25)",
        };
      }
      this.$refs.map.startDragToGraph(item, text, e);
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.left {
  width: 200px;
  padding: 10px;
  border: 1px solid #ebeef5;
  margin-top: 10px;
  margin-left: 10px;
}

.btn {
  cursor: move;
  margin-top: 10px;
}
</style>