|
@@ -3,15 +3,29 @@
|
|
|
<Map />
|
|
|
<!-- 头部 -->
|
|
|
<div class="home_container_header">
|
|
|
- <div class="home_container_header-left" :class="{ home_left_bg_max: commonStore.activeIndex === 1 }">
|
|
|
+ <div
|
|
|
+ class="home_container_header-left"
|
|
|
+ :class="{ home_left_bg_max: commonStore.activeIndex === 1 }"
|
|
|
+ >
|
|
|
<div class="home_container_header-left_time">
|
|
|
<!-- <img class="time_icon" src="../assets/img/risk_info_icon-1.png" alt="" />
|
|
|
<div class="clock">{{ currentTime }}</div> -->
|
|
|
</div>
|
|
|
<div class="home_container_header-left_tab">
|
|
|
<div class="button-container">
|
|
|
- <div v-for="(item, index) in buttons" :key="index" class="parallelogram-button" :class="{ highlight: commonStore.activeIndex === index }" @click="setActive(index, item)">
|
|
|
- <div class="text-container" :class="{ 'text-container-highlight': commonStore.activeIndex === index }">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in buttons"
|
|
|
+ :key="index"
|
|
|
+ class="parallelogram-button"
|
|
|
+ :class="{ highlight: commonStore.activeIndex === index }"
|
|
|
+ @click="setActive(index, item)"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-container"
|
|
|
+ :class="{
|
|
|
+ 'text-container-highlight': commonStore.activeIndex === index,
|
|
|
+ }"
|
|
|
+ >
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -29,105 +43,132 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 两侧 -->
|
|
|
- <div class="home_content_left" :class="{ home_left_bg_max: commonStore.activeIndex === 1 }">
|
|
|
+ <div
|
|
|
+ class="home_content_left"
|
|
|
+ :class="{ home_left_bg_max: commonStore.activeIndex === 1 }"
|
|
|
+ >
|
|
|
<LeftPage :activeIndex="activeIndex" class="left_page"></LeftPage>
|
|
|
</div>
|
|
|
- <div class="home_content_right" :class="{ home_right_bg_max: commonStore.activeIndex === 1 && !rightPanelStore.emergencyVisible }">
|
|
|
+ <div
|
|
|
+ class="home_content_right"
|
|
|
+ :class="{
|
|
|
+ home_right_bg_max:
|
|
|
+ commonStore.activeIndex === 1 && !rightPanelStore.emergencyVisible,
|
|
|
+ }"
|
|
|
+ >
|
|
|
<RightPage :activeIndex="activeIndex" class="right_page"></RightPage>
|
|
|
</div>
|
|
|
<!-- 底部片区图层按钮 -->
|
|
|
<AreaLayerSwitch></AreaLayerSwitch>
|
|
|
|
|
|
<!-- 提示框 -->
|
|
|
- <MyAlert v-if="commonStore.showAlert" :message="commonStore.alertMessage" :duration="3" :onClose="() => (commonStore.showAlert = false)"></MyAlert>
|
|
|
+ <MyAlert
|
|
|
+ v-if="commonStore.showAlert"
|
|
|
+ :message="commonStore.alertMessage"
|
|
|
+ :duration="3"
|
|
|
+ :onClose="() => (commonStore.showAlert = false)"
|
|
|
+ ></MyAlert>
|
|
|
|
|
|
<VideoCallView
|
|
|
v-if="rightPanelStore.videoCallVisible2"
|
|
|
class="video_call_po"
|
|
|
:class="{
|
|
|
- 'right-dialog-max': commonStore.activeTools['图例']
|
|
|
+ 'right-dialog-max': commonStore.activeTools['图例'],
|
|
|
}"
|
|
|
></VideoCallView>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import VideoCallView from '@/views/right/components/handleProcess/comp/VideoCallView.vue'
|
|
|
-import MyAlert from '../components/MyAlert/index'
|
|
|
-import AreaLayerSwitch from '../components/AreaLayerSwitch/index'
|
|
|
-import LeftPage from './left/index.vue'
|
|
|
-import RightPage from './right/index.vue'
|
|
|
-import Map from '@/components/Map.vue'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { useUserStore } from '../store/user'
|
|
|
-import { useCommonStore } from '../store/common.js'
|
|
|
-import { ref, reactive, toRefs, onBeforeMount, onMounted, onUnmounted, watch } from 'vue'
|
|
|
-import { useRiskTableStore } from '@/store/riskTable.js'
|
|
|
-import { handleJtlxPoints, handleRiskStatistic, handleXcczPoints, initDistrict } from '@/utils/map/baseMethod.js'
|
|
|
-import { useRightPanelStore } from '@/store/rightPanel.js'
|
|
|
-import { useEventInteractionStore } from '@/store/eventInteraction.js'
|
|
|
-let userStore = useUserStore()
|
|
|
-let commonStore = useCommonStore()
|
|
|
-let riskTableStore = useRiskTableStore()
|
|
|
-const rightPanelStore = useRightPanelStore()
|
|
|
-const eventInteractionStore = useEventInteractionStore()
|
|
|
-
|
|
|
-console.log(userStore, 'useUserStore')
|
|
|
-let { name, age } = storeToRefs(userStore)
|
|
|
-const currentTime = ref('')
|
|
|
+import VideoCallView from "@/views/right/components/handleProcess/comp/VideoCallView.vue";
|
|
|
+import MyAlert from "../components/MyAlert/index";
|
|
|
+import AreaLayerSwitch from "../components/AreaLayerSwitch/index";
|
|
|
+import LeftPage from "./left/index.vue";
|
|
|
+import RightPage from "./right/index.vue";
|
|
|
+import Map from "@/components/Map.vue";
|
|
|
+import { storeToRefs } from "pinia";
|
|
|
+import { useUserStore } from "../store/user";
|
|
|
+import { useCommonStore } from "../store/common.js";
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onBeforeMount,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
+ watch,
|
|
|
+} from "vue";
|
|
|
+import { useRiskTableStore } from "@/store/riskTable.js";
|
|
|
+import {
|
|
|
+ handleJtlxPoints,
|
|
|
+ handleRiskStatistic,
|
|
|
+ handleXcczPoints,
|
|
|
+ initDistrict,
|
|
|
+} from "@/utils/map/baseMethod.js";
|
|
|
+import { useRightPanelStore } from "@/store/rightPanel.js";
|
|
|
+import { useEventInteractionStore } from "@/store/eventInteraction.js";
|
|
|
+let userStore = useUserStore();
|
|
|
+let commonStore = useCommonStore();
|
|
|
+let riskTableStore = useRiskTableStore();
|
|
|
+const rightPanelStore = useRightPanelStore();
|
|
|
+const eventInteractionStore = useEventInteractionStore();
|
|
|
+
|
|
|
+console.log(userStore, "useUserStore");
|
|
|
+let { name, age } = storeToRefs(userStore);
|
|
|
+const currentTime = ref("");
|
|
|
// 更新当前时间的函数
|
|
|
const updateTime = () => {
|
|
|
- const now = new Date()
|
|
|
+ const now = new Date();
|
|
|
|
|
|
// 格式化为 2025-02-25 10:39:05
|
|
|
- const year = now.getFullYear()
|
|
|
- const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始,需加 1
|
|
|
- const day = String(now.getDate()).padStart(2, '0')
|
|
|
- const hours = String(now.getHours()).padStart(2, '0')
|
|
|
- const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
|
- const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
|
-
|
|
|
- currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
-}
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始,需加 1
|
|
|
+ const day = String(now.getDate()).padStart(2, "0");
|
|
|
+ const hours = String(now.getHours()).padStart(2, "0");
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, "0");
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, "0");
|
|
|
+
|
|
|
+ currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+};
|
|
|
// 设置定时器每秒更新一次
|
|
|
-let timer
|
|
|
+let timer;
|
|
|
onMounted(() => {
|
|
|
- updateTime() // 初始化时更新时间
|
|
|
- timer = setInterval(updateTime, 1000) // 每秒更新
|
|
|
- activeIndex.value = commonStore.getActiveIndex()
|
|
|
-})
|
|
|
+ updateTime(); // 初始化时更新时间
|
|
|
+ timer = setInterval(updateTime, 1000); // 每秒更新
|
|
|
+ activeIndex.value = commonStore.getActiveIndex();
|
|
|
+});
|
|
|
|
|
|
// 清理定时器
|
|
|
onUnmounted(() => {
|
|
|
- clearInterval(timer)
|
|
|
-})
|
|
|
+ clearInterval(timer);
|
|
|
+});
|
|
|
|
|
|
let buttons = ref([
|
|
|
- { id: 0, title: '报告处置', active: true },
|
|
|
- { id: 1, title: '处置进展', active: false }
|
|
|
-])
|
|
|
-let activeIndex = ref(0) // 存储当前高亮按钮的索引
|
|
|
+ { id: 0, title: "报告处置", active: true },
|
|
|
+ { id: 1, title: "处置进展", active: false },
|
|
|
+]);
|
|
|
+let activeIndex = ref(0); // 存储当前高亮按钮的索引
|
|
|
|
|
|
function setActive(index, item) {
|
|
|
if (commonStore.activeIndex === index) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
// 切换高亮按钮,点击时高亮切换
|
|
|
- activeIndex.value = index
|
|
|
- commonStore.setActiveIndex(index)
|
|
|
- riskTableStore.setCurrentBackground(1)
|
|
|
+ activeIndex.value = index;
|
|
|
+ commonStore.setActiveIndex(index);
|
|
|
+ riskTableStore.setCurrentBackground(1);
|
|
|
if (index === 0) {
|
|
|
- if (eventInteractionStore.mapType === 'china') {
|
|
|
- eventInteractionStore.mapType = 'shanghai'
|
|
|
- commonStore.areaLayerSwitchActive = '上海市'
|
|
|
+ if (eventInteractionStore.mapType === "china") {
|
|
|
+ eventInteractionStore.mapType = "shanghai";
|
|
|
+ commonStore.areaLayerSwitchActive = "上海市";
|
|
|
} else {
|
|
|
- initDistrict()
|
|
|
+ initDistrict();
|
|
|
}
|
|
|
- commonStore.activeModuleTime = '年'
|
|
|
- commonStore.activeModule = '风险总览'
|
|
|
+ commonStore.activeModuleTime = "年";
|
|
|
+ commonStore.activeModule = "风险总览";
|
|
|
} else {
|
|
|
- commonStore.activeModuleTime = ''
|
|
|
- commonStore.activeModule = ''
|
|
|
- commonStore.riskTableItem = commonStore.tableData[0]
|
|
|
+ commonStore.activeModuleTime = "";
|
|
|
+ commonStore.activeModule = "";
|
|
|
+ commonStore.riskTableItem = commonStore.tableData[0];
|
|
|
}
|
|
|
// handleJtlxPoints(index === 0)
|
|
|
}
|
|
@@ -135,17 +176,17 @@ function setActive(index, item) {
|
|
|
watch(
|
|
|
() => commonStore.activeModule,
|
|
|
(val, oldVal) => {
|
|
|
- rightPanelStore.riskLevelList.forEach(item => {
|
|
|
- item.value = true
|
|
|
- })
|
|
|
- rightPanelStore.riskTypeSelect = ['A', 'B', 'C', 'D']
|
|
|
- handleRiskStatistic(false)
|
|
|
+ rightPanelStore.riskLevelList.forEach((item) => {
|
|
|
+ item.value = true;
|
|
|
+ });
|
|
|
+ rightPanelStore.riskTypeSelect = ["A", "B", "C", "D"];
|
|
|
+ handleRiskStatistic(false);
|
|
|
// commonStore.areaLayerSwitchActive = val
|
|
|
- if (oldVal === '现场处置视频') {
|
|
|
- handleXcczPoints(false)
|
|
|
+ if (oldVal === "现场处置视频") {
|
|
|
+ handleXcczPoints(false);
|
|
|
}
|
|
|
}
|
|
|
-)
|
|
|
+);
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.home_container {
|
|
@@ -292,6 +333,8 @@ watch(
|
|
|
height: 100px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 40px;
|
|
|
border-radius: 10px 30px 0 0;
|
|
|
// background: rgba(0, 21, 51, 0.7);
|
|
|
z-index: 0;
|
|
@@ -306,7 +349,7 @@ watch(
|
|
|
.icon-img {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
- background-image: url('../assets/img/通讯录@2x.png');
|
|
|
+ background-image: url("../assets/img/通讯录@2x.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
@@ -333,7 +376,7 @@ watch(
|
|
|
.duoyun {
|
|
|
width: 35px;
|
|
|
height: 35px;
|
|
|
- background-image: url('../assets/img/多云.png');
|
|
|
+ background-image: url("../assets/img/多云.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
@@ -362,7 +405,7 @@ watch(
|
|
|
height: 988px;
|
|
|
z-index: 0;
|
|
|
// background: url('../assets/img/left_bg (2).png') no-repeat;
|
|
|
- background: url('../assets/img/左背景_2.png') no-repeat;
|
|
|
+ background: url("../assets/img/左背景_2.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
// background-color: rgba(242, 17, 10, 0.7);
|
|
@@ -386,11 +429,9 @@ watch(
|
|
|
top: 90px;
|
|
|
width: 1240px;
|
|
|
height: 988px;
|
|
|
- // background: rgba(0, 21, 51, 0.7);
|
|
|
- // background: url('../assets/img/right_bg (2).png') no-repeat;
|
|
|
- // background: url('../assets/img/Frame 2136636887.png') no-repeat;
|
|
|
- background: url('../assets/img/右背景_2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-image: url("../assets/img/右背景_2.png");
|
|
|
+ background-size: 100% calc(100% + 30px);
|
|
|
+ background-position-y: -65px;
|
|
|
// z-index: 0;
|
|
|
.right_page {
|
|
|
position: absolute;
|