Merge branch 'dev' of http://192.168.0.115:3000/bill/4pc into dev

src/assets/state_gps_d.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="state_gps_d">
+<path id="Union" d="M8 4.50244C9.10457 4.50244 10 5.39787 10 6.50244C10 7.58739 9.1361 8.47057 8.05866 8.5016L11.3091 15.0024H4.69104L7.94146 8.5016C6.86396 8.47063 6 7.58743 6 6.50244C6 5.39787 6.89543 4.50244 8 4.50244ZM8 5.50244C7.44772 5.50244 7 5.95016 7 6.50244C7 7.05473 7.44772 7.50244 8 7.50244C8.55228 7.50244 9 7.05473 9 6.50244C9 5.95016 8.55228 5.50244 8 5.50244ZM7.99978 10.6192L6.30878 14.0022H9.69078L7.99978 10.6192Z" fill="#B3B3B3"/>
+</g>
+</svg>

src/view/map/coord.vue

@@ -60,7 +60,7 @@
                   <span :class="{ disable: data.disable }" class="title">
                     <el-icon>
                       <StateGpsIcon v-if="!data.disable" />
-                      <DeleteLocation v-else />
+                      <StateGpsDIcon v-else />
                     </el-icon>
                     {{ node.label }}
                   </span>
@@ -173,6 +173,7 @@ import { addRelicsScenesFetch, delRelicsScenesFetch } from "@/request";
 import { exportFile, exportImage } from "./pc4Helper";
 import { SceneStatus } from "@/store/scene";
 import StateGpsIcon from "@/assets/state_gps.svg";
+import StateGpsDIcon from "@/assets/state_gps_d.svg";
 import PanoramaIcon from "@/assets/panorama.svg";
 import FrameIcon from "@/assets/frame.svg";
 import { alert, confirm } from "@/helper/message";
@@ -192,7 +193,11 @@ const updatePointName = async (title: string) => {
   ) as PolygonsPointAttrib;
   await Promise.all([
     boardDataChange(() => {
-      point.title = inputPoint.value.index ? inputPoint.value.index + "-" + title : title;
+      if (point) {
+        point.title = inputPoint.value.index
+          ? inputPoint.value.index + "-" + title
+          : title;
+      }
     }),
     updateScenePointName(inputPoint.value!, title),
   ]);

src/view/map/layout.vue

@@ -10,9 +10,7 @@
           :key="menu.name"
           class="nav_item"
           :class="{
-            active: menu.router.includes(
-              router.currentRoute.value.name.toString()
-            ),
+            active: menu.router.includes(router.currentRoute.value.name.toString()),
           }"
           @click="router.replace({ name: menu.router[Number(queryMode)] })"
         >
@@ -85,12 +83,7 @@ import { router } from "@/router";
 import { Back } from "@element-plus/icons-vue";
 import vectorIcon from "@/assets/vector.svg";
 import locationIcon from "@/assets/location.svg";
-import {
-  COORD_NAME,
-  POYS_NAME,
-  QUERY_COORD_NAME,
-  QUERY_POYS_NAME,
-} from "@/router";
+import { COORD_NAME, POYS_NAME, QUERY_COORD_NAME, QUERY_POYS_NAME } from "@/router";
 import {
   mapManage,
   board,
@@ -118,8 +111,7 @@ const menus = [
     router: [POYS_NAME, QUERY_POYS_NAME],
   },
 ];
-const setMapContainer = (dom: HTMLDivElement) =>
-  setTimeout(() => mapManage.mount(dom));
+const setMapContainer = (dom: HTMLDivElement) => setTimeout(() => mapManage.mount(dom));
 const setBoardContainer = (dom: HTMLDivElement) =>
   setTimeout(() => board.setProps({ dom }));
 
@@ -154,7 +146,13 @@ watch(
 const showPoints = ref(true);
 
 watch(
-  () => [isCoordPage.value, boardData.value, showPoints.value] as const,
+  () =>
+    [
+      isCoordPage.value,
+      boardData.value,
+      showPoints.value,
+      board.polygon.attrib.points.length,
+    ] as const,
   ([isCoordPage, _, showPoints]) => {
     if (!board.polygon) return;
     const ids = scenePoints.value.map(({ id }) => id.toString());

src/view/step-tree-v2/StepTree.vue

@@ -40,7 +40,7 @@
     <div class="seize steps" :style="seizeStyle">
       <div
         class="tree-item-layout"
-        v-for="(step, i) in steps"
+        v-for="(step, i) in fs.steps"
         :ref="(dom: HTMLDivElement) => setDom(dom, i)"
         :style="{
           ...getStepStyle(step),
@@ -48,7 +48,7 @@
         }"
       >
         <div class="tree-item-inner">
-          <slot name="step" :data="step.raw" />
+          <slot name="step" :data="step.raw" :start="ctx && ctx.offset" />
         </div>
       </div>
     </div>
@@ -64,7 +64,6 @@ const props = withDefaults(
   defineProps<{
     margin?: number[];
     data: DataStep[];
-    group: DataStep[];
     lineColor?: string;
   }>(),
   {
@@ -72,7 +71,9 @@ const props = withDefaults(
   }
 );
 
-const steps = computed(() => flatSteps(props.data));
+const fs = computed(() => {
+  return flatSteps(props.data);
+});
 const stepNodes = reactive([]) as HTMLDivElement[];
 
 const getStepStyle = (step: NStep<DataStepTree<DataStep>>) => {
@@ -104,16 +105,16 @@ onUpdated(() => (loaded.value = true));
 onMounted(() => (loaded.value = true));
 
 const ctx = computed(() => {
-  if (stepNodes.length !== steps.value.length || !loaded.value) return;
+  if (stepNodes.length !== fs.value.steps.length || !loaded.value) return;
   const ctx = getStepsTreeCtx(
-    steps.value,
+    fs.value.steps,
     props.margin,
     (step) => {
-      const ndx = steps.value.findIndex(({ raw }) => raw === step);
+      const ndx = fs.value.steps.findIndex(({ raw }) => raw === step);
       const node = stepNodes[ndx];
       return { w: node.offsetWidth, h: node.offsetHeight };
     },
-    props.group
+    fs.value.group
   );
   console.log(ctx);
   return ctx;

src/view/step-tree-v2/example/example.vue

@@ -11,15 +11,11 @@
     </select>
   </div>
   <div class="tree-cont-wrap" ref="treeWrapRef">
-    <StepTree
-      :data="items[activeNdx].steps"
-      :margin="[25, 25]"
-      lineColor="#89beb2"
-      :group="items[activeNdx].steps"
-    >
-      <template #step="{ data }">
+    <StepTree :data="items[activeNdx].steps" :margin="[25, 25]" lineColor="#89beb2">
+      <template #step="{ data, start }">
         <Step
           :item="data"
+          :start="start"
           @click="stepClickHandler(data)"
           @clickHost="stepHostClickHandler"
         />

src/view/step-tree-v2/example/step.vue

@@ -1,13 +1,23 @@
 <template>
+  <span
+    class="title structure-title"
+    v-if="item.structure && start"
+    :style="{ left: -start.x + 'px', top: '-20px' }"
+    >{{ item.displayName }}</span
+  >
   <div
     class="step-layout"
     @click="emit('click')"
     :style="{ '--statusColor': currentColor }"
   >
     <div class="step-header">
-      <span class="type">{{ item.name }}</span>
-      <span class="title">{{ item.displayName }}</span>
-      <span class="icons">
+      <span class="type" v-if="!item.structure || item.structure === 'left'">{{
+        item.name
+      }}</span>
+      <span class="title" v-if="!item.structure || item.structure === 'right'">{{
+        item.displayName
+      }}</span>
+      <span class="icons" v-if="!item.structure || item.structure === 'left'">
         <img src="./image/g.png" v-if="props.item.status === 'success'" />
         <img src="./image/x.png" v-else-if="props.item.status === 'error'" />
 
@@ -30,7 +40,7 @@
 import { DataStep } from "../type";
 import { computed } from "vue";
 
-const props = defineProps<{ item: DataStep }>();
+const props = defineProps<{ item: any; start: any }>();
 const emit = defineEmits<{
   (e: "click"): void;
   (e: "clickHost", host: DataStep["hosts"][number]): void;
@@ -60,6 +70,13 @@ const currentColor = computed(() =>
   overflow: hidden;
   cursor: pointer;
 }
+.structure-title {
+  position: absolute;
+  width: 300px;
+  text-align: left;
+  pointer-events: none;
+  left: 0;
+}
 
 .step-header {
   display: flex;
@@ -71,6 +88,7 @@ const currentColor = computed(() =>
 
   .type {
     font-weight: bold;
+    text-align: center;
   }
 
   .title {

src/view/step-tree-v2/helper-v2.ts

@@ -7,6 +7,7 @@ import {
 type DataStep = {
   serviceTypeParallel?: boolean | "True" | "Flase";
   subStepsParallel?: boolean | "True" | "Flase";
+  structure?: string;
 };
 export type DataStepTree<T extends DataStep = DataStep> = T & {
   steps: DataStepTree<T>[];
@@ -62,8 +63,22 @@ const start: any = { displayName: "开始", type: "startEnd" };
 const end: any = { displayName: "结束", type: "startEnd" };
 export const flatSteps = <T extends DataStep>(steps: DataStepTree<T>[]) => {
   const nsteps: NStep<DataStepTree<T>>[] = [];
+  for (let i = 0; i < steps.length; i++) {
+    // steps[i].steps = [
+    //   {
+    //     ...steps[i],
+    //     subStepsParallel: false,
+    //     structure: "right",
+    //   },
+    // ];
+    steps[i].structure = "left";
+  }
+
   _flatSteps([start, ...steps, end] as any, nsteps);
-  return nsteps;
+  return {
+    steps: nsteps,
+    group: steps,
+  };
 };
 
 // 获取step所有子级
@@ -236,6 +251,7 @@ export const getStepsTreeCtx = <T extends DataStep>(
   const ctx = getStepsTreeCtxRaw(steps, margin, getStepSize) as StepsCtx<
     DataStepTree<T>
   >;
+  console.log(steps, groups);
   groups = [start, ...groups, end];
   const groupSteps = groups.map((group) =>
     steps.find((step) => group === step.raw)