图层分析标签、路网视频样式、实时标绘截图

src/components/Map/index.vue

@@ -119,6 +119,8 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
         content2 += '<div class="icon3"></div>';
         content2 += '<div class="icon4"></div>';
         content.innerHTML = content2;
+        let tableBox = document.createElement('div');
+        tableBox.className = 'table-box';
         let table = document.createElement('div');
         table.className = 'table';
         table.innerHTML = '<div class="point-item"><div class="td1">主题</div><div class="td1">名称</div></div>';
@@ -134,7 +136,8 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
           });
           table.appendChild(div);
         });
-        content.appendChild(table);
+        tableBox.appendChild(table);
+        content.appendChild(tableBox);
         let closeBtn = document.createElement('div');
         closeBtn.className = 'close';
         closeBtn.onclick = hideInfo;
@@ -218,7 +221,7 @@ const handlePointDetails = (data) => {
       div.appendChild(icon3);
       div.appendChild(icon4);
       let table = document.createElement('div');
-      table.className = 'table';
+      table.className = 'table-box';
       let content = '';
       content += '<div class="table">';
       const newData = filterTd(res.rows[0], data.dataType);
@@ -259,18 +262,19 @@ const filterTd = (obj, dataType) => {
       if (i === 2) {
         i = 0;
       }
-      if (obj[key].length > 6) {
+      const value = !!obj[key] ? obj[key] : '';
+      if (value && value.length > 6) {
         if (i === 0) {
-          data.push({ type: 'longText', data: [{ label: keyLabel, value: obj[key] }] });
+          data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
           i = 0;
         } else {
-          tempData = { type: 'longText', data: [{ label: keyLabel, value: obj[key] }] };
+          tempData = { type: 'longText', data: [{ label: keyLabel, value: value }] };
         }
       } else {
         if (i === 0) {
-          data.push({ type: 'shortText', data: [{ label: keyLabel, value: obj[key] }] });
+          data.push({ type: 'shortText', data: [{ label: keyLabel, value: value }] });
         } else {
-          data[data.length - 1].data.push({ label: keyLabel, value: obj[key] });
+          data[data.length - 1].data.push({ label: keyLabel, value: value });
         }
         i++;
         if (!!tempData && JSON.stringify(tempData) !== '{}') {

src/components/Map/map.scss

@@ -14,14 +14,17 @@ $vh_base: 2520;
   border: 4px solid #2a81fc;
   padding: 5px 15px 15px;
   width: 570px;
-  max-height: 320px;
-  overflow-y: auto;
   font-size: 16px;
   display: flex;
   flex-wrap: wrap;
   background-color: #1c294c;
   color: #d5dde3;
   position: relative;
+  .table-box {
+    max-height: 250px;
+    overflow-y: auto;
+    width: 100%;
+  }
   .table {
     border-top: 1px solid #3d66ae;
     border-right: 1px solid #3d66ae;

src/hooks/AMap/useAMap.ts

@@ -16,6 +16,9 @@ export function useAMap(options) {
     }).then((res) => {
       AMap = res;
       map = new AMap.Map('aMap', {
+        WebGLParams: {
+          preserveDrawingBuffer: true
+        },
         // 是否为3D地图模式
         viewMode: '3D',
         pitch: options.pitch,

src/types/components.d.ts

@@ -48,8 +48,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
@@ -62,7 +60,6 @@ declare module 'vue' {
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -104,6 +101,7 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -2,7 +2,13 @@
   <div class="menu-content">
     <div class="gradient-text title">图层分析</div>
     <div class="box">
-      <div v-for="(item, index) in dataList" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
+      <div
+        v-for="(item, index) in dataList"
+        :key="index"
+        :class="item.checked ? 'box-item box-item-active' : 'box-item'"
+        :title="item.name"
+        @click="handleClick(item)"
+      >
         <div class="text1">{{ item.name }}</div>
         <div class="text2">{{ item.value }}</div>
       </div>
@@ -216,7 +222,7 @@ const handleClick = (item) => {
 .menu-content {
   width: 1583px;
   height: 2105px;
-  background: url('@/assets/images/map/rightMenu/LayerAnalysis/dialog.png') no-repeat;
+  background: url('@/assets/images/map/rightMenu/layerAnalysis/dialog.png') no-repeat;
   padding: 130px 20px 20px 130px;
   font-size: 36px;
   position: relative;
@@ -234,27 +240,25 @@ const handleClick = (item) => {
   font-size: 38px;
   .box-item {
     display: flex;
-    padding-top: 35px;
-    padding-left: 105px;
+    justify-content: space-between;
+    padding: 38px 60px 0 50px;
     cursor: pointer;
-    margin-right: -180px;
-    width: 527px;
+    width: 507px;
     height: 120px;
-    background: url('@/assets/images/map/rightMenu/tag.png') no-repeat;
+    background: url('@/assets/images/map/rightMenu/layerAnalysis/tag.png') no-repeat;
     background-size: 100% 100%;
-    &:first-child {
-      margin-left: -50px;
-    }
-    &:nth-child(5n) {
-      margin-left: -50px;
-    }
     &:hover {
-      background: url('@/assets/images/map/rightMenu/tag-active.png') no-repeat;
+      background: url('@/assets/images/map/rightMenu/layerAnalysis/tagActive.png') no-repeat;
+      background-size: 100% 100%;
     }
     .text1 {
-      width: 158px;
+      flex: 1;
       font-size: 36px;
       color: #ffffff;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-right: 10px;
     }
     .text2 {
       font-family: 'BEBAS-1';
@@ -264,7 +268,8 @@ const handleClick = (item) => {
     }
   }
   .box-item-active {
-    background: url('@/assets/images/map/rightMenu/tag-active.png') no-repeat;
+    background: url('@/assets/images/map/rightMenu/layerAnalysis/tagActive.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .box2 {

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

@@ -145,6 +145,7 @@ import html2canvas from 'html2canvas';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const getDrawTool = inject('getDrawTool');
 const getMap = inject('getMap');
+const containerScale = inject('containerScale');
 const { currentState, commit, undo, history, future } = useHistory();
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/map/rightMenu/onlinePlotting/icon/${name}.png`, import.meta.url).href;
@@ -652,36 +653,32 @@ const handleShowDialog = () => {
   };
   showEdit.value = true;
 };
-
+let dataURL = ref('');
 // 页面元素转图片
 const handleScreenshot = () => {
-  const canvasBox = getMap().kv;
+  const canvasBox = getMap().Iv;
   // 手动创建一个 canvas 标签
   const canvas = document.createElement('canvas');
-
   if (canvasBox) {
     // 获取父级的宽高
-    const width = parseInt(window.getComputedStyle(canvasBox).width);
-    const height = parseInt(window.getComputedStyle(canvasBox).height);
+    const width = parseInt(window.getComputedStyle(canvasBox).width) / containerScale().scaleX;
+    const height = parseInt(window.getComputedStyle(canvasBox).height) / containerScale().scaleX;
     canvas.style.width = width + 'px';
     canvas.style.height = height + 'px';
-    const context = canvas.getContext('2d');
     const options = {
       backgroundColor: null, // 设置背景色为透明
-      canvas: canvas,
       useCORS: true, //是否尝试使用CORS从服务器加载图像，解决跨域问题
       tainttest: true, // 是否在渲染前测试图片
       logging: false // 不启动日志调试
     };
-
     // canvasBox是要截图的元素，options是一些相关配置
-    html2canvas(canvasBox, options).then((canvas) => {
+    html2canvas(canvasBox,options).then((canvas) => {
       // toDataURL 图片格式转成 base64
-      const dataURL = canvas.toDataURL('image/png');
+      dataURL.value = canvas.toDataURL('image/png');
       // 新建一个a标签
       var oA = document.createElement('a');
       oA.download = '截图'; // 设置下载的文件名
-      oA.href = dataURL;
+      oA.href = dataURL.value;
       document.body.appendChild(oA);
       oA.click(); // 模拟点击a标签
       oA.remove(); // 下载之后把创建的元素删除
@@ -887,20 +884,23 @@ onMounted(() => {
       overflow-y: auto;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
       align-content: baseline;
       .icon {
         width: 160px;
         height: 88px;
         margin-bottom: 20px;
       }
+      .tab {
+        &:nth-child(3n-1) {
+          margin: 40px 50px 0;
+        }
+      }
     }
     .tab {
       width: 333px;
       height: 235px;
       background: url('@/assets/images/map/rightMenu/onlinePlotting/box2.png') no-repeat;
       padding: 27px;
-      margin-right: 8px;
       cursor: pointer;
       position: relative;
       font-size: 38px;

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -11,20 +11,17 @@
         <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div>类型</div>
-    <div class="custom-table">
-      <div class="th">
-        <div class="td">
-          <el-checkbox-group v-model="queryParams.type" size="large">
-            <el-checkbox v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" >
-              {{ item.label }}
-            </el-checkbox>
-          </el-checkbox-group>
-          <div class="btn" @click="initData">确定</div>
-        </div>
+    <div class="title-box">
+      <div class="gradient-text">类型</div>
+    </div>
+    <div class="box">
+      <div v-for="(item, index) in options" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
+        <div class="text1">{{ item.label }}</div>
       </div>
     </div>
-    <div>视频类型</div>
+    <div class="title-box">
+      <div class="gradient-text">视频类型</div>
+    </div>
     <div class="custom-table">
       <div class="th">
         <div class="td">
@@ -72,21 +69,16 @@ const queryParams = reactive({
 });
 let total = ref(0);
 const options = reactive([
-  { label: '检测站', value: '检测站' },
-  { label: '收费站', value: '收费站' },
-  { label: '高速公路', value: '高速公路' },
-  { label: '国道', value: '国道' },
-  { label: '省市县际道路', value: '省市县际道路' },
-  { label: '高速服务区', value: '高速服务区' }
+  { label: '检测站', value: '检测站', checked: true },
+  { label: '收费站', value: '收费站', checked: true },
+  { label: '高速公路', value: '高速公路', checked: true },
+  { label: '国道', value: '国道', checked: true },
+  { label: '省市县际道路', value: '省市县际道路', checked: true },
+  { label: '高速服务区', value: '高速服务区', checked: true }
 ]);
 const listData = ref([]);
 
 let showDialog = ref(false);
-// 请求参数
-const queryParams2 = reactive({
-  current: 1,
-  size: 1
-});
 let videoMonitorData = ref({});
 const handleShowDialog = (row) => {
   showDialog.value = false;
@@ -108,6 +100,21 @@ const initData = () => {
     total.value = res.total;
   });
 };
+const handleCancel = () => {
+  queryParams.keyword = '';
+  initData();
+};
+const handleClick = (item) => {
+  item.checked = !item.checked;
+  let type = [];
+  options.forEach((item) => {
+    if (!!item.checked) {
+      type.push(item.value);
+    }
+  });
+  queryParams.type = type.toString();
+  initData();
+};
 initData();
 </script>
 
@@ -141,7 +148,6 @@ initData();
     display: flex;
   }
   .tr {
-
     height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     //margin-left: -23px;
@@ -195,4 +201,60 @@ initData();
     margin-left: 20px;
   }
 }
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 38px;
+  .box-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 35px 200px 0 105px;
+    cursor: pointer;
+    width: 527px;
+    height: 120px;
+    background: url('@/assets/images/map/rightMenu/tag.png') no-repeat;
+    background-size: 100% 100%;
+    margin-left: -180px;
+    &:nth-child(1),
+    &:nth-child(5) {
+      margin-left: -30px;
+    }
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .text1 {
+      flex: 1;
+      font-size: 36px;
+      color: #ffffff;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .text2 {
+      font-family: 'BEBAS-1';
+      margin-left: 25px;
+      font-size: 38px;
+      color: #00e8ff;
+    }
+  }
+  .box-item-active {
+    background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.title-box {
+  width: 370px;
+  height: 35px;
+  background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  padding-left: 50px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  .gradient-text {
+    font-size: 44px;
+  }
+}
 </style>

src/views/globalMap/RightMenu/echartOptions.ts

@@ -1,7 +1,7 @@
 import { graphic } from 'echarts';
 import pieIcon from '@/assets/images/map/rightMenu/pie-icon.png';
 import pieBg from '@/assets/images/map/rightMenu/pie-bg.png';
-import dotImg from '@/assets/images/map/rightMenu/LayerAnalysis/dot.png';
+import dotImg from '@/assets/images/map/rightMenu/layerAnalysis/dot.png';
 // 降雨过程实况
 export const option1 = {
   xAxis: {