风险防控页面

src/router/routes.ts

@@ -256,6 +256,14 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       title: "信息发布"
     }
+  },
+  {
+    path: "/riskManagement",
+    name: "riskManagement",
+    component: () => import("@/views/worker/riskManagement/index.vue"),
+    meta: {
+      title: "风险防控"
+    }
   }
 ];
 

src/views/event/index.vue

@@ -1,39 +1,68 @@
 <template>
   <div class="container">
+<!--搜索框-->
     <van-search
-        v-model="queryParams.search_keyword"
-        class="common-search"
-        :left-icon="searchImg"
-        :right-icon="closeImg"
-        :clearable="false"
-        @search="on_search_keyword"
-        @click-right-icon.stop="on_search_cancel"
+      v-model="queryParams.search_keyword"
+      class="common-search"
+      :left-icon="searchImg"
+      :right-icon="closeImg"
+      :clearable="false"
+      @search="on_search_keyword"
+      @click-right-icon.stop="on_search_cancel"
     />
-
+<!--三个类型选择-->
     <van-dropdown-menu>
-      <van-dropdown-item :title="!!queryParams.event_type ? '' : '类型'" v-model="queryParams.event_type" :options="opt_event_type" @change="change_event_type"/>
-      <van-dropdown-item :title="!!queryParams.event_level ? '' : '等级'" v-model="queryParams.event_level" :options="opt_event_level" @change="change_event_level"/>
-      <van-dropdown-item :title="!!queryParams.event_status ? '' : '状态'" v-model="queryParams.event_status" :options="opt_event_status" @change="change_event_status"/>
+      <van-dropdown-item
+        v-model="queryParams.event_type"
+        :title="!!queryParams.event_type ? '' : '类型'"
+        :options="opt_event_type"
+        @change="change_event_type"
+      />
+      <van-dropdown-item
+        v-model="queryParams.event_level"
+        :title="!!queryParams.event_level ? '' : '等级'"
+        :options="opt_event_level"
+        @change="change_event_level"
+      />
+      <van-dropdown-item
+        v-model="queryParams.event_status"
+        :title="!!queryParams.event_status ? '' : '状态'"
+        :options="opt_event_status"
+        @change="change_event_status"
+      />
     </van-dropdown-menu>
 
     <van-list
-        v-model:loading="loading"
-        v-model:error="error"
-        error-text="请求失败，点击重新加载"
-        :finished="finished"
-        finished-text="没有更多事件了"
-        @load="getList">
-
-      <div class="event-list-item" v-for="(item,index) in event_list" :key="item.id">
+      v-model:loading="loading"
+      v-model:error="error"
+      error-text="请求失败，点击重新加载"
+      :finished="finished"
+      finished-text="没有更多事件了"
+      @load="getList"
+    >
+      <div
+        v-for="(item, index) in event_list"
+        :key="item.id"
+        class="event-list-item"
+      >
         <div class="item-title">
           <div class="item-title-text">
             {{ item.event_title }}
           </div>
           <div class="item-title-control">
-            <van-button v-if="item.event_status == '0'" type="primary" @click="handleStartEvent(index)">
+            <van-button
+              v-if="item.event_status == '0'"
+              type="primary"
+              @click="handleStartEvent(index)"
+            >
               开始指挥
             </van-button>
-            <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent(item)">
+            <van-button
+              v-if="item.event_status == '1'"
+              type="danger"
+              size="small"
+              @click="handleCloseEvent(item)"
+            >
               结束指挥
             </van-button>
           </div>
@@ -45,7 +74,7 @@
               <div class="item-data-label">事件类型：</div>
             </div>
             <div class="item-data-value">
-              <dict-tag :options="mm_event_type" :value="item.event_type"></dict-tag>
+              <dict-tag :options="mm_event_type" :value="item.event_type" />
             </div>
           </div>
           <div class="item-data">
@@ -54,7 +83,7 @@
               <div class="item-data-label">事件等级：</div>
             </div>
             <div class="item-data-value">
-              <dict-tag :options="mm_event_level" :value="item.event_level"></dict-tag>
+              <dict-tag :options="mm_event_level" :value="item.event_level" />
             </div>
           </div>
           <div class="item-data">
@@ -63,7 +92,7 @@
               <div class="item-data-label">事件状态：</div>
             </div>
             <div class="item-data-value">
-              <dict-tag :options="mm_event_state" :value="item.event_status"></dict-tag>
+              <dict-tag :options="mm_event_state" :value="item.event_status" />
             </div>
           </div>
           <div class="item-data">
@@ -83,56 +112,60 @@
         </div>
       </div>
     </van-list>
-    <StartEventDialog v-model="startEventState.show" :data="startEventState.form"
-                      @update:model-value="onStartEventDialogClose"></StartEventDialog>
-    <CloseEventDialog v-model="closeEventState.show" :data="closeEventState.form"
-                      @update:model-value="onCloseEventDialogClose"></CloseEventDialog>
+    <StartEventDialog
+      v-model="startEventState.show"
+      :data="startEventState.form"
+      @update:model-value="onStartEventDialogClose"
+    />
+    <CloseEventDialog
+      v-model="closeEventState.show"
+      :data="closeEventState.form"
+      @update:model-value="onCloseEventDialogClose"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
-import {useRouter} from 'vue-router'
-import {showConfirmDialog, showSuccessToast} from 'vant';
-import StartEventDialog from './StartEventDialog.vue';
-import CloseEventDialog from './CloseEventDialog.vue';
+import { getCurrentInstance, reactive, ref, toRefs, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { showConfirmDialog, showSuccessToast } from "vant";
+import StartEventDialog from "./StartEventDialog.vue";
+import CloseEventDialog from "./CloseEventDialog.vue";
 
-import {closeEvent, getEventList} from "@/api/event";
+import { closeEvent, getEventList } from "@/api/event";
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
 
 const proxy = getCurrentInstance()?.proxy;
-const {
-  mm_event_type,
-  mm_event_level,
-  mm_event_state
-} = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
+const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(
+  proxy?.useDict("mm_event_type", "mm_event_level", "mm_event_state")
+);
 
-const router = useRouter()
+const router = useRouter();
 
 const opt_event_type = [
-  {text: '全部', value: ''},
-  {text: '自然灾害', value: '0'},
-  {text: '事故灾害', value: '1'},
-  {text: '公共卫生事件', value: '2'},
-  {text: '社会安全事件', value: '3'},
+  { text: "全部", value: "" },
+  { text: "自然灾害", value: "0" },
+  { text: "事故灾害", value: "1" },
+  { text: "公共卫生事件", value: "2" },
+  { text: "社会安全事件", value: "3" }
 ];
 
 const opt_event_level = [
-  {text: '全部', value: ''},
-  {text: '一般', value: '1'},
-  {text: '较大', value: '2'},
-  {text: '重大', value: '3'},
-  {text: '特别重大', value: '4'},
-  {text: '其他', value: '0'},
+  { text: "全部", value: "" },
+  { text: "一般", value: "1" },
+  { text: "较大", value: "2" },
+  { text: "重大", value: "3" },
+  { text: "特别重大", value: "4" },
+  { text: "其他", value: "0" }
 ];
 
 const opt_event_status = [
-  {text: '全部', value: ''},
-  {text: '已登记', value: '0'},
-  {text: '指挥中', value: '1'},
-  {text: '指挥结束', value: '2'},
-  {text: '已关闭', value: '2'},
+  { text: "全部", value: "" },
+  { text: "已登记", value: "0" },
+  { text: "指挥中", value: "1" },
+  { text: "指挥结束", value: "2" },
+  { text: "已关闭", value: "2" }
 ];
 
 const current_item = ref(null);
@@ -144,88 +177,90 @@ const finished = ref(false);
 const queryParams = ref({
   page: 0,
   page_size: 15,
-  event_type: '',
-  event_level: '',
-  event_status: '',
-  search_keyword: ''
+  event_type: "",
+  event_level: "",
+  event_status: "",
+  search_keyword: ""
 });
 
-const on_search_keyword = (val) => {
+const on_search_keyword = val => {
   queryParams.value.search_keyword = val;
   queryParams.value.page = 0;
   getList();
-}
+};
 
 const on_search_cancel = () => {
-  queryParams.value.search_keyword = '';
+  queryParams.value.search_keyword = "";
   queryParams.value.page = 0;
   getList();
-}
+};
 
 const change_event_type = () => {
   queryParams.value.page = 0;
   getList();
-}
+};
 
 const change_event_level = () => {
   queryParams.value.page = 0;
   getList();
-}
+};
 
 const change_event_status = () => {
   queryParams.value.page = 0;
   getList();
-}
+};
 
 const getList = () => {
   queryParams.value.page++;
   getEventList(queryParams.value)
-      .then((res) => {
-        var items = res.data || [];
-        total.value = res.total;
-        if (queryParams.value.page == 1) {
-          event_list.value = [];
-        }
-        items.forEach(val => {
-          event_list.value.push(val)
-        });
-        if (queryParams.value.page_size * queryParams.value.page >= total.value) {
-          finished.value = true;
-        } else {
-          finished.value = false;
-        }
-      }).catch(() => {
-    error.value = true;
-    finished.value = false;
-  }).finally(() => {
-    loading.value = false;
-  });
-}
+    .then(res => {
+      var items = res.data || [];
+      total.value = res.total;
+      if (queryParams.value.page == 1) {
+        event_list.value = [];
+      }
+      items.forEach(val => {
+        event_list.value.push(val);
+      });
+      if (queryParams.value.page_size * queryParams.value.page >= total.value) {
+        finished.value = true;
+      } else {
+        finished.value = false;
+      }
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
 
 const startEventState = reactive({
   show: false,
   form: {
-    event_id: '',
-    event_title: '',
-    event_level: '',
-    event_level_text: ''
+    event_id: "",
+    event_title: "",
+    event_level: "",
+    event_level_text: ""
   }
 });
 
 const closeEventState = reactive({
   show: false,
   form: {
-    event_id: '',
-    event_title: '',
-    event_level: '',
-    event_level_text: '',
-    deaths: '',
-    injuries: '',
-    missing: ''
+    event_id: "",
+    event_title: "",
+    event_level: "",
+    event_level_text: "",
+    deaths: "",
+    injuries: "",
+    missing: ""
   }
 });
 
-const onStartEventDialogClose = (t) => {
+const onStartEventDialogClose = t => {
   startEventState.show = false;
   console.log(startEventState.form);
   if (t) {
@@ -234,7 +269,7 @@ const onStartEventDialogClose = (t) => {
   }
 };
 
-const onCloseEventDialogClose = (t) => {
+const onCloseEventDialogClose = t => {
   closeEventState.show = false;
   console.log(closeEventState.form);
   if (t) {
@@ -245,40 +280,35 @@ const onCloseEventDialogClose = (t) => {
 
 const onConfirm = () => {
   showConfirmDialog({
-    title: '提示',
-    message:
-        '确认进入移动指挥（应急态）',
+    title: "提示",
+    message: "确认进入移动指挥（应急态）"
   })
-      .then(() => {
-
-        localStorage.setItem('mobile_control_status', "1");
-        router.push("/leader/mobile_control")
-      })
-      .catch(() => {
-
-      });
+    .then(() => {
+      localStorage.setItem("mobile_control_status", "1");
+      router.push("/leader/mobile_control");
+    })
+    .catch(() => {});
 };
 
-const handleEventDetail = (index) => {
+const handleEventDetail = index => {
   current_item.value = event_list.value[index];
-  router.push("/event/detail?event_id=" + current_item.value.event_id)
-}
+  router.push("/event/detail?event_id=" + current_item.value.event_id);
+};
 
-const handleStartEvent = (index) => {
+const handleStartEvent = index => {
   current_item.value = event_list.value[index];
-  console.log('handleStartEvent', current_item.value.event_id);
+  console.log("handleStartEvent", current_item.value.event_id);
   startEventState.form.event_id = current_item.value.event_id;
   startEventState.form.event_title = current_item.value.event_title;
   startEventState.form.event_level = current_item.value.event_level;
   startEventState.show = true;
   return false;
-}
+};
 
-const handleCloseEvent = (item) => {
+const handleCloseEvent = item => {
   showConfirmDialog({
-    title: '结束指挥',
-    message:
-        '是否确定结束指挥？',
+    title: "结束指挥",
+    message: "是否确定结束指挥？"
   }).then(() => {
     const params = {
       eventId: item.value.event_id,
@@ -288,13 +318,11 @@ const handleCloseEvent = (item) => {
     };
     // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
     closeEvent(params).then(() => {
-      showSuccessToast('结束指挥成功');
-      router.push('/leader/index')
-    })
-  })
-}
-
-
+      showSuccessToast("结束指挥成功");
+      router.push("/leader/index");
+    });
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -304,7 +332,7 @@ const handleCloseEvent = (item) => {
   padding: 32px 16px 16px;
   font-size: 14px;
   font-weight: 400;
-  line-height: 16px
+  line-height: 16px;
 }
 
 .event-list-item {
@@ -312,7 +340,7 @@ const handleCloseEvent = (item) => {
   margin: 16px 16px 0;
   background: #ffffff;
   border-radius: 4px;
-  border: 0.5px solid #EAEDF7;
+  border: 0.5px solid #eaedf7;
   box-shadow: 0 0 4px 0 #4554661a;
   &:first-child {
     margin-top: 0;
@@ -322,11 +350,11 @@ const handleCloseEvent = (item) => {
     align-items: center;
     justify-content: space-between;
     min-height: 46px;
-    background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
     padding: 0 12px;
     .item-title-text {
       font-size: 16px;
-      color: #414F64;
+      color: #414f64;
       font-weight: 600;
     }
 
@@ -358,11 +386,11 @@ const handleCloseEvent = (item) => {
     }
     .item-data-label {
       flex-shrink: 0;
-      color: #414F64;
+      color: #414f64;
     }
 
     .item-data-value {
-      color: #414F64;
+      color: #414f64;
     }
   }
 }
@@ -374,7 +402,6 @@ const handleCloseEvent = (item) => {
 }
 .common-search {
   :deep(.van-field__left-icon) {
-
     .van-icon__image {
       width: 12px;
       height: 12px;
@@ -393,35 +420,35 @@ const handleCloseEvent = (item) => {
 .icon1 {
   width: 17px;
   height: 16px;
-  background: url('@/assets/images/event/icon1.png') no-repeat;
+  background: url("@/assets/images/event/icon1.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 7px;
 }
 .icon2 {
   width: 17px;
   height: 16px;
-  background: url('@/assets/images/event/icon2.png') no-repeat;
+  background: url("@/assets/images/event/icon2.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 7px;
 }
 .icon3 {
   width: 17px;
   height: 16px;
-  background: url('@/assets/images/event/icon3.png') no-repeat;
+  background: url("@/assets/images/event/icon3.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 7px;
 }
 .icon4 {
   width: 17px;
   height: 16px;
-  background: url('@/assets/images/event/icon4.png') no-repeat;
+  background: url("@/assets/images/event/icon4.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 7px;
 }
 .icon5 {
   width: 16px;
   height: 16px;
-  background: url('@/assets/images/event/icon5.png') no-repeat;
+  background: url("@/assets/images/event/icon5.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 7px;
 }

src/views/mobileControl/EventInfo.vue

@@ -1,90 +1,101 @@
 <template>
-    <div class="event-info">
-        <div class="info-title">
-            <div class="info-title-text">
-                <div class="info-title-text-label">事件标题：</div>
-                <div class="info-title-text-value">{{eventDetails.event_title}}</div>
-            </div>
-            <div class="info-title-control">
-                <van-button v-if="eventDetails.event_status == '0'" type="primary" class="btn1" @click="handleStartEvent">开始指挥</van-button>
-                <van-button v-if="eventDetails.event_status == '1'" type="danger" class="btn2" @click="handleCloseEvent">结束指挥</van-button>
-            </div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">持续时长：</div>
-            <div class="info-data-value">{{eventDetails.keep_time}}</div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">事件类型：</div>
-            <div class="info-data-value">
-              <dict-tag :options="mm_event_type" :value="eventDetails.event_type"></dict-tag>
-            </div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">事件等级：</div>
-            <div class="info-data-value">
-              <dict-tag :options="mm_event_level" :value="eventDetails.event_level"></dict-tag>
-            </div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">事发地点：</div>
-            <div class="info-data-value">{{eventDetails.address}}</div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">事件状态：</div>
-            <div class="info-data-value">
-              <dict-tag :options="mm_event_state" :value="eventDetails.event_status"></dict-tag>
-            </div>
-        </div>
-        <div class="info-data">
-            <div class="info-data-label">事发时间：</div>
-            <div class="info-data-value">{{eventDetails.event_time}}</div>
-        </div>
-       <div class="info-data">
-         <div class="info-data-label">事发来源：</div>
-         <div class="info-data-value">{{eventDetails.event_source}}</div>
-       </div>
+  <div class="event-info">
+    <div class="info-title">
+      <div class="info-title-text">
+        <div class="info-title-text-label">事件标题：</div>
+        <div class="info-title-text-value">{{ eventDetails.event_title }}</div>
+      </div>
+      <div class="info-title-control">
+        <van-button
+          v-if="eventDetails.event_status == '0'"
+          type="primary"
+          class="btn1"
+          @click="handleStartEvent"
+          >开始指挥</van-button
+        >
+        <van-button
+          v-if="eventDetails.event_status == '1'"
+          type="danger"
+          class="btn2"
+          @click="handleCloseEvent"
+          >结束指挥</van-button
+        >
+      </div>
     </div>
+    <div class="info-data">
+      <div class="info-data-label">持续时长：</div>
+      <div class="info-data-value">{{ eventDetails.keep_time }}</div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事件类型：</div>
+      <div class="info-data-value">
+        <dict-tag :options="mm_event_type" :value="eventDetails.event_type" />
+      </div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事件等级：</div>
+      <div class="info-data-value">
+        <dict-tag :options="mm_event_level" :value="eventDetails.event_level" />
+      </div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事发地点：</div>
+      <div class="info-data-value">{{ eventDetails.address }}</div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事件状态：</div>
+      <div class="info-data-value">
+        <dict-tag
+          :options="mm_event_state"
+          :value="eventDetails.event_status"
+        />
+      </div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事发时间：</div>
+      <div class="info-data-value">{{ eventDetails.event_time }}</div>
+    </div>
+    <div class="info-data">
+      <div class="info-data-label">事发来源：</div>
+      <div class="info-data-value">{{ eventDetails.event_source }}</div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup name="EventInfo">
-import {closeEvent, getEventDetail} from "@/api/event";
-import {reactive, ref, toRefs, watch} from "vue";
-import {useDict} from "@/utils/dict";
-import {useRouter} from "vue-router";
-import {showConfirmDialog, showSuccessToast} from "vant";
+import { closeEvent, getEventDetail } from "@/api/event";
+import { reactive, ref, toRefs, watch } from "vue";
+import { useDict } from "@/utils/dict";
+import { useRouter } from "vue-router";
+import { showConfirmDialog, showSuccessToast } from "vant";
 interface EventDetails {
-  'event_id': String;
-  'event_title': String;
-  'event_status': String;
-  'keep_time': String;
-  'event_type': String;
-  'event_level': String;
-  'address': String;
-  'event_time': String;
-  'event_source': String;
-  'latitude': String;
-  'longitude': String
+  event_id: String;
+  event_title: String;
+  event_status: String;
+  keep_time: String;
+  event_type: String;
+  event_level: String;
+  address: String;
+  event_time: String;
+  event_source: String;
+  latitude: String;
+  longitude: String;
 }
 interface Props {
   eventDetails: EventDetails;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
-const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
-
-
+const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(
+  useDict("mm_event_type", "mm_event_level", "mm_event_state")
+);
 
-
-const handleStartEvent = () => {
-
-}
+const handleStartEvent = () => {};
 
 const handleCloseEvent = () => {
   showConfirmDialog({
-    title: '结束指挥',
-    message:
-        '是否确定结束指挥？',
+    title: "结束指挥",
+    message: "是否确定结束指挥？"
   }).then(() => {
     const params = {
       eventId: props.eventDetails.event_id,
@@ -94,59 +105,56 @@ const handleCloseEvent = () => {
     };
     // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
     closeEvent(params).then(() => {
-      showSuccessToast('结束指挥成功');
-      router.push('/leader/index')
-    })
-  })
-}
+      showSuccessToast("结束指挥成功");
+      router.push("/leader/index");
+    });
+  });
+};
 </script>
 
-
 <style lang="scss" scoped>
 .event-info {
-    position: relative;
-    margin: 0px;
-    padding: 16px;
-    overflow-y: auto;
-    height: 260px;
-    .info-title {
-        line-height: 28px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        font-size: 14px;
-        color: #414F64;
-        .info-title-text-label {
-          font-weight: bold;
-          flex-shrink: 0;
-        }
-        .info-title-text {
-
-            display: flex;
-            flex-direction: row;
-            justify-content: start;
-        }
-
-        .info-title-control {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-        }
+  position: relative;
+  margin: 0px;
+  padding: 16px;
+  overflow-y: auto;
+  height: 260px;
+  .info-title {
+    line-height: 28px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #414f64;
+    .info-title-text-label {
+      font-weight: bold;
+      flex-shrink: 0;
+    }
+    .info-title-text {
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
     }
 
-    .info-data {
-        line-height: 28px;
-        display: flex;
-        flex-direction: row;
-        justify-content: start;
-        font-size: 14px;
-        color: #414F64;
-        .info-data-label {
-          flex-shrink: 0;
-          font-weight: bold;
-        }
+    .info-title-control {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 
+  .info-data {
+    line-height: 28px;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    font-size: 14px;
+    color: #414f64;
+    .info-data-label {
+      flex-shrink: 0;
+      font-weight: bold;
     }
+  }
 }
 .btn1 {
   min-width: 73px;
@@ -161,7 +169,7 @@ const handleCloseEvent = () => {
 .btn2 {
   min-width: 73px;
   height: 24px;
-  background: #EC2734;
+  background: #ec2734;
   border-radius: 2px;
   padding: 0 11px;
   display: flex;

src/views/mobileControl/index.vue

@@ -2,16 +2,41 @@
   <div class="container">
     <div class="top-content">
       <!--    <YztMap v-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />-->
-      <Map v-if="!loading" ref="mapRef" :active-map="activeMap" :point-type="pointType" :event-details="eventDetails" :class="showMenu && !!eventId && !temp && !fullscreen ? 'containerHeight1' : 'containerHeight2'"/>
+      <Map
+        v-if="!loading"
+        ref="mapRef"
+        :active-map="activeMap"
+        :point-type="pointType"
+        :event-details="eventDetails"
+        :class="
+          showMenu && !!eventId && !temp && !fullscreen
+            ? 'containerHeight1'
+            : 'containerHeight2'
+        "
+      />
       <div v-show="!fullscreen" class="top-left-panel">
-        <div class="select" @click="showSwitch = true">{{ eventDetails.event_title }}</div>
+        <div class="select" @click="showSwitch = true">
+          {{ eventDetails.event_title }}
+        </div>
       </div>
       <div class="top-right-panel">
-        <SearchBtn v-show="!fullscreen" @confirm="selectSearchMarker"/>
-        <div v-show="!fullscreen" class="add-button button1" @click="handleAdd" />
-        <div v-show="!fullscreen" class="reduce-button button1" @click="handleReduce" />
+        <SearchBtn v-show="!fullscreen" @confirm="selectSearchMarker" />
+        <div
+          v-show="!fullscreen"
+          class="add-button button1"
+          @click="handleAdd"
+        />
+        <div
+          v-show="!fullscreen"
+          class="reduce-button button1"
+          @click="handleReduce"
+        />
         <div class="fullScreen-button button1" @click="handleFullscreen" />
-        <div v-show="!fullscreen" class="layer-button button1" @click="handleLayer" />
+        <div
+          v-show="!fullscreen"
+          class="layer-button button1"
+          @click="handleLayer"
+        />
       </div>
       <div v-show="!fullscreen" class="bottom-left-panel">
         <div class="button2" @click="toIndex">
@@ -35,7 +60,12 @@
           <div>协同标绘</div>
         </div>
       </div>
-      <i v-if="!!eventId && !temp" v-show="!fullscreen" :class="showMenu ? 'arrow-icon' : 'arrow-icon turn'" @click="showMenu = !showMenu" />
+      <i
+        v-if="!!eventId && !temp"
+        v-show="!fullscreen"
+        :class="showMenu ? 'arrow-icon' : 'arrow-icon turn'"
+        @click="showMenu = !showMenu"
+      />
     </div>
 
     <div v-if="!!eventId && !temp" v-show="showMenu && !fullscreen">
@@ -44,33 +74,47 @@
     <!--切换事件-->
     <van-popup v-model:show="showSwitch" round position="bottom">
       <van-picker
-          v-model="selectEventId"
-          :columns="endEventState.columns"
-          :columns-field-names="{ text: 'event_title', value: 'event_id' }"
-          @cancel="showSwitch = false"
-          @confirm="onPickerConfirm"
+        v-model="selectEventId"
+        :columns="endEventState.columns"
+        :columns-field-names="{ text: 'event_title', value: 'event_id' }"
+        @cancel="showSwitch = false"
+        @confirm="onPickerConfirm"
       />
     </van-popup>
     <!--地点选择-->
-    <PositionSelect v-model:visible="showPositionSelect" @confirm="handleEnterCommand" />
+    <PositionSelect
+      v-model:visible="showPositionSelect"
+      @confirm="handleEnterCommand"
+    />
     <!--临时结束指挥-->
-    <van-dialog v-model:show="endEventState.show" title="结束指挥" confirm-button-text="结束指挥" show-cancel-button @close="closeDialog" @confirm="endProcess">
+    <van-dialog
+      v-model:show="endEventState.show"
+      title="结束指挥"
+      confirm-button-text="结束指挥"
+      show-cancel-button
+      @close="closeDialog"
+      @confirm="endProcess"
+    >
       <div class="form">
         <div class="form-item">
           <i class="icon" />
           <div class="form-label">灾害事件：</div>
-          <div class="select" @click="endEventState.showPicker = true">{{ endEventState.name }}</div>
+          <div class="select" @click="endEventState.showPicker = true">
+            {{ endEventState.name }}
+          </div>
+        </div>
+        <div class="form-text">
+          注意：本次指挥未关联事件，指挥记录将不会保留。若要保留记录，请关联事件。
         </div>
-        <div class="form-text">注意：本次指挥未关联事件，指挥记录将不会保留。若要保留记录，请关联事件。</div>
       </div>
     </van-dialog>
     <van-popup v-model:show="endEventState.showPicker" round position="bottom">
       <van-picker
-          v-model="endEventState.event_id"
-          :columns="endEventState.columns"
-          :columns-field-names="{ text: 'event_title', value: 'event_id' }"
-          @cancel="endEventState.showPicker = false"
-          @confirm="onPickerConfirm2"
+        v-model="endEventState.event_id"
+        :columns="endEventState.columns"
+        :columns-field-names="{ text: 'event_title', value: 'event_id' }"
+        @cancel="endEventState.showPicker = false"
+        @confirm="onPickerConfirm2"
       />
     </van-popup>
     <!--图层切换-->
@@ -79,27 +123,27 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, reactive, ref} from "vue";
-import {useRoute, useRouter} from "vue-router";
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import EventBox from "./EventBox.vue";
 import SearchBtn from "./SearchBtn.vue";
-import {deepClone} from "@/utils";
-import {iconList} from "@/components/Map/mapData";
+import { deepClone } from "@/utils";
+import { iconList } from "@/components/Map/mapData";
 import PositionSelect from "@/views/mobileControl/PositionSelect.vue";
-import {editEvent, getListActive, launchPlan} from "@/api/duty/eventing";
-import {showFailToast, showSuccessToast} from "vant";
-import {closeEvent, getEventDetail} from "@/api/event";
+import { editEvent, getListActive, launchPlan } from "@/api/duty/eventing";
+import { showFailToast, showSuccessToast } from "vant";
+import { closeEvent, getEventDetail } from "@/api/event";
 import LayerBox from "@/views/mobileControl/LayerBox.vue";
 
 const router = useRouter();
 const route = useRoute();
 let loading = ref(true);
-let eventId = ref('');
+let eventId = ref("");
 let selectEventId = ref([]);
 let eventDetails = ref({
-  event_title: '',
-  longitude: '',
-  latitude: ''
+  event_title: "",
+  longitude: "",
+  latitude: ""
 });
 let showSwitch = ref(false);
 const temp = ref(false);
@@ -108,31 +152,30 @@ let showMenu = ref(true);
 let mapRef = ref(null);
 let map2Ref = ref(null);
 // logical vectorgraph satellite satellite2 satellite3
-let activeMap = ref('satellite');
+let activeMap = ref("satellite");
 let pointType = ref([]);
 let endEventState = reactive({
   show: false,
   showPicker: false,
   columns: [],
-  name: '',
-  address: '',
-  latitude: '',
-  longitude: '',
+  name: "",
+  address: "",
+  latitude: "",
+  longitude: "",
   event_id: []
 });
 
-
 const toIndex = () => {
-  if (!temp) {
-    router.push('/leader/index');
+  if (!temp.value) {
+    router.push("/leader/index");
   } else {
     endEventState.show = true;
   }
 };
 
 // 点击搜索结果，添加标注
-const selectSearchMarker = (item) => {
-  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
+const selectSearchMarker = item => {
+  const dom = activeMap.value === "satellite2" ? map2Ref.value : mapRef.value;
   let item2 = deepClone(item);
   // 获取图标
   if (iconList[item2.dataType]) {
@@ -141,10 +184,10 @@ const selectSearchMarker = (item) => {
     item2.imageHover = iconList[item2.dataType].imageHover;
     item2.size = iconList[item2.dataType].size;
   } else {
-    item2.icon = iconList['common'].imageHover;
-    item2.image = iconList['common'].image;
-    item2.imageHover = iconList['common'].imageHover;
-    item2.size = iconList['common'].size;
+    item2.icon = iconList["common"].imageHover;
+    item2.image = iconList["common"].image;
+    item2.imageHover = iconList["common"].imageHover;
+    item2.size = iconList["common"].size;
   }
   item2.lnglat = [item2.longitude, item2.latitude];
   dom.addSearchMarker(item2);
@@ -155,53 +198,52 @@ const handleAdd = () => {
   if (!!map) {
     map.setZoom(map.getZoom() + 1);
   }
-}
+};
 // 地图减小一级
 const handleReduce = () => {
   let map = getMap();
   if (!!map) {
     map.setZoom(map.getZoom() - 1);
   }
-}
+};
 // 全屏
 const handleFullscreen = () => {
   fullscreen.value = !fullscreen.value;
-}
+};
 let showLayer = ref(false);
 // 打开切换图层弹窗
 const handleLayer = () => {
   showLayer.value = true;
-}
+};
 const getMap = () => {
   let map;
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
-
+  if (["satellite2", "satellite3"].includes(activeMap.value)) {
   } else {
     map = mapRef.value.getMap();
   }
   return map;
-}
+};
 let showPositionSelect = ref(false);
 const handleShowPosition = () => {
   showPositionSelect.value = true;
-}
-const handleEnterCommand = (res) => {
+};
+const handleEnterCommand = res => {
   temp.value = true;
   eventId.value = res.event_id;
   selectEventId.value = [res.event_id];
   endEventState.address = res.address;
   endEventState.latitude = res.latitude;
   endEventState.longitude = res.longitude;
-}
-const onPickerConfirm = (data) => {
+};
+const onPickerConfirm = data => {
   eventId.value = data.selectedValues[0];
   eventDetails.value = data.selectedOptions[0];
   showSwitch.value = false;
-  getEventDetail({event_id: eventId.value}).then((res) => {
+  getEventDetail({ event_id: eventId.value }).then(res => {
     eventDetails.value = res.data;
-  })
+  });
 };
-const onPickerConfirm2 = (data) => {
+const onPickerConfirm2 = data => {
   endEventState.event_id = [data.selectedValues[0]];
   endEventState.name = data.selectedOptions[0].event_title;
   endEventState.showPicker = false;
@@ -209,11 +251,11 @@ const onPickerConfirm2 = (data) => {
 const closeDialog = () => {
   endEventState.show = false;
   endEventState.event_id = [];
-  endEventState.name = '';
-}
+  endEventState.name = "";
+};
 const endProcess = () => {
   if (!endEventState.event_id[0]) {
-    showFailToast('请先选择一个事件')
+    showFailToast("请先选择一个事件");
     return;
   }
   // 更新事件信息
@@ -234,27 +276,29 @@ const endProcess = () => {
     // 调用 closeEvent 接口关闭事件
     closeEvent(params).then(() => {
       closeDialog();
-      showSuccessToast('结束成功');
-      router.push('/leader/index');
-    })
-  })
-}
+      showSuccessToast("结束成功");
+      router.push("/leader/index");
+    });
+  });
+};
 onMounted(() => {
   eventId.value = route.query.event_id as string;
   selectEventId.value = [route.query.event_id as string];
   if (!!eventId.value && !temp.value) {
-    getEventDetail({event_id: eventId.value}).then((res) => {
-      eventDetails.value = res.data;
-    }).finally(() => {
-      loading.value = false;
-    })
+    getEventDetail({ event_id: eventId.value })
+      .then(res => {
+        eventDetails.value = res.data;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
   } else {
     loading.value = false;
   }
-  getListActive({}).then((res) => {
+  getListActive({}).then(res => {
     endEventState.columns = res.data;
   });
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -270,7 +314,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 24px;
       height: 24px;
-      background: url('@/assets/images/command/arrow.png') no-repeat;
+      background: url("@/assets/images/command/arrow.png") no-repeat;
       background-size: 100% 100%;
     }
     .turn {
@@ -297,16 +341,16 @@ onMounted(() => {
   right: 16px;
   top: 16px;
   .add-button {
-    background: url('@/assets/images/command/add.png') no-repeat;
+    background: url("@/assets/images/command/add.png") no-repeat;
   }
   .reduce-button {
-    background: url('@/assets/images/command/reduce.png') no-repeat;
+    background: url("@/assets/images/command/reduce.png") no-repeat;
   }
   .fullScreen-button {
-    background: url('@/assets/images/command/fullScreen.png') no-repeat;
+    background: url("@/assets/images/command/fullScreen.png") no-repeat;
   }
   .layer-button {
-    background: url('@/assets/images/command/layer.png') no-repeat;
+    background: url("@/assets/images/command/layer.png") no-repeat;
   }
   .button1 {
     width: 24px;
@@ -321,7 +365,6 @@ onMounted(() => {
       margin-bottom: 0;
     }
   }
-
 }
 
 .bottom-left-panel {
@@ -335,7 +378,7 @@ onMounted(() => {
     margin-bottom: 16px;
     min-width: 87px;
     height: 26px;
-    background: #2C81FF;
+    background: #2c81ff;
     border-radius: 2px;
     display: flex;
     padding: 0 11px;
@@ -349,35 +392,35 @@ onMounted(() => {
   .back-btn {
     width: 12px;
     height: 12px;
-    background: url('@/assets/images/command/back.png') no-repeat;
+    background: url("@/assets/images/command/back.png") no-repeat;
     background-size: 100% 100%;
     margin-right: 6px;
   }
   .command-btn {
     width: 12px;
     height: 12px;
-    background: url('@/assets/images/command/command.png') no-repeat;
+    background: url("@/assets/images/command/command.png") no-repeat;
     background-size: 100% 100%;
     margin-right: 6px;
   }
   .material-btn {
     width: 13px;
     height: 12px;
-    background: url('@/assets/images/command/material.png') no-repeat;
+    background: url("@/assets/images/command/material.png") no-repeat;
     background-size: 100% 100%;
     margin-right: 6px;
   }
   .event-btn {
     width: 13px;
     height: 12px;
-    background: url('@/assets/images/command/event.png') no-repeat;
+    background: url("@/assets/images/command/event.png") no-repeat;
     background-size: 100% 100%;
     margin-right: 6px;
   }
   .plot-btn {
     width: 12px;
     height: 12px;
-    background: url('@/assets/images/command/plot.png') no-repeat;
+    background: url("@/assets/images/command/plot.png") no-repeat;
     background-size: 100% 100%;
     margin-right: 6px;
   }
@@ -397,7 +440,7 @@ onMounted(() => {
       flex-shrink: 0;
       width: 17px;
       height: 16px;
-      background: url('@/assets/images/event/icon11.png') no-repeat;
+      background: url("@/assets/images/event/icon11.png") no-repeat;
       background-size: 100% 100%;
       margin-right: 5px;
     }
@@ -408,7 +451,7 @@ onMounted(() => {
   }
   .form-text {
     font-size: 14px;
-    color: #FF2F3C;
+    color: #ff2f3c;
     margin: 10px 0;
   }
 }
@@ -416,8 +459,8 @@ onMounted(() => {
 .select {
   flex: 1;
   height: 35px;
-  background: #FFFFFF;
-  border: 1px solid #DCE0EE;
+  background: #ffffff;
+  border: 1px solid #dce0ee;
   border-radius: 2px;
   margin-left: 6px;
   padding: 5px 33px 5px 8px;
@@ -426,7 +469,7 @@ onMounted(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     right: 10px;

src/views/worker/index.vue

@@ -127,7 +127,7 @@ const goToInformationReception = () => {
 // 菜单数据
 const menu = ref([
   { name: "巡查工作", icon: "icon1", num: 0, url: "" },
-  { name: "风险防控", icon: "icon2", num: 0, url: "" },
+  { name: "风险防控", icon: "icon2", num: 0, url: "riskManagement" },
   { name: "数据管理", icon: "icon3", num: 0, url: "" },
   { name: "在线点名", icon: "icon4", num: 0, url: "" }
 ]);

src/views/worker/riskManagement/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <van-tabs v-model:active="active" type="card">
+    <van-tab title="风险源排查">
+      <div v-for="(item, index) in menuData" :key="index" class="task-item">
+        <div class="header">
+          <h>风险源排查任务</h>
+          <van-button type="primary" class="report-button">上报</van-button>
+        </div>
+        <p>巡检周期: {{ item.name }}</p>
+        <p>巡检范围: {{ item.range }}</p>
+        <p>要求巡检时间: {{ item.time }}</p>
+        <hr />
+      </div>
+    </van-tab>
+    <van-tab title="隐患源排查">
+      <div v-for="(item, index) in menuData" :key="index" class="task-item">
+        <div class="header">
+          <h>隐患源排查任务</h>
+          <van-button type="primary" class="report-button">上报</van-button>
+        </div>
+        <p>巡检周期: {{ item.name }}</p>
+        <p>巡检范围: {{ item.range }}</p>
+        <p>要求巡检时间: {{ item.time }}</p>
+        <hr />
+      </div>
+    </van-tab>
+    <van-tab title="危险源排查">
+      <div v-for="(item, index) in menuData" :key="index" class="task-item">
+        <div class="header">
+          <h>危险源排查任务</h>
+          <van-button type="primary" class="report-button">上报</van-button>
+        </div>
+        <p>巡检周期: {{ item.name }}</p>
+        <p>巡检范围: {{ item.range }}</p>
+        <p>要求巡检时间: {{ item.time }}</p>
+        <hr />
+      </div>
+    </van-tab>
+    <van-tab title="排查记录"></van-tab>
+  </van-tabs>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+const active = ref(0);
+// 接口
+const getlist = index => {
+  console.log(index);
+};
+const menuData = reactive([
+  { name: "每周", range: "辖区内", time: "2024-10-10" },
+  { name: "每年", range: "辖区内", time: "2024-10-11" },
+  { name: "每月", range: "辖区内", time: "2024-10-12" },
+  { name: "每日", range: "辖区内", time: "2024-10-13" },
+  { name: "每周", range: "辖区内", time: "2024-10-14" }
+]);
+</script>
+
+<style scoped>
+.task-item .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.task-item .header h {
+  margin: 0;
+  flex: 1; /* 使标题占据尽可能多的空间 */
+}
+
+.task-item .header .report-button {
+  margin-left: auto; /* 将按钮推到最右边 */
+}
+</style>