标准处置流程

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

@@ -1,81 +1,41 @@
 <template>
   <div class="right-legend">
-    <div class="legend-item">
-      <div class="icon-box icon-box-fill">
-        <img src="../../../../../assets/img/pinpoint.png" />
-      </div>
-      <div class="text-box">B级风险</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item icon-box-fill">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/pinpoint(1).png" />
-      </div>
-      <div class="text-box">B级风险</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item icon-box-fill">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/pinpoint(2).png" />
-      </div>
-      <div class="text-box">C级风险</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item icon-box-fill">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/pinpoint(3).png" />
+    <template v-for="(item, index) in riskLevelList" :key="index">
+      <div class="legend-item">
+        <div class="icon-box icon-box-fill">
+          <img :src="item.img" />
+        </div>
+        <div class="text-box">A级风险</div>
+        <div
+          class="switch-box"
+          :class="{ switchOpen: item.value }"
+          @click="handleRiskLevel(item)"
+        ></div>
       </div>
-      <div class="text-box">D级风险</div>
-      <div class="switch-box"></div>
-    </div>
+    </template>
 
     <div class="line-box"></div>
-
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240.png" />
-      </div>
-      <div class="text-box">应急人员</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240(1).png" />
+    <template v-for="(item, index) in deviceList" :key="index">
+      <div class="legend-item" @click="handleDeviceLevel(item)">
+        <div class="icon-box">
+          <img :src="item.img" />
+        </div>
+        <div class="text-box">{{ item.name }}</div>
+        <div class="switch-box" :class="{ switchOpen: item.value }"></div>
       </div>
-      <div class="text-box">应急车辆</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240(2).png" />
-      </div>
-      <div class="text-box">物资装备</div>
-      <div class="switch-box"></div>
-    </div>
+    </template>
 
     <div class="line-box"></div>
 
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240(3).png" />
-      </div>
-      <div class="text-box">学校</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240(4).png" />
+    <template v-for="(item, index) in institution" :key="index">
+      <div class="legend-item" @click="handleDeviceLevel(item)">
+        <div class="icon-box">
+          <img :src="item.img" />
+        </div>
+        <div class="text-box">{{ item.name }}</div>
+        <div class="switch-box" :class="{ switchOpen: item.value }"></div>
       </div>
-      <div class="text-box">养老机构</div>
-      <div class="switch-box"></div>
-    </div>
-    <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../../assets/img/Component 240(5).png" />
-      </div>
-      <div class="text-box">托幼机构</div>
-      <div class="switch-box"></div>
-    </div>
+    </template>
 
     <div class="line-box"></div>
 
@@ -111,7 +71,98 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+//风险等级
+const riskLevelList = ref([
+  {
+    name: "A级风险",
+    img: new URL("../../../../../assets/img/pinpoint.png", import.meta.url)
+      .href,
+    value: true,
+  },
+  {
+    name: "B级风险",
+    img: new URL("../../../../../assets/img/pinpoint(1).png", import.meta.url)
+      .href,
+    value: true,
+  },
+  {
+    name: "C级风险",
+    img: new URL("../../../../../assets/img/pinpoint(2).png", import.meta.url)
+      .href,
+    value: true,
+  },
+  {
+    name: "D级风险",
+    img: new URL("../../../../../assets/img/pinpoint(3).png", import.meta.url)
+      .href,
+    value: true,
+  },
+]);
+
+//应急
+const deviceList = ref([
+  {
+    name: "应急人员",
+    img: new URL("../../../../../assets/img/Component 240.png", import.meta.url)
+      .href,
+    value: true,
+  },
+  {
+    name: "应急车辆",
+    img: new URL(
+      "../../../../../assets/img/Component 240(1).png",
+      import.meta.url
+    ).href,
+    value: true,
+  },
+  {
+    name: "物资装备",
+    img: new URL(
+      "../../../../../assets/img/Component 240(2).png",
+      import.meta.url
+    ).href,
+    value: true,
+  },
+]);
+
+//机构
+const institution = ref([
+  {
+    name: "学校",
+    img: new URL(
+      "../../../../../assets/img/Component 240(3).png",
+      import.meta.url
+    ).href,
+    value: true,
+  },
+  {
+    name: "养老机构",
+    img: new URL(
+      "../../../../../assets/img/Component 240(4).png",
+      import.meta.url
+    ).href,
+    value: true,
+  },
+  {
+    name: "托幼机构",
+    img: new URL(
+      "../../../../../assets/img/Component 240(5).png",
+      import.meta.url
+    ).href,
+    value: true,
+  },
+]);
+
+const handleRiskLevel = (item) => {
+  item.value = !item.value;
+};
+
+const handleDeviceLevel = (item) => {
+  item.value = !item.value;
+};
+</script>
 
 <style lang="scss">
 .right-legend {
@@ -154,10 +205,10 @@
     .switch-box {
       width: 47px;
       height: 26px;
-      background-image: url("../../../../../assets/img/Component 14.png");
+      background-image: url("../../../../../assets/img/Component 15(2).png");
       background-size: 100% 100%;
     }
-    .switch-box-no {
+    .switchOpen {
       background-image: url("../../../../../assets/img/Component 14.png");
     }
     .legend-select {