车辆轨迹按钮添加

src/views/right/components/handleProcess/comp/CarCd.vue

@@ -24,70 +24,140 @@
 </template>
 
 <script setup>
+import { ref, onUnmounted } from 'vue'
 import CommonPanel from "../../common/CommonPanel.vue";
 import CarImage from "../../../../../assets/img/car-icon.png";
-import {handleCdclPoint, handleCdryPoint} from "@/utils/map/baseMethod.js";
+import {handleCdclPoint, handleCdryPoint,handleYjclPoints} from "@/utils/map/baseMethod.js";
 import {onBeforeUnmount} from "vue";
-import {drawHistory} from "@/utils/map/AddLayer.js";
+import { drawHistory } from "@/utils/map/AddLayer.js";
 
-const leftServiceList = [
+const treeTabSecondRef = ref()
+//是否单选
+const isSingleCheck = ref(true)
+const leftServiceList = ref([
   {
-    name: "上海市疾病预防控制中心",
-    id: "上海市疾病预防控制中心",
+    name: '上海市疾病预防控制中心',
+    id: '上海市疾病预防控制中心',
     children: [
       {
-        name: "沪A10SC1（会商车）",
-        id: "沪A10SC1（会商车）",
+        name: '沪xxxx0（实验车）',
+        id: '沪xxxx0（实验车）',
+        isPlaying: false
+        
+        
       },
       {
-        name: "沪A10SC1（实验车）",
-        id: "沪A10SC1（实验车）",
-      },
-    ],
+        name: '沪xxxx1（实验车）',
+        id: '沪xxxx1（实验车）',
+        isPlaying: false
+      }
+    ]
   },
   {
-    name: "长宁区疾控预防控制中心",
-    id: "长宁区疾控预防控制中心",
+    name: '长宁区疾控预防控制中心',
+    id: '长宁区疾控预防控制中心',
     children: [
       {
-        name: "沪A10SC2（实验车）",
-        id: "沪A10SC2（实验车）",
+        name: '沪xxxx2（实验车）',
+        id: '沪xxxx2（实验车）',
+        isPlaying: false
       },
       {
-        name: "沪A10SC2（实验车）",
-        id: "沪A10SC2（实验车）",
-      },
-    ],
-  },
-];
+        name: '沪xxxx3（实验车）',
+        id: '沪xxxx3（实验车）',
+        isPlaying: false
+      }
+    ]
+  }
+])
 
 const serviceKey = "name";
-const renderContent = (h, { node, data, store }) => {
-  if (data.children == null || data.children.length === 0) {
-    return h("div", { class: "custom-tree-node" }, [
+const renderContent = (h, { node, data }) => {
+  if (!data.children || data.children.length === 0) {
+    return h('div', { class: 'custom-tree-node custom-tree-node-div' }, [
       h(
-        "span",
-        { class: "node-label ch-label", title: data[serviceKey] },
+        'span',
+        {
+          class: 'node-label ch-label',
+          title: data[serviceKey]
+        },
         data[serviceKey]
       ),
-    ]);
+      h('div', { class: 'imgbox' }, [
+        !data.isPlaying
+          ? h('div', {
+              class: 'img4',
+              onClick: event => handlePlayClick(event, data)
+            })
+          : h('div', {
+              class: 'img5',
+              onClick: event => handlePauseClick(event, data)
+            })
+      ])
+    ])
   }
-  let className = "custom-tree-node";
-  return h("div", { class: className }, [
-    h("span", { class: "node-label" }, [data[serviceKey]]),
-  ]);
-};
-
-const handleNodeClick = () => {};
-
-const handleCheck = (item) => {
-  console.log(item);
-  if(item.children){
-    return
+
+  return h('div', { class: 'custom-tree-node' }, [
+    h('span', { class: 'node-label' }, [data[serviceKey]])
+  ])
+}
+
+// const handleNodeClick = () => {};
+
+// const handleCheck = (item) => {
+//   console.log(item);
+//   if(item.children){
+//     return
+//   }
+
+//   handleCdclPoint(true)
+// };
+
+//树表单选中状态变化,在此做定位关闭操作
+const handleCheckChange = async (node, isCheck) => {
+  if (isSingleCheck.value) {
+    console.log(node.id)
+    if (isCheck === true) {
+      checkId.value = node.id
+      treeTabSecondRef.value.setCheckedKeys([node.id])
+      handleCdclPoint(true)
+      
+    } else {
+      if (checkId.value == node.id) {
+        treeTabSecondRef.value.setCheckedKeys([])
+      }
+    }
   }
+}
 
-  handleCdclPoint(true)
-};
+
+function handlePlayClick(event, data) {
+  event.stopPropagation()
+  resetAllPlaying(leftServiceList.value) // 把其他都设为 false
+  data.isPlaying = true
+  handleGClick(event, data)
+}
+
+function handlePauseClick(event, data) {
+  event.stopPropagation()
+  data.isPlaying = false
+  handleYjclPoints(false)
+}
+
+function resetAllPlaying(list) {
+  list.forEach(item => {
+    if (item.children) {
+      resetAllPlaying(item.children)
+    } else {
+      item.isPlaying = false
+    }
+  })
+}
+
+// 播放车辆轨迹
+function handleGClick (event, data) {
+   handleYjclPoints(true)
+}
 
 onBeforeUnmount(() => {
   handleCdclPoint(false)
@@ -143,3 +213,25 @@ onBeforeUnmount(() => {
   }
 }
 </style>
+
+<style lang="scss">
+.imgbox {
+  display: flex;
+  .img4 {
+    width: 23px;
+    height: 23px;
+    background-image: url('../../../../../assets/img/播放@2x.png');
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+  .img5 {
+    width: 23px;
+    height: 23px;
+    background-image: url('../../../../../assets/img/暂停@2x.png');
+    background-size: 100% 100%;
+    margin-left: 5px;
+    cursor: pointer;
+  }
+
+}
+</style>