森防视频 、开关组件

src/components/Switch/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="switch-container" @click="handleClick">
+    <div v-if="!!label" :class="!!modelValue ? 'label-active' : 'label'">{{ label }}</div>
+    <div class="switch-box" :style="{ backgroundColor: !!modelValue ? '#3c8aff' : '#cacaca' }">
+      <span class="text1">开</span>
+      <i class="circle" :style="{ left: !!modelValue ? '40px' : '0', borderColor: !!modelValue ? '#3c8aff' : '#cacaca' }" />
+      <span class="text2">关</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Switch">
+const props = defineProps({
+  modelValue: Boolean,
+  label: String
+});
+const emits = defineEmits(['update:modelValue']);
+const handleClick = () => {
+  emits('update:modelValue', !props.modelValue);
+};
+</script>
+
+<style lang="scss" scoped>
+.switch-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .label {
+    font-size: 32px;
+    color: #ffffff;
+    margin-right: 10px;
+  }
+  .label-active {
+    font-size: 32px;
+    color: #4b83ea;
+    margin-right: 10px;
+  }
+  .switch-box {
+    border: 1px solid #3988fd;
+    width: 80px;
+    border-radius: 20px;
+    height: 40px;
+    position: relative;
+    .circle {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      border: 1px solid #3988fd;
+      background-color: #062552;
+      border-radius: 50%;
+      transition: left ease-in-out 0.5s;
+    }
+    .text1 {
+      display: inline-block;
+      font-size: 28px;
+      position: absolute;
+      top: 50%;
+      left: 7px;
+      transform: translateY(-50%);
+      color: #ffffff;
+    }
+    .text2 {
+      display: inline-block;
+      font-size: 28px;
+      position: absolute;
+      top: 50%;
+      right: 7px;
+      transform: translateY(-50%);
+      color: #000000;
+    }
+  }
+}
+</style>

src/types/components.d.ts

@@ -103,6 +103,7 @@ declare module 'vue' {
     Step: typeof import('./../components/Step/index.vue')['default']
     SubmitVerify: typeof import('./../components/Process/submitVerify.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
+    Switch: typeof import('./../components/Switch/index.vue')['default']
     TimeAxis: typeof import('./../components/TimeAxis/index.vue')['default']
     TopNav: typeof import('./../components/TopNav/index.vue')['default']
     TreeSelect: typeof import('./../components/TreeSelect/index.vue')['default']

src/views/globalMap/RightMenu/ForestDefenseVideo/DetailDialog.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="detail-box">
+    <div class="tabs">
+      <div v-for="(item, index) in tabs" :key="index" class="tab">
+        <i :class="item.icon" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="line">
+        <div class="common-title-box">{{ detailsData.title }}</div>
+        <Switch v-model="visibleRange" label="可视域" style="flex-shrink: 0; white-space: wrap" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  id: String
+});
+const tabs = ref([
+  { label: '', icon: 'icon1' },
+  { label: '', icon: 'icon2' },
+  { label: '', icon: 'icon3' },
+  { label: '', icon: 'icon4' },
+  { label: '', icon: 'icon5' },
+  { label: '', icon: 'icon6' },
+  { label: '', icon: 'icon7' }
+]);
+// 可视域开关
+let visibleRange = ref(false);
+const detailsData = ref({
+  title: ''
+});
+
+onMounted(() => {
+  detailsData.value = {
+    title: '高州市根子镇上炕村委会23211312'
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.detail-box {
+  position: absolute;
+  top: 90px;
+  left: -1080px;
+  display: flex;
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    margin-top: 15px;
+    .tab {
+      width: 103px;
+      height: 81px;
+      background: url('@/assets/images/map/rightMenu/forestDefenseVideo/box.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 5px;
+      cursor: pointer;
+      .icon1 {
+        width: 66px;
+        height: 66px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon1.png') no-repeat;
+      }
+      .icon2 {
+        width: 66px;
+        height: 61px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon2.png') no-repeat;
+      }
+      .icon3 {
+        width: 65px;
+        height: 67px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon3.png') no-repeat;
+      }
+      .icon4 {
+        width: 67px;
+        height: 67px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon4.png') no-repeat;
+      }
+      .icon5 {
+        width: 68px;
+        height: 67px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon5.png') no-repeat;
+      }
+      .icon6 {
+        width: 68px;
+        height: 63px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon6.png') no-repeat;
+      }
+      .icon7 {
+        width: 65px;
+        height: 65px;
+        background: url('@/assets/images/map/rightMenu/forestDefenseVideo/icon7.png') no-repeat;
+      }
+      .icon1,
+      .icon2,
+      .icon3,
+      .icon4,
+      .icon5,
+      .icon6,
+      .icon7 {
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .content {
+    width: 723px;
+    height: 1511px;
+    background: url('@/assets/images/map/rightMenu/forestDefenseVideo/content2.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 30px 20px 20px 20px;
+    .line {
+      display: flex;
+      .common-title-box {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

src/views/globalMap/RightMenu/ForestDefenseVideo/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text title">森防视频</div>
+    </div>
+    <div class="content">
+      <div class="data-line">
+        <div class="text-box1">
+          <div class="data-label">设备总数</div>
+          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.data1) ? statisticsData.data1 : '-' }}</div>
+        </div>
+        <div class="text-box2">
+          <div class="data-label">在线</div>
+          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.data2) ? statisticsData.data2 : '-' }}</div>
+        </div>
+      </div>
+      <div class="query-box">
+        <el-select
+          v-model="queryParams.data1"
+          placeholder="请选择"
+          class="custom-select"
+          popper-class="custom-select-popper"
+          :teleported="false"
+          clearable
+          filterable
+          style="margin-top: 30px"
+        >
+          <el-option v-for="item in selectOptions1" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <div class="query-item">
+          <el-select
+            v-model="queryParams.data2"
+            placeholder="请选择"
+            class="custom-select"
+            popper-class="custom-select-popper"
+            :teleported="false"
+            clearable
+            filterable
+            style="margin-right: 20px"
+          >
+            <el-option v-for="item in selectOptions2" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-select
+            v-model="queryParams.data2"
+            placeholder="请选择"
+            class="custom-select"
+            popper-class="custom-select-popper"
+            :teleported="false"
+            clearable
+            filterable
+            style="margin-right: 20px"
+          >
+            <el-option v-for="item in selectOptions2" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <div class="common-btn">导出</div>
+        </div>
+        <div class="tree-box">
+          <el-tree ref="tree" :data="treeData">
+            <template #default="{ node, data }">
+              <span v-if="data.num1 && data.num2" class="custom-tree-node">
+                <span>{{ node.label }}</span>
+                <span>（{{ data.num1 }}/{{ data.num2 }}）</span>
+              </span>
+              <span v-else class="custom-tree-node" @click="handleClick(data)">
+                <span>{{ node.label }}</span>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <DetailDialog v-if="!!detailId" :id="detailId" />
+  </div>
+</template>
+
+<script lang="ts" setup name="ForestDefenseVideo">
+// 统计数据
+import DetailDialog from './DetailDialog.vue';
+
+const statisticsData = ref({
+  data1: '',
+  data2: ''
+});
+// 查询条件
+const queryParams = reactive({
+  data1: '',
+  data2: '',
+  data3: ''
+});
+let selectOptions1 = ref([]);
+let selectOptions2 = ref([]);
+let selectOptions3 = ref([]);
+let treeData = ref([]);
+const getData = () => {
+  treeData.value = [
+    {
+      label: '茂名市',
+      value: 1,
+      num1: 128,
+      num2: 134,
+      children: [
+        {
+          label: '茂南区',
+          value: 2,
+          num1: 5,
+          num2: 5,
+          children: [
+            { label: '茂南公馆蒲芦塘村', value: 3 },
+            { label: '茂南区羊角镇禄段横山庙1', value: 4 },
+            { label: '茂南区羊角镇禄段横山庙2', value: 5 },
+            { label: '茂南区羊角镇禄段横山庙3', value: 6 },
+            { label: '茂南区羊角镇禄段横山庙4', value: 7 }
+          ]
+        },
+        {
+          label: '电白区',
+          value: 8,
+          num1: 5,
+          num2: 6,
+          children: [
+            { label: '茂南公馆蒲芦塘村', value: 9 },
+            { label: '茂南区羊角镇禄段横山庙1', value: 10 },
+            { label: '茂南区羊角镇禄段横山庙2', value: 11 },
+            { label: '茂南区羊角镇禄段横山庙3', value: 12 },
+            { label: '茂南区羊角镇禄段横山庙4', value: 13 }
+          ]
+        }
+      ]
+    }
+  ];
+};
+let detailId = ref('');
+const handleClick = (data) => {
+  detailId.value = data.value;
+};
+onMounted(() => {
+  statisticsData.value = {
+    data1: '125',
+    data2: '121'
+  };
+  selectOptions1.value = [
+    { label: '测试1', value: 1 },
+    { label: '测试2', value: 2 },
+    { label: '测试3', value: 3 }
+  ];
+  selectOptions2.value = [
+    { label: '测试1', value: 1 },
+    { label: '测试2', value: 2 },
+    { label: '测试3', value: 3 }
+  ];
+  selectOptions3.value = [
+    { label: '测试1', value: 1 },
+    { label: '测试2', value: 2 },
+    { label: '测试3', value: 3 }
+  ];
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1589px;
+  height: 2071px;
+  background: url('@/assets/images/map/rightMenu/forestDefenseVideo/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 38px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
+.content {
+  padding-right: 50px;
+}
+.data-line {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .text-box1 {
+    background: url('@/assets/images/map/rightMenu/forestDefenseVideo/textBox1.png') no-repeat;
+  }
+  .text-box2 {
+    background: url('@/assets/images/map/rightMenu/forestDefenseVideo/textBox2.png') no-repeat;
+  }
+  .text-box1,
+  .text-box2 {
+    width: 672px;
+    height: 144px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 180px;
+    padding-right: 50px;
+    background-size: 100% 100%;
+    .gradient-text3 {
+      font-size: 46px;
+      font-weight: bold;
+    }
+  }
+}
+.query-item {
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  .common-btn {
+    flex-shrink: 0;
+  }
+}
+.tree-box {
+  width: 100%;
+  padding: 20px 0;
+  :deep(.el-tree) {
+    background-color: transparent;
+    color: #fbffff;
+    font-size: 38px;
+    .el-tree-node__content {
+      height: auto;
+      padding-top: 15px;
+      padding-bottom: 15px;
+      white-space: normal;
+      word-break: break-all;
+    }
+    .el-tree-node__expand-icon {
+      color: #ffffff;
+      font-size: 40px;
+    }
+    .el-tree-node:focus > .el-tree-node__content,
+    .el-tree-node__content:hover {
+      background-color: #1855db !important;
+    }
+  }
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -30,74 +30,70 @@
           <i class="fold-icon" />
           折叠菜单
         </div>
-        <!--图层分析-->
-        <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
-        <!--空间分析-->
-        <SpatialAnalysis
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'"
-          :update-location="location"
-          @handle-menu="handleMenu"
-        />
-        <!--江湖河库-->
-        <Reservoir v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
-        <!--路网视频-->
-        <RoadNetworkVideo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
-        <!--防溺水视频-->
-        <PreventDrowning v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
-        <!--水库监测-->
-        <ReservoirMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
-        <!--河道监测-->
-        <RiverMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
-        <!--无人机-->
-        <UAV v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '无人机'" @handle-menu="handleMenu" />
-        <!--实时标绘-->
-        <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
-        <!--定点分析-->
-        <FixedPointAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '定点分析'" :location="location2" />
-        <!--雨情监测-->
-        <RainMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
-        <!--铁塔运行监测-->
-        <TowerStatus v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'" />
-        <!--预警信号-->
-        <WarningInfo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '预警信号'" @handle-menu="handleMenu" />
-        <!--森林防火-->
-        <Fireproofing v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '森林防火'" @handle-menu="handleMenu" />
-        <!--防灾救援-->
-        <Mitigation v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防灾救援'" @handle-menu="handleMenu" />
-        <!--易涝隐患点-->
-        <PotentialFloodHazard
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
-          @handle-menu="handleMenu"
-        />
-        <!--通讯保障-->
-        <CommunicationSupport v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '通讯保障'" @handle-menu="handleMenu" />
-        <!--手机工作平台-->
-        <MobilePlatform v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
-        <!--重点车辆-->
-        <KeyVehicles v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
-        <!--卫星电话-->
-        <SatellitePhone v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
-        <!--机动无人机-->
-        <MobileUnmannedVehicle
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '机动无人机'"
-          @handle-menu="handleMenu"
-        />
-        <!--移动指挥车-->
-        <MobileCommandVehicle
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'"
-          @handle-menu="handleMenu"
-        />
-        <!--直升机-->
-        <Helicopter v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '直升机'" @handle-menu="handleMenu" />
-        <!--台风视频-->
-        <TyphoonVideo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '台风视频'" @handle-menu="handleMenu" />
-        <RescueTeam v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '救援队伍'" />
+        <template v-if="menuState.showMenu">
+          <!--图层分析-->
+          <LayerAnalysis v-if="menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
+          <!--空间分析-->
+          <SpatialAnalysis
+            v-if="menuState.menuData[menuState.activeIndex]?.name === '空间分析'"
+            :update-location="location"
+            @handle-menu="handleMenu"
+          />
+          <!--江湖河库-->
+          <Reservoir v-if="menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
+          <!--路网视频-->
+          <RoadNetworkVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
+          <!--防溺水视频-->
+          <PreventDrowning v-if="menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
+          <!--水库监测-->
+          <ReservoirMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
+          <!--河道监测-->
+          <RiverMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
+          <!--无人机-->
+          <UAV v-if="menuState.menuData[menuState.activeIndex]?.name === '无人机'" @handle-menu="handleMenu" />
+          <!--实时标绘-->
+          <OnlinePlotting v-if="menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
+          <!--定点分析-->
+          <FixedPointAnalysis v-if="menuState.menuData[menuState.activeIndex]?.name === '定点分析'" :location="location2" />
+          <!--雨情监测-->
+          <RainMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
+          <!--铁塔运行监测-->
+          <TowerStatus v-if="menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'" />
+          <!--预警信号-->
+          <WarningInfo v-if="menuState.menuData[menuState.activeIndex]?.name === '预警信号'" @handle-menu="handleMenu" />
+          <!--森林防火-->
+          <Fireproofing v-if="menuState.menuData[menuState.activeIndex]?.name === '森林防火'" @handle-menu="handleMenu" />
+          <!--森防视频-->
+          <ForestDefenseVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '森防视频'" @handle-menu="handleMenu" />
+          <!--防灾救援-->
+          <Mitigation v-if="menuState.menuData[menuState.activeIndex]?.name === '防灾救援'" @handle-menu="handleMenu" />
+          <!--易涝隐患点-->
+          <PotentialFloodHazard v-if="menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'" @handle-menu="handleMenu" />
+          <!--通讯保障-->
+          <CommunicationSupport v-if="menuState.menuData[menuState.activeIndex]?.name === '通讯保障'" @handle-menu="handleMenu" />
+          <!--手机工作平台-->
+          <MobilePlatform v-if="menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
+          <!--重点车辆-->
+          <KeyVehicles v-if="menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
+          <!--卫星电话-->
+          <SatellitePhone v-if="menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
+          <!--机动无人机-->
+          <MobileUnmannedVehicle v-if="menuState.menuData[menuState.activeIndex]?.name === '机动无人机'" @handle-menu="handleMenu" />
+          <!--移动指挥车-->
+          <MobileCommandVehicle v-if="menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'" @handle-menu="handleMenu" />
+          <!--直升机-->
+          <Helicopter v-if="menuState.menuData[menuState.activeIndex]?.name === '直升机'" @handle-menu="handleMenu" />
+          <!--台风视频-->
+          <TyphoonVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '台风视频'" @handle-menu="handleMenu" />
+          <RescueTeam v-if="menuState.menuData[menuState.activeIndex]?.name === '救援队伍'" />
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup name="rightMenu">
+import { PointType } from '@/api/globalMap/type';
 import RiverMonitor from './RiverMonitor.vue';
 import ReservoirMonitor from './ReservoirMonitor.vue';
 import RoadNetworkVideo from './RoadNetworkVideo.vue';
@@ -108,10 +104,10 @@ import OnlinePlotting from './OnlinePlotting/index.vue';
 import FixedPointAnalysis from './FixedPointAnalysis.vue';
 import UAV from './UAV.vue';
 import WarningInfo from './WarningInfo.vue';
-import { PointType } from '@/api/globalMap/type';
 import RainMonitor from './RainMonitor/index.vue';
 import PreventDrowning from './PreventDrowning.vue';
 import Fireproofing from './Fireproofing.vue';
+import ForestDefenseVideo from './ForestDefenseVideo/index.vue';
 import Mitigation from './Mitigation.vue';
 import PotentialFloodHazard from './PotentialFloodHazard.vue';
 import TowerStatus from './TowerStatus.vue';

src/views/globalMap/data/mapData.ts

@@ -4288,9 +4288,9 @@ export const iconList = {
     size: [40, 40]
   },
   '33': {
-    image: getImageUrl('31_lakes_video.png'),
-    imageHover: getImageUrl('31_lakes_video_hover.png'),
-    size: [40, 40]
+    image: getImageUrl('33_forest_defense_video.png'),
+    imageHover: getImageUrl('33_forest_defense_video_hover.png'),
+    size: [37, 40]
   },
   '34': {
     image: getImageUrl('31_lakes_video.png'),

src/views/globalMap/index.vue

@@ -165,6 +165,7 @@ const clickMenu = (item, dataList) => {
         '江湖河库',
         '防溺水',
         '森林防火',
+        '森防视频',
         '防灾救援',
         '救援队伍'
       ].includes(item.name)