Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/components/MapboxMaps/MapComponent.vue

@@ -138,6 +138,9 @@
     import { getAppEnvConfig } from '@/utils/env';
 
     import { message, Modal } from 'ant-design-vue'
+    import { useCloudQueryStore } from '@/store/modules/cloudquery';
+
+    const useCloudQuery = useCloudQueryStore();
 
     const { VITE_GLOB_API_URL } = getAppEnvConfig();
     const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL+"/");
@@ -1234,7 +1237,13 @@
 
     }
     const initiateCloudQuery = () => {
-      console.log('aaa props.geomsList',props.geomsList)
+      if(useCloudQuery.getIdentification){
+        message.warning('已有云查询运行，不能再次提交')
+      }else{
+        // TODO 发起云查询
+        console.log('aaa props.geomsList',props.geomsList)
+        useCloudQuery.setIdentification(true);
+      }
     }
 
 

src/views/demo/tiankongdi/changearea/MapList/index.vue

@@ -286,7 +286,7 @@
       @cancel="showSplitPolygon = false"
     >
       <div class="modal-content" > 
-        <SplitPolygonModal v-if="showSplitPolygon" :showInfoData="showInfoData"  @closeModal="handlerSplitComplete"/>
+        <SplitPolygonModal  :showInfoData="showInfoData"  @closeModal="handlerSplitComplete"/>
       </div>
     </a-modal>
 
@@ -437,6 +437,7 @@ onMounted(() => {
   getInfoList();
 });
 
+const showSplitPolygon = ref(false);
 
 function handlerSplitComplete(){
   showSplitPolygon.value=false;
@@ -462,7 +463,6 @@ const getCollectList = () => {
   }
   getInfoList();
 };
-const showSplitPolygon = ref(false);
 const handlerRevertPolygon = (item)=>{
   Modal.confirm({
     title:'是否确认还原分割图斑?',
@@ -496,7 +496,6 @@ const handlerSplitPolygon = (item) => {
     }else{
       message.error("数据为空");
     }
-
   })
 }
 const dataListSort = (type) => {

src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue

@@ -6,12 +6,12 @@
         <MapboxMap
           :geomsList="geomsList"
           :mapConfig="mapConfig"
-          @handlerDrawComplete="handlerDrawComplete"
           @handlerSplitPolygon="handlerSplitPolygon"
           @mapOnLoad="onMapboxLoad"
           :splitPlugin="true"
           @onFeatureClick="onFeatureClick"
           ref="MapboxComponent"
+          v-if="mapshow"
         />
       </div>
 
@@ -62,7 +62,7 @@
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
-            <a-descriptions-item label="接收时间">{{ jieshou_time.split('.')[0] }}</a-descriptions-item>
+            <a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
             </a-descriptions>
           </a-tab-pane>
           <a-tab-pane key="2" v-if="!['建设用地','推堆土'].includes(typename)" tab="线索填报" force-render>
@@ -489,6 +489,10 @@
   const activeKey = ref('1');
   const geomsList = ref()
 
+  const mapshow = ref<Boolean>(false);
+    onMounted(()=>{
+      mapshow.value = true
+    })
   const {
     id,
     case_no,
@@ -652,9 +656,6 @@
     return label;
   };
   function changeTask() {
-
-    
-
     if (props.showInfoData.geomid) {
       let getGeomPrams = {
         TableName: "drone_shp_data",
@@ -664,7 +665,6 @@
         limit: 999,
         key: null,
       };
-
       getGeom(getGeomPrams).then((res) => {
         let geoms = [];
         if (res) {

src/views/sys/exception/Exception.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="statistical" id="bg-pan">
-    <Header ></Header>
+    <Header></Header>
-    <div id="alertOverlay" class="alert-active" ref="alertOverlay" >
+    <div id="alertOverlay" class="alert-active" ref="alertOverlay">
       <div></div>
     </div>
-    
+
-    <Map style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 0px);width:100%;z-index:0;" ref="MapboxComponent"></Map>
+    <Map
+      style="
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: calc(100vh - 0px);
+        width: 100%;
+        z-index: 0;
+      "
+      ref="MapboxComponent"
+    ></Map>
 
     <div class="statistical-left">
       <img
@@ -18,60 +28,54 @@
           left: '0px',
         }"
       />
-      <layerButton
+      <layerButton id="layerButton" @handlerLayerChange="handlerLayerChange" />
-        id="layerButton"
-        @handlerLayerChange="handlerLayerChange"
-      />
       <statisticalType
         id="statisticalType"
         @handlerChangePolygonType="handlerChangePolygonType"
-        :bi="bi"
         :style="{
           position: 'absolute',
           bottom: '-10px',
           left: '48px',
           height: '180px',
-          'z-index':'8'
+          'z-index': '8',
         }"
       />
       <county
         id="county"
         @countyClick="countyClick"
-        :bi="bi"
         :style="{
           position: 'absolute',
           bottom: '-3px',
-          left: '320px',
+          left: '520px',
-          'z-index':'8'
+          'z-index': '8',
         }"
       />
     </div>
-    
-    <DataScreen :countyId="countyId" :currentCounty="currentCounty" @changeLandType="changeLandType"/>
-    
 
+    <DataScreen
+      :countyId="countyId"
+      :currentCounty="currentCounty"
+      @changeLandType="changeLandType"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, onUnmounted, computed, watchEffect } from 'vue';
+  import { ref, onMounted, onUnmounted, computed } from 'vue';
   import Map from './LargeScreenMap/index.vue';
   import layerButton from './mapComponent/left_layerButton.vue';
   import statisticalType from './mapComponent/left_statisticalType.vue';
   import county from './mapComponent/left_county.vue';
-  import DataScreen from './dataScreen/index.vue'
+  import DataScreen from './dataScreen/index.vue';
-  import Header from './mapComponent/top_title.vue'
+  import Header from './mapComponent/top_title.vue';
-  import axios from 'axios';
-  import dayjs from 'dayjs';
 
   //
   const MapboxComponent = ref();
   const countyId = ref();
 
-  
   // 控制图层
-  function handlerLayerChange(type:number){
+  function handlerLayerChange(type: number) {
-    switch(type){
+    switch (type) {
       case 1:
         MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', true);
         MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', true);
@@ -113,66 +117,10 @@
     MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
   }
 
-
   // 切换图斑类型
-  function changeLandType(type):void{
+  function changeLandType(type): void {
-    MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], "",type);
+    MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], '', type);
   }
-
-  // 等比例放大缩小
-  let layerSiderWidth = 210;
-  const viewportWidth = ref(window.innerWidth - layerSiderWidth);
-  const referenceWidth = ref(window.innerWidth - 210);
-  const updateWindowSize = () => {
-    setTimeout(() => {
-      let layerSiderElement: any = document.querySelector('.ant-layout-sider-children');
-      layerSiderWidth = layerSiderElement?.offsetWidth ? layerSiderElement?.offsetWidth : 0;
-      referenceWidth.value = 1920 - 210;
-      let layerElement: any = document.querySelector('.ant-tabs-nav');
-      viewportWidth.value = layerElement?.offsetWidth;
-    }, 100);
-  };
-
-  const bi = computed(() => {
-    return viewportWidth.value / referenceWidth.value;
-  });
-  
-  // 时间和天气
-  const currentTime = ref(dayjs().format('YYYY年M月D日 ddd HH:mm:ss'));
-  const Weather = ref('');
-  function getWeather() {
-    // http://www.tianqiapi.com/index/doc?version=v63
-    // 若次数试用用尽，注册账号后，切换appid和appsecret即可
-    axios({
-        method:"get",
-        url:`http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
-    }).then(res => {
-      Weather.value = res.data.wea;
-
-    })
-  }
-  function updateTime() {
-    currentTime.value = dayjs().format('YYYY年M月D日 ddd HH:mm');
-  }
-
-  // 监听每一秒更新时间
-  watchEffect(() => {
-    const intervalId = setInterval(updateTime, 1000);
-    // 清除定时器
-    onUnmounted(() => clearInterval(intervalId));
-  });
-
-  onMounted(() => {
-    getWeather();
-    window.addEventListener('resize', updateWindowSize);
-    updateWindowSize();
-  });
-  
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateWindowSize);
-    updateTime();
-  });
-
 </script>
 
 <style lang="less" scoped>
@@ -185,79 +133,78 @@
     user-select: none;
   }
 
-  #bg-pan{
+  #bg-pan {
-
   }
-#alertOverlay::before,#alertOverlay::after {
+  #alertOverlay::before,
-  content: "";
+  #alertOverlay::after {
-  position: absolute;
+    content: '';
-  width: 50px;
+    position: absolute;
-  height: 100%;
+    width: 50px;
-}
+    height: 100%;
-
-#alertOverlay  div::before,#alertOverlay  div::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 50px;
-}
-
-#alertOverlay::before {
-  background: linear-gradient(to right, rgba(0, 0, 0,0.8), transparent);
-  top: 0;
-  left: 0;
-  transform: rotate(0deg);
-}
-
-#alertOverlay::after {
-  background: linear-gradient(to left, rgba(0, 0, 0,0.8), transparent);
-  top: 0%;
-  left: 100%;
-  transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
-}
-
-#alertOverlay div::before {
-  background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
-  top: 0;
-  left: 0;
-  transform: rotate(180deg);
-}
-
-#alertOverlay div::after {
-  background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
-  top: 100%;
-  left: 0;
-  transform: rotate(0deg) translate(0px, calc(-1 * 50px));
-}
-
-#alertOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  opacity: 1;
-  transition: opacity 0.5s;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.alert-active{
-  animation: blink 0s infinite;
-}
-
-@keyframes blink {
-  0% {
-    opacity: 0;
   }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 0;
-  }
-}
 
+  #alertOverlay div::before,
+  #alertOverlay div::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 50px;
+  }
 
-</style>
+  #alertOverlay::before {
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
+    top: 0;
+    left: 0;
+    transform: rotate(0deg);
+  }
+
+  #alertOverlay::after {
+    background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
+    top: 0%;
+    left: 100%;
+    transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
+  }
+
+  #alertOverlay div::before {
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+    top: 0;
+    left: 0;
+    transform: rotate(180deg);
+  }
+
+  #alertOverlay div::after {
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+    top: 100%;
+    left: 0;
+    transform: rotate(0deg) translate(0px, calc(-1 * 50px));
+  }
+
+  #alertOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    opacity: 1;
+    transition: opacity 0.5s;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .alert-active {
+    animation: blink 0s infinite;
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+</style>

src/views/sys/exception/mapComponent/left_county.vue

@@ -1,78 +1,30 @@
 <template>
   <div class="county">
-    <div
+    <div class="county_div">
-      class="county_div"
+      <img class="county_div_leftButton" :src="scrollImgLeft" @click="scrollToElement('left')" />
-      :style="{
-        width: `${840 * props.bi}px`,
-        bottom: `${10 * props.bi}px`,
-      }"
-    >
-      <img
-        class="county_div_leftButton"
-        :src="scrollImgLeft"
-        :style="{
-          top: `${42 * props.bi}px`,
-          left: `${-4 * props.bi}px`,
-          height: `${31 * props.bi}px`,
-          width: `${31 * props.bi}px`,
-        }"
-        @click="scrollToElement('left')"
-      />
       <div ref="countyList" class="county_div_list">
-        <div
+        <div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
-          v-for="item in list"
+          <span v-if="!item.isClick" class="county_div_list_span_nochoose">{{ item.name }}</span>
-          :key="item.id"
-          :id="item.id"
-          :style="{
-            width: `${770 * props.bi}px`,
-          }"
-          @click="clickCounty(item)"
-        >
-          <span
-            :style="{
-              top: `${20 * props.bi}px`,
-              width: `${110 * props.bi}px`,
-            }"
-            >{{ item.name }}</span
-          >
           <img
             class="county_div_list_nochoose"
             v-if="!item.isClick"
             src="/statistical/left_county_nochoose.png"
-            :style="{
-              top: `${-7 * props.bi}px`,
-              width: `${87 * props.bi}px`,
-              marginLeft: `${11.5 * props.bi}px`,
-              marginRight: `${11.5 * props.bi}px`,
-            }"
           />
+          <span v-if="item.isClick" class="county_div_list_span_choose">{{ item.name }}</span>
           <img
             class="county_div_list_choose"
             v-if="item.isClick"
             src="/statistical/left_county_choose.png"
-            :style="{
-              width: `${110 * props.bi}px`,
-            }"
           />
         </div>
       </div>
-      <img
+      <img class="county_div_rightButton" :src="scrollImgRight" @click="scrollToElement('right')" />
-        class="county_div_rightButton"
-        :src="scrollImgRight"
-        :style="{
-          top: `${42 * props.bi}px`,
-          left: `${4 * props.bi}px`,
-          height: `${31 * props.bi}px`,
-          width: `${31 * props.bi}px`,
-        }"
-        @click="scrollToElement('right')"
-      />
     </div>
     <div>
       <img
         src="/statistical/left_decorative_bottom.png"
         :style="{
-          width: `${840 * props.bi}px`,
+          width: '840px',
         }"
       />
     </div>
@@ -95,17 +47,17 @@
   const scrollToElement = async (type) => {
     if (countyList.value) {
       if (type == 'left') {
-        countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth * props.bi;
+        countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth;
       }
       if (type == 'right') {
-        countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth * props.bi;
+        countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth;
       }
       if (countyList.value.scrollLeft == 0) {
         scrollImgLeft.value = '/statistical/left_direction_left1.png';
       } else {
         scrollImgLeft.value = '/statistical/left_direction_left2.png';
       }
-      if (countyList.value.scrollLeft > 7 * countyWidth * props.bi) {
+      if (countyList.value.scrollLeft > 7 * countyWidth) {
         scrollImgRight.value = '/statistical/left_direction_right1.png';
       } else {
         scrollImgRight.value = '/statistical/left_direction_right2.png';
@@ -125,7 +77,6 @@
     emit('countyClick', record);
   }
 
-
   // 初始数据
   const list = ref();
   async function getOptions() {
@@ -137,12 +88,11 @@
     });
     list.value = data;
     let linyishi = {
-      id:"",
+      id: '',
-      name:"临沂市"
+      name: '临沂市',
     };
-    list.value.unshift(linyishi)
+    list.value.unshift(linyishi);
     clickCounty(linyishi);
-
   }
 
   onMounted(() => {
@@ -157,27 +107,27 @@
     &_div {
       display: flex;
       position: relative;
-      // width: 840 * bi px;
+      width: 840px;
-      // bottom: 10 * bi px;
+      bottom: 10px;
 
       &_leftButton {
         position: relative;
-        // top: 42 * bi px;
+        top: 42px;
-        // left: -4 * bi px;
+        left: -4px;
-        // height: 31 * bi px;
+        height: 31px;
-        // width: 31 * bi px;
+        width: 31px;
       }
 
       &_list {
         display: flex;
         overflow: hidden;
-        // width: 770 * bi px;
+        width: 770px;
 
-        span {
+        &_span_nochoose {
           position: relative;
-          // top: 20 * bi px;
+          top: 30px;
-          // width: 110 * bi px;
+          width: 110px;
-          z-index:999;
+          z-index: 999;
           display: inline-flex;
           align-items: center;
           text-align: center;
@@ -196,24 +146,39 @@
 
         &_nochoose {
           position: relative;
-          // top: -7 * bi px;
+          top: -7px;
-          // width: 87 * bi px;
+          width: 87px;
-          // margin-left: 11.5 * bi px;
+          margin-left: 11.5px;
-          // margin-right: 11.5 * bi px;
+          margin-right: 11.5px;
+        }
+
+        &_span_choose {
+          position: relative;
+          top: 30px;
+          width: 110px;
+          z-index: 999;
+          display: inline-flex;
+          align-items: center;
+          text-align: center;
+          justify-content: center;
+          font-family: Alibaba PuHuiTi;
+          font-weight: bold;
+          font-size: 14px;
+          color: #014ce2;
         }
 
         &_choose {
           position: relative;
-          // width: 110 * bi px;
+          width: 110px;
         }
       }
 
       &_rightButton {
         position: relative;
-        // top: 42 * bi px;
+        top: 42px;
-        // left: 4 * bi px;
+        left: 4px;
-        // height: 31 * bi px;
+        height: 31px;
-        // width: 31 * bi px;
+        width: 31px;
       }
     }
   }

src/views/sys/exception/mapComponent/left_layerButton.vue

@@ -3,45 +3,41 @@
     <div
       class="layerbutton_div"
       :style="{
-        marginBottom: `${15 * props.bi}px`,
+        marginBottom: '15px',
       }"
     >
       <img
         id="left_layerButton_1"
-        :src="button_1 ? '/statistical/layer-btn1-active.png':'/statistical/layer-btn1.png'"
+        :src="button_1 ? '/statistical/layer-btn1-active.png' : '/statistical/layer-btn1.png'"
         @click="handlerLayerChange(1)"
       />
     </div>
     <div class="layerbutton_div">
       <img
         id="left_layerButton_2"
-        :src="button_2 ? '/statistical/layer-btn2-active.png':'/statistical/layer-btn2.png'"
+        :src="button_2 ? '/statistical/layer-btn2-active.png' : '/statistical/layer-btn2.png'"
         @click="handlerLayerChange(2)"
       />
     </div>
     <div class="layerbutton_div">
       <img
         id="left_layerButton_2"
-        :src="button_3 ? '/statistical/layer-btn3-active.png':'/statistical/layer-btn3.png'"
+        :src="button_3 ? '/statistical/layer-btn3-active.png' : '/statistical/layer-btn3.png'"
         @click="handlerLayerChange(3)"
       />
     </div>
-
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, defineEmits, defineProps } from 'vue';
   // emit
   const emit = defineEmits(['handlerLayerChange']);
-
-  const props = defineProps(['bi']);
-
   const button_1 = ref(false);
   const button_2 = ref(true);
   const button_3 = ref(false);
   // 控制图层
-  function handlerLayerChange(type:number){
+  function handlerLayerChange(type: number) {
-    switch(type){
+    switch (type) {
       case 1:
         button_1.value = true;
         button_2.value = false;
@@ -58,22 +54,20 @@
         button_3.value = true;
         break;
     }
-    emit("handlerLayerChange",type);
+    emit('handlerLayerChange', type);
-
   }
-
 </script>
 
 <style lang="less" scoped>
   .layerbutton {
-    position:absolute;
+    position: absolute;
-    top:130px;
+    top: 130px;
-    left:60px;
+    left: 60px;
-    .layerbutton_div{
+    .layerbutton_div {
-      margin-bottom:14px;
+      margin-bottom: 14px;
-      cursor:pointer;
+      cursor: pointer;
-      img{
+      img {
-        width:60px;
+        width: 60px;
       }
     }
   }

src/views/sys/exception/mapComponent/left_statisticalType.vue

@@ -1,138 +1,31 @@
 <template>
   <div class="statistical">
-    <img
+    <img src="/statistical/left_statistical.png" />
-      src="/statistical/left_statistical.png"
+    <div class="statistical_div">
-      :style="{
-        height: `${100 * props.bi}px`,
-        width: `${200 * props.bi}px`,
-      }"
-    />
-    <div
-      class="statistical_div"
-      :style="{
-        top: `${-75 * props.bi}px`,
-        left: `${30 * props.bi}px`,
-      }"
-    >
       <a-row>
         <a-col :span="10" @click="handlerChangePolygonType('违法')">
-          <span
+          <span class="statistical_div_dot" style="background: #fda1a1" />
-            class="statistical_div_dot"
+          <span class="statistical_div_span"> 违法 </span>
-            :style="{
-              background: '#fda1a1',
-              width: `${5 * props.bi}px`,
-              height: `${5 * props.bi}px`,
-              left: `${-5 * props.bi}px`,
-              top: `${-2 * props.bi}px`,
-              marginRight: `${5 * props.bi}px`,
-              marginBottom: `${20 * props.bi}px`,
-            }"
-          />
-          <span
-            class="statistical_div_span"
-            :style="{
-              top: `${-20 * props.bi}px`,
-              fontSize: `${13 * props.bi}px`,
-            }"
-          >
-            违法
-          </span>
         </a-col>
         <a-col :span="10" @click="handlerChangePolygonType('补办手续')">
-          <span
+          <span class="statistical_div_dot" style="background: #abfcff" />
-            class="statistical_div_dot"
+          <span class="statistical_div_span"> 补办手续 </span>
-            :style="{
-              background: '#abfcff',
-              width: `${5 * props.bi}px`,
-              height: `${5 * props.bi}px`,
-              left: `${-5 * props.bi}px`,
-              top: `${-2 * props.bi}px`,
-              marginRight: `${5 * props.bi}px`,
-              marginBottom: `${20 * props.bi}px`,
-            }"
-          />
-          <span
-            class="statistical_div_span"
-            :style="{
-              top: `${-20 * props.bi}px`,
-              fontSize: `${13 * props.bi}px`,
-            }"
-          >
-            补办手续
-          </span>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="10" @click="handlerChangePolygonType('合法')">
-          <span
+          <span class="statistical_div_dot" style="background: #ffecb9" />
-            class="statistical_div_dot"
+          <span class="statistical_div_span"> 合法 </span>
-            :style="{
-              background: '#ffecb9',
-              width: `${5 * props.bi}px`,
-              height: `${5 * props.bi}px`,
-              left: `${-5 * props.bi}px`,
-              top: `${-2 * props.bi}px`,
-              marginRight: `${5 * props.bi}px`,
-              marginBottom: `${20 * props.bi}px`,
-            }"
-          />
-          <span
-            class="statistical_div_span"
-            :style="{
-              top: `${-20 * props.bi}px`,
-              fontSize: `${13 * props.bi}px`,
-            }"
-          >
-            合法
-          </span>
         </a-col>
         <a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
-          <span
+          <span class="statistical_div_dot" style="background: #c2b3fb" />
-            class="statistical_div_dot"
+          <span class="statistical_div_span"> 拆除复耕 </span>
-            :style="{
-              background: '#c2b3fb',
-              width: `${5 * props.bi}px`,
-              height: `${5 * props.bi}px`,
-              left: `${-5 * props.bi}px`,
-              top: `${-2 * props.bi}px`,
-              marginRight: `${5 * props.bi}px`,
-              marginBottom: `${20 * props.bi}px`,
-            }"
-          />
-          <span
-            class="statistical_div_span"
-            :style="{
-              top: `${-20 * props.bi}px`,
-              fontSize: `${13 * props.bi}px`,
-            }"
-          >
-            拆除复耕
-          </span>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="10" @click="handlerChangePolygonType('其他')">
-          <span
+          <span class="statistical_div_dot" style="background: #c7ffbc" />
-            class="statistical_div_dot"
+          <span class="statistical_div_span"> 其他 </span>
-            :style="{
-              background: '#c7ffbc',
-              width: `${5 * props.bi}px`,
-              height: `${5 * props.bi}px`,
-              left: `${-5 * props.bi}px`,
-              top: `${-2 * props.bi}px`,
-              marginRight: `${5 * props.bi}px`,
-              marginBottom: `${20 * props.bi}px`,
-            }"
-          />
-          <span
-            class="statistical_div_span"
-            :style="{
-              top: `${-20 * props.bi}px`,
-              fontSize: `${13 * props.bi}px`,
-            }"
-          >
-            其他
-          </span>
         </a-col>
       </a-row>
     </div>
@@ -155,6 +48,8 @@
 
     img {
       position: relative;
+      height: 100px;
+      width: 200px;
     }
 
     &_div {

src/views/sys/exception/mapComponent/top_title.vue

@@ -1,9 +1,14 @@
 <template>
     <div class="screen-header-container">
-
         <div class="screen-title">
+
             <img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
-        <div class="left-category-container">
+          <span class="screen-currentTime"> 
+            <span class="time">{{ currentTime }}</span>
+              <span class="separator"></span>
+                <span class="weather">{{ Weather }}</span>
+                </span>
+                <div class="left-category-container">
             <div class="category-item" v-for="(item,index) in left_categorys"
                 :style="{left:-index*26+'px'}"
                 @click="getHome(item)"
@@ -15,10 +20,19 @@
                 @click="getHome(item)"
             >{{item.title}}</div>
         </div>
+        <div class="user-info">
+            <span style="color:#325E95;">{{fireUserLoginName}}</span>
+            &nbsp;
+            <span style="color:#ddd" @click="logout">退出</span>
+        </div>
     </div>
   </template>
   <script lang="ts" setup>
-    import { ref, defineEmits,onMounted } from 'vue';
+
+    import { ref, defineEmits, onMounted, onUnmounted, watchEffect,h } from 'vue';
+    import axios from 'axios';
+    import dayjs from 'dayjs';
+
     import { useI18n } from '@/hooks/web/useI18n';
     const { t } = useI18n();
     import {message} from 'ant-design-vue'
@@ -28,8 +42,12 @@
     import { useUserStore } from '@/store/modules/user';
     const userStore = useUserStore();
     const router = useRouter();
+    import { useMessage } from '@/hooks/web/useMessage';
+    import { useMultipleTabStore } from '@/store/modules/multipleTab';
+    const { createConfirm } = useMessage();
+    const fireUserLoginName = ref<string>("");
 
-
+    fireUserLoginName.value = localStorage.getItem("fireUserLoginName")?localStorage.getItem("fireUserLoginName"):'';
     // emit
     const left_categorys = ref([])
     const right_categorys = ref([])
@@ -46,30 +64,70 @@
         })
     }
 
+    const tabStore = useMultipleTabStore();
+
+    function logout(){
+        createConfirm({
+        iconType: 'warning',
+        title: () => h('span', t('sys.navigation.logoutTip')),
+        content: () => h('span', t('sys.navigation.logoutMessage')),
+        onOk: async () => {
+            tabStore.resetState();
+            await router.replace(PageEnum.SUBJECT_HOME);
+        },
+        });
+    }
     async function getHome(item) {
         console.log(window.innerWidth);
         if (!item.isDevelop) {
-        message.warn(item.title + '系统暂未开放！');
+            message.warn(item.title + '系统暂未开放！');
-        return;
-        }
-        if (item.isExternal) {
-        if (item.linkOrApi) {
-            window.location.href = item.linkOrApi;
-        } else {
-            message.warn('系统外部链接未配置！');
             return;
         }
+        if (item.isExternal) {
+            if (item.linkOrApi) {
+                window.location.href = item.linkOrApi;
+            } else {
+                message.warn('系统外部链接未配置！');
+                return;
+            }
         } else {
-        if (!item.linkOrApi) {
+            if (!item.linkOrApi) {
-            item.linkOrApi = PageEnum.WELCOME_HOME;
+                item.linkOrApi = PageEnum.WELCOME_HOME;
-        }
+            }
-        userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
+            userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
         }
     }
 
+  // 时间和天气
+  const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
+  const Weather = ref('');
+  function getWeather() {
+    // http://www.tianqiapi.com/index/doc?version=v63
+    // 若次数试用用尽，注册账号后，切换appid和appsecret即可
+    axios({
+      method: 'get',
+      url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
+    }).then((res) => {
+      Weather.value = res.data.wea;
+    });
+  }
+  function updateTime() {
+    currentTime.value = dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm');
+  }
 
+  // 监听每一秒更新时间
+  watchEffect(() => {
+    const intervalId = setInterval(updateTime, 1000);
+    // 清除定时器
+    onUnmounted(() => clearInterval(intervalId));
+  });
 
-  onMounted(()=>{
+  onUnmounted(() => {
+    updateTime();
+  });
+
+  onMounted(() => {
+    getWeather();
     getMenu();
   })
   </script>
@@ -102,6 +160,30 @@
                 top:-5px;
             }
         }
+
+        .screen-currentTime {
+          position: relative;
+          left: 50px;
+          top: -60px;
+
+          width: 344px;
+          height: 14px;
+          font-family: DengXian;
+          font-weight: 400;
+          font-size: 14px;
+          color: #8BD8FF;
+          line-height: 3px;
+          font-style: italic;
+          display: flex;
+          align-items: center;
+        }
+        .time,
+        .weather {
+          display: inline-block;
+        }
+        .separator {
+          margin: 0 50px;
+        }
         .left-category-container{
             position:absolute;
             top:50px;
@@ -140,6 +222,19 @@
                 position:relative;
             }
         }
+
+        .user-info{
+            width:120px;
+            color:#e1e1e1;
+            position:absolute;
+            top:40px;
+            right:120px;
+            font-size:14px;
+            &:hover{
+                cursor:pointer;
+                color:#8BE5EE;
+            }
+        }
     }
   </style>