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

2024-08-08 10:18:15 +08:00 · 2024-08-08 10:18:15 +08:00 · 1837afbeed
parent a6e2125fe8 37bdbb5d7a
commit 1837afbeed
13 changed files with 345 additions and 33 deletions
--- a/public/videosupervision/layer-button-active.png
+++ b/public/videosupervision/layer-button-active.png
--- a/public/videosupervision/layer-button.png
+++ b/public/videosupervision/layer-button.png
--- a/public/videosupervision/main-bottom.png
+++ b/public/videosupervision/main-bottom.png
--- a/public/videosupervision/main-left.png
+++ b/public/videosupervision/main-left.png
--- a/public/videosupervision/main-right.png
+++ b/public/videosupervision/main-right.png
--- a/public/videosupervision/main-top.png
+++ b/public/videosupervision/main-top.png
--- a/public/videosupervision/title.png
+++ b/public/videosupervision/title.png
--- a/src/views/demo/illegalmining/patchsummary/patchsummary.data.ts
+++ b/src/views/demo/illegalmining/patchsummary/patchsummary.data.ts
@ -119,9 +119,8 @@ export const searchFormSchema: FormSchema[] = [
    colProps: { span: 4 },
    componentProps: {
      options: [
-        { label: '农用地', value: '农用地' },
-        { label: '建设用地', value: '建设用地' },
-        { label: '推堆土', value: '推堆土' },
+        { label: '部级矿产卫片图斑', value: '部级矿产卫片图斑' },
+        { label: '省级矿产卫片图斑', value: '省级矿产卫片图斑' },
      ],
    },
  },
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@ -121,17 +121,20 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
        case "合法":
            map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
            break;
-        case "违法":
-            map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
-            break;
        case "其他":
            map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
            break;
        case "补办手续":
-            map_filter = ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]];
+            map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]];
            break;
        case "拆除复耕":
-            map_filter = ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]];
+            map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "违法":
+            map_filter = ["any",
+                            ["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],
+                            ["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]
+                        ];
            break;
        default:
            map_filter = ["!=", ["get", "gid"], 0];
@ -186,25 +189,24 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
          'layout': {
            'line-join': 'round',
            'line-cap': 'round',
-            // 'visibility':polygonVisibility.value,
-            'visiblity':'none'
+            'visibility':polygonVisibility.value,
          },
          'filter':map_filter,
          'paint': {
            'line-color': [
              "case",
-              ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
-              "#AD04F4",
-              ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
-              "#F4E004",
              ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
              "#0AF703",
-              ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
-              "#F70303",
              ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
              "#0382F7",
+              ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]], //补办手续
+              "#AD04F4",
+              ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]], //拆除复耕
+              "#F4E004",
+              ["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
+              "#F70303",
              // 默认
-              "#ffff00",
+              "#F70303",
            ],
            'line-width': 5
          }
@ -228,18 +230,18 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
          'paint': {
            'fill-color': [
              "case",
-                ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
-                "#AD04F4",
-                ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
-                "#F4E004",
              ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
              "#0AF703",
-                ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
-                "#F70303",
              ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
              "#0382F7",
+              ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]], //补办手续
+              "#AD04F4",
+              ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]], //拆除复耕
+              "#F4E004",
+              ["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
+              "#F70303",
              // 默认
-                "#ffff00",
+              "#F70303",
            ],
            'fill-opacity': 0.5
          }
--- a/src/views/sys/exception/VideoSupervision.vue
+++ b/src/views/sys/exception/VideoSupervision.vue
@ -1,18 +1,139 @@
 <template>
    <div class="main-container">
+        <!-- layout -->
+        <div class="main-header">
+            <div class="title">
+               
+                <img src="/public/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
+                <div class="user-info" style="z-index:9999;">
+                    <span style="color: #325e95">{{ fireUserLoginName }}</span>
+                    &nbsp;
+                    <span style="color: #ddd" @click="logout">退出</span>
+                </div>
+            </div>
+        </div>
+        <div class="main-bottom"></div>
+        <!-- map -->
        <Map></Map>
+        
+        <!-- layer controller -->
+        <LayerControl @handlerLayerButtonClick="handlerLayerButtonClick"></LayerControl>
+            
+
+        <div class="data-container">
+            <!-- case list -->
+            <CaseList></CaseList>
+             <!-- uav -->
+            <UAV></UAV>
+        </div>
+        
+       
+
    </div>
 </template>
 <script lang="ts" setup>
 import Map from './VideoSupervision/map/map.vue'
-import { ref } from 'vue';
+import LayerControl from "./VideoSupervision/layercontrol/index.vue"
+import CaseList from "./VideoSupervision/caselist/index.vue";
+import UAV from './VideoSupervision/uav/uav.vue'
+import { ref,onMounted,h } from 'vue';
+import { useRouter } from 'vue-router';
+import { PageEnum } from '@/enums/pageEnum';
+const router = useRouter();
+import { useI18n } from '@/hooks/web/useI18n';
+const { t } = useI18n();
+import { useMessage } from '@/hooks/web/useMessage';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
+const { createConfirm } = useMessage();
+// layer control
+function handlerLayerButtonClick(item){
+    console.log(item);
+}

+const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
+function getFireUserLoginName() {
+fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
+    ? localStorage.getItem('fireUserLoginName')
+    : '';
+}
+
+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);
+      },
+    });
+  }
+
+onMounted(() => {
+    // getWeather();
+    getFireUserLoginName();
+  });
 </script>

 <style type="less" scoped>
 .main-container {
    width: 100vw;
    height: 100vh;
+    position:relative;
+    top:0px;
+    left:0px;
+    z-index:0;
+    .main-header{
+        width:100vw;
+        height:120px;
+        background:url("/public/videosupervision/main-top.png");
+        background-size:100% 100%;
+        position:absolute;
+        top:0px;
+        left:0px;
+        z-index:2;
+        .title{
+            width:600px;
+            height:90px;
+            margin:0px auto;
+            font-size:40px;
+            color:#fff;
+            font-weight:bold;
+            .user-info {
+                width: 120px;
+                color: #e1e1e1;
+                position: absolute;
+                top: 20px;
+                right: 24px;
+                font-size: 14px;
+                z-index:9;
+                &:hover {
+                    cursor: pointer;
+                    color: #8be5ee;
+                }
+            }
+        }
+        
+    }
+    .main-bottom{
+        height:50px;
+        width: calc( 100vw - 30px);
+
+        position:absolute;
+        bottom:10px;
+        left:15px;
+        z-index:2;
+        background:url("/public/videosupervision/main-bottom.png");
+        background-size:100% 100%;
+    }
+    .data-container{
+        width:418px;
+        position:absolute;
+        top:50%;
+        right:24px;
+        transform:translate(0,-50%);
+    }
 }   
 </style>
  
--- a/src/views/sys/exception/VideoSupervision/caselist/index.vue
+++ b/src/views/sys/exception/VideoSupervision/caselist/index.vue
@ -0,0 +1,59 @@
+<template>
+    <div class="case-list-container">
+        <div class="title">
+            复飞核实
+            <div class="switch-button">
+                <a-switch v-model:checked="checked" />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue';
+const checked = ref<Boolean>(true);
+</script>
+
+<style type="less" scoped>
+.case-list-container{
+    width: 418px;
+    height: 440px;
+    background:#041B36;
+    position: relative;
+    margin-bottom:20px;
+    &::before{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        left:10px;
+        background:url("/public/videosupervision/main-left.png");
+        background-size:100% 100%;
+    }
+    &::after{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        right:10px;
+        background:url("/public/videosupervision/main-right.png");
+        background-size:100% 100%;
+    }
+    .title{
+        width:100%;
+        height:40px;
+        background-image:url("/public/videosupervision/title.png");
+        background-size:100% 100%;
+        line-height:40px;
+        text-indent:18px;
+        font-size:18px;
+        font-weight:bold;
+        color:#fff;
+    }
+    .switch-button{
+        float:right;
+        margin-right:20px;
+    }
+}   
+</style>
--- a/src/views/sys/exception/VideoSupervision/layercontrol/index.vue
+++ b/src/views/sys/exception/VideoSupervision/layercontrol/index.vue
@ -0,0 +1,73 @@
+<template>
+    <div class="layer-controler-container">
+        <div class="layer-button-item" 
+            v-for="(item,index) in layerButtons" 
+            :key="index" 
+            @click="handlerLayerButtonClick(item,index)"
+            :style="{'background-image':item.checked?'url(/public/videosupervision/layer-button-active.png)':'url(/public/videosupervision/layer-button.png)'}"    
+        >
+            {{ item.lable }}
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+import { ref,defineEmits } from 'vue';
+
+const layerButtons = ref([
+    {
+        lable:"航飞区域",
+        value:"",
+        checked:false,
+    },{
+        lable:"航飞规划",
+        value:"",
+        checked:false,
+    },{
+        lable:"视频监控",
+        value:"",
+        checked:false,
+    },{
+        lable:"影像图",
+        value:"",
+        checked:false,
+    },{
+        lable:"导航图",
+        value:"",
+        checked:false,
+    },
+])
+
+const emits = defineEmits(["handlerLayerButtonClick"])
+
+function handlerLayerButtonClick(item,index){
+    layerButtons.value[index].checked = !layerButtons.value[index].checked
+    emits("handlerLayerButtonClick",layerButtons.value[index]);
+}
+
+</script>
+
+<style type="less" scoped>
+.layer-controler-container {
+    width: 160px;
+    position: absolute;
+    top:50%;
+    left:50px;
+    transform: translate(0,-50%);
+    z-index:2;
+    .layer-button-item{
+        width:100%;
+        height:60px;
+        margin-bottom:15px;
+        background:rgba(0,0,0,0.2);
+        color:#fff;
+        text-align:center;
+        line-height:60px;
+        cursor:pointer;
+        background-image:url("/public/videosupervision/layer-button.png");
+        background-size:100% 100%;
+        font-size:16px;
+    }
+}
+</style>
+  
--- a/src/views/sys/exception/VideoSupervision/uav/uav.vue
+++ b/src/views/sys/exception/VideoSupervision/uav/uav.vue
@ -0,0 +1,58 @@
+<template>
+    <div class="uav-container">
+        <div class="title">
+            航飞实景
+            <div class="switch-button">
+                <a-switch v-model:checked="checked" />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue';
+const checked = ref<Boolean>(true);
+</script>
+
+<style type="less" scoped>
+.uav-container{
+    width: 418px;
+    height: 300px;
+    background:#041B36;
+    position: relative;
+    &::before{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        left:10px;
+        background:url("/public/videosupervision/main-left.png");
+        background-size:100% 100%;
+    }
+    &::after{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        right:10px;
+        background:url("/public/videosupervision/main-right.png");
+        background-size:100% 100%;
+    }
+    .title{
+        width:100%;
+        height:40px;
+        background-image:url("/public/videosupervision/title.png");
+        background-size:100% 100%;
+        line-height:40px;
+        text-indent:18px;
+        font-size:18px;
+        font-weight:bold;
+        color:#fff;
+    }
+    .switch-button{
+        float:right;
+        margin-right:20px;
+    }
+}   
+</style>