粤政图切换

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 应急指挥一张图
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = '/api'
+VITE_APP_BASE_API = '/dev-api'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

src/components/Dialog/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div v-if="modelValue" class="dialog-wrap">
     <div class="overlay" @click="closeDialog"></div>
-    <div class="dialog">
+    <div class="dialog" :style="{ height: height }">
       <div class="dialog-header">
         <div class="dialog-title">{{ title }}</div>
         <div class="icon-close" @click="closeDialog">
           <el-icon size="100px"><Close /></el-icon>
         </div>
       </div>
+      <div class="dialog-content">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -16,6 +19,7 @@
 interface Props {
   modelValue: boolean;
   title?: string;
+  height?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false

src/components/Map/index2.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="map-container">
+    <div id="yztMap" class="map-container"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import WMTSManager from "@/utils/wmtsManager";
+
+interface Props {
+  center?: number[];
+  zoom?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  activeMap: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  center: [110.93154257997, 21.669064031332],
+  zoom: 11,
+  minZoom: 6,
+  maxZoom: 16
+});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+let map, wmtsManager, wmtslayergroup;
+
+// 初始化事件
+const initMapEvent = () => {
+  const simple = {
+    version: 8,
+    sources: {},
+    layers: []
+  };
+  const wgs84_wgs84_mapcrs = {
+    topTileExtent: [-180, -270, 180, 90],
+    coordtransform: 'none',
+    tileSize: 256
+  };
+  map = new GeoGlobe.Map({
+    mapCRS: wgs84_wgs84_mapcrs,
+    style: simple,
+    maxZoom: props.maxZoom,
+    zoom: props.zoom,
+    minZoom: props.minZoom,
+    center: props.center,
+    container: 'yztMap'
+  });
+  // style加载完成
+  map.on('style.load', function (e) {
+    const token = '3e25b8af23f8d5194175220fe67fe941';
+    const layer_vtc = new GeoGlobe.TDTLayer('vec_c', token);
+    const layer_cva = new GeoGlobe.TDTLayer('cva_c', token);
+    layer_vtc.metadata = { group: 'basemap' };
+    layer_cva.metadata = { group: 'basemap' };
+    map.addLayer(layer_vtc);
+    map.addLayer(layer_cva);
+    if (props.activeMap !== 'vectorgraph') {
+      removeLayers();
+      switchMap(props.activeMap);
+    }
+  });
+};
+// 切换地图
+const switchMap = (type) => {
+  let queryParamsArr = [];
+  if (type === 'satellite2') {
+    queryParamsArr = [
+      {
+        serviceCode: 'YZT1715739306532'
+      },
+      {
+        serviceCode: 'YZT1695608158269',
+        REQUEST: 'GetCapabilities'
+      }
+    ];
+  }
+  if (!wmtsManager) {
+    wmtsManager = new WMTSManager(map);
+    wmtsManager.init();
+  }
+  wmtsManager.addWmtsLayers(queryParamsArr, (res) => {});
+};
+
+// 清除图层
+const removeLayers = () => {
+  if (wmtsManager) {
+    wmtsManager.removeWmtsLayers();
+  }
+};
+
+// 加载事件
+onMounted(() => {
+  initMapEvent();
+});
+</script>
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .btn {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+  }
+}
+</style>

src/views/globalMap/SwitchMapTool.vue

@@ -17,11 +17,11 @@
           <div :class="activeMap === 'satellite' ? 'item-text bg-active' : 'item-text'">卫星地图</div>
         </div>
       </div>
-<!--      <div v-if="open || (!open && activeMap === 'satellite2')" class="switch-item" @click="selectItem('satellite2')">-->
-<!--        <div class="item-bg">-->
-<!--          <div :class="activeMap === 'satellite2' ? 'item-text bg-active' : 'item-text'">电子影像地图</div>-->
-<!--        </div>-->
-<!--      </div>-->
+      <div v-if="open || (!open && activeMap === 'satellite2')" class="switch-item" @click="selectItem('satellite2')">
+        <div class="item-bg">
+          <div :class="activeMap === 'satellite2' ? 'item-text bg-active' : 'item-text'">粤政图</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/views/globalMap/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="global-map">
     <MapLogical v-if="activeMap === 'logical'" :mapData="mapData" />
+    <YMap v-else-if="activeMap === 'satellite2'" :activeMap="activeMap" />
     <Map v-else ref="mapRef" :activeMap="activeMap" />
     <!--左侧菜单-->
     <LeftMenu @addMarkers="addMarkers" style="position: absolute; top: 20px; left: 20px" />
@@ -13,6 +14,7 @@
 
 <script lang="ts" setup>
 import Map from '@/components/Map/index.vue';
+import YMap from '@/components/Map/index2.vue';
 import MapLogical from '@/components/Map/MapLogical.vue';
 import { logicalData } from './data/mapData';
 import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';

src/views/routineCommandMap/RightSection.vue

@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-header">
         <div>视频监控</div>
-        <div class="more" @click="showvideoMonitorList">查看更多</div>
+        <div class="more" @click="showVideoMonitorList">查看更多</div>
       </div>
       <div class="card-content video-list">
         <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box">
@@ -49,10 +49,12 @@
     </div>
   </div>
   <!--视频弹窗-->
-  <Dialog v-model="videoMonitorState.showDetailDialog" :title="videoMonitorState.detailData.label" width="70%">
-<!--    <HKVideo :url="videoMonitorState.detailData.url" />-->
+<!--  <Dialog v-model="videoMonitorState.showDetailDialog" :title="videoMonitorState.detailData.label" width="70%">-->
+<!--&lt;!&ndash;    <HKVideo :url="videoMonitorState.detailData.url" />&ndash;&gt;-->
+<!--  </Dialog>-->
+  <Dialog v-model="videoMonitorState.showListDialog" title="视频监控">
+    <videoList />
   </Dialog>
-  <Dialog v-model="videoMonitorState.showListDialog" title="视频监控列表" width="70%"></Dialog>
   <!--预案管理弹窗-->
   <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%"></Dialog>
   <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
@@ -63,6 +65,7 @@
 
 <script lang="ts" setup>
 import Dialog from '@/components/Dialog/index.vue';
+import videoList from '@/views/videoList/index.vue';
 import HKVideo from '@/components/HKVideo/index.vue';
 
 // 视频监控
@@ -73,7 +76,7 @@ const videoMonitorState = reactive({
   detailData: { label: '', url: '' }
 });
 // 显示视频列表
-const showvideoMonitorList = () => {
+const showVideoMonitorList = () => {
   videoMonitorState.showListDialog = true;
 };
 // 显示视频弹窗
@@ -243,6 +246,11 @@ onMounted(() => {
   .video-box {
     width: 723px;
     margin-right: 46px;
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      margin-bottom: 15px;
+    }
     &:nth-child(3),
     &:nth-child(6) {
       margin-right: 0;

src/views/routineCommandMap/index.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="videoList">
 import LeftSection from './LeftSection.vue';
 import RightSection from './RightSection.vue';
 import MiddleSection from './MiddleSection.vue';

src/views/videoList/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div class="form">
+      <el-button type="primary">编辑首页视频</el-button>
+      <div class="form-right">
+        <el-form ref="queryFormRef" :model="formState.queryParams" :inline="true">
+          <el-form-item label="实景视频" prop="videoType">
+            <el-select v-model="formState.queryParams.videoType" placeholder="请选择" clearable>
+              <el-option v-for="dict in formState.options" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="name">
+            <el-input v-model="formState.queryParams.name" placeholder="请输入摄像头名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="video-list">
+      <div v-for="(item, index) in formState.listData" :key="index" class="video-box">
+        <div class="video-header">
+          <span>{{ item.label }}</span>
+          <span>{{ item.time }}</span>
+        </div>
+        <div class="video-content">
+          <div v-if="item.checked" class="tip-text">首页展示</div>
+          <video :src="item.url" controls muted style="width: 100%; height: 100%;background: #000;" />
+        </div>
+      </div>
+    </div>
+    <div style="width: 100%;display: flex;justify-content: center;">
+      <pagination
+        :total="formState.total"
+        :page="formState.queryParams.page"
+        :limit="formState.queryParams.limit"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const queryFormRef = ref<ElFormInstance>();
+const formState = reactive({
+  queryParams: {
+    videoType: '',
+    name: '',
+    page: 1,
+    limit: 10
+  },
+  total: 100,
+  options: [
+    { label: '全景视频', value: '1' },
+    { label: '普通视频', value: '2' }
+  ],
+  listData: [],
+  activeIds: []
+});
+
+const getList = () => {
+  const listData = [
+    { id: 1, label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 2, label: '摄像头二', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 3, label: '摄像头三', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 4, label: '摄像头四', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 5, label: '摄像头五', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 6, label: '摄像头六', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 7, label: '摄像头七', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 8, label: '摄像头八', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 9, label: '摄像头九', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 10, label: '摄像头十', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' }
+  ];
+  formState.activeIds = [1, 2, 3, 4, 6, 7];
+  listData.forEach((item) => {
+    const index = formState.activeIds.findIndex((item2) => item2 === item.id);
+    item.checked = index > -1;
+  });
+  formState.listData = listData;
+};
+
+const handleQuery = () => {
+
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.form {
+  display: flex;
+  justify-content: space-between;
+}
+.video-list {
+  display: flex;
+  flex-wrap: wrap;
+  .video-box {
+    width: 943px;
+    margin-right: 46px;
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3),
+    &:nth-child(4),
+    &:nth-child(5) {
+      margin-bottom: 15px;
+    }
+    &:nth-child(5),
+    &:nth-child(10) {
+      margin-right: 0;
+    }
+  }
+}
+.video-box {
+  cursor: pointer;
+  .video-header {
+    background-color: #7f7f7f;
+    padding: 0 10px;
+    font-size: 30px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .video-content {
+    padding: 15px;
+    background-color: #ccc;
+    height: 600px;
+    position: relative;
+    .tip-text {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #ec808d;
+      color: #fff;
+      font-size: 32px;
+      padding: 15px 40px;
+    }
+  }
+}
+</style>