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

src/api/statistical/index.ts

@@ -1,20 +1,46 @@
 import { defHttp } from '@/utils/http/axios';
+
 enum Api {
   GetTrendData = '/api/DroneScreenDisplay/GetTrendData',
   GetTuBanSummary = '/api/DroneScreenDisplay/GetTuBanSummary',
   GetTotalAndAreaByType = '/api/DroneScreenDisplay/GetTotalAndAreaByType',
-  GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea'
+  GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea',
+  GetAnalysisData = '/api/DroneScreenDisplay/GetAnalysisData',
+  CaseOffenceEcharts = '/api/DroneScreenDisplay/CaseOffenceEcharts',
+  GetTrendEchartsData = '/api/DroneScreenDisplay/GetTrendEchartsData',
 }
-export function GetTrendData(params:{countyid:string;type:string;datatype:number;begindate?:string;enddate?:string;}) {
+export function GetTrendData(params: {
+  countyid: string;
+  type: string;
+  datatype: number;
+  begindate?: string;
+  enddate?: string;
+}) {
   // datatype 0按天统计，1按月统计
   return defHttp.get({ url: Api.GetTrendData, params });
 }
-export function GetTuBanSummary(params:{countyid:string;type:string;}) {
+export function GetTuBanSummary(params: { countyid: string; type: string }) {
   return defHttp.get({ url: Api.GetTuBanSummary, params });
 }
-export function GetTotalAndAreaByType(params:{countyid:string;type:string;}) {
+export function GetTotalAndAreaByType(params: { countyid: string; type: string }) {
   return defHttp.get({ url: Api.GetTotalAndAreaByType, params });
 }
-export function GetTotalAndArea(params:{countyid:string;type:string;}) {
+export function GetTotalAndArea(params: { countyid: string; type: string }) {
   return defHttp.get({ url: Api.GetTotalAndArea, params });
-}
+}
+export function getAnalysisData(params: { countyid: string; month: number }) {
+  return defHttp.get({ url: Api.GetAnalysisData, params });
+}
+
+export function caseOffenceEcharts(params: { type: number; month: number }) {
+  return defHttp.get({ url: Api.CaseOffenceEcharts, params });
+}
+export function getTrendEchartsData(params: {
+  type: number;
+  month: number;
+  datatype: number;
+  begindate: string;
+  enddate: string;
+}) {
+  return defHttp.get({ url: Api.GetTrendEchartsData, params });
+}

src/components/Upload/src/components/ImageUpload.vue

@@ -355,6 +355,7 @@
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   #process-form-container{
     width:50%;height:500px;background:red;

src/router/routes/index.ts

@@ -86,7 +86,7 @@ export const SchemeRoute: AppRouteRecordRaw = {
 export const SubjectRoute: AppRouteRecordRaw = {
   path: '/subject',
   name: 'subject',
-  component: () => import('@/views/subject/index.vue'),
+  component: () => import('@/views/subject/subject/index.vue'),
   meta: {
     title: '主题',
   },

src/utils/global.ts

@@ -138,3 +138,31 @@ export const nowStatusOptions = [
   { label: '县级审核', value: '县级审核' },
   { label: '已归档', value: '已归档' },
 ];
+//获取近7个月的时间
+export const getMonth = () => {
+  //创建现在的时间
+  const data = new Date();
+  //获取年
+  let year = data.getFullYear();
+  //获取月
+  let mon = data.getMonth() + 1;
+  let arry: any = [];
+  for (let i = 0; i < 6; i++) {
+    if (mon <= 0) {
+      year = year - 1;
+      mon = mon + 12;
+    }
+    arry.push({
+      label: `${mon}月`,
+      value: mon,
+    });
+    mon = mon - 1;
+  }
+  return arry.reverse();
+};
+export const monthOptions = getMonth();
+export const monthAllOptions = () => {
+  let arr: any = getMonth();
+  arr.reverse().unshift({ label: '全部', value: 0 });
+  return arr;
+};

src/views/demo/caseoffence/index.vue

@@ -18,15 +18,15 @@
         </template>
         <!-- 下发图斑·面积 -->
         <template v-if="column.key === 'xfmj'">
-          <a @click="handlePreViewData(column, record, 1)">
+          <!-- <a @click="handlePreViewData(column, record, 1)"> -->
             {{ record.xfmj == 0 ? 0 : record.xfmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 下发图斑·耕地面积 -->
         <template v-if="column.key === 'xfgdmj'">
-          <a @click="handlePreViewData(column, record, 1)">
+          <!-- <a @click="handlePreViewData(column, record, 1)"> -->
             {{ record.xfgdmj == 0 ? 0 : record.xfgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 合法·宗数 -->
@@ -35,15 +35,15 @@
         </template>
         <!-- 合法·面积 -->
         <template v-if="column.key === 'hfmj'">
-          <a @click="handlePreViewData(column, record, 2)">
+          <!-- <a @click="handlePreViewData(column, record, 2)"> -->
             {{ record.hfmj == 0 ? 0 : record.hfmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 合法·耕地面积 -->
         <template v-if="column.key === 'hfgdmj'">
-          <a @click="handlePreViewData(column, record, 2)">
+          <!-- <a @click="handlePreViewData(column, record, 2)"> -->
             {{ record.hfgdmj == 0 ? 0 : record.hfgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 违法·小计·宗数 -->
@@ -52,15 +52,15 @@
         </template>
         <!-- 违法·小计·面积 -->
         <template v-if="column.key === 'wfmj'">
-          <a @click="handlePreViewData(column, record, 3)">
+          <!-- <a @click="handlePreViewData(column, record, 3)"> -->
             {{ record.wfmj == 0 ? 0 : record.wfmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 违法·小计·耕地面积 -->
         <template v-if="column.key === 'wfgdmj'">
-          <a @click="handlePreViewData(column, record, 3)">
+          <!-- <a @click="handlePreViewData(column, record, 3)"> -->
             {{ record.wfgdmj == 0 ? 0 : record.wfgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 违法·非农化·宗数 -->
@@ -69,15 +69,15 @@
         </template>
         <!-- 违法·非农化·面积 -->
         <template v-if="column.key === 'fnhmj'">
-          <a @click="handlePreViewData(column, record, 10)">
+          <!-- <a @click="handlePreViewData(column, record, 10)"> -->
             {{ record.fnhmj == 0 ? 0 : record.fnhmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 违法·非农化·耕地面积 -->
         <template v-if="column.key === 'fnhgdmj'">
-          <a @click="handlePreViewData(column, record, 10)">
+          <!-- <a @click="handlePreViewData(column, record, 10)"> -->
             {{ record.fnhgdmj == 0 ? 0 : record.fnhgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 违法·非粮化·宗数 -->
@@ -86,15 +86,15 @@
         </template>
         <!-- 违法·非粮化·面积 -->
         <template v-if="column.key === 'flhmj'">
-          <a @click="handlePreViewData(column, record, 5)">
+          <!-- <a @click="handlePreViewData(column, record, 5)"> -->
             {{ record.flhmj == 0 ? 0 : record.flhmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 违法·非粮化·耕地面积 -->
         <template v-if="column.key === 'flhgdmj'">
-          <a @click="handlePreViewData(column, record, 5)">
+          <!-- <a @click="handlePreViewData(column, record, 5)"> -->
             {{ record.flhgdmj == 0 ? 0 : record.flhgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 其他·宗数 -->
@@ -103,15 +103,15 @@
         </template>
         <!-- 其他·面积 -->
         <template v-if="column.key === 'qtmj'">
-          <a @click="handlePreViewData(column, record, 4)">
+          <!-- <a @click="handlePreViewData(column, record, 4)"> -->
             {{ record.qtmj == 0 ? 0 : record.qtmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 其他·耕地面积 -->
         <template v-if="column.key === 'qtgdmj'">
-          <a @click="handlePreViewData(column, record, 4)">
+          <!-- <a @click="handlePreViewData(column, record, 4)"> -->
             {{ record.qtgdmj == 0 ? 0 : record.qtgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 整改情况·补办手续·宗数 -->
@@ -120,15 +120,15 @@
         </template>
         <!-- 整改情况·补办手续·面积 -->
         <template v-if="column.key === 'bbsxmj'">
-          <a @click="handlePreViewData(column, record, 6)">
+          <!-- <a @click="handlePreViewData(column, record, 6)"> -->
             {{ record.bbsxmj == 0 ? 0 : record.bbsxmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 整改情况·补办手续·耕地面积 -->
         <template v-if="column.key === 'bbsxgdmj'">
-          <a @click="handlePreViewData(column, record, 6)">
+          <!-- <a @click="handlePreViewData(column, record, 6)"> -->
             {{ record.bbsxgdmj == 0 ? 0 : record.bbsxgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 整改情况·拆除复耕·宗数 -->
         <template v-if="column.key === 'cczs'">
@@ -136,15 +136,15 @@
         </template>
         <!-- 整改情况·拆除复耕·面积 -->
         <template v-if="column.key === 'ccmj'">
-          <a @click="handlePreViewData(column, record, 7)">
+          <!-- <a @click="handlePreViewData(column, record, 7)"> -->
             {{ record.ccmj == 0 ? 0 : record.ccmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 整改情况·拆除复耕·耕地面积 -->
         <template v-if="column.key === 'ccgdmj'">
-          <a @click="handlePreViewData(column, record, 7)">
+          <!-- <a @click="handlePreViewData(column, record, 7)"> -->
             {{ record.ccgdmj == 0 ? 0 : record.ccgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
 
         <!-- 新增违法占用耕地情况·核实后新增违法耕地·宗数 -->
@@ -153,9 +153,9 @@
         </template>
         <!-- 新增违法占用耕地情况·核实后新增违法耕地·耕地面积 -->
         <template v-if="column.key === 'hshxzwfgdgdmj'">
-          <a @click="handlePreViewData(column, record, 8)">
+          <!-- <a @click="handlePreViewData(column, record, 8)"> -->
             {{ record.hshxzwfgdgdmj == 0 ? 0 : record.hshxzwfgdgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 新增违法占用耕地情况·整改后剩余违法耕地·宗数 -->
         <template v-if="column.key === 'zghsywfgdzs'">
@@ -163,9 +163,9 @@
         </template>
         <!-- 新增违法占用耕地情况·整改后剩余违法耕地·耕地面积 -->
         <template v-if="column.key === 'zghsywfgdgdmj'">
-          <a @click="handlePreViewData(column, record, 9)">
+          <!-- <a @click="handlePreViewData(column, record, 9)"> -->
             {{ record.zghsywfgdgdmj == 0 ? 0 : record.zghsywfgdgdmj.toFixed(2) }}
-          </a>
+          <!-- </a> -->
         </template>
         <!-- 面积只取小数点后两位 -->
         <!-- <template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">

src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue

@@ -534,13 +534,14 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   .detail-container {
     width: 100vw;
     height: calc(100vh - 120px);
     display: flex;
+    padding: 0px 20px;
   }
   .detail-container::after {
     content: '';
@@ -551,12 +552,13 @@
   }
   .map-container {
     float: left;
-    width: 50vw;
+    width: 45vw;
     height: calc(100vh - 100px);
     margin-right: 20px;
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-left){
     position: absolute;

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

@@ -901,11 +901,12 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-right){
     position: absolute;

src/views/demo/system/cloudManagement/cloudQueryManagement/index.vue

@@ -39,9 +39,10 @@
           <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'enabledMark'">
+          <template v-if="column.key == 'overlayList'">
-            <a-tag v-if="record.enabledMark" color="success">正常</a-tag>
+            <div v-for="tag in record.overlayList" :key="tag">
-            <a-tag v-else color="error">停用</a-tag>
+              <a-tag>{{ tag }}</a-tag>
+            </div>
           </template>
         </template>
       </BasicTable>

src/views/demo/system/cloudManagement/cloudQueryManagement/util.ts

@@ -2,61 +2,51 @@ export const columns = [
   {
     title: 'ID',
     dataIndex: 'id',
-    resizable: true,
     ifShow: false,
   },
   {
     title: '名称',
     dataIndex: 'name',
-    resizable: true,
     width: 100,
   },
   {
     title: '图层',
     dataIndex: 'layer',
-    resizable: true,
     width: 100,
   },
   {
     title: '数据表',
     dataIndex: 'tableName',
-    resizable: true,
     width: 100,
   },
   {
     title: '叠加图层',
     dataIndex: 'overlayList',
-    resizable: true,
     width: 100,
   },
   {
     title: '是否分类',
     dataIndex: 'isClass',
-    resizable: true,
     width: 100,
   },
   {
     title: '分类字段',
     dataIndex: 'classField',
-    resizable: true,
     width: 100,
   },
   {
     title: '分类名称',
     dataIndex: 'className',
-    resizable: true,
     width: 100,
   },
   {
     title: '选择面积计算字段',
     dataIndex: 'areaField',
-    resizable: true,
     width: 100,
   },
   {
     title: '是否合计',
     dataIndex: 'isSum',
-    resizable: true,
     width: 100,
   }
 ];

src/views/demo/system/graphicaltable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+  <div>
     <BasicTable
       class="w-4/4 xl:w-5/5"
       @register="registerTable"
@@ -28,7 +28,7 @@
       </template>
     </BasicTable>
     <Modal @register="registerModal" @submit="submit" />
-  </PageWrapper>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, reactive } from 'vue';

src/views/demo/system/graphicaltable/modal/index.vue

@@ -11,6 +11,7 @@
     :title="getTitle"
     :useWrapper="true"
     :width="900"
+    :maskClosable="false"
     @ok="handleOk"
   >
     <div class="box-container">
@@ -103,6 +104,7 @@
   // 是否是标准化
   const isBasic = ref(false);
   const tableName: any = ref('');
+  const getTitle: any = ref('');
   const tableColumns: any = ref([]);
   const codesTypeArr: any = ref([
     { label: 'varchar', value: 'varchar' },
@@ -118,12 +120,14 @@
 
     // 新增
     if (!data.record) {
+      getTitle.value = '新增';
       tableName.value = null;
       setTableData([]);
       handleAdd();
       reload();
     } else {
       // 编辑、详情
+      getTitle.value = '详情';
       tableName.value = data.record.tableName;
       const lines = data.record.columnJson.split(':');
       let arr: any = [];
@@ -223,13 +227,13 @@
   }
   // 提交
   async function handleOk() {
-    // 删除两端空格、制表符和换行符
-    tableName.value = tableName.value.trim();
     // 检测：表名
     if (!tableName.value) {
       createMessage.warn('表名是必填项!');
       return;
     }
+    // 删除两端空格、制表符和换行符
+    tableName.value = tableName.value.trim();
     // 检测：数据库表名的命名规则
     if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName.value)) {
       createMessage.warn('表名不符合数据库表名的命名规则!');
@@ -361,6 +365,7 @@
       return false;
     }
   }
+
   onMounted(() => {
     getCodesTypeArr();
   });

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

@@ -534,13 +534,14 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   .detail-container {
     width: 100vw;
     height: calc(100vh - 120px);
     display: flex;
+    padding: 0px 20px;
   }
   .detail-container::after {
     content: '';
@@ -551,12 +552,13 @@
   }
   .map-container {
     float: left;
-    width: 50vw;
+    width: 45vw;
     height: calc(100vh - 100px);
     margin-right: 20px;
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-left){
     position: absolute;

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

@@ -901,11 +901,12 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-right){
     position: absolute;

src/views/subject/subject/index.vue

@@ -35,6 +35,15 @@
           {{ t('sys.subject.header_title') }}
         </span>
       </div>
+      <div class="subject_header_currentTime">
+        <span class="subject_header_currentTime_date">
+          {{ currentTime_date }}
+        </span>
+        <div class="subject_header_currentTime_div">
+          <div> {{ currentTime_week }} </div>
+          <div> {{ currentTime_year }} </div>
+        </div>
+      </div>
       <div class="subject_header_adminAndLogout">
         <img src="/subject/subject_header_admin.png" />
         <span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
@@ -187,12 +196,13 @@
 <script setup lang="ts">
   import { useUserStore } from '@/store/modules/user';
   import { getSpecialData } from '@/api/demo/system';
-  import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue';
+  import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
   import { message } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { getAppEnvConfig } from '@/utils/env';
   import { useI18n } from '@/hooks/web/useI18n';
   import { PageEnum } from '@/enums/pageEnum';
+  import dayjs from 'dayjs';
 
   const {
     VITE_GLOB_API_URL,
@@ -356,10 +366,29 @@
     return viewportWidth.value / referenceWidth;
   });
 
+  // 时间和天气
+  const currentTime_year = ref(dayjs().locale('zh-cn').format('YYYY年M月D日'));
+  const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
+  const currentTime_date = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
+
+  function updateTime() {
+    currentTime_year.value = dayjs().locale('zh-cn').format('YYYY年M月D日');
+    currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
+    currentTime_date.value = dayjs().locale('zh-cn').format('HH:mm:ss');
+  }
+
+  // 监听每一秒更新时间
+  watchEffect(() => {
+    const intervalId = setInterval(updateTime, 1000);
+    // 清除定时器
+    onUnmounted(() => clearInterval(intervalId));
+  });
+
   onMounted(() => {
     getData();
     window.addEventListener('resize', updateWindowSize);
     updateWindowSize(); // 初始化视口尺寸
+    updateTime();
   });
 
   onUnmounted(() => {
@@ -398,6 +427,41 @@
         }
       }
 
+      &_currentTime {
+        position: absolute;
+        left: 87px;
+        top: 0px;
+        height: 40px;
+        display: inline-flex;
+        align-items: center;
+
+        &_date {
+          font-family: DIN;
+          font-weight: bold;
+          font-size: 26px;
+          color: #ffffff;
+          line-height: 26px;
+          margin-right: 10px;
+        }
+
+        &_div {
+          position: relative;
+          top: -7px;
+          width: 100px;
+          height: 12px;
+          font-family: DIN;
+          font-weight: 500;
+          font-size: 12px;
+          color: #ffffff;
+          line-height: 12px;
+          display: block;
+
+          div {
+            margin-bottom: 2px;
+          }
+        }
+      }
+
       &_adminAndLogout {
         position: absolute;
         right: 87px;

src/views/subject/subject_lindidiaocha/index.vue

@@ -0,0 +1,725 @@
+<template>
+  <div class="subject">
+    <div class="subject_header">
+      <img
+        class="subject_header_img"
+        src="/subject/subject_header.png"
+        :style="{
+          width: '100%',
+          height: `${82 * bi}px`,
+        }"
+      />
+      <div
+        class="subject_header_title"
+        :style="{
+          position: 'relative',
+          top: `${-85 * bi}px`,
+        }"
+      >
+        <span
+          :style="{
+            fontSize: `${42 * bi}px`,
+            height: `${82 * bi}px`,
+          }"
+        >
+          <img
+            src="/subject/subject_logo.png"
+            :style="{
+              position: 'relative',
+              top: `${4 * bi}px`,
+              width: `${78 * bi}px`,
+              height: `${70 * bi}px`,
+              marginRight: `${5 * bi}px`,
+            }"
+          />
+          {{ t('sys.subject.header_title') }}
+        </span>
+      </div>
+      <div class="subject_header_currentTime">
+        <span class="subject_header_currentTime_date">
+          {{ currentTime_date }}
+        </span>
+        <div class="subject_header_currentTime_div">
+          <div> {{ currentTime_week }} </div>
+          <div> {{ currentTime_year }} </div>
+        </div>
+      </div>
+      <div class="subject_header_adminAndLogout">
+        <img src="/subject/subject_header_admin.png" />
+        <span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
+        <span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
+      </div>
+    </div>
+    <div class="subject_box">
+      <div
+        class="subject_box_btn"
+        ref="contentArea"
+        :style="{
+          position: 'relative',
+          top: `${getBoxBtnAttribute()[0]}px`,
+          left: `${getBoxBtnAttribute()[1] * bi}px`,
+          height: `${getBoxBtnAttribute()[2] * bi}px`,
+          width: `${getBoxBtnAttribute()[3] * bi}px`,
+        }"
+      >
+        <div
+          v-for="(item, index) in list"
+          :key="item.id"
+          :id="item.id"
+          class="subject_box_btn_div"
+          @click="getHome(item)"
+          :style="{
+            marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
+            marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
+            marginBottom: `${20 * bi}px`,
+            height: `${325 * bi}px`,
+            width: `${225 * bi}px`,
+            'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
+            'background-size': `${100}%`,
+            'background-repeat': 'no-repeat',
+          }"
+        >
+          <img
+            class="subject_box_btn_div_url"
+            :src="getImageUrl(item.imgUrl)"
+            :style="{
+              left: `${21 * bi}px`,
+              width: `${191 * bi}px`,
+              height: `${191 * bi}px`,
+            }"
+          />
+          <span
+            class="subject_box_btn_div_span"
+            v-html="renderedTitle(item.title)"
+            :style="{
+              fontSize: `${fotSize * bi}px`,
+              left: `${22 * bi}px`,
+              width: `${190 * bi}px`,
+              height: `${(fotSize * spanWrap + 7) * bi}px`,
+            }"
+          />
+          <img
+            class="subject_box_btn_div_line"
+            src="/subject/subject_line.png"
+            :style="{
+              top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
+              left: `${52 * bi}px`,
+              width: `${128 * bi}px`,
+              height: `${7 * bi}px`,
+            }"
+          />
+          <div
+            class="circle arc1"
+            :style="{
+              position: 'absolute',
+              top: `${92 * bi}px`,
+              left: `${117 * bi}px`,
+              width: `${126 * bi}px`,
+              height: `${126 * bi}px`,
+            }"
+          />
+          <div
+            class="circle arc2"
+            :style="{
+              position: 'absolute',
+              top: `${92 * bi}px`,
+              left: `${117 * bi}px`,
+              width: `${126 * bi}px`,
+              height: `${126 * bi}px`,
+            }"
+          />
+          <div
+            class="circle arc3"
+            :style="{
+              position: 'absolute',
+              top: `${92 * bi}px`,
+              left: `${117 * bi}px`,
+              width: `${126 * bi}px`,
+              height: `${126 * bi}px`,
+            }"
+          />
+          <div
+            class="circle arc4"
+            :style="{
+              position: 'absolute',
+              top: `${92 * bi}px`,
+              left: `${117 * bi}px`,
+              width: `${126 * bi}px`,
+              height: `${126 * bi}px`,
+            }"
+          />
+        </div>
+      </div>
+      <!-- <div class="subject_box_overflow">
+        <Icon
+          style="font-size: 31px"
+          class="subject_box_overflow_icon1"
+          icon="ant-design:up-outlined"
+          @click="scrollToElement('top')"
+        />
+        <Icon
+          style="font-size: 31px"
+          class="subject_box_overflow_icon2"
+          icon="ant-design:down-outlined"
+          @click="scrollToElement('bottom')"
+        />
+      </div> -->
+    </div>
+    <div class="subject_bottom">
+      <!-- <span>
+        {{ t('sys.subject.bottom_copyright') }}
+        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+        {{ t('sys.subject.bottom_support') }}
+        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+        {{ t('sys.subject.bottom_version') }}
+      </span> -->
+      <span>
+        {{
+          VITE_GLOB_APP_MANAGEMENT_UNIT
+            ? VITE_GLOB_APP_MANAGEMENT_UNIT
+            : t('sys.subject.bottom_copyright')
+        }}
+        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+        {{
+          VITE_GLOB_APP_TECHINICAL_SUPPORT
+            ? VITE_GLOB_APP_TECHINICAL_SUPPORT
+            : t('sys.subject.bottom_support')
+        }}
+        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+        {{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useUserStore } from '@/store/modules/user';
+  import { getSpecialData } from '@/api/demo/system';
+  import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
+  import { message } from 'ant-design-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { getAppEnvConfig } from '@/utils/env';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { PageEnum } from '@/enums/pageEnum';
+  import dayjs from 'dayjs';
+
+  const {
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_MANAGEMENT_UNIT,
+    VITE_GLOB_APP_TECHINICAL_SUPPORT,
+    VITE_GLOB_APP_VERSIONS,
+  } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+  const { t } = useI18n();
+
+  const loginUser: any = ref('');
+  const contentArea = ref<HTMLElement | null>(null);
+  const list: any = ref([]);
+  const userStore = useUserStore();
+  const spanWrap = ref(1);
+
+  async function getData() {
+    const res: any = await getSpecialData();
+    // 最大标题文字行数
+    res?.forEach((item) => {
+      if (Math.ceil(item.title.length / 6) > spanWrap.value) {
+        spanWrap.value = Math.ceil(item.title.length / 6);
+      }
+    });
+    list.value = res;
+    loginUser.value = localStorage.getItem('fireUserLoginName');
+    // cardRotationLoop();
+  }
+  // 旋转动画
+  async function cardRotationLoop() {
+    nextTick(() => {
+      list.value.forEach((item, index) => {
+        setTimeout(() => {
+          const element: any = document.getElementById(item.id);
+          element.classList.remove('cardRotationState');
+          element.classList.add('cardRotation');
+          setTimeout(() => {
+            element.classList.add('cardRotationState');
+          }, 5000);
+          if (index == list.value.length - 1) {
+            setTimeout(() => {
+              cardRotationLoop();
+            }, 8000);
+          }
+        }, index * 8000);
+      });
+    });
+  }
+
+  // 按键控制滚动条
+  const scrollToElement = async (type) => {
+    if (contentArea.value) {
+      if (type == 'top' && contentArea.value.scrollTop != 0) {
+        contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
+      }
+      if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
+        contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
+      }
+    }
+  };
+  // 跳转
+  async function getHome(item) {
+    console.log(window.innerWidth);
+    if (!item.isDevelop) {
+      message.warn(item.title + '系统暂未开放！');
+      return;
+    }
+    if (item.isExternal) {
+      if (item.linkOrApi) {
+        window.location.href = item.linkOrApi;
+      } else {
+        message.warn('系统外部链接未配置！');
+        return;
+      }
+    } else {
+      if (!item.linkOrApi) {
+        item.linkOrApi = PageEnum.WELCOME_HOME;
+      }
+      userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
+    }
+  }
+  // 获取图片地址
+  function getImageUrl(imgUrl) {
+    if (imgUrl) {
+      return VITE_GLOB_API_URL_VAR.value + imgUrl;
+    } else {
+      return '/subject/subject_default.png';
+    }
+  }
+  // 标题换行
+  function renderedTitle(name) {
+    return `${name.replace(/\s/g, '<br />')}`;
+  }
+  // 标题的行数
+  function getWrap(name) {
+    return Math.ceil(name.length / 6);
+  }
+  // 退出系统
+  function handleLoginOut() {
+    userStore.confirmLoginOut();
+  }
+  // 分辨率
+  const viewportWidth = ref(window.innerWidth);
+  const viewportHeight = ref(window.innerHeight);
+  const referenceWidth = 1920;
+  const referenceHeight = 1080;
+  const fotSize = ref(28);
+
+  // 计算不同数量的选项卡的布局属性
+  function getBoxBtnAttribute() {
+    let box: any = [];
+    box[0] = 80;
+    box[1] = 85;
+    box[2] = 700;
+    box[3] = 1750;
+    box[4] = 12;
+    // if (list.value.length <= 7) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 12;
+    // }
+    // if (list.value.length == 8) {
+    //   box[0] = 80;
+    //   box[1] = 185;
+    //   box[2] = 700;
+    //   box[3] = 1550;
+    //   box[4] = 50;
+    // }
+    // if (list.value.length == 9 || list.value.length == 10) {
+    //   box[0] = 80;
+    //   box[1] = 135;
+    //   box[2] = 700;
+    //   box[3] = 1650;
+    //   box[4] = 50;
+    // }
+    // if (list.value.length == 11 || list.value.length == 12) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 30;
+    // }
+    // if (list.value.length == 13 || list.value.length == 14) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 12;
+    // }
+    return box;
+  }
+
+  const updateWindowSize = () => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+  };
+
+  const bi = computed(() => {
+    return viewportWidth.value / referenceWidth;
+  });
+
+  // 时间和天气
+  const currentTime_year = ref(dayjs().locale('zh-cn').format('YYYY年M月D日'));
+  const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
+  const currentTime_date = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
+
+  function updateTime() {
+    currentTime_year.value = dayjs().locale('zh-cn').format('YYYY年M月D日');
+    currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
+    currentTime_date.value = dayjs().locale('zh-cn').format('HH:mm:ss');
+  }
+
+  // 监听每一秒更新时间
+  watchEffect(() => {
+    const intervalId = setInterval(updateTime, 1000);
+    // 清除定时器
+    onUnmounted(() => clearInterval(intervalId));
+  });
+
+  onMounted(() => {
+    getData();
+    window.addEventListener('resize', updateWindowSize);
+    updateWindowSize(); // 初始化视口尺寸
+    updateTime();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWindowSize);
+  });
+</script>
+<style lang="less" scoped>
+  .subject {
+    background-image: url('/subject/subject_bg.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+    width: 100%;
+    height: 100%;
+
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+
+    &_header {
+      &_title {
+        span {
+          display: inline-flex;
+          align-items: center;
+          text-align: center;
+          justify-content: center;
+          width: 100%;
+          font-family: 068-SSZhengYaTi;
+          font-weight: 400;
+          color: #ffffff;
+          font-weight: 900 !important;
+          letter-spacing: 1.5px;
+        }
+      }
+
+      &_currentTime {
+        position: absolute;
+        left: 87px;
+        top: 0px;
+        height: 40px;
+        display: inline-flex;
+        align-items: center;
+
+        &_date {
+          font-family: DIN;
+          font-weight: bold;
+          font-size: 26px;
+          color: #ffffff;
+          line-height: 26px;
+          margin-right: 10px;
+        }
+
+        &_div {
+          position: relative;
+          top: -7px;
+          width: 100px;
+          height: 12px;
+          font-family: DIN;
+          font-weight: 500;
+          font-size: 12px;
+          color: #ffffff;
+          line-height: 12px;
+          display: block;
+
+          div {
+            margin-bottom: 2px;
+          }
+        }
+      }
+
+      &_adminAndLogout {
+        position: absolute;
+        right: 87px;
+        top: 0px;
+        height: 40px;
+        display: inline-flex;
+        align-items: center;
+
+        img {
+          cursor: pointer;
+          width: 31px;
+          height: 31px;
+        }
+
+        span {
+          cursor: pointer;
+          display: inline-flex;
+          align-items: center;
+          text-align: center;
+          justify-content: center;
+          height: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 14px;
+          color: #006cff;
+          line-height: 28px;
+        }
+      }
+    }
+
+    &_box {
+      display: flex;
+      position: relative;
+      top: -82px;
+
+      &_btn {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        flex-wrap: wrap;
+        display: flex;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        // 隐藏滚动条
+        -ms-overflow-style: none; /* IE 和 Edge */
+        scrollbar-width: none; /* Firefox */
+        ::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Opera */
+        }
+
+        &_div {
+          // 弹性子元素（flex item）的弹性行为
+          flex: 0 0 auto;
+          transition: all 0.3s ease;
+
+          // 定义旋转
+          // 设置透视距离
+          perspective: 1000px;
+          // 添加过渡效果
+          transition: transform 1s;
+          // 定义旋转动画
+          // animation: cardRotation 5s linear infinite;
+
+          &:hover {
+            filter: brightness(150%);
+            cursor: pointer;
+            box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);
+
+            // 定义旋转
+            // 暂停动画
+            animation-play-state: paused;
+            // 过渡效果
+            transition: transform 1s ease;
+            // 立即回到正面
+            transform: rotateY(0deg) !important;
+          }
+
+          &_bg {
+            height: 324px;
+          }
+
+          &_url {
+            position: relative;
+            top: 0px;
+            left: 11px;
+            width: 191px;
+            height: 191px;
+          }
+
+          &_span {
+            display: inline-flex;
+            align-items: center;
+            text-align: center;
+            justify-content: center;
+            position: relative;
+            // top: -300px;
+            left: 12px;
+            width: 190px;
+            // 字体样式
+            font-size: 28px;
+
+            font-family: 'Microsoft YaHei';
+            color: #ffffff;
+            background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+            font-weight: 900 !important;
+          }
+
+          &_line {
+            position: relative;
+            left: 42px;
+            width: 128px;
+            height: 7px;
+          }
+        }
+      }
+
+      // &_overflow {
+      //   position: absolute;
+      //   top: 220px;
+      //   right: -110px;
+      //   height: 300px;
+      //   width: 110px;
+
+      //   &_icon1 {
+      //     color: #006cff;
+      //     cursor: pointer;
+      //     position: relative;
+      //     top: 100px;
+      //     right: 85px;
+      //   }
+
+      //   &_icon2 {
+      //     color: #006cff;
+      //     cursor: pointer;
+      //     position: relative;
+      //     top: 200px;
+      //     right: 115px;
+      //   }
+      // }
+    }
+
+    &_bottom {
+      span {
+        width: 902px;
+        height: 18px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 18px;
+        color: #5eb2ff;
+      }
+      position: absolute;
+      top: 95%;
+      left: calc(50% - 902px / 2);
+    }
+  }
+
+  // 四条旋转的弧线
+  .circle {
+    transform-origin: 50% 50%;
+    width: 126px;
+    height: 126px;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 3px solid #276fff;
+  }
+
+  .arc1 {
+    position: relative;
+    // top: -142px;
+    left: 108px;
+    clip-path: inset(0 55% 55% 0);
+    animation: rotateArc1 8s linear infinite;
+  }
+
+  .arc2 {
+    position: relative;
+    top: -268px;
+    left: 108px;
+    clip-path: inset(55% 0 0 55%);
+    transform: rotate(90deg);
+    animation: rotateArc2 8s linear infinite;
+  }
+
+  .arc3 {
+    position: relative;
+    top: -394px;
+    left: 108px;
+    clip-path: inset(0 55% 55% 0);
+    transform: rotate(180deg);
+    animation: rotateArc3 8s linear infinite;
+  }
+
+  .arc4 {
+    position: relative;
+    top: -520px;
+    left: 108px;
+    clip-path: inset(55% 0 0 55%);
+    transform: rotate(270deg);
+    animation: rotateArc4 8s linear infinite;
+  }
+
+  @keyframes rotateArc1 {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes rotateArc2 {
+    0% {
+      transform: translate(-50%, -50%) rotate(90deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(450deg);
+    }
+  }
+
+  @keyframes rotateArc3 {
+    0% {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(540deg);
+    }
+  }
+
+  @keyframes rotateArc4 {
+    0% {
+      transform: translate(-50%, -50%) rotate(270deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(630deg);
+    }
+  }
+  // 开启旋转动画
+  .cardRotation {
+    animation: cardRotation 5s linear infinite;
+  }
+  // 关闭旋转动画
+  .cardRotationState {
+    animation-play-state: paused;
+    transition: transform 3s ease;
+    transform: rotateY(0deg) !important;
+  }
+  // 定义旋转动画
+  @keyframes cardRotation {
+    0% {
+      transform: rotateY(0deg);
+    }
+    100% {
+      transform: rotateY(-360deg);
+    }
+  }
+</style>

src/views/sys/exception/Converge/SearchComponent.vue

@@ -33,6 +33,7 @@ import {ref,onMounted,defineExpose,defineEmits,watch} from "vue";
 import {CaretDownOutlined,CaretUpOutlined} from "@ant-design/icons-vue";
 import axios from 'axios'
 import { getLoadDroneCaseInfoDetail,getPolygonCenter } from '@/api/tiankongdi/index.ts';
+import { loadCaseInfoTuBanList } from '@/api/demo/system';
 const emits = defineEmits(["toPosition","handlerFilter"])
 import { WktToGeojson } from "@/components/MapboxMaps/src/WktGeojsonTransform";
  async function toPosition(item){
@@ -121,8 +122,8 @@ const keyword = ref("");
 
 async function searchArea() {
 
-    if(keyword.value.match(/^-?\d+$/)){
+    if(keyword.value.match(/^[0-9A-Z]+$/)){
-        let res = await getLoadDroneCaseInfoDetail({caseNo:keyword.value,page:1,limit:10});
+        let res = await loadCaseInfoTuBanList({caseNo:keyword.value,page:1,limit:10});
         searchResult.value = [];
         res?.items?.forEach((item,index)=>{
             let obj = {

src/views/sys/exception/Converge/index.vue

@@ -58,7 +58,7 @@ const initMap = () => {
                 },
             ],
         },
-        maxZoom:18,
+        maxZoom:17,
         minZoom:1,
         zoom: 10,
         pitch:0,
@@ -489,7 +489,7 @@ function handlerLoadMaskLayer(){
           },
           paint: {
             'fill-color': '#ffffff',
-            'fill-opacity': 1 /* 透明度 */,
+            'fill-opacity': 0.8 /* 透明度 */,
           },
           layout: {
             visibility: 'visible',
@@ -586,8 +586,8 @@ defineExpose({
     position:absolute;
     width:330px;
     height:40px;
-    top:90px;
+    top:72px;
-    left:88px;
+    left:73px;
     z-index:9999;
 }
 ::v-deep .mapboxgl-ctrl-logo{

src/views/sys/exception/LargeScreenMap/index.vue

@@ -275,7 +275,7 @@ function handlerLoadMaskLayer(){
           },
           paint: {
             'fill-color': '#ffffff',
-            'fill-opacity': 1 /* 透明度 */,
+            'fill-opacity': 0.8 /* 透明度 */,
           },
           layout: {
             visibility: 'visible',

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

@@ -1,54 +1,64 @@
 <template>
-    <div class="screen-header-container">
+  <div class="screen-header-container">
-        <div class="screen-title"><img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
+    <div class="screen-title">
-        <span class="screen-currentTime"> 
+      <img src="/public/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
-            <span class="time">{{ currentTime }}</span>
+    </div>
-            <span class="separator"></span>
+    <span class="screen-currentTime">
-            <span class="weather">{{ Weather }}</span>
+      <span class="time">{{ currentTime }}</span>
-        </span>
+      <span class="separator"></span>
-         <div class="left-category-container">
+      <span class="weather">{{ Weather }}</span>
-            <div class="category-item" v-for="(item,index) in left_categorys"
+    </span>
-                :style="{left:-index*26+'px'}"
+    <div class="left-category-container">
-                @click="getHome(item)"
+      <div
-                >{{item.title}}
+        class="category-item"
-            </div>
+        v-for="(item, index) in left_categorys"
-        </div>
+        :key="index"
-        <div class="right_category-container" >
+        :style="{ left: -index * 26 + 'px' }"
-            <div class="category-item" v-for="(item,index) in right_categorys"
+        @click="getHome(item)"
-                :style="{left:-index*26+'px'}"
+      >
-                @click="getHome(item)"
+        {{ item.title }}
-            >{{item.title}}</div>
+      </div>
-        </div>
-        <div class="user-info">
-            <span style="color:#325E95;">{{fireUserLoginName}}</span>
-            &nbsp;
-            <span style="color:#ddd" @click="logout">退出</span>
-        </div>
     </div>
     <div class="right_category-container">
       <div
-        v-for="(item, index) in right_categorys"
-        :key="item.id"
         class="category-item"
-        :style="{
+        v-for="(item, index) in right_categorys"
-          left: `${-(index * 26)}px`,
+        :key="index"
-          'background-image': item.hovered
+        :style="{ left: -index * 26 + 'px' }"
-            ? `url(/public/statistical/category-right-active.png)`
-            : `url(/public/statistical/category-right.png)`,
-        }"
         @click="getHome(item)"
-        @mouseover="handleMouseOver('right', item)"
-        @mouseout="handleMouseOut('right', item)"
       >
         {{ item.title }}
       </div>
     </div>
     <div class="user-info">
       <span style="color: #325e95">{{ fireUserLoginName }}</span>
-      &nbsp;&nbsp;&nbsp;
+      &nbsp;
       <span style="color: #ddd" @click="logout">退出</span>
     </div>
-  
+  </div>
+  <div class="right_category-container">
+    <div
+      v-for="(item, index) in right_categorys"
+      :key="item.id"
+      class="category-item"
+      :style="{
+        left: `${-(index * 26)}px`,
+        'background-image': item.hovered
+          ? `url(/public/statistical/category-right-active.png)`
+          : `url(/public/statistical/category-right.png)`,
+      }"
+      @click="getHome(item)"
+      @mouseover="handleMouseOver('right', item)"
+      @mouseout="handleMouseOut('right', item)"
+    >
+      {{ item.title }}
+    </div>
+  </div>
+  <div class="user-info">
+    <span style="color: #325e95">{{ fireUserLoginName }}</span>
+    &nbsp;&nbsp;&nbsp;
+    <span style="color: #ddd" @click="logout">退出</span>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, defineEmits, onMounted, onUnmounted, watchEffect, h } from 'vue';
@@ -161,16 +171,31 @@
   // 时间和天气
   const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
   const Weather = ref('');
-  function getWeather() {
+  async function getWeather() {
-    // http://www.tianqiapi.com/index/doc?version=v63
+    try {
-    // 若次数试用用尽，注册账号后，切换appid和appsecret即可
+      // 百度国内天气查询API
-    axios({
+      const response = await axios.get('https://api.map.baidu.com/weather/v1/', {
-      method: 'get',
+        params: {
-      url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
+          district_id: 371300,
-    }).then((res) => {
+          data_type: 'all',
-      Weather.value = res.data.wea;
+          ak: 'qbMvuMbWe1fJnOBNLJFsjoeHC3wfWkoB',
-    });
+        },
+        timeout: 15000,
+      });
+      Weather.value = response?.result?.now?.text;
+    } catch (error) {
+      // 备用
+      // 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');
   }
@@ -193,7 +218,6 @@
   });
 </script>
 
-
 <style lang="less" scoped>
   .screen-header-container {
     width: 100%;
@@ -224,78 +248,78 @@
     }
 
     .screen-currentTime {
-        position: relative;
+      position: relative;
-        left: 50px;
+      left: 50px;
-        top: -60px;
+      top: -60px;
 
-        width: 344px;
+      width: 344px;
-        height: 14px;
+      height: 14px;
-        font-family: DengXian;
+      font-family: DengXian;
-        font-weight: 400;
+      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;
+      left: 50%;
+      transform: translate(calc(-50% - 570px), 0);
+      .category-item {
+        float: left;
+        width: 138px;
+        height: 32px;
         font-size: 14px;
-        color: #8BD8FF;
+        line-height: 32px;
-        line-height: 3px;
+        text-align: center;
-        font-style: italic;
+        background-image: url('/public/statistical/category-left.png');
-        display: flex;
+        background-size: 138px 32px;
-        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
       }
-      .time,
+    }
-      .weather {
+    .right_category-container {
-        display: inline-block;
+      position: absolute;
-      }
+      top: 50px;
-      .separator {
+      right: 50%;
-        margin: 0 50px;
+      transform: translate(calc(50% + 570px), 0);
-      }
+      .category-item {
-      .left-category-container{
+        float: left;
-          position:absolute;
+        width: 138px;
-          top:50px;
+        height: 32px;
-          left:50%;
+        font-size: 14px;
-          transform: translate( calc( -50% - 570px),0);
+        line-height: 32px;
-          .category-item{
+        text-align: center;
-              float:left;
+        background-image: url('/public/statistical/category-right.png');
-              width:138px;
+        background-size: 138px 32px;
-              height:32px;
+        color: #fff;
-              font-size:14px;
+        cursor: pointer;
-              line-height:32px;
+        position: relative;
-              text-align: center;
-              background-image:url("/public/statistical/category-left.png");
-              background-size:138px 32px;
-              color:#fff;
-              position:relative;
-              cursor:pointer;
-          }
-      }
-      .right_category-container{
-          position:absolute;
-          top:50px;
-          right:50%;
-          transform: translate( calc( 50% + 570px),0);
-          .category-item{
-              float:left;
-              width:138px;
-              height:32px;
-              font-size:14px;
-              line-height:32px;
-              text-align: center;
-              background-image:url("/public/statistical/category-right.png");
-              background-size:138px 32px;
-              color:#fff;
-              cursor:pointer;
-              position:relative;
-          }
       }
+    }
 
-      .user-info{
+    .user-info {
-          width:120px;
+      width: 120px;
-          color:#e1e1e1;
+      color: #e1e1e1;
-          position:absolute;
+      position: absolute;
-          top:48px;
+      top: 48px;
-          right:20px;
+      right: 20px;
-          font-size:14px;
+      font-size: 14px;
-          &:hover{
+      &:hover {
-              cursor:pointer;
+        cursor: pointer;
-              color:#8BE5EE;
+        color: #8be5ee;
-          }
       }
+    }
   }
 </style>

src/views/sys/exception/rightDataScreen/brokenline/index.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="brokenline-container">
+    <!-- brokenline 下发图斑趋势 折线图 -->
+    <div class="brokenline-title">
+      <div class="title">{{ props.typeName }}趋势</div>
+      <div class="month">
+        <div class="month-list">
+          <div
+            v-for="item in options"
+            :key="item.value"
+            @click="monthClick(item.value)"
+            :class="item.value == monthVal ? 'active' : ''"
+            >{{ item.name }}</div
+          >
+        </div>
+        <div class="filter-container">
+          <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
+          <div class="filter-icon" @click="handlerChangeFilterOptions">
+            <img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
+            <img src="/statistical/down.png" alt="" v-else />
+          </div>
+          <div class="filter-item-container" v-if="showFilterOptions">
+            <div
+              v-for="(item, index) in props.countyList"
+              :class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
+              :key="index"
+              @click="handlerCheckedFilter(item)"
+              >{{ item.name }}</div
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="brokenline-content">
+      <div id="brokenline" style="height: 30vh"> </div>
+      <span class="brokenline-unit">单位：</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import * as echarts from 'echarts';
+  import { getTrendEchartsData } from '@/api/statistical/index';
+
+  const options = ref([
+    {
+      name: '天',
+      value: 0,
+    },
+    {
+      name: '月',
+      value: 1,
+    },
+  ]);
+  const monthVal = ref(0);
+
+  function monthClick(val) {
+    monthVal.value = val;
+    getData();
+  }
+
+  const showFilterOptions = ref(false);
+  const currentFilter = ref();
+  const currentFilterName = ref();
+
+  function handlerChangeFilterOptions() {
+    showFilterOptions.value = !showFilterOptions.value;
+  }
+
+  function handlerCheckedFilter(item) {
+    currentFilter.value = item.id;
+    currentFilterName.value = item.name;
+    showFilterOptions.value = false;
+    getData();
+  }
+
+  const props = defineProps({
+    typeName: {
+      type: String,
+      default: '下发图斑',
+    },
+    type: {
+      type: Number,
+      default: 1,
+    },
+    countyList: Object,
+  });
+  watch(
+    () => props.countyList,
+    (val) => {
+      currentFilter.value = props.countyList[0].id;
+      currentFilterName.value = props.countyList[0].name;
+      getData();
+    },
+  );
+  watch(
+    () => props.type,
+    (val) => {
+      getData();
+    },
+  );
+  const timeList: any = ref([]);
+  const tbAreaList: any = ref([]);
+  const gdAreaList: any = ref([]);
+  const ntAreaList: any = ref([]);
+  const xfAreaList: any = ref([]);
+  function getData() {
+    timeList.value = [];
+    tbAreaList.value = [];
+    gdAreaList.value = [];
+    ntAreaList.value = [];
+    xfAreaList.value = [];
+    const querys = {
+      type: props.type,
+      countyid: currentFilter.value,
+      datatype: monthVal.value,
+    };
+    getTrendEchartsData(querys).then((res) => {
+      res.forEach((element) => {
+        timeList.value.push(element.time);
+        tbAreaList.value.push(element.tnmj);
+        gdAreaList.value.push(element.gdmj);
+        ntAreaList.value.push(element.yjjbntmj);
+        xfAreaList.value.push(element.tbzs);
+      });
+      chartData();
+    });
+  }
+
+  function chartData() {
+    var chartDom = document.getElementById('brokenline');
+    var myChart = echarts.init(chartDom);
+    var option = {
+      legend: {
+        data: ['基本农田面积', '图斑面积', '耕地面积', '数量'],
+        top: '4%',
+        textStyle: {
+          color: '#fff',
+          fontSize: 14,
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: timeList.value,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff', //X轴文字颜色
+              fontSize: 12,
+            },
+            interval: 0,
+            // rotate: 30,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#396A87',
+              fontSize: 14,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 0.5,
+              color: '#3d5269',
+              type: 'dashed',
+            },
+          },
+        },
+        {
+          type: 'value',
+          name: '',
+          nameTextStyle: {
+            color: '#396A87',
+            fontSize: 14,
+          },
+          position: 'right',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#396A87',
+              width: 2,
+            },
+          },
+        },
+      ],
+      color: ['#0C725D', '#069EC3', '#3249CD'],
+      series: [
+        {
+          name: '基本农田面积',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'none',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: ntAreaList.value,
+        },
+        {
+          name: '图斑面积',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'none',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: tbAreaList.value,
+        },
+        {
+          name: '耕地面积',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'none',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: gdAreaList.value,
+        },
+        {
+          name: '数量',
+          type: 'line',
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          showAllSymbol: true, //显示所有图形。
+          symbol: 'circle', //标记的图形为实心圆
+          symbolSize: 6, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: '#FF9C5D',
+            borderColor: '#FF9C5D',
+            width: 2,
+            shadowColor: '#FF9C5D',
+            shadowBlur: 2,
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: '#fff',
+          },
+          lineStyle: {
+            color: '#FF9C5D',
+            width: 2,
+            shadowBlur: 2,
+          },
+          data: xfAreaList.value,
+        },
+      ],
+    };
+    option && myChart.setOption(option);
+  }
+  onMounted(() => {
+    chartData();
+  });
+</script>
+<style lang="less" scoped>
+  .brokenline-container {
+    z-index: 10;
+  }
+  .brokenline-title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+    align-items: center;
+    .title {
+      padding-left: 10px;
+      width: 258px;
+      height: 36px;
+      line-height: 36px;
+      background-image: url('/statistical/right-title-bg.png');
+      color: #fff;
+    }
+  }
+  .brokenline-content {
+    width: 100%;
+    position: relative;
+  }
+  .brokenline-unit {
+    position: absolute;
+    left: 100px;
+    top: 16px;
+    color: #fff;
+    z-index: 10;
+    font-size: 14px;
+  }
+  .month {
+    display: flex;
+    .month-list {
+      display: flex;
+      div {
+        width: 61px;
+        height: 27px;
+        background: #22293d;
+        border-radius: 3px 0px 0px 3px;
+        color: #fff;
+        text-align: center;
+        line-height: 27px;
+        cursor: pointer;
+      }
+      .active {
+        background: linear-gradient(-38deg, #3058e1, #4cbbf5);
+        box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
+      }
+    }
+  }
+  .filter-container {
+    z-index: 10;
+    position: relative;
+    width: 104px;
+    border-radius: 6px;
+    height: 29px;
+    background-image: url('/statistical/select-bg.png');
+    line-height: 29px;
+    color: #fff;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+    img {
+      width: 10px;
+    }
+    .filter-name {
+      width: 70px;
+      text-align: center;
+      padding: 0px 2px;
+      font-size: 14px;
+      position: relative;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-left: 4px;
+    }
+    .filter-item-container {
+      width: 100%;
+      position: absolute;
+      background: rgba(11, 39, 68, 0.8);
+      border: 1px solid #0a62c6;
+      top: 36px;
+      left: 0px;
+      height: 140px;
+      overflow: auto;
+      .filter-item {
+        height: 36px;
+        text-align: center;
+        &:hover {
+          cursor: pointer;
+          background: #054234;
+        }
+      }
+      .filter-item.active {
+        background: #054234;
+        color: #e1ecf8;
+      }
+      .filter-item {
+        background: #086953;
+        color: #fff;
+      }
+    }
+  }
+</style>

src/views/sys/exception/rightDataScreen/circulation/index.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="circulation-container">
+    <!-- circulation 下发图斑趋势 折线图 -->
+    <div class="circulation-title">
+      <div class="title">数据分析</div>
+      <div class="month">
+        <div class="month-list">
+          <div
+            v-for="item in monthOptions"
+            :key="item.value"
+            @click="monthClick(item.value)"
+            :class="item.value == monthVal ? 'active' : ''"
+            >{{ item.label }}</div
+          >
+        </div>
+        <div class="filter-container">
+          <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
+          <div class="filter-icon" @click="handlerChangeFilterOptions">
+            <img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
+            <img src="/statistical/down.png" alt="" v-else />
+          </div>
+          <div class="filter-item-container" v-if="showFilterOptions">
+            <div
+              v-for="(item, index) in props.countyList"
+              :key="index"
+              :class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
+              @click="handlerCheckedFilter(item)"
+              >{{ item.name }}</div
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="circulation-content">
+      <div class="circulation-left">
+        <div class="circulation-left-left">
+          <div class="circulation-content-title">下发图斑</div>
+          <div class="circulation-content-number">
+            <div>
+              <span>下发图斑(宗数)</span>
+              <span>{{ data.xftb }}</span>
+            </div>
+            <div>
+              <span>耕地面积(亩)</span>
+              <span>{{ data.gdmj }}</span>
+            </div>
+          </div>
+          <div class="circulation-content-compare">
+            <div class="compare-title">环比</div>
+            <div>
+              <img src="/statistical/go-up.png" alt="" v-if="data.xftbhb > 0" />
+              <img src="/statistical/decline.png" alt="" v-else />
+              <span> {{ data.xftbhb }}%</span>
+            </div>
+            <div>
+              <img src="/statistical/go-up.png" alt="" v-if="data.gdmjhb > 0" />
+              <img src="/statistical/decline.png" alt="" v-else />
+              <span> {{ data.gdmjhb }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="circulation-right">
+        <div class="circulation-left-left">
+          <div class="circulation-content-title">新增违法</div>
+          <div class="circulation-content-number">
+            <div>
+              <span>下发图斑(宗数)</span>
+              <span>{{ data.xzwf }}</span>
+            </div>
+            <div>
+              <span>耕地面积(亩)</span>
+              <span>{{ data.xzwfmj }}</span>
+            </div>
+          </div>
+          <div class="circulation-content-compare">
+            <div class="compare-title">环比</div>
+            <div>
+              <img src="/statistical/go-up.png" alt="" v-if="data.wftbhb > 0" />
+              <img src="/statistical/decline.png" alt="" v-else />
+              <span> {{ data.wftbhb }}%</span>
+            </div>
+            <div>
+              <img src="/statistical/go-up.png" alt="" v-if="data.xzwfgdmjhb > 0" />
+              <img src="/statistical/decline.png" alt="" v-else />
+              <span> {{ data.xzwfgdmjhb }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import { monthOptions } from '@/utils/global';
+  import { getAnalysisData } from '@/api/statistical/index';
+
+  const props = defineProps({
+    countyList: Object,
+  });
+  watch(
+    () => props.countyList,
+    (val) => {
+      currentFilter.value = props.countyList[0].id;
+      currentFilterName.value = props.countyList[0].name;
+      getCount();
+    },
+  );
+
+  const monthVal = ref(monthOptions[monthOptions.length - 1].value);
+  const data: any = ref({});
+  function monthClick(val) {
+    monthVal.value = val;
+    getCount();
+  }
+  const showFilterOptions = ref(false);
+  const currentFilter = ref();
+  const currentFilterName = ref();
+
+  function handlerChangeFilterOptions() {
+    showFilterOptions.value = !showFilterOptions.value;
+  }
+
+  function handlerCheckedFilter(item) {
+    currentFilter.value = item.id;
+    currentFilterName.value = item.name;
+    showFilterOptions.value = false;
+    getCount();
+  }
+  function getCount() {
+    const querys = {
+      month: monthVal.value,
+      countyid: currentFilter.value,
+    };
+    getAnalysisData(querys).then((res) => {
+      data.value = res;
+    });
+  }
+  onMounted(() => {});
+</script>
+<style lang="less" scoped>
+  .circulation-container {
+    z-index: 10;
+  }
+  .circulation-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 18px;
+    .title {
+      padding-left: 10px;
+      width: 258px;
+      height: 36px;
+      line-height: 36px;
+      background-image: url('/statistical/right-title-bg.png');
+      color: #fff;
+    }
+  }
+  .month {
+    display: flex;
+    .month-list {
+      display: flex;
+      div {
+        width: 61px;
+        height: 27px;
+        background: #22293d;
+        border-radius: 3px 0px 0px 3px;
+        color: #fff;
+        text-align: center;
+        line-height: 27px;
+        cursor: pointer;
+      }
+      .active {
+        background: linear-gradient(-38deg, #3058e1, #4cbbf5);
+        box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
+      }
+    }
+  }
+  .circulation-content {
+    color: #7ebbff;
+    display: flex;
+    justify-content: space-around;
+  }
+  .circulation-content-title {
+    width: 28px;
+    height: 106px;
+    padding: 10px 0;
+    background-image: url('/statistical/data-analysis-title-bg.png');
+    background-size: 100% 100%;
+    color: #fff;
+    text-align: center;
+  }
+
+  .circulation-left-left {
+    display: flex;
+  }
+  .circulation-content-number {
+    display: flex;
+    flex-direction: column;
+    margin-left: 18px;
+    div {
+      display: flex;
+      flex-direction: column;
+      span:last-child {
+        color: #fff;
+        font-weight: 500;
+        font-size: 28px;
+        margin: 10px 0;
+      }
+    }
+  }
+  .circulation-content-compare {
+    border: 1px solid rgb(42, 137, 218, 0.39);
+    width: 240px;
+    margin-left: 32px;
+    .compare-title {
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      background-image: url('/statistical/huanbi.webp');
+    }
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    span {
+      color: #fff;
+      font-weight: 500;
+      font-size: 28px;
+      margin: 10px;
+    }
+    img {
+      width: 30px;
+    }
+  }
+  .filter-container {
+    z-index: 10;
+    position: relative;
+    width: 104px;
+    border-radius: 6px;
+    height: 29px;
+    background-image: url('/statistical/select-bg.png');
+    line-height: 29px;
+    color: #fff;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+    img {
+      width: 10px;
+    }
+    .filter-name {
+      width: 70px;
+      text-align: center;
+      padding: 0px 2px;
+      font-size: 14px;
+      position: relative;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-left: 4px;
+    }
+    .filter-item-container {
+      width: 100%;
+      position: absolute;
+      background: rgba(11, 39, 68, 0.8);
+      border: 1px solid #0a62c6;
+      top: 36px;
+      left: 0px;
+      height: 140px;
+      overflow: auto;
+      .filter-item {
+        height: 36px;
+        text-align: center;
+        &:hover {
+          cursor: pointer;
+          background: #054234;
+        }
+      }
+      .filter-item.active {
+        background: #054234;
+        color: #e1ecf8;
+      }
+      .filter-item {
+        background: #086953;
+        color: #fff;
+      }
+    }
+  }
+</style>

src/views/sys/exception/rightDataScreen/columnar/index.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="columnar-container">
+    <!-- columnar 下发图斑 柱状图 -->
+    <div class="columnar-title">
+      <div class="title">{{ props.typeName }}</div>
+      <div class="month">
+        <div class="filter-container">
+          <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
+          <div class="filter-icon" @click="handlerChangeFilterOptions">
+            <img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
+            <img src="/statistical/down.png" alt="" v-else />
+          </div>
+          <div class="filter-item-container" v-if="showFilterOptions">
+            <div
+              v-for="(item, index) in filters"
+              :key="index"
+              :class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
+              @click="handlerCheckedFilter(item)"
+              >{{ item.label }}</div
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="columnar-content">
+      <div id="columnar" style="height: 30vh"> </div>
+      <span class="columnar-unit">单位：</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import * as echarts from 'echarts';
+  import { monthAllOptions } from '@/utils/global';
+  import { caseOffenceEcharts } from '@/api/statistical/index';
+
+  const filters = monthAllOptions();
+  const showFilterOptions = ref(false);
+  const currentFilter = ref(0);
+  const currentFilterName = ref('全部');
+
+  function handlerChangeFilterOptions() {
+    showFilterOptions.value = !showFilterOptions.value;
+  }
+
+  function handlerCheckedFilter(item) {
+    currentFilter.value = item.value;
+    currentFilterName.value = item.label;
+    showFilterOptions.value = false;
+    getData();
+  }
+
+  const props = defineProps({
+    typeName: {
+      type: String,
+      default: '下发图斑',
+    },
+    type: {
+      type: Number,
+      default: 1,
+    },
+  });
+  watch(
+    () => props.type,
+    (val) => {
+      getData();
+    },
+  );
+  const countyList: any = ref([]);
+  const tbAreaList: any = ref([]);
+  const gdAreaList: any = ref([]);
+  const ntAreaList: any = ref([]);
+  const xfAreaList: any = ref([]);
+  function getData() {
+    countyList.value = [];
+    tbAreaList.value = [];
+    gdAreaList.value = [];
+    ntAreaList.value = [];
+    xfAreaList.value = [];
+    const querys = {
+      type: props.type,
+      month: currentFilter.value,
+    };
+    caseOffenceEcharts(querys).then((res) => {
+      res.forEach((element) => {
+        countyList.value.push(element.countyname);
+        tbAreaList.value.push(element.tbmj);
+        gdAreaList.value.push(element.gdmj);
+        ntAreaList.value.push(element.yjjbntmj);
+        xfAreaList.value.push(element.tbzs);
+      });
+      chartData();
+    });
+  }
+  function chartData() {
+    var chartDom = document.getElementById('columnar');
+    var myChart = echarts.init(chartDom);
+    var option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+          },
+        },
+      },
+      grid: {
+        left: '4%',
+        top: '18%',
+        right: '5%',
+        bottom: '22%',
+      },
+      legend: {
+        data: ['图斑面积', '耕地面积', '永久基本农田面积', '下发个数'],
+        top: '4%',
+        textStyle: {
+          color: '#fff',
+          fontSize: 14,
+        },
+      },
+      xAxis: {
+        data: countyList.value,
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: '#3d5269',
+            width: 1,
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: '#fff', //X轴文字颜色
+            fontSize: 12,
+          },
+          interval: 0,
+          // rotate: 30,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '',
+          nameTextStyle: {
+            color: '#396A87',
+            fontSize: 14,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 0.5,
+              color: '#3d5269',
+              type: 'dashed',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#396A87',
+              fontSize: 14,
+            },
+          },
+        },
+        {
+          type: 'value',
+          name: '',
+          nameTextStyle: {
+            color: '#396A87',
+            fontSize: 14,
+          },
+          position: 'right',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#396A87',
+              width: 2,
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: '图斑面积',
+          type: 'bar',
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#E5410E',
+                },
+                {
+                  offset: 1,
+                  color: '#172830',
+                },
+              ]),
+            },
+          },
+          data: tbAreaList.value,
+        },
+        {
+          name: '耕地面积',
+          type: 'bar',
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#E5A10E',
+                },
+                {
+                  offset: 1,
+                  color: '#172830',
+                },
+              ]),
+            },
+          },
+          data: gdAreaList.value,
+        },
+        {
+          name: '永久基本农田面积',
+          type: 'bar',
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#00D532',
+                },
+                {
+                  offset: 1,
+                  color: '#172830',
+                },
+              ]),
+            },
+          },
+          data: ntAreaList.value,
+        },
+        {
+          name: '下发个数',
+          type: 'line',
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          showAllSymbol: true, //显示所有图形。
+          symbol: 'circle', //标记的图形为实心圆
+          symbolSize: 6, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: '#FF9C5D',
+            borderColor: '#FF9C5D',
+            width: 2,
+            shadowColor: '#FF9C5D',
+            shadowBlur: 2,
+          },
+          label: {
+            show: true,
+            color: '#fff',
+            position: 'top',
+          },
+          lineStyle: {
+            color: '#FF9C5D',
+            width: 2,
+            shadowBlur: 2,
+          },
+          data: xfAreaList.value,
+        },
+      ],
+    };
+    option && myChart.setOption(option);
+  }
+  onMounted(() => {
+    getData();
+    // chartData();
+  });
+</script>
+<style lang="less" scoped>
+  .columnar-container {
+    z-index: 10;
+  }
+  .columnar-title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+    align-items: center;
+    .title {
+      padding-left: 10px;
+      width: 258px;
+      height: 36px;
+      line-height: 36px;
+      background-image: url('/statistical/right-title-bg.png');
+      color: #fff;
+    }
+  }
+  .columnar-content {
+    width: 100%;
+    position: relative;
+  }
+  .columnar-unit {
+    position: absolute;
+    left: 100px;
+    top: 16px;
+    color: #fff;
+    z-index: 10;
+    font-size: 14px;
+  }
+  .filter-container {
+    z-index: 10;
+    position: relative;
+    width: 104px;
+    border-radius: 6px;
+    height: 29px;
+    background-image: url('/statistical/select-bg.png');
+    line-height: 29px;
+    color: #fff;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+    img {
+      width: 10px;
+    }
+    .filter-name {
+      width: 70px;
+      text-align: center;
+      padding: 0px 2px;
+      font-size: 14px;
+      position: relative;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-left: 4px;
+    }
+    .filter-item-container {
+      width: 100%;
+      position: absolute;
+      background: rgba(11, 39, 68, 0.8);
+      border: 1px solid #0a62c6;
+      top: 36px;
+      left: 0px;
+      height: 140px;
+      overflow: auto;
+      .filter-item {
+        height: 36px;
+        text-align: center;
+        &:hover {
+          cursor: pointer;
+          background: #054234;
+        }
+      }
+      .filter-item.active {
+        background: #054234;
+        color: #e1ecf8;
+      }
+      .filter-item {
+        background: #086953;
+        color: #fff;
+      }
+    }
+  }
+</style>

src/views/sys/exception/rightDataScreen/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div style="background: rgba(0, 0, 0, 0.8)">
+    <a-segmented
+      v-model:value="type"
+      :options="data"
+      style="
+        width: 100%;
+        height: 37px;
+        border-radius: 19px;
+        background: #102649;
+        margin-bottom: 23px;
+        border-top: 1px solid #4bb8f4;
+        border-top: 1px solid #4bb8f4;
+        border-left: 1px solid #4bb8f4;
+      "
+      @change="changeType"
+    />
+    <!-- columnar 下发图斑 柱状图 -->
+    <Columnar :type="type" :typeName="typeName" />
+    <!-- brokenline 下发图斑趋势 折线图 -->
+    <Brokenline :type="type" :typeName="typeName" :countyList="list" />
+    <!-- circulation 数据分析 环比 -->
+    <Circulation :countyList="list" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { Columnar, Brokenline, Circulation } from './page';
+  import { ref, onMounted } from 'vue';
+  import { getUserOrgs } from '@/api/tiankongdi';
+  import { getChildrenTree } from '@/api/demo/system';
+
+  const type: any = ref(1);
+  const typeName: any = ref('下发图斑');
+  const data = ref([
+    {
+      label: '下发图斑',
+      value: 1,
+    },
+    {
+      label: '核实后新增违法',
+      value: 2,
+    },
+    {
+      label: '整改后剩余违法',
+      value: 3,
+    },
+  ]);
+  function changeType(val) {
+    console.log(val);
+    type.value = val;
+    typeName.value = data.value.find((item) => item.value == val)?.label;
+  }
+  // 初始数据
+  const list = ref();
+  async function getOptions() {
+    const data = await getChildrenTree({
+      parentId: 371300,
+    });
+    data.forEach((item) => {
+      item.isClick = false;
+    });
+    list.value = data;
+    let linyishi = {
+      id: '',
+      name: '临沂市',
+    };
+    list.value.unshift(linyishi);
+  }
+  // 获取用户可以访问的机构信息
+  async function handlerGetOrgs() {
+    let orgs = await getUserOrgs({});
+    let isLevel = orgs.find((item, index) => {
+      return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
+    });
+    if (isLevel) {
+      // 市级
+      getOptions();
+    } else {
+      // 县区级
+      let levesl = orgs.filter((item, index) => {
+        return item.parentName == '临沂市' || item.parentId == 371300;
+      });
+      list.value = levesl;
+    }
+  }
+  onMounted(async () => {
+    await handlerGetOrgs();
+  });
+</script>
+<style lang="less" scoped>
+  :deep(.ant-segmented-thumb) {
+    background: linear-gradient(-38deg, #3058e1, #4cbbf5);
+    border-radius: 19px;
+  }
+  :deep(.ant-segmented-item) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 19px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.5);
+  }
+  :deep(.ant-segmented-group) {
+    height: 100%;
+  }
+  :deep(.ant-segmented-item-selected) {
+    background: linear-gradient(-38deg, #3058e1, #4cbbf5);
+    box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 15px;
+    color: #ffffff;
+  }
+</style>

src/views/sys/exception/rightDataScreen/page.ts

@@ -0,0 +1,3 @@
+export { default as Columnar } from './columnar/index.vue';
+export { default as Brokenline } from './brokenline/index.vue';
+export { default as Circulation } from './circulation/index.vue';

src/views/sys/login_lindidiaocha/ForgetPasswordForm.vue

@@ -73,7 +73,7 @@
 
     font-family: Alibaba PuHuiTi;
     font-weight: 500;
-    font-size: 21px;
+    font-size: 15px;
     color: #ffffff;
   }
 </style>

src/views/sys/login_lindidiaocha/LoginForm.vue

@@ -1,6 +1,6 @@
 <template>
   <LoginFormTitle class="login_title" />
-  <Form
+  <a-form
     class="p-4 enter-x"
     :model="formData"
     :rules="getFormRules"
@@ -35,7 +35,11 @@
 
     <ARow>
       <ACol :span="12">
-        <FormItem>
+        <FormItem
+          :style="{
+            'text-align': 'left',
+          }"
+        >
           <Checkbox v-model:checked="rememberMe" size="small">
             {{ t('sys.login.rememberMe') }}
           </Checkbox>
@@ -54,12 +58,12 @@
       </ACol>
     </ARow>
 
-    <FormItem>
+    <a-form-item>
-      <Button size="large" block @click="handleLogin" :loading="loading" class="logon">
+      <a-button size="large" block @click="handleLogin" :loading="loading" class="logon">
         立即登录
-      </Button>
+      </a-button>
-    </FormItem>
+    </a-form-item>
-  </Form>
+  </a-form>
   <div class="bottom" v-if="getShow">
     <Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
       <template #icon>
@@ -183,7 +187,7 @@
 
     font-family: Alibaba PuHuiTi;
     font-weight: 500;
-    font-size: 21px;
+    font-size: 15px;
     color: #ffffff;
   }
 

src/views/sys/login_lindidiaocha/RegisterForm.vue

@@ -106,7 +106,7 @@
 
     font-family: Alibaba PuHuiTi;
     font-weight: 500;
-    font-size: 21px;
+    font-size: 15px;
     color: #ffffff;
   }
 </style>