From 60200551926fec7dff02c0488723321005bef172 Mon Sep 17 00:00:00 2001
From: "Mr.sun" <2290907227@qq.com>
Date: Thu, 9 May 2024 17:29:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue     | 1419 +++------------------------------------
 src/views/index111.vue  |   98 ---
 src/views/index1112.vue | 1365 +++++++++++++++++++++++++++++++++++++
 3 files changed, 1441 insertions(+), 1441 deletions(-)
 delete mode 100644 src/views/index111.vue
 create mode 100644 src/views/index1112.vue

diff --git a/src/views/index.vue b/src/views/index.vue
index a2147b3..d2d2ec6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,1365 +1,98 @@
 <template>
-
-  <div class="app-container">
-    <div
-      class="control"
-      v-show="false"
-    >
-      <!-- <Button
-        type="primary"
-        v-if="!type"
-        @click="init('piler')"
-      >查看堆垛机仓库</Button> -->
-      <!-- <Button
-        type="primary"
-        v-if="!type"
-        @click="init('fourwayCar')"
-      >查看四向车仓库</Button> -->
-      <Button
-        type="primary"
-        v-if="type === 'piler'"
-        @click="pilerModel.show = true"
-      >堆垛机测试</Button>
-      <Button
-        type="primary"
-        v-if="type === 'piler'"
-        @click="carModel.show = true"
-      >小车测试</Button>
-      <Button
-        type="primary"
-        v-if="type === 'piler'"
-        @click="beltModel.show = true"
-      >托盘测试</Button>
-      <Button
-        type="primary"
-        v-if="type === 'piler'"
-        @click="animModel.show = true"
-      >流程演示</Button>
-      <Button
-        type="primary"
-        v-if="type === 'fourwayCar'"
-        @click="fourwayCarModel.show = true"
-      >四项车测试</Button>
-      <Button
-        type="primary"
-        v-if="type"
-        @click="layerHandler('freightSpace')"
-      >{{ !layer.freightSpace ? '展示货位' : '隐藏货位' }}</Button>
-      <Button
-        type="primary"
-        v-if="type === 'fourwayCar'"
-        @click="layerHandler('level-1')"
-      >{{ !layer['level-1'] ? '展示第1层' : '隐藏第1层' }}</Button>
-      <Button
-        type="primary"
-        v-if="type === 'fourwayCar'"
-        @click="layerHandler('level-2')"
-      >{{ !layer['level-2'] ? '展示第2层' : '隐藏第2层' }}</Button>
-      <Button
-        type="primary"
-        v-if="type === 'fourwayCar'"
-        @click="layerHandler('level-3')"
-      >{{ !layer['level-3'] ? '展示第3层' : '隐藏第3层' }}</Button>
-      <Button
-        type="primary"
-        v-if="type === 'fourwayCar'"
-        @click="layerHandler('level-4')"
-      >{{ !layer['level-4'] ? '展示第4层' : '隐藏第4层' }}</Button>
-      <Button
-        type="primary"
-        v-if="type"
-        @click="searchModel.show = true"
-      >定位货位</Button>
-      <Button
-        type="primary"
-        v-if="type"
-        @click="storageModel.show = true"
-      >更新库存测试</Button>
-      <Button
-        type="primary"
-        v-if="type"
-        @click="doUpdateFreightSpaceState()"
-      >更新货位状态</Button>
-    </div>
-    <div
-      class="dataContainer"
-      v-show="rightStatus"
-    >
-      <img
-        src="@/assets/images/Xhao.png"
-        alt=""
-        @click="()=>{
-          rightStatus=false
-        }"
-        style="width: 30px;height: 30px;float: right;cursor: pointer;"
-      >
-      <Table border
-        :height="550"
-        :columns="columns"
-        :data="tableData"
-      ></Table>
-    </div>
-    <div
-      id="mapContainer"
-      class="map-container"
-    >
-    </div>
-    <!--    <video id="video" style="display:none" autoplay controls loop>-->
-    <!--      <source src="/assets/video/floorMov3.mp4"/>-->
-    <!--    </video>-->
-    <Modal
-      :styles="{top: '50%', left: '-35%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="堆垛机测试"
-      v-model="searchModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="searchModel"
-      >
-        <FormItem label="货位编号">
-          <Input
-            placeholder="请输入货位编号"
-            type="text"
-            v-model="searchModel.freightId"
-          ></Input>
-        </FormItem>
-        <FormItem label="货位行号">
-          <Input
-            placeholder="请输入货位行号"
-            type="text"
-            v-model="searchModel.rowIndex"
-          ></Input>
-        </FormItem>
-        <FormItem label="货位列号">
-          <Input
-            placeholder="请输入货位列号"
-            type="text"
-            v-model="searchModel.columIndex"
-          ></Input>
-        </FormItem>
-        <FormItem label="货位层号">
-          <Input
-            placeholder="请输入货位层号"
-            type="text"
-            v-model="searchModel.levelIndex"
-          ></Input>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="doSearch">根据货位编号定位</Button>
-        <Button @click="doFilter">根据行列筛选货位</Button>
-        <Button @click="searchModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-35%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="堆垛机测试"
-      v-model="pilerModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="pilerModel"
-      >
-        <FormItem label="堆垛机编号">
-          <Input
-            placeholder="请输入堆垛机编号"
-            type="text"
-            v-model="pilerModel.pilerId"
-          ></Input>
-        </FormItem>
-        <FormItem label="目的位置（百分比）">
-          <InputNumber
-            :max="100"
-            :min="0"
-            :step="1"
-            v-model="pilerModel.rate"
-            width="50px"
-          ></InputNumber>
-        </FormItem>
-        <FormItem label="是否载货">
-          <Checkbox v-model="pilerModel.carryCargo"></Checkbox>
-        </FormItem>
-        <FormItem label="堆垛机状态">
-          <Select
-            class="search-col"
-            v-model="pilerModel.state"
-          >
-            <Option
-              v-for="(item, key) in config.pilerStateDictionary"
-              :value="key"
-              :key="`search-col-${key}`"
-            >
-              {{ item.describe }}
-            </Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="pilerPlay">演示</Button>
-        <Button @click="pilerModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-30%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="小车测试"
-      v-model="carModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="carModel"
-      >
-        <FormItem label="小车编号">
-          <Input
-            placeholder="请输入小车编号"
-            type="text"
-            v-model="carModel.carId"
-          ></Input>
-        </FormItem>
-        <FormItem label="目标堆垛机id">
-          <Input
-            placeholder="请输入目标堆垛机id"
-            type="text"
-            v-model="carModel.pilerId"
-          ></Input>
-        </FormItem>
-        <FormItem label="行进位置（百分比）">
-          <InputNumber
-            :max="100"
-            :min="0"
-            :step="1"
-            v-model="carModel.rate"
-            width="50px"
-          ></InputNumber>
-        </FormItem>
-        <FormItem label="是否载货">
-          <Checkbox v-model="carModel.carryCargo"></Checkbox>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="carPlay">演示</Button>
-        <Button @click="carModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-30%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="托盘测试"
-      v-model="beltModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="beltModel"
-      >
-        <FormItem label="托盘编号">
-          <Input
-            placeholder="请输入托盘编号"
-            type="text"
-            v-model="beltModel.trayId"
-          ></Input>
-        </FormItem>
-        <FormItem label="目的位置（百分比）">
-          <InputNumber
-            :max="100"
-            :min="0"
-            :step="1"
-            v-model="beltModel.rate"
-            width="50px"
-          ></InputNumber>
-        </FormItem>
-        <FormItem label="是否载货">
-          <Checkbox v-model="beltModel.carryCargo"></Checkbox>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="beltPlay">演示</Button>
-        <Button @click="beltModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-30%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="更新库存测试"
-      v-model="storageModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="storageModel"
-      >
-        <FormItem label="货位编号">
-          <Input
-            placeholder="请输入货位编号"
-            type="text"
-            v-model="storageModel.id"
-          ></Input>
-        </FormItem>
-        <FormItem label="货物编号">
-          <Input
-            placeholder="请输入货物编号"
-            type="text"
-            v-model="storageModel.freightId"
-          ></Input>
-        </FormItem>
-        <FormItem label="货物名称">
-          <Input
-            placeholder="请输入货物名称"
-            type="text"
-            v-model="storageModel.freightName"
-          ></Input>
-        </FormItem>
-        <FormItem label="货位状态">
-          <Select
-            class="search-col"
-            v-model="storageModel.state"
-          >
-            <Option
-              v-for="(item, key) in config.freightSpaceStateDictionary"
-              :value="key"
-              :key="`search-col-${key}`"
-            >
-              {{ item.describe }}
-            </Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="storageManage(1)">更新指定货位使用状态</Button>
-        <Button @click="storageManage(0)">更新所有货位使用状态</Button>
-        <Button @click="storageModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-30%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="流程测试"
-      v-model="animModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="animModel"
-      >
-        <FormItem label="目标堆垛机id">
-          <Input
-            placeholder="请输入目标堆垛机id"
-            type="text"
-            v-model="animModel.pilerId"
-          ></Input>
-        </FormItem>
-        <FormItem label="目标货位id">
-          <Input
-            placeholder="请输入目标货位id"
-            type="text"
-            v-model="animModel.freightSpaceId"
-          ></Input>
-        </FormItem>
-        <FormItem label="货物编号">
-          <Input
-            placeholder="请输入货物编号"
-            type="text"
-            v-model="animModel.freightId"
-          ></Input>
-        </FormItem>
-        <FormItem label="货物名称">
-          <Input
-            placeholder="请输入货物名称"
-            type="text"
-            v-model="animModel.freightName"
-          ></Input>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="animManage()">开始演示</Button>
-        <Button @click="animModel.show = false">取消</Button>
-      </div>
-    </Modal>
-    <Modal
-      :styles="{top: '50%', left: '-30%'}"
-      :closable="true"
-      :mask="false"
-      :mask-closable="false"
-      title="四向车测试"
-      v-model="fourwayCarModel.show"
-    >
-      <Form
-        :label-width="150"
-        :model="fourwayCarModel"
-      >
-        <FormItem label="小车编号">
-          <Input
-            placeholder="请输入小车编号"
-            type="text"
-            v-model="fourwayCarModel.carId"
-          ></Input>
-        </FormItem>
-        <FormItem label="途径点">
-          <Input
-            placeholder="请输入途径点编号，用逗号隔开"
-            type="text"
-            v-model="fourwayCarModel.pointPathIds"
-          ></Input>
-        </FormItem>
-        <FormItem label="是否载货">
-          <Checkbox v-model="fourwayCarModel.carryCargo"></Checkbox>
-        </FormItem>
-        <FormItem label="四向车状态">
-          <Select
-            class="search-col"
-            v-model="fourwayCarModel.state"
-          >
-            <Option
-              v-for="(item, key) in config.carStateDictionary"
-              :value="key"
-              :key="`search-col-${key}`"
-            >
-              {{ item.describe }}
-            </Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div
-        slot="footer"
-        style="text-align:center;"
-      >
-        <Button @click="addFourwayCar">添加四向车</Button>
-        <Button @click="fourwayCarPlay">演示</Button>
-        <Button @click="fourwayCarModel.show = false">取消</Button>
-      </div>
-    </Modal>
+  <div class="dashboard-editor-container">
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+
+    
   </div>
 </template>
+
 <script>
-import MapDrawing from '@/api/util/mapDrawing.js'
-import sysConfig from '../config.js'
-import { listLocation, containerList } from '@/api/wcs/location.js'
-// import { getLocationMoldByLocationCode } from '@/api/tool/dataScreen'
-// import { getLocationMoldByLocationCode } from '@/api/tool/dataScreen'
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
 export default {
-  name: 'HelloWorld',
-  props: {
-    customLattice: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
   },
   data() {
     return {
-      numTime: 0,
-      mapControl: null,
-      config: JSON.parse(JSON.stringify(sysConfig)),
-      type: '',
-      rightStatus: false,
-      warehouseInfo: {
-        storageRack: {},
-        fourwayCarRoad: {},
-        otherPoint: {},
-        piler: {},
-        pilerInfo: {
-          road: {}
-        },
-        carModel: {
-          cars: {
-            'car-1': {
-              id: 'car-1',
-              step: 5,
-              s3: [80, 10, 40]
-            }
-          }
-        },
-        beltModel: {
-          pathPoints: [],
-          trays: {
-            'tray-1': {
-              id: 'tray-1',
-              step: 5,
-              s3: [50, 10, 50]
-            }
-          }
-        }
-      },
-      layer: {
-        freightSpace: true,
-        pointId: false,
-        'level-1': true,
-        'level-2': false,
-        'level-3': false,
-        'level-4': false
-      },
-      lattice: {}, // 点阵关系对照
-      searchModel: {
-        show: false,
-        rowIndex: '',
-        columIndex: '',
-        levelIndex: '',
-        freightId: ''
-      },
-      pilerModel: {
-        show: false,
-        pilerId: 'piler-3',
-        rate: 100, // 目标位置占堆垛机路线的百分比
-        carryCargo: false, // false空载true载货
-        state: 0, // 0正常1故障
-        cargoId: 'cargo-1'
-      },
-      carModel: {
-        show: false,
-        carId: 'car-1',
-        pilerId: 'piler-3',
-        rate: 100, // 目标位置占小车行进路线的百分比
-        carryCargo: false, // false空载true载货
-        state: 0, // 0正常1故障
-        cargoId: 'cargo-1'
-      },
-      beltModel: {
-        show: false,
-        trayId: 'tray-1',
-        rate: 0, // 目标位置占传送带路线的百分比
-        carryCargo: false, // false空载true载货
-        state: 0, // 0正常1故障
-        cargoId: 'cargo-1'
-      },
-      storageModel: {
-        show: false,
-        id: '1-1-1',
-        freightId: '',
-        freightName: '',
-        state: 0
-      },
-      animModel: {
-        show: false,
-        pilerId: 'piler-3',
-        freightSpaceId: '',
-        freightId: 'cargo-1',
-        freightName: '演示货物'
-      },
-      fourwayCarModel: {
-        show: false,
-        carId: 'fourwayCar-1',
-        carryCargo: false, // false空载true载货
-        state: 0,
-        pointPathIds: '',
-        cargoId: 'cargo-1'
-      },
-      events: {},
-      cargo: {
-        'cargo-1': {
-          id: 'cargo-1',
-          name: '演示货物'
-        }
-      },
-      columns: [
-        {
-          title: '货位',
-          key: 'locationName',
-          width: 90
-        },
-        {
-          title: 'Box信息',
-          key: 'boxId',
-          width: 120
-        },
-        {
-          title: '备注',
-          key: 'remark',
-          width: 275
-        }
-        // {
-        //   title: 333,
-        //   key: 'model'
-        // },
-        // {
-        //   title: 444,
-        //   key: 'moldName'
-        // },
-        // {
-        //   title: 555,
-        //   key: 'inTime',
-        //   width: 140
-        // }
-      ],
-      tableData: [],
-      latticeForPiler1: [],
-      locationCodeList: []
+      lineChartData: lineChartData.newVisitis
     }
   },
-  mounted() {
-    //
-    // console.log(window.systemConfig)
-    listLocation({ pageNum: 1, pageSize: 9999 }).then((res) => {
-      // console.log(res)
-      this.latticeForPiler1 = res.rows
-    })
-    // this.doUpdateFreightSpaceState()
-    this.init('piler')
-    clearInterval(timer)
-    var timer = setInterval(() => {
-      this.doUpdateFreightSpaceState()
-      // console.log(2222)
-    }, 3000)
-  },
   methods: {
-    init(type) {
-      let self = this
-      this.type = type
-      switch (type) {
-        case 'fourwayCar':
-          this.config.mutiLayer = true
-          this.config.vehicleType = 2
-          this.config.warehouseType = 2
-          // this.config.rowCount = 59
-          break
-        case 'piler':
-          this.config.mutiLayer = false
-          this.config.vehicleType = 1
-          this.config.warehouseType = 1
-          break
-      }
-      let container = document.getElementById('mapContainer')
-      if (container) {
-        this.config.mapWidth = this.config.columnCount * this.config.standardXLength
-        this.config.mapHeight = this.config.rowCount * this.config.standardYLength
-        this.config.leftOffset = this.config.leftOffset - this.config.mapWidth / 2 - this.config.standardXLength / 2 - this.config.standardXLength * this.config.leftOffsetCell
-        this.config.topOffset = this.config.topOffset - this.config.mapHeight / 2 - this.config.standardYLength / 2 - this.config.standardYLength * this.config.topOffsetCell
-        this.mapControl = new MapDrawing('mapContainer', {
-          width: container.offsetWidth - 10,
-          height: window.innerHeight - 10,
-          warehouseInfo: this.warehouseInfo,
-          config: this.config,
-          videoGround: {
-            videoDomId: 'video',
-            elevation: -100,
-            width: this.config.mapWidth + 1000,
-            height: this.config.mapHeight + 1000,
-            src: '/assets/video/floorMov3.mp4'
-          },
-          grid: {
-            width: this.config.mapWidth,
-            height: this.config.mapHeight,
-            singleWidth: this.config.standardXLength,
-            singleHeight: this.config.standardYLength
-          },
-          event: {
-            ondblclick: (data) => {
-              this.numTime++
-              if (this.numTime == 2) {
-                self.clickHandler(data)
-                this.numTime = 0
-              }
-            },
-            onAnimateStop(type, data) {
-              self.animateStopHandler(type, data)
-            }
-          }
-        })
-        this.mapControl.initMap()
-        // this.doUpdateFreightSpaceState()
-        if (this.customLattice.length > 0) {
-          this.initWareHouseInfo(this.customLattice)
-        } else {
-          switch (type) {
-            case 'fourwayCar':
-              this.initWareHouseInfo(this.config.latticeForFourwayCar)
-              break
-            case 'piler':
-              this.doUpdateFreightSpaceState()
-              this.initWareHouseInfo(this.config.latticeForPiler)
-
-              break
-          }
-        }
-        this.mapControl.initWarehouse()
-      } else {
-        this.init()
-      }
-    },
-    /**
-     * 初始化仓库点阵
-     */
-    initWareHouseInfo(lattice) {
-      let self = this
-      if (this.config.warehouseType === 1) {
-        // 堆垛机的数据是从右往左，需要补全通道信息
-        let newTattice = []
-        let tempTatticeDic = {}
-        let maxColumnIndex = 0
-        let maxRowIndex = 0
-        let maxLevelIndex = 0
-        let addRowCount = 0
-        lattice.map((tileData) => {
-          if (maxRowIndex < tileData[0]) {
-            maxRowIndex = tileData[0]
-          }
-          if (maxColumnIndex < tileData[1]) {
-            maxColumnIndex = tileData[1]
-          }
-          if (maxLevelIndex < tileData[2]) {
-            maxLevelIndex = tileData[2]
-          }
-          tempTatticeDic[tileData[0] + '-' + tileData[1] + '-' + tileData[2]] = tileData
-        })
-        maxRowIndex += this.config.roadRowPosition.length
-        for (let r = 1; r <= maxRowIndex; r++) {
-          let tColumn = 0
-          if (this.config.roadRowPosition.indexOf(r) > -1) {
-            addRowCount++
-            for (let c = maxColumnIndex; c > 0; c--) {
-              // 添加通道行数据
-              let rColumn
-              // if (c === maxColumnIndex) {
-              //   rColumn = maxColumnIndex + 1
-              //   newTattice.push([r, rColumn, 1, "R" + r + '-' + rColumn, 0, 0, this.config.standardXLength, this.config.standardYLength, this.config.standardZLength])
-              // }
-              rColumn = maxColumnIndex - c + 1
-              newTattice.push([r, rColumn, 1, 'R' + r + '-' + rColumn, 0, 0, this.config.standardXLength, this.config.standardYLength, this.config.standardZLength])
-            }
-          } else {
-            for (let c = maxColumnIndex; c > 0; c--) {
-              // 添加仓库行数据
-              tColumn++
-              for (let l = 1; l <= maxLevelIndex; l++) {
-                let tempId = r - addRowCount + '-' + tColumn + '-' + l
-                if (tempTatticeDic[tempId]) {
-                  let tileData = JSON.parse(JSON.stringify(tempTatticeDic[tempId]))
-                  tileData[0] = r
-                  tileData[1] = c
-                  newTattice.push(tileData)
-                }
-              }
-            }
-          }
-        }
-        lattice = newTattice
-      }
-      lattice.map((tileData) => {
-        // [行号，列号，层数，第三方货位id，点位类别，点位状态，宽度(cm)，长度(cm)]
-        let point = self.getPointPosition(tileData)
-        tileData.push(point.x)
-        tileData.push(point.y)
-        let tileType = this.config.tileTypeDictionary[tileData[4]]
-        this.lattice[tileData[3]] = {
-          tileType: tileType,
-          rowId: tileData[0],
-          columnId: tileData[1],
-          levelId: tileData[2],
-          locationId: tileData[0] + '-' + tileData[1] + '-' + tileData[2],
-          x: point.x,
-          y: point.y,
-          z: point.z
-        }
-        switch (tileType.type) {
-          case 'road': // 通道
-            if (this.config.vehicleType === 1) {
-              this.initPilerRoad(tileData)
-            } else {
-              this.initFourwayCarRoad(tileData)
-            }
-            break
-          case 'interactionPoint': // 交互点
-          case 'storageRack': // 货架
-            this.initStockRackFromTile(tileData)
-            break
-          case 'chargingPoint': // 充电点
-            this.initOtherPoint(tileData)
-            break
-        }
-      })
-      if (this.config.vehicleType === 1) {
-        this.initPiler()
-        this.initBelt()
-        this.initCarInfo()
-      }
-    },
-    initStockRackFromTile(tileData) {
-      let storageRackId = tileData[0] + '-' + tileData[1]
-      if (!this.warehouseInfo.storageRack.hasOwnProperty(storageRackId)) {
-        this.warehouseInfo.storageRack[storageRackId] = {
-          id: storageRackId, // 货架编号
-          x: tileData[tileData.length - 2], // 东西向坐标，单位米
-          y: tileData[tileData.length - 1], // 南北向坐标，单位米
-          xLength: tileData[6], // 东西向长度，单位米
-          yLength: tileData[7], // 南北向长度，单位米
-          capacity: 0, // 容量/层数
-          outOfServerCount: 0,
-          state: 0,
-          freightSpace: {} // 货位
-        }
-      }
-      this.warehouseInfo.storageRack[storageRackId].freightSpace[tileData[3]] = {
-        id: tileData[3], // 货位编号
-        spaceId: storageRackId + '-' + tileData[2],
-        parentId: storageRackId, // 货架编号
-        state: tileData[5], // 点位状态
-        freight: {
-          // 货物信息
-          id: '',
-          name: ''
-        }
-      }
-      let stateDictionary = this.config.freightSpaceStateDictionary[tileData[5]]
-      if (stateDictionary && stateDictionary.describe.indexOf('停用') > -1) {
-        this.warehouseInfo.storageRack[storageRackId].outOfServerCount++
-      }
-      this.warehouseInfo.storageRack[storageRackId].capacity++
-      this.warehouseInfo.storageRack[storageRackId].state = this.warehouseInfo.storageRack[storageRackId].outOfServerCount === this.warehouseInfo.storageRack[storageRackId].capacity ? 10 : 0
-    },
-    initFourwayCarRoad(tileData) {
-      let fourwayCarRoadId = tileData[0] + '-' + tileData[1]
-      if (!this.warehouseInfo.fourwayCarRoad.hasOwnProperty(fourwayCarRoadId)) {
-        this.warehouseInfo.fourwayCarRoad[fourwayCarRoadId] = {
-          id: fourwayCarRoadId, // 货架编号
-          x: tileData[tileData.length - 2], // 东西向坐标，单位米
-          y: tileData[tileData.length - 1], // 南北向坐标，单位米
-          xLength: tileData[6], // 东西向长度，单位米
-          yLength: tileData[7], // 南北向长度，单位米
-          level: {} // 道路单元
-        }
-      }
-      this.warehouseInfo.fourwayCarRoad[fourwayCarRoadId].level[tileData[3]] = {
-        id: tileData[3], // 编号
-        spaceId: fourwayCarRoadId + '-' + tileData[2],
-        parentId: fourwayCarRoadId, // 货架编号
-        state: tileData[5] // 点位状态
-      }
-    },
-    initOtherPoint(tileData) {
-      let otherPointId = tileData[0] + '-' + tileData[1]
-      if (!this.warehouseInfo.otherPoint.hasOwnProperty(otherPointId)) {
-        this.warehouseInfo.otherPoint[otherPointId] = {
-          id: otherPointId, // 货架编号
-          x: tileData[tileData.length - 2], // 东西向坐标，单位米
-          y: tileData[tileData.length - 1], // 南北向坐标，单位米
-          xLength: tileData[6], // 东西向长度，单位米
-          yLength: tileData[7], // 南北向长度，单位米
-          level: {}
-        }
-      }
-      this.warehouseInfo.otherPoint[otherPointId].level[tileData[3]] = {
-        id: tileData[3], // 编号
-        spaceId: otherPointId + '-' + tileData[2],
-        parentId: otherPointId, // 货架编号
-        state: tileData[5] // 点位状态
-      }
-    },
-    initPilerRoad(tileData) {
-      let pilerRoadId = tileData[0]
-      if (!this.warehouseInfo.pilerInfo.road.hasOwnProperty(pilerRoadId)) {
-        this.warehouseInfo.pilerInfo.road[pilerRoadId] = {
-          id: pilerRoadId, // 通路id
-          roadPath: []
-        }
-      }
-      this.warehouseInfo.pilerInfo.road[pilerRoadId].roadPath.push(tileData[3])
-    },
-    initPiler() {
-      let self = this
-      Object.keys(this.warehouseInfo.pilerInfo.road).map((roadKey) => {
-        let road = this.warehouseInfo.pilerInfo.road[roadKey]
-        let pilerId = 'piler' + '-' + road.id
-        let pathPoints = []
-        let cell = self.getPointPositionById(road.roadPath[road.roadPath.length - 1])
-        let nextPointLocationId = cell.rowId + '-' + (cell.columnId + 1)
-        cell = self.getPointPositionById(nextPointLocationId, true)
-        road.startPoint = cell
-        pathPoints.push([cell.x, 0, cell.y])
-        cell = self.getPointPositionById(road.roadPath[0])
-        road.endPoint = cell
-        pathPoints.push([cell.x, 0, cell.y])
-        self.warehouseInfo.piler[pilerId] = {
-          id: pilerId,
-          label: pilerId,
-          rowId: road.id,
-          s3: [self.config.pilerInfo.x, self.config.pilerInfo.y, self.config.pilerInfo.z], // 堆垛机设备的长高宽
-          state: 0, // 当前行进状态（0停止1进入2退出3异常）
-          width: 3, // 路线宽度
-          step: 1.5,
-          pathPoints: pathPoints
-        }
-      })
-    },
-    initBelt() {
-      let self = this
-      let pathPoints = []
-      this.config.beltPath.map((pointId) => {
-        let cell = self.getPointPositionById(pointId, true)
-        pathPoints.push([cell.x, 0, cell.y])
-      })
-      this.warehouseInfo.beltModel.pathPoints = pathPoints
-    },
-    initCarInfo() {
-      let self = this
-      let pathPoints = []
-      this.config.carHeadPath.map((pointId) => {
-        let cell = self.getPointPositionById(pointId, true)
-        pathPoints.push([cell.x, 0, cell.y])
-      })
-      this.warehouseInfo.carModel.carHeadPathPoints = JSON.parse(JSON.stringify(pathPoints))
-      this.warehouseInfo.carModel.cars['car-1'].pathPoints = JSON.parse(JSON.stringify(pathPoints))
-    },
-    /**
-     * 地图点击事件处理
-     * @param eventData
-     */
-    async clickHandler(eventData) {
-      let self = this
-      if (eventData.all[0].nodeId !== '' || eventData.all[0].nodeId !== undefined || eventData.all[0].nodeId !== null) {
-        this.rightStatus = true
-      }
-
-      this.locationCodeList = []
-      self.tableData = []
-      // await containerList({ locationId: eventData.all[0].nodeId }).then((res) => {
-      //   this.locationCodeList = res.data
-      // })
-
-      // let resultDatas = eventData.all
-      self.tableData.length = 0
-
-      this.latticeForPiler1.forEach((item) => {
-        if (item.locationCode === eventData.all[0].nodeId) {
-          self.tableData.push(item)
-        }
-      })
-      // console.log(self.tableData)
-
-      //  this.locationCodeList.map((data) => {
-      //   let rowData = {
-      //     locationCode: eventData.all[0].nodeId,
-      //     moldNo: data.moldNo,
-      //     model: data.model,
-      //     moldName: data.moldName,
-      //     inTime: data.inTime
-      //   }
-
-      // let storageRack, freightSpace
-      // switch (data.customDataType) {
-      //   case 'storageRack':
-      //     storageRack = self.warehouseInfo.storageRack[data.nodeId]
-      //     let freightSpaces = []
-      //     Object.keys(storageRack.freightSpace).map((freightSpaceId) => {
-      //       let freightSpace = storageRack.freightSpace[freightSpaceId]
-      //       freightSpaces.push(freightSpace.id)
-      //     })
-      //     rowData.detail = '当前货架包含货位：' + freightSpaces.join('、')
-      //     break
-      //   case 'freightSpace':
-      //     storageRack = self.warehouseInfo.storageRack[data.nodeInfo.parentId]
-      //     // freightSpace = storageRack.freightSpace[data.nodeId]
-      //     // freightSpace.freight.name + '（' + freightSpace.freight.id +
-      //     let freightSpacess = []
-
-      //     this.locationCodeList.forEach((item) => {
-      //       // console.log(item)
-      //       freightSpace = item.moldNo + '|' + item.model + (item.moldName ? '|' + item.moldName : item.moldName)
-      //       // console.log(freightSpace)
-      //       freightSpacess.push(freightSpace)
-      //     })
-
-      //     // console.log(this.locationCodeList, freightSpacess)
-      //     rowData.detail = '所属货架：' + storageRack.id + '; 存放货物：(' + freightSpacess.join('、') + ')'
-      //     break
-      //   case 'piler':
-      //     break
-      //   case 'cargo':
-      //     let cargo = this.cargo[data.nodeId]
-      //     rowData.detail = '货物：' + cargo.name + '（' + cargo.id + '）'
-      //     break
-      // }
-
-      // })
-    },
-    /**
-     * 地图点击事件处理
-     * @param type
-     * @param data
-     */
-    animateStopHandler(type, data) {
-      let id = data.id
-      if (this.events.hasOwnProperty(id)) {
-        this.events[id](data)
-      }
-    },
-    layerHandler(layerId) {
-      if (layerId.indexOf('level') > -1) {
-        Object.keys(this.layer).map((tLayerId) => {
-          if (tLayerId.indexOf('level') > -1 && layerId !== tLayerId) {
-            this.layer[tLayerId] = false
-            this.mapControl.layerControl(tLayerId, this.layer[tLayerId])
-          }
-        })
-      }
-      this.layer[layerId] = !this.layer[layerId]
-      this.mapControl.layerControl(layerId, this.layer[layerId])
-    },
-    getPointPosition(tileData) {
-      // 计算点位x坐标
-      let x = this.config.standardXLength * tileData[1] + this.config.leftOffset
-      // 计算点位y坐标
-      let y = this.config.standardYLength * tileData[0] + this.config.topOffset
-      // 计算点位z坐标
-      let z = this.config.standardZLength * tileData[2]
-      return {
-        x: x,
-        y: y,
-        z: z
-      }
-    },
-    getPointPositionById(pointId, onlyByIndex = false) {
-      let self = this
-      let lattice = this.lattice
-      if (this.lattice.hasOwnProperty(pointId) && !onlyByIndex) {
-        let cell = lattice[pointId]
-        return cell
-      } else if (pointId.indexOf('-') > -1) {
-        let numArr = pointId.split('-')
-        let isAllNum = true
-        numArr.map((num) => {
-          if (isNaN(parseInt(num))) {
-            isAllNum = false
-          }
-        })
-        if (isAllNum && numArr.length > 1) {
-          let tileData = [numArr[0], numArr[1], numArr.length > 2 ? numArr[2] : 0]
-          let point = self.getPointPosition(tileData)
-          return {
-            rowId: tileData[0],
-            columnId: tileData[1],
-            levelId: tileData[2],
-            locationId: tileData[0] + '-' + tileData[1] + '-' + tileData[2],
-            x: point.x,
-            y: point.y,
-            z: point.z
-          }
-        }
-      }
-    },
-    addFourwayCar() {
-      let self = this
-      let pathPoints = []
-      let pathPointIdArr = this.fourwayCarModel.pointPathIds.replace(/ \t/g, '').replace(/，/g, ',').split(',')
-      pathPointIdArr.map((pathPointId) => {
-        let cell = self.getPointPositionById(pathPointId)
-        pathPoints.push([cell.x, 10, cell.y])
-      })
-      this.mapControl.drawCar({
-        carId: this.fourwayCarModel.carId,
-        step: 1.5,
-        s3: [80, 10, 80],
-        pathPoints: pathPoints,
-        state: this.fourwayCarModel.state
-      })
-    },
-    fourwayCarPlay() {
-      let self = this
-      let pathPoints = []
-      let pathPointIdArr = this.fourwayCarModel.pointPathIds.replace(/ \t/g, '').replace(/，/g, ',').split(',')
-      pathPointIdArr.map((pathPointId) => {
-        let cell = self.getPointPositionById(pathPointId)
-        pathPoints.push([cell.x, 10, cell.y])
-      })
-      this.mapControl.updateCar({
-        carId: this.fourwayCarModel.carId,
-        rate: 100,
-        carryCargo: this.fourwayCarModel.carryCargo, // false空载true载货
-        cargoId: this.fourwayCarModel.freightId,
-        pathPoints: pathPoints,
-        state: this.fourwayCarModel.state
-      })
-    },
-    /**
-     * 堆垛机状态设置
-     */
-    pilerPlay() {
-      this.mapControl.updatePiler(this.pilerModel)
-    },
-    /**
-     * 小车状态设置
-     */
-    carPlay() {
-      let road = this.warehouseInfo.pilerInfo.road[this.carModel.pilerId.replace('piler-', '')]
-      // console.log(road, this.warehouseInfo, this.carModel)
-      this.carModel.pathPoints = [...this.warehouseInfo.carModel.carHeadPathPoints, [road.startPoint.x, 0, road.startPoint.y]]
-      this.mapControl.updateCar(this.carModel)
-    },
-    /**
-     * 运送带托盘状态设置
-     */
-    beltPlay() {
-      this.mapControl.updateTray(this.beltModel)
-    },
-    /**
-     *
-     * @param type 0调整整体模型后全部更新 1根据货位id来更新货位状态
-     */
-    storageManage(type) {
-      let warehouseData
-      switch (type) {
-        case 0:
-          warehouseData = this.warehouseInfo
-          Object.keys(warehouseData.storageRack).map((storageRackId) => {
-            Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
-              let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
-              freightSpace.state = freightSpace.state ? 0 : 2
-            })
-          })
-          this.mapControl.updateStorage(this.warehouseInfo)
-          break
-        case 1:
-          warehouseData = this.warehouseInfo
-          Object.keys(warehouseData.storageRack).map((storageRackId) => {
-            Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
-              if (freightSpaceId === this.storageModel.id) {
-                let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
-                freightSpace.state = this.storageModel.state
-                freightSpace.freight = {
-                  id: freightSpace.state ? this.storageModel.freightId : '',
-                  name: freightSpace.state ? this.storageModel.freightName : ''
-                }
-              }
-            })
-          })
-          this.mapControl.updateStorageByKey(this.storageModel.id, this.storageModel.state)
-          break
-      }
-    },
-    /**
-     *
-     * 更新货位状态
-     */
-    doUpdateFreightSpaceState() {
-      let freightSpaceState = {}
-      // this.rightStatus = true
-      // 根据字典项来随机库位状态，可以改为通过查询后台接口数据来加载实时状态
-      let dicKeys = Object.keys(this.config.freightSpaceStateDictionary)
-      let dacKeysList = []
-
-      // console.log(this.lattice)
-      Object.keys(this.lattice).map((tileKey) => {
-        if (['interactionPoint', 'storageRack'].indexOf(this.lattice[tileKey].tileType.type) > -1) {
-          // let stateIndex = Math.round(Math.random() * (dicKeys.length - 1))
-          this.latticeForPiler1.forEach((item) => {
-            // console.log(item)
-
-            if (item.locationName === tileKey) {
-              dacKeysList.push(item.locationStatus)
-              freightSpaceState[tileKey] = item.locationStatus
-            }
-          })
-
-          // freightSpaceState[tileKey] = dicKeys[stateIndex]
-        }
-      })
-      // console.log(dicKeys)
-      // 批量更新库位状态
-      let warehouseData = this.warehouseInfo
-      Object.keys(warehouseData.storageRack).map((storageRackId) => {
-        Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
-          let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
-          freightSpace.state = freightSpaceState[freightSpaceId]
-        })
-      })
-      this.mapControl.updateStorage(this.warehouseInfo)
-    },
-    /**
-     * 串联演示货物从传送带添加到摆放到货架的功能
-     */
-    animManage() {
-      let self = this
-      // 清空所有库存
-      if (!this.hasClear) {
-        this.hasClear = 1
-        let warehouseData = this.warehouseInfo
-        Object.keys(warehouseData.storageRack).map((storageRackId) => {
-          Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
-            let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
-            freightSpace.state = 0
-            freightSpace.freight = {
-              id: '',
-              name: ''
-            }
-          })
-        })
-        this.mapControl.updateStorage(this.warehouseInfo)
-      }
-      // 货物通过传送带
-      let trayId = 'tray-1' // 调用的托盘id，对应this.warehouseInfo.beltModel.trays中的key
-      this.beltAnim(trayId)
-      this.events[trayId] = (data) => {
-        delete self.events[trayId]
-        // 去掉托盘运载的货物，并让托盘回到原点
-        self.mapControl.updateTray({
-          trayId: trayId,
-          rate: 100,
-          carryCargo: false, // false空载true载货
-          cargoId: ''
-        })
-        setTimeout(() => {
-          // 让托盘回到原点
-          self.mapControl.updateTray({
-            trayId: trayId,
-            rate: 0,
-            carryCargo: false, // false空载true载货
-            cargoId: '',
-            noAnim: true // 不展示动画
-          })
-        }, 1000)
-        let carId = 'car-1' // 调用的托盘id，对应this.warehouseInfo.carModel.cars中的key
-        let pilerId = this.animModel.pilerId
-        // 计算小车路径
-        let road = this.warehouseInfo.pilerInfo.road[pilerId.replace('piler-', '')]
-        let pathPoints = [...this.warehouseInfo.carModel.carHeadPathPoints, [road.startPoint.x, 0, road.startPoint.y]]
-        self.carAnim(carId, pathPoints)
-        self.events[carId] = (data) => {
-          delete self.events[carId]
-          // 去掉小车运载的货物
-          self.mapControl.updateCar({
-            carId: carId,
-            rate: 100,
-            carryCargo: false, // false空载true载货
-            cargoId: '',
-            noAnim: true // 不展示动画
-          })
-          setTimeout(() => {
-            // 让小车回到原点
-            self.carAnim(carId, pathPoints, true)
-          }, 1000)
-          // 计算堆垛机目标位置百分比
-          let rate = self.computePilerTargetPositionRate(pilerId, this.animModel.freightSpaceId)
-          self.pilerAnim(pilerId, rate)
-          self.events[pilerId] = (data) => {
-            delete self.events[pilerId]
-            // 去掉堆垛机运载的货物，并回到原点
-            self.mapControl.updatePiler({
-              pilerId: pilerId,
-              rate: 0,
-              carryCargo: false, // false空载true载货
-              cargoId: ''
-            })
-            // 更新目标货位的使用状态
-            let tFreightSpaceId = this.animModel.freightSpaceId
-            let warehouseData = self.warehouseInfo
-            Object.keys(warehouseData.storageRack).map((storageRackId) => {
-              Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
-                if (freightSpaceId === tFreightSpaceId) {
-                  let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
-                  freightSpace.state = 2
-                  freightSpace.freight = {
-                    id: this.animModel.freightId,
-                    name: this.animModel.freightName
-                  }
-                  self.mapControl.updateStorageByKey(tFreightSpaceId, freightSpace.state)
-                }
-              })
-            })
-          }
-        }
-      }
-    },
-    beltAnim(trayId) {
-      this.mapControl.updateTray({
-        trayId: trayId,
-        rate: 100,
-        carryCargo: true, // false空载true载货
-        cargoId: this.animModel.freightId
-      })
-    },
-    carAnim(carId, pathPoints, isBack = false) {
-      this.warehouseInfo.carModel.cars[carId].pathPoints = pathPoints
-      this.mapControl.updateCar({
-        carId: carId,
-        rate: isBack ? 0 : 100,
-        carryCargo: !isBack, // false空载true载货
-        cargoId: this.animModel.freightId,
-        pathPoints: isBack ? null : pathPoints
-      })
-    },
-    pilerAnim(pilerId, rate) {
-      this.mapControl.updatePiler({
-        pilerId: pilerId,
-        rate: rate,
-        carryCargo: true, // false空载true载货
-        cargoId: this.animModel.freightId
-      })
-    },
-    computePilerTargetPositionRate(pilerId, freightSpaceId) {
-      let piler = this.warehouseInfo.piler[pilerId]
-      let road = this.warehouseInfo.pilerInfo.road[pilerId.replace('piler-', '')]
-      let pathWidth = road.startPoint.x - road.endPoint.x
-      let cell = this.getPointPositionById(freightSpaceId)
-      let nextPointLocationId = piler.rowId + '-' + cell.columnId
-      cell = this.getPointPositionById(nextPointLocationId, true)
-      let rate = (1 - (cell.x - road.endPoint.x) / pathWidth) * 100
-      return rate
-    },
-    doSearch() {
-      this.mapControl.moveTo(this.searchModel.freightId)
-    },
-    doFilter() {
-      this.mapControl.filterFreightSpace(this.searchModel.rowIndex, this.searchModel.columIndex, this.searchModel.levelIndex)
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
     }
   }
 }
 </script>
 
-<style scoped lang="less">
-.map-container {
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-}
-
-.control {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  width: 160px;
-  height: 400px;
-  background-color: aliceblue;
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
 
-  button {
-    margin-top: 5px;
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
 }
 
-.dataContainer {
-  position: absolute;
-  right: 10px;
-  top: 60px;
-  width: 520px;
-  height: 560px;
-  background-color: aliceblue;
-  padding-top: 5px;
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
 }
 </style>
diff --git a/src/views/index111.vue b/src/views/index111.vue
deleted file mode 100644
index d2d2ec6..0000000
--- a/src/views/index111.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    
-  </div>
-</template>
-
-<script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>
diff --git a/src/views/index1112.vue b/src/views/index1112.vue
new file mode 100644
index 0000000..a2147b3
--- /dev/null
+++ b/src/views/index1112.vue
@@ -0,0 +1,1365 @@
+<template>
+
+  <div class="app-container">
+    <div
+      class="control"
+      v-show="false"
+    >
+      <!-- <Button
+        type="primary"
+        v-if="!type"
+        @click="init('piler')"
+      >查看堆垛机仓库</Button> -->
+      <!-- <Button
+        type="primary"
+        v-if="!type"
+        @click="init('fourwayCar')"
+      >查看四向车仓库</Button> -->
+      <Button
+        type="primary"
+        v-if="type === 'piler'"
+        @click="pilerModel.show = true"
+      >堆垛机测试</Button>
+      <Button
+        type="primary"
+        v-if="type === 'piler'"
+        @click="carModel.show = true"
+      >小车测试</Button>
+      <Button
+        type="primary"
+        v-if="type === 'piler'"
+        @click="beltModel.show = true"
+      >托盘测试</Button>
+      <Button
+        type="primary"
+        v-if="type === 'piler'"
+        @click="animModel.show = true"
+      >流程演示</Button>
+      <Button
+        type="primary"
+        v-if="type === 'fourwayCar'"
+        @click="fourwayCarModel.show = true"
+      >四项车测试</Button>
+      <Button
+        type="primary"
+        v-if="type"
+        @click="layerHandler('freightSpace')"
+      >{{ !layer.freightSpace ? '展示货位' : '隐藏货位' }}</Button>
+      <Button
+        type="primary"
+        v-if="type === 'fourwayCar'"
+        @click="layerHandler('level-1')"
+      >{{ !layer['level-1'] ? '展示第1层' : '隐藏第1层' }}</Button>
+      <Button
+        type="primary"
+        v-if="type === 'fourwayCar'"
+        @click="layerHandler('level-2')"
+      >{{ !layer['level-2'] ? '展示第2层' : '隐藏第2层' }}</Button>
+      <Button
+        type="primary"
+        v-if="type === 'fourwayCar'"
+        @click="layerHandler('level-3')"
+      >{{ !layer['level-3'] ? '展示第3层' : '隐藏第3层' }}</Button>
+      <Button
+        type="primary"
+        v-if="type === 'fourwayCar'"
+        @click="layerHandler('level-4')"
+      >{{ !layer['level-4'] ? '展示第4层' : '隐藏第4层' }}</Button>
+      <Button
+        type="primary"
+        v-if="type"
+        @click="searchModel.show = true"
+      >定位货位</Button>
+      <Button
+        type="primary"
+        v-if="type"
+        @click="storageModel.show = true"
+      >更新库存测试</Button>
+      <Button
+        type="primary"
+        v-if="type"
+        @click="doUpdateFreightSpaceState()"
+      >更新货位状态</Button>
+    </div>
+    <div
+      class="dataContainer"
+      v-show="rightStatus"
+    >
+      <img
+        src="@/assets/images/Xhao.png"
+        alt=""
+        @click="()=>{
+          rightStatus=false
+        }"
+        style="width: 30px;height: 30px;float: right;cursor: pointer;"
+      >
+      <Table border
+        :height="550"
+        :columns="columns"
+        :data="tableData"
+      ></Table>
+    </div>
+    <div
+      id="mapContainer"
+      class="map-container"
+    >
+    </div>
+    <!--    <video id="video" style="display:none" autoplay controls loop>-->
+    <!--      <source src="/assets/video/floorMov3.mp4"/>-->
+    <!--    </video>-->
+    <Modal
+      :styles="{top: '50%', left: '-35%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="堆垛机测试"
+      v-model="searchModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="searchModel"
+      >
+        <FormItem label="货位编号">
+          <Input
+            placeholder="请输入货位编号"
+            type="text"
+            v-model="searchModel.freightId"
+          ></Input>
+        </FormItem>
+        <FormItem label="货位行号">
+          <Input
+            placeholder="请输入货位行号"
+            type="text"
+            v-model="searchModel.rowIndex"
+          ></Input>
+        </FormItem>
+        <FormItem label="货位列号">
+          <Input
+            placeholder="请输入货位列号"
+            type="text"
+            v-model="searchModel.columIndex"
+          ></Input>
+        </FormItem>
+        <FormItem label="货位层号">
+          <Input
+            placeholder="请输入货位层号"
+            type="text"
+            v-model="searchModel.levelIndex"
+          ></Input>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="doSearch">根据货位编号定位</Button>
+        <Button @click="doFilter">根据行列筛选货位</Button>
+        <Button @click="searchModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-35%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="堆垛机测试"
+      v-model="pilerModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="pilerModel"
+      >
+        <FormItem label="堆垛机编号">
+          <Input
+            placeholder="请输入堆垛机编号"
+            type="text"
+            v-model="pilerModel.pilerId"
+          ></Input>
+        </FormItem>
+        <FormItem label="目的位置（百分比）">
+          <InputNumber
+            :max="100"
+            :min="0"
+            :step="1"
+            v-model="pilerModel.rate"
+            width="50px"
+          ></InputNumber>
+        </FormItem>
+        <FormItem label="是否载货">
+          <Checkbox v-model="pilerModel.carryCargo"></Checkbox>
+        </FormItem>
+        <FormItem label="堆垛机状态">
+          <Select
+            class="search-col"
+            v-model="pilerModel.state"
+          >
+            <Option
+              v-for="(item, key) in config.pilerStateDictionary"
+              :value="key"
+              :key="`search-col-${key}`"
+            >
+              {{ item.describe }}
+            </Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="pilerPlay">演示</Button>
+        <Button @click="pilerModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-30%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="小车测试"
+      v-model="carModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="carModel"
+      >
+        <FormItem label="小车编号">
+          <Input
+            placeholder="请输入小车编号"
+            type="text"
+            v-model="carModel.carId"
+          ></Input>
+        </FormItem>
+        <FormItem label="目标堆垛机id">
+          <Input
+            placeholder="请输入目标堆垛机id"
+            type="text"
+            v-model="carModel.pilerId"
+          ></Input>
+        </FormItem>
+        <FormItem label="行进位置（百分比）">
+          <InputNumber
+            :max="100"
+            :min="0"
+            :step="1"
+            v-model="carModel.rate"
+            width="50px"
+          ></InputNumber>
+        </FormItem>
+        <FormItem label="是否载货">
+          <Checkbox v-model="carModel.carryCargo"></Checkbox>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="carPlay">演示</Button>
+        <Button @click="carModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-30%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="托盘测试"
+      v-model="beltModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="beltModel"
+      >
+        <FormItem label="托盘编号">
+          <Input
+            placeholder="请输入托盘编号"
+            type="text"
+            v-model="beltModel.trayId"
+          ></Input>
+        </FormItem>
+        <FormItem label="目的位置（百分比）">
+          <InputNumber
+            :max="100"
+            :min="0"
+            :step="1"
+            v-model="beltModel.rate"
+            width="50px"
+          ></InputNumber>
+        </FormItem>
+        <FormItem label="是否载货">
+          <Checkbox v-model="beltModel.carryCargo"></Checkbox>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="beltPlay">演示</Button>
+        <Button @click="beltModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-30%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="更新库存测试"
+      v-model="storageModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="storageModel"
+      >
+        <FormItem label="货位编号">
+          <Input
+            placeholder="请输入货位编号"
+            type="text"
+            v-model="storageModel.id"
+          ></Input>
+        </FormItem>
+        <FormItem label="货物编号">
+          <Input
+            placeholder="请输入货物编号"
+            type="text"
+            v-model="storageModel.freightId"
+          ></Input>
+        </FormItem>
+        <FormItem label="货物名称">
+          <Input
+            placeholder="请输入货物名称"
+            type="text"
+            v-model="storageModel.freightName"
+          ></Input>
+        </FormItem>
+        <FormItem label="货位状态">
+          <Select
+            class="search-col"
+            v-model="storageModel.state"
+          >
+            <Option
+              v-for="(item, key) in config.freightSpaceStateDictionary"
+              :value="key"
+              :key="`search-col-${key}`"
+            >
+              {{ item.describe }}
+            </Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="storageManage(1)">更新指定货位使用状态</Button>
+        <Button @click="storageManage(0)">更新所有货位使用状态</Button>
+        <Button @click="storageModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-30%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="流程测试"
+      v-model="animModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="animModel"
+      >
+        <FormItem label="目标堆垛机id">
+          <Input
+            placeholder="请输入目标堆垛机id"
+            type="text"
+            v-model="animModel.pilerId"
+          ></Input>
+        </FormItem>
+        <FormItem label="目标货位id">
+          <Input
+            placeholder="请输入目标货位id"
+            type="text"
+            v-model="animModel.freightSpaceId"
+          ></Input>
+        </FormItem>
+        <FormItem label="货物编号">
+          <Input
+            placeholder="请输入货物编号"
+            type="text"
+            v-model="animModel.freightId"
+          ></Input>
+        </FormItem>
+        <FormItem label="货物名称">
+          <Input
+            placeholder="请输入货物名称"
+            type="text"
+            v-model="animModel.freightName"
+          ></Input>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="animManage()">开始演示</Button>
+        <Button @click="animModel.show = false">取消</Button>
+      </div>
+    </Modal>
+    <Modal
+      :styles="{top: '50%', left: '-30%'}"
+      :closable="true"
+      :mask="false"
+      :mask-closable="false"
+      title="四向车测试"
+      v-model="fourwayCarModel.show"
+    >
+      <Form
+        :label-width="150"
+        :model="fourwayCarModel"
+      >
+        <FormItem label="小车编号">
+          <Input
+            placeholder="请输入小车编号"
+            type="text"
+            v-model="fourwayCarModel.carId"
+          ></Input>
+        </FormItem>
+        <FormItem label="途径点">
+          <Input
+            placeholder="请输入途径点编号，用逗号隔开"
+            type="text"
+            v-model="fourwayCarModel.pointPathIds"
+          ></Input>
+        </FormItem>
+        <FormItem label="是否载货">
+          <Checkbox v-model="fourwayCarModel.carryCargo"></Checkbox>
+        </FormItem>
+        <FormItem label="四向车状态">
+          <Select
+            class="search-col"
+            v-model="fourwayCarModel.state"
+          >
+            <Option
+              v-for="(item, key) in config.carStateDictionary"
+              :value="key"
+              :key="`search-col-${key}`"
+            >
+              {{ item.describe }}
+            </Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div
+        slot="footer"
+        style="text-align:center;"
+      >
+        <Button @click="addFourwayCar">添加四向车</Button>
+        <Button @click="fourwayCarPlay">演示</Button>
+        <Button @click="fourwayCarModel.show = false">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+import MapDrawing from '@/api/util/mapDrawing.js'
+import sysConfig from '../config.js'
+import { listLocation, containerList } from '@/api/wcs/location.js'
+// import { getLocationMoldByLocationCode } from '@/api/tool/dataScreen'
+// import { getLocationMoldByLocationCode } from '@/api/tool/dataScreen'
+export default {
+  name: 'HelloWorld',
+  props: {
+    customLattice: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      numTime: 0,
+      mapControl: null,
+      config: JSON.parse(JSON.stringify(sysConfig)),
+      type: '',
+      rightStatus: false,
+      warehouseInfo: {
+        storageRack: {},
+        fourwayCarRoad: {},
+        otherPoint: {},
+        piler: {},
+        pilerInfo: {
+          road: {}
+        },
+        carModel: {
+          cars: {
+            'car-1': {
+              id: 'car-1',
+              step: 5,
+              s3: [80, 10, 40]
+            }
+          }
+        },
+        beltModel: {
+          pathPoints: [],
+          trays: {
+            'tray-1': {
+              id: 'tray-1',
+              step: 5,
+              s3: [50, 10, 50]
+            }
+          }
+        }
+      },
+      layer: {
+        freightSpace: true,
+        pointId: false,
+        'level-1': true,
+        'level-2': false,
+        'level-3': false,
+        'level-4': false
+      },
+      lattice: {}, // 点阵关系对照
+      searchModel: {
+        show: false,
+        rowIndex: '',
+        columIndex: '',
+        levelIndex: '',
+        freightId: ''
+      },
+      pilerModel: {
+        show: false,
+        pilerId: 'piler-3',
+        rate: 100, // 目标位置占堆垛机路线的百分比
+        carryCargo: false, // false空载true载货
+        state: 0, // 0正常1故障
+        cargoId: 'cargo-1'
+      },
+      carModel: {
+        show: false,
+        carId: 'car-1',
+        pilerId: 'piler-3',
+        rate: 100, // 目标位置占小车行进路线的百分比
+        carryCargo: false, // false空载true载货
+        state: 0, // 0正常1故障
+        cargoId: 'cargo-1'
+      },
+      beltModel: {
+        show: false,
+        trayId: 'tray-1',
+        rate: 0, // 目标位置占传送带路线的百分比
+        carryCargo: false, // false空载true载货
+        state: 0, // 0正常1故障
+        cargoId: 'cargo-1'
+      },
+      storageModel: {
+        show: false,
+        id: '1-1-1',
+        freightId: '',
+        freightName: '',
+        state: 0
+      },
+      animModel: {
+        show: false,
+        pilerId: 'piler-3',
+        freightSpaceId: '',
+        freightId: 'cargo-1',
+        freightName: '演示货物'
+      },
+      fourwayCarModel: {
+        show: false,
+        carId: 'fourwayCar-1',
+        carryCargo: false, // false空载true载货
+        state: 0,
+        pointPathIds: '',
+        cargoId: 'cargo-1'
+      },
+      events: {},
+      cargo: {
+        'cargo-1': {
+          id: 'cargo-1',
+          name: '演示货物'
+        }
+      },
+      columns: [
+        {
+          title: '货位',
+          key: 'locationName',
+          width: 90
+        },
+        {
+          title: 'Box信息',
+          key: 'boxId',
+          width: 120
+        },
+        {
+          title: '备注',
+          key: 'remark',
+          width: 275
+        }
+        // {
+        //   title: 333,
+        //   key: 'model'
+        // },
+        // {
+        //   title: 444,
+        //   key: 'moldName'
+        // },
+        // {
+        //   title: 555,
+        //   key: 'inTime',
+        //   width: 140
+        // }
+      ],
+      tableData: [],
+      latticeForPiler1: [],
+      locationCodeList: []
+    }
+  },
+  mounted() {
+    //
+    // console.log(window.systemConfig)
+    listLocation({ pageNum: 1, pageSize: 9999 }).then((res) => {
+      // console.log(res)
+      this.latticeForPiler1 = res.rows
+    })
+    // this.doUpdateFreightSpaceState()
+    this.init('piler')
+    clearInterval(timer)
+    var timer = setInterval(() => {
+      this.doUpdateFreightSpaceState()
+      // console.log(2222)
+    }, 3000)
+  },
+  methods: {
+    init(type) {
+      let self = this
+      this.type = type
+      switch (type) {
+        case 'fourwayCar':
+          this.config.mutiLayer = true
+          this.config.vehicleType = 2
+          this.config.warehouseType = 2
+          // this.config.rowCount = 59
+          break
+        case 'piler':
+          this.config.mutiLayer = false
+          this.config.vehicleType = 1
+          this.config.warehouseType = 1
+          break
+      }
+      let container = document.getElementById('mapContainer')
+      if (container) {
+        this.config.mapWidth = this.config.columnCount * this.config.standardXLength
+        this.config.mapHeight = this.config.rowCount * this.config.standardYLength
+        this.config.leftOffset = this.config.leftOffset - this.config.mapWidth / 2 - this.config.standardXLength / 2 - this.config.standardXLength * this.config.leftOffsetCell
+        this.config.topOffset = this.config.topOffset - this.config.mapHeight / 2 - this.config.standardYLength / 2 - this.config.standardYLength * this.config.topOffsetCell
+        this.mapControl = new MapDrawing('mapContainer', {
+          width: container.offsetWidth - 10,
+          height: window.innerHeight - 10,
+          warehouseInfo: this.warehouseInfo,
+          config: this.config,
+          videoGround: {
+            videoDomId: 'video',
+            elevation: -100,
+            width: this.config.mapWidth + 1000,
+            height: this.config.mapHeight + 1000,
+            src: '/assets/video/floorMov3.mp4'
+          },
+          grid: {
+            width: this.config.mapWidth,
+            height: this.config.mapHeight,
+            singleWidth: this.config.standardXLength,
+            singleHeight: this.config.standardYLength
+          },
+          event: {
+            ondblclick: (data) => {
+              this.numTime++
+              if (this.numTime == 2) {
+                self.clickHandler(data)
+                this.numTime = 0
+              }
+            },
+            onAnimateStop(type, data) {
+              self.animateStopHandler(type, data)
+            }
+          }
+        })
+        this.mapControl.initMap()
+        // this.doUpdateFreightSpaceState()
+        if (this.customLattice.length > 0) {
+          this.initWareHouseInfo(this.customLattice)
+        } else {
+          switch (type) {
+            case 'fourwayCar':
+              this.initWareHouseInfo(this.config.latticeForFourwayCar)
+              break
+            case 'piler':
+              this.doUpdateFreightSpaceState()
+              this.initWareHouseInfo(this.config.latticeForPiler)
+
+              break
+          }
+        }
+        this.mapControl.initWarehouse()
+      } else {
+        this.init()
+      }
+    },
+    /**
+     * 初始化仓库点阵
+     */
+    initWareHouseInfo(lattice) {
+      let self = this
+      if (this.config.warehouseType === 1) {
+        // 堆垛机的数据是从右往左，需要补全通道信息
+        let newTattice = []
+        let tempTatticeDic = {}
+        let maxColumnIndex = 0
+        let maxRowIndex = 0
+        let maxLevelIndex = 0
+        let addRowCount = 0
+        lattice.map((tileData) => {
+          if (maxRowIndex < tileData[0]) {
+            maxRowIndex = tileData[0]
+          }
+          if (maxColumnIndex < tileData[1]) {
+            maxColumnIndex = tileData[1]
+          }
+          if (maxLevelIndex < tileData[2]) {
+            maxLevelIndex = tileData[2]
+          }
+          tempTatticeDic[tileData[0] + '-' + tileData[1] + '-' + tileData[2]] = tileData
+        })
+        maxRowIndex += this.config.roadRowPosition.length
+        for (let r = 1; r <= maxRowIndex; r++) {
+          let tColumn = 0
+          if (this.config.roadRowPosition.indexOf(r) > -1) {
+            addRowCount++
+            for (let c = maxColumnIndex; c > 0; c--) {
+              // 添加通道行数据
+              let rColumn
+              // if (c === maxColumnIndex) {
+              //   rColumn = maxColumnIndex + 1
+              //   newTattice.push([r, rColumn, 1, "R" + r + '-' + rColumn, 0, 0, this.config.standardXLength, this.config.standardYLength, this.config.standardZLength])
+              // }
+              rColumn = maxColumnIndex - c + 1
+              newTattice.push([r, rColumn, 1, 'R' + r + '-' + rColumn, 0, 0, this.config.standardXLength, this.config.standardYLength, this.config.standardZLength])
+            }
+          } else {
+            for (let c = maxColumnIndex; c > 0; c--) {
+              // 添加仓库行数据
+              tColumn++
+              for (let l = 1; l <= maxLevelIndex; l++) {
+                let tempId = r - addRowCount + '-' + tColumn + '-' + l
+                if (tempTatticeDic[tempId]) {
+                  let tileData = JSON.parse(JSON.stringify(tempTatticeDic[tempId]))
+                  tileData[0] = r
+                  tileData[1] = c
+                  newTattice.push(tileData)
+                }
+              }
+            }
+          }
+        }
+        lattice = newTattice
+      }
+      lattice.map((tileData) => {
+        // [行号，列号，层数，第三方货位id，点位类别，点位状态，宽度(cm)，长度(cm)]
+        let point = self.getPointPosition(tileData)
+        tileData.push(point.x)
+        tileData.push(point.y)
+        let tileType = this.config.tileTypeDictionary[tileData[4]]
+        this.lattice[tileData[3]] = {
+          tileType: tileType,
+          rowId: tileData[0],
+          columnId: tileData[1],
+          levelId: tileData[2],
+          locationId: tileData[0] + '-' + tileData[1] + '-' + tileData[2],
+          x: point.x,
+          y: point.y,
+          z: point.z
+        }
+        switch (tileType.type) {
+          case 'road': // 通道
+            if (this.config.vehicleType === 1) {
+              this.initPilerRoad(tileData)
+            } else {
+              this.initFourwayCarRoad(tileData)
+            }
+            break
+          case 'interactionPoint': // 交互点
+          case 'storageRack': // 货架
+            this.initStockRackFromTile(tileData)
+            break
+          case 'chargingPoint': // 充电点
+            this.initOtherPoint(tileData)
+            break
+        }
+      })
+      if (this.config.vehicleType === 1) {
+        this.initPiler()
+        this.initBelt()
+        this.initCarInfo()
+      }
+    },
+    initStockRackFromTile(tileData) {
+      let storageRackId = tileData[0] + '-' + tileData[1]
+      if (!this.warehouseInfo.storageRack.hasOwnProperty(storageRackId)) {
+        this.warehouseInfo.storageRack[storageRackId] = {
+          id: storageRackId, // 货架编号
+          x: tileData[tileData.length - 2], // 东西向坐标，单位米
+          y: tileData[tileData.length - 1], // 南北向坐标，单位米
+          xLength: tileData[6], // 东西向长度，单位米
+          yLength: tileData[7], // 南北向长度，单位米
+          capacity: 0, // 容量/层数
+          outOfServerCount: 0,
+          state: 0,
+          freightSpace: {} // 货位
+        }
+      }
+      this.warehouseInfo.storageRack[storageRackId].freightSpace[tileData[3]] = {
+        id: tileData[3], // 货位编号
+        spaceId: storageRackId + '-' + tileData[2],
+        parentId: storageRackId, // 货架编号
+        state: tileData[5], // 点位状态
+        freight: {
+          // 货物信息
+          id: '',
+          name: ''
+        }
+      }
+      let stateDictionary = this.config.freightSpaceStateDictionary[tileData[5]]
+      if (stateDictionary && stateDictionary.describe.indexOf('停用') > -1) {
+        this.warehouseInfo.storageRack[storageRackId].outOfServerCount++
+      }
+      this.warehouseInfo.storageRack[storageRackId].capacity++
+      this.warehouseInfo.storageRack[storageRackId].state = this.warehouseInfo.storageRack[storageRackId].outOfServerCount === this.warehouseInfo.storageRack[storageRackId].capacity ? 10 : 0
+    },
+    initFourwayCarRoad(tileData) {
+      let fourwayCarRoadId = tileData[0] + '-' + tileData[1]
+      if (!this.warehouseInfo.fourwayCarRoad.hasOwnProperty(fourwayCarRoadId)) {
+        this.warehouseInfo.fourwayCarRoad[fourwayCarRoadId] = {
+          id: fourwayCarRoadId, // 货架编号
+          x: tileData[tileData.length - 2], // 东西向坐标，单位米
+          y: tileData[tileData.length - 1], // 南北向坐标，单位米
+          xLength: tileData[6], // 东西向长度，单位米
+          yLength: tileData[7], // 南北向长度，单位米
+          level: {} // 道路单元
+        }
+      }
+      this.warehouseInfo.fourwayCarRoad[fourwayCarRoadId].level[tileData[3]] = {
+        id: tileData[3], // 编号
+        spaceId: fourwayCarRoadId + '-' + tileData[2],
+        parentId: fourwayCarRoadId, // 货架编号
+        state: tileData[5] // 点位状态
+      }
+    },
+    initOtherPoint(tileData) {
+      let otherPointId = tileData[0] + '-' + tileData[1]
+      if (!this.warehouseInfo.otherPoint.hasOwnProperty(otherPointId)) {
+        this.warehouseInfo.otherPoint[otherPointId] = {
+          id: otherPointId, // 货架编号
+          x: tileData[tileData.length - 2], // 东西向坐标，单位米
+          y: tileData[tileData.length - 1], // 南北向坐标，单位米
+          xLength: tileData[6], // 东西向长度，单位米
+          yLength: tileData[7], // 南北向长度，单位米
+          level: {}
+        }
+      }
+      this.warehouseInfo.otherPoint[otherPointId].level[tileData[3]] = {
+        id: tileData[3], // 编号
+        spaceId: otherPointId + '-' + tileData[2],
+        parentId: otherPointId, // 货架编号
+        state: tileData[5] // 点位状态
+      }
+    },
+    initPilerRoad(tileData) {
+      let pilerRoadId = tileData[0]
+      if (!this.warehouseInfo.pilerInfo.road.hasOwnProperty(pilerRoadId)) {
+        this.warehouseInfo.pilerInfo.road[pilerRoadId] = {
+          id: pilerRoadId, // 通路id
+          roadPath: []
+        }
+      }
+      this.warehouseInfo.pilerInfo.road[pilerRoadId].roadPath.push(tileData[3])
+    },
+    initPiler() {
+      let self = this
+      Object.keys(this.warehouseInfo.pilerInfo.road).map((roadKey) => {
+        let road = this.warehouseInfo.pilerInfo.road[roadKey]
+        let pilerId = 'piler' + '-' + road.id
+        let pathPoints = []
+        let cell = self.getPointPositionById(road.roadPath[road.roadPath.length - 1])
+        let nextPointLocationId = cell.rowId + '-' + (cell.columnId + 1)
+        cell = self.getPointPositionById(nextPointLocationId, true)
+        road.startPoint = cell
+        pathPoints.push([cell.x, 0, cell.y])
+        cell = self.getPointPositionById(road.roadPath[0])
+        road.endPoint = cell
+        pathPoints.push([cell.x, 0, cell.y])
+        self.warehouseInfo.piler[pilerId] = {
+          id: pilerId,
+          label: pilerId,
+          rowId: road.id,
+          s3: [self.config.pilerInfo.x, self.config.pilerInfo.y, self.config.pilerInfo.z], // 堆垛机设备的长高宽
+          state: 0, // 当前行进状态（0停止1进入2退出3异常）
+          width: 3, // 路线宽度
+          step: 1.5,
+          pathPoints: pathPoints
+        }
+      })
+    },
+    initBelt() {
+      let self = this
+      let pathPoints = []
+      this.config.beltPath.map((pointId) => {
+        let cell = self.getPointPositionById(pointId, true)
+        pathPoints.push([cell.x, 0, cell.y])
+      })
+      this.warehouseInfo.beltModel.pathPoints = pathPoints
+    },
+    initCarInfo() {
+      let self = this
+      let pathPoints = []
+      this.config.carHeadPath.map((pointId) => {
+        let cell = self.getPointPositionById(pointId, true)
+        pathPoints.push([cell.x, 0, cell.y])
+      })
+      this.warehouseInfo.carModel.carHeadPathPoints = JSON.parse(JSON.stringify(pathPoints))
+      this.warehouseInfo.carModel.cars['car-1'].pathPoints = JSON.parse(JSON.stringify(pathPoints))
+    },
+    /**
+     * 地图点击事件处理
+     * @param eventData
+     */
+    async clickHandler(eventData) {
+      let self = this
+      if (eventData.all[0].nodeId !== '' || eventData.all[0].nodeId !== undefined || eventData.all[0].nodeId !== null) {
+        this.rightStatus = true
+      }
+
+      this.locationCodeList = []
+      self.tableData = []
+      // await containerList({ locationId: eventData.all[0].nodeId }).then((res) => {
+      //   this.locationCodeList = res.data
+      // })
+
+      // let resultDatas = eventData.all
+      self.tableData.length = 0
+
+      this.latticeForPiler1.forEach((item) => {
+        if (item.locationCode === eventData.all[0].nodeId) {
+          self.tableData.push(item)
+        }
+      })
+      // console.log(self.tableData)
+
+      //  this.locationCodeList.map((data) => {
+      //   let rowData = {
+      //     locationCode: eventData.all[0].nodeId,
+      //     moldNo: data.moldNo,
+      //     model: data.model,
+      //     moldName: data.moldName,
+      //     inTime: data.inTime
+      //   }
+
+      // let storageRack, freightSpace
+      // switch (data.customDataType) {
+      //   case 'storageRack':
+      //     storageRack = self.warehouseInfo.storageRack[data.nodeId]
+      //     let freightSpaces = []
+      //     Object.keys(storageRack.freightSpace).map((freightSpaceId) => {
+      //       let freightSpace = storageRack.freightSpace[freightSpaceId]
+      //       freightSpaces.push(freightSpace.id)
+      //     })
+      //     rowData.detail = '当前货架包含货位：' + freightSpaces.join('、')
+      //     break
+      //   case 'freightSpace':
+      //     storageRack = self.warehouseInfo.storageRack[data.nodeInfo.parentId]
+      //     // freightSpace = storageRack.freightSpace[data.nodeId]
+      //     // freightSpace.freight.name + '（' + freightSpace.freight.id +
+      //     let freightSpacess = []
+
+      //     this.locationCodeList.forEach((item) => {
+      //       // console.log(item)
+      //       freightSpace = item.moldNo + '|' + item.model + (item.moldName ? '|' + item.moldName : item.moldName)
+      //       // console.log(freightSpace)
+      //       freightSpacess.push(freightSpace)
+      //     })
+
+      //     // console.log(this.locationCodeList, freightSpacess)
+      //     rowData.detail = '所属货架：' + storageRack.id + '; 存放货物：(' + freightSpacess.join('、') + ')'
+      //     break
+      //   case 'piler':
+      //     break
+      //   case 'cargo':
+      //     let cargo = this.cargo[data.nodeId]
+      //     rowData.detail = '货物：' + cargo.name + '（' + cargo.id + '）'
+      //     break
+      // }
+
+      // })
+    },
+    /**
+     * 地图点击事件处理
+     * @param type
+     * @param data
+     */
+    animateStopHandler(type, data) {
+      let id = data.id
+      if (this.events.hasOwnProperty(id)) {
+        this.events[id](data)
+      }
+    },
+    layerHandler(layerId) {
+      if (layerId.indexOf('level') > -1) {
+        Object.keys(this.layer).map((tLayerId) => {
+          if (tLayerId.indexOf('level') > -1 && layerId !== tLayerId) {
+            this.layer[tLayerId] = false
+            this.mapControl.layerControl(tLayerId, this.layer[tLayerId])
+          }
+        })
+      }
+      this.layer[layerId] = !this.layer[layerId]
+      this.mapControl.layerControl(layerId, this.layer[layerId])
+    },
+    getPointPosition(tileData) {
+      // 计算点位x坐标
+      let x = this.config.standardXLength * tileData[1] + this.config.leftOffset
+      // 计算点位y坐标
+      let y = this.config.standardYLength * tileData[0] + this.config.topOffset
+      // 计算点位z坐标
+      let z = this.config.standardZLength * tileData[2]
+      return {
+        x: x,
+        y: y,
+        z: z
+      }
+    },
+    getPointPositionById(pointId, onlyByIndex = false) {
+      let self = this
+      let lattice = this.lattice
+      if (this.lattice.hasOwnProperty(pointId) && !onlyByIndex) {
+        let cell = lattice[pointId]
+        return cell
+      } else if (pointId.indexOf('-') > -1) {
+        let numArr = pointId.split('-')
+        let isAllNum = true
+        numArr.map((num) => {
+          if (isNaN(parseInt(num))) {
+            isAllNum = false
+          }
+        })
+        if (isAllNum && numArr.length > 1) {
+          let tileData = [numArr[0], numArr[1], numArr.length > 2 ? numArr[2] : 0]
+          let point = self.getPointPosition(tileData)
+          return {
+            rowId: tileData[0],
+            columnId: tileData[1],
+            levelId: tileData[2],
+            locationId: tileData[0] + '-' + tileData[1] + '-' + tileData[2],
+            x: point.x,
+            y: point.y,
+            z: point.z
+          }
+        }
+      }
+    },
+    addFourwayCar() {
+      let self = this
+      let pathPoints = []
+      let pathPointIdArr = this.fourwayCarModel.pointPathIds.replace(/ \t/g, '').replace(/，/g, ',').split(',')
+      pathPointIdArr.map((pathPointId) => {
+        let cell = self.getPointPositionById(pathPointId)
+        pathPoints.push([cell.x, 10, cell.y])
+      })
+      this.mapControl.drawCar({
+        carId: this.fourwayCarModel.carId,
+        step: 1.5,
+        s3: [80, 10, 80],
+        pathPoints: pathPoints,
+        state: this.fourwayCarModel.state
+      })
+    },
+    fourwayCarPlay() {
+      let self = this
+      let pathPoints = []
+      let pathPointIdArr = this.fourwayCarModel.pointPathIds.replace(/ \t/g, '').replace(/，/g, ',').split(',')
+      pathPointIdArr.map((pathPointId) => {
+        let cell = self.getPointPositionById(pathPointId)
+        pathPoints.push([cell.x, 10, cell.y])
+      })
+      this.mapControl.updateCar({
+        carId: this.fourwayCarModel.carId,
+        rate: 100,
+        carryCargo: this.fourwayCarModel.carryCargo, // false空载true载货
+        cargoId: this.fourwayCarModel.freightId,
+        pathPoints: pathPoints,
+        state: this.fourwayCarModel.state
+      })
+    },
+    /**
+     * 堆垛机状态设置
+     */
+    pilerPlay() {
+      this.mapControl.updatePiler(this.pilerModel)
+    },
+    /**
+     * 小车状态设置
+     */
+    carPlay() {
+      let road = this.warehouseInfo.pilerInfo.road[this.carModel.pilerId.replace('piler-', '')]
+      // console.log(road, this.warehouseInfo, this.carModel)
+      this.carModel.pathPoints = [...this.warehouseInfo.carModel.carHeadPathPoints, [road.startPoint.x, 0, road.startPoint.y]]
+      this.mapControl.updateCar(this.carModel)
+    },
+    /**
+     * 运送带托盘状态设置
+     */
+    beltPlay() {
+      this.mapControl.updateTray(this.beltModel)
+    },
+    /**
+     *
+     * @param type 0调整整体模型后全部更新 1根据货位id来更新货位状态
+     */
+    storageManage(type) {
+      let warehouseData
+      switch (type) {
+        case 0:
+          warehouseData = this.warehouseInfo
+          Object.keys(warehouseData.storageRack).map((storageRackId) => {
+            Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
+              let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
+              freightSpace.state = freightSpace.state ? 0 : 2
+            })
+          })
+          this.mapControl.updateStorage(this.warehouseInfo)
+          break
+        case 1:
+          warehouseData = this.warehouseInfo
+          Object.keys(warehouseData.storageRack).map((storageRackId) => {
+            Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
+              if (freightSpaceId === this.storageModel.id) {
+                let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
+                freightSpace.state = this.storageModel.state
+                freightSpace.freight = {
+                  id: freightSpace.state ? this.storageModel.freightId : '',
+                  name: freightSpace.state ? this.storageModel.freightName : ''
+                }
+              }
+            })
+          })
+          this.mapControl.updateStorageByKey(this.storageModel.id, this.storageModel.state)
+          break
+      }
+    },
+    /**
+     *
+     * 更新货位状态
+     */
+    doUpdateFreightSpaceState() {
+      let freightSpaceState = {}
+      // this.rightStatus = true
+      // 根据字典项来随机库位状态，可以改为通过查询后台接口数据来加载实时状态
+      let dicKeys = Object.keys(this.config.freightSpaceStateDictionary)
+      let dacKeysList = []
+
+      // console.log(this.lattice)
+      Object.keys(this.lattice).map((tileKey) => {
+        if (['interactionPoint', 'storageRack'].indexOf(this.lattice[tileKey].tileType.type) > -1) {
+          // let stateIndex = Math.round(Math.random() * (dicKeys.length - 1))
+          this.latticeForPiler1.forEach((item) => {
+            // console.log(item)
+
+            if (item.locationName === tileKey) {
+              dacKeysList.push(item.locationStatus)
+              freightSpaceState[tileKey] = item.locationStatus
+            }
+          })
+
+          // freightSpaceState[tileKey] = dicKeys[stateIndex]
+        }
+      })
+      // console.log(dicKeys)
+      // 批量更新库位状态
+      let warehouseData = this.warehouseInfo
+      Object.keys(warehouseData.storageRack).map((storageRackId) => {
+        Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
+          let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
+          freightSpace.state = freightSpaceState[freightSpaceId]
+        })
+      })
+      this.mapControl.updateStorage(this.warehouseInfo)
+    },
+    /**
+     * 串联演示货物从传送带添加到摆放到货架的功能
+     */
+    animManage() {
+      let self = this
+      // 清空所有库存
+      if (!this.hasClear) {
+        this.hasClear = 1
+        let warehouseData = this.warehouseInfo
+        Object.keys(warehouseData.storageRack).map((storageRackId) => {
+          Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
+            let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
+            freightSpace.state = 0
+            freightSpace.freight = {
+              id: '',
+              name: ''
+            }
+          })
+        })
+        this.mapControl.updateStorage(this.warehouseInfo)
+      }
+      // 货物通过传送带
+      let trayId = 'tray-1' // 调用的托盘id，对应this.warehouseInfo.beltModel.trays中的key
+      this.beltAnim(trayId)
+      this.events[trayId] = (data) => {
+        delete self.events[trayId]
+        // 去掉托盘运载的货物，并让托盘回到原点
+        self.mapControl.updateTray({
+          trayId: trayId,
+          rate: 100,
+          carryCargo: false, // false空载true载货
+          cargoId: ''
+        })
+        setTimeout(() => {
+          // 让托盘回到原点
+          self.mapControl.updateTray({
+            trayId: trayId,
+            rate: 0,
+            carryCargo: false, // false空载true载货
+            cargoId: '',
+            noAnim: true // 不展示动画
+          })
+        }, 1000)
+        let carId = 'car-1' // 调用的托盘id，对应this.warehouseInfo.carModel.cars中的key
+        let pilerId = this.animModel.pilerId
+        // 计算小车路径
+        let road = this.warehouseInfo.pilerInfo.road[pilerId.replace('piler-', '')]
+        let pathPoints = [...this.warehouseInfo.carModel.carHeadPathPoints, [road.startPoint.x, 0, road.startPoint.y]]
+        self.carAnim(carId, pathPoints)
+        self.events[carId] = (data) => {
+          delete self.events[carId]
+          // 去掉小车运载的货物
+          self.mapControl.updateCar({
+            carId: carId,
+            rate: 100,
+            carryCargo: false, // false空载true载货
+            cargoId: '',
+            noAnim: true // 不展示动画
+          })
+          setTimeout(() => {
+            // 让小车回到原点
+            self.carAnim(carId, pathPoints, true)
+          }, 1000)
+          // 计算堆垛机目标位置百分比
+          let rate = self.computePilerTargetPositionRate(pilerId, this.animModel.freightSpaceId)
+          self.pilerAnim(pilerId, rate)
+          self.events[pilerId] = (data) => {
+            delete self.events[pilerId]
+            // 去掉堆垛机运载的货物，并回到原点
+            self.mapControl.updatePiler({
+              pilerId: pilerId,
+              rate: 0,
+              carryCargo: false, // false空载true载货
+              cargoId: ''
+            })
+            // 更新目标货位的使用状态
+            let tFreightSpaceId = this.animModel.freightSpaceId
+            let warehouseData = self.warehouseInfo
+            Object.keys(warehouseData.storageRack).map((storageRackId) => {
+              Object.keys(warehouseData.storageRack[storageRackId].freightSpace).map((freightSpaceId) => {
+                if (freightSpaceId === tFreightSpaceId) {
+                  let freightSpace = warehouseData.storageRack[storageRackId].freightSpace[freightSpaceId]
+                  freightSpace.state = 2
+                  freightSpace.freight = {
+                    id: this.animModel.freightId,
+                    name: this.animModel.freightName
+                  }
+                  self.mapControl.updateStorageByKey(tFreightSpaceId, freightSpace.state)
+                }
+              })
+            })
+          }
+        }
+      }
+    },
+    beltAnim(trayId) {
+      this.mapControl.updateTray({
+        trayId: trayId,
+        rate: 100,
+        carryCargo: true, // false空载true载货
+        cargoId: this.animModel.freightId
+      })
+    },
+    carAnim(carId, pathPoints, isBack = false) {
+      this.warehouseInfo.carModel.cars[carId].pathPoints = pathPoints
+      this.mapControl.updateCar({
+        carId: carId,
+        rate: isBack ? 0 : 100,
+        carryCargo: !isBack, // false空载true载货
+        cargoId: this.animModel.freightId,
+        pathPoints: isBack ? null : pathPoints
+      })
+    },
+    pilerAnim(pilerId, rate) {
+      this.mapControl.updatePiler({
+        pilerId: pilerId,
+        rate: rate,
+        carryCargo: true, // false空载true载货
+        cargoId: this.animModel.freightId
+      })
+    },
+    computePilerTargetPositionRate(pilerId, freightSpaceId) {
+      let piler = this.warehouseInfo.piler[pilerId]
+      let road = this.warehouseInfo.pilerInfo.road[pilerId.replace('piler-', '')]
+      let pathWidth = road.startPoint.x - road.endPoint.x
+      let cell = this.getPointPositionById(freightSpaceId)
+      let nextPointLocationId = piler.rowId + '-' + cell.columnId
+      cell = this.getPointPositionById(nextPointLocationId, true)
+      let rate = (1 - (cell.x - road.endPoint.x) / pathWidth) * 100
+      return rate
+    },
+    doSearch() {
+      this.mapControl.moveTo(this.searchModel.freightId)
+    },
+    doFilter() {
+      this.mapControl.filterFreightSpace(this.searchModel.rowIndex, this.searchModel.columIndex, this.searchModel.levelIndex)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.map-container {
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+}
+
+.control {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 160px;
+  height: 400px;
+  background-color: aliceblue;
+
+  button {
+    margin-top: 5px;
+  }
+}
+
+.dataContainer {
+  position: absolute;
+  right: 10px;
+  top: 60px;
+  width: 520px;
+  height: 560px;
+  background-color: aliceblue;
+  padding-top: 5px;
+}
+</style>