From 7e3a046d1e638d34a5ae35536ff7bf7ac0fc94bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Mon, 5 Aug 2024 15:05:10 +0800
Subject: [PATCH 01/10] =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=8C=96=E5=BB=BA?=
 =?UTF-8?q?=E8=A1=A8=E8=92=99=E5=B1=82=E7=82=B9=E5=87=BB=E6=97=A0=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/routes/index.ts                    |   2 +-
 .../cloudQueryManagement/index.vue            |   7 +-
 .../cloudQueryManagement/util.ts              |  10 -
 .../demo/system/graphicaltable/index.vue      |   4 +-
 .../system/graphicaltable/modal/index.vue     |   9 +-
 src/views/subject/subject/index.vue           | 725 ++++++++++++++++++
 .../{ => subject_lindidiaocha}/index.vue      |   0
 .../login_lindidiaocha/ForgetPasswordForm.vue |   2 +-
 .../sys/login_lindidiaocha/LoginForm.vue      |  20 +-
 .../sys/login_lindidiaocha/RegisterForm.vue   |   2 +-
 10 files changed, 753 insertions(+), 28 deletions(-)
 create mode 100644 src/views/subject/subject/index.vue
 rename src/views/subject/{ => subject_lindidiaocha}/index.vue (100%)

diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index 5048972b..c0061dcb 100644
--- a/src/router/routes/index.ts
+++ b/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: '主题',
   },
diff --git a/src/views/demo/system/cloudManagement/cloudQueryManagement/index.vue b/src/views/demo/system/cloudManagement/cloudQueryManagement/index.vue
index b47cff3c..feb6ae7b 100644
--- a/src/views/demo/system/cloudManagement/cloudQueryManagement/index.vue
+++ b/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'">
-            <a-tag v-if="record.enabledMark" color="success">正常</a-tag>
-            <a-tag v-else color="error">停用</a-tag>
+          <template v-if="column.key == 'overlayList'">
+            <div v-for="tag in record.overlayList" :key="tag">
+              <a-tag>{{ tag }}</a-tag>
+            </div>
           </template>
         </template>
       </BasicTable>
diff --git a/src/views/demo/system/cloudManagement/cloudQueryManagement/util.ts b/src/views/demo/system/cloudManagement/cloudQueryManagement/util.ts
index 8160064b..84abc09a 100644
--- a/src/views/demo/system/cloudManagement/cloudQueryManagement/util.ts
+++ b/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,
   }
 ];
diff --git a/src/views/demo/system/graphicaltable/index.vue b/src/views/demo/system/graphicaltable/index.vue
index 21d65231..1102f6b3 100644
--- a/src/views/demo/system/graphicaltable/index.vue
+++ b/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';
diff --git a/src/views/demo/system/graphicaltable/modal/index.vue b/src/views/demo/system/graphicaltable/modal/index.vue
index 54ef19a7..f51c1e3d 100644
--- a/src/views/demo/system/graphicaltable/modal/index.vue
+++ b/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();
   });
diff --git a/src/views/subject/subject/index.vue b/src/views/subject/subject/index.vue
new file mode 100644
index 00000000..ac2f2a3c
--- /dev/null
+++ b/src/views/subject/subject/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>
diff --git a/src/views/subject/index.vue b/src/views/subject/subject_lindidiaocha/index.vue
similarity index 100%
rename from src/views/subject/index.vue
rename to src/views/subject/subject_lindidiaocha/index.vue
diff --git a/src/views/sys/login_lindidiaocha/ForgetPasswordForm.vue b/src/views/sys/login_lindidiaocha/ForgetPasswordForm.vue
index 70a8cf1b..3baecbca 100644
--- a/src/views/sys/login_lindidiaocha/ForgetPasswordForm.vue
+++ b/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>
diff --git a/src/views/sys/login_lindidiaocha/LoginForm.vue b/src/views/sys/login_lindidiaocha/LoginForm.vue
index c6d6e982..21d8c835 100644
--- a/src/views/sys/login_lindidiaocha/LoginForm.vue
+++ b/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>
-      <Button size="large" block @click="handleLogin" :loading="loading" class="logon">
+    <a-form-item>
+      <a-button size="large" block @click="handleLogin" :loading="loading" class="logon">
         立即登录
-      </Button>
-    </FormItem>
-  </Form>
+      </a-button>
+    </a-form-item>
+  </a-form>
   <div class="bottom" v-if="getShow">
     <Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
       <template #icon>
@@ -181,7 +185,7 @@
 
     font-family: Alibaba PuHuiTi;
     font-weight: 500;
-    font-size: 21px;
+    font-size: 15px;
     color: #ffffff;
   }
 
diff --git a/src/views/sys/login_lindidiaocha/RegisterForm.vue b/src/views/sys/login_lindidiaocha/RegisterForm.vue
index e5af1ee7..e67fbccb 100644
--- a/src/views/sys/login_lindidiaocha/RegisterForm.vue
+++ b/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>

From 5439357d27344b867f18ac0a1d432ecfbcf6933b Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 15:14:18 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=8A=A5=E8=A1=A8?=
 =?UTF-8?q?=E5=8F=AA=E6=9C=89=E5=AE=97=E6=95=B0=E5=8F=AF=E4=BB=A5=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/caseoffence/index.vue | 72 ++++++++++++++--------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/views/demo/caseoffence/index.vue b/src/views/demo/caseoffence/index.vue
index 135ddbdd..9c0e9792 100644
--- a/src/views/demo/caseoffence/index.vue
+++ b/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 == '总计'">

From c24dd2247d91da65723eced636e431fc138e1723 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 16:02:18 +0800
Subject: [PATCH 03/10] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=92=8C=E6=9C=80=E5=A4=A7=E6=94=BE=E5=A4=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/exception/Converge/SearchComponent.vue | 5 +++--
 src/views/sys/exception/Converge/index.vue           | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/sys/exception/Converge/SearchComponent.vue b/src/views/sys/exception/Converge/SearchComponent.vue
index cee6fe19..484fce35 100644
--- a/src/views/sys/exception/Converge/SearchComponent.vue
+++ b/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+$/)){
-        let res = await getLoadDroneCaseInfoDetail({caseNo:keyword.value,page:1,limit:10});
+    if(keyword.value.match(/^[0-9A-Z]+$/)){
+        let res = await loadCaseInfoTuBanList({caseNo:keyword.value,page:1,limit:10});
         searchResult.value = [];
         res?.items?.forEach((item,index)=>{
             let obj = {
diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
index 91a1a354..d1351f75 100644
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@@ -58,7 +58,7 @@ const initMap = () => {
                 },
             ],
         },
-        maxZoom:18,
+        maxZoom:17,
         minZoom:1,
         zoom: 10,
         pitch:0,

From 59bad76493d2c9afe779bcc4ebb26dff3c5964f7 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 16:12:58 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E9=81=AE=E7=BD=A9?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E5=BA=A6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/exception/Converge/index.vue       | 2 +-
 src/views/sys/exception/LargeScreenMap/index.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
index d1351f75..24332573 100644
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@@ -489,7 +489,7 @@ function handlerLoadMaskLayer(){
           },
           paint: {
             'fill-color': '#ffffff',
-            'fill-opacity': 1 /* 透明度 */,
+            'fill-opacity': 0.8 /* 透明度 */,
           },
           layout: {
             visibility: 'visible',
diff --git a/src/views/sys/exception/LargeScreenMap/index.vue b/src/views/sys/exception/LargeScreenMap/index.vue
index ceb7a334..e521a2e5 100644
--- a/src/views/sys/exception/LargeScreenMap/index.vue
+++ b/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',

From 88ab44841b239eab4d72b6adb64d29cafacf6ccd Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 16:30:29 +0800
Subject: [PATCH 05/10] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=A1=86=E4=BD=8D=E7=BD=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/exception/Converge/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
index 24332573..df1bc540 100644
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@@ -586,8 +586,8 @@ defineExpose({
     position:absolute;
     width:330px;
     height:40px;
-    top:90px;
-    left:88px;
+    top:72px;
+    left:73px;
     z-index:9999;
 }
 ::v-deep .mapboxgl-ctrl-logo{

From fa44c788ee424280d38426df8f1195817026f453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Mon, 5 Aug 2024 16:34:55 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E5=A4=A9=E6=B0=94=E6=9F=A5=E8=AF=A2API?=
 =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E4=B8=BA=E7=99=BE=E5=BA=A6=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subject/subject_lindidiaocha/index.vue    |  66 ++++-
 .../sys/exception/mapComponent/top_title.vue  | 252 ++++++++++--------
 2 files changed, 203 insertions(+), 115 deletions(-)

diff --git a/src/views/subject/subject_lindidiaocha/index.vue b/src/views/subject/subject_lindidiaocha/index.vue
index 45a1833f..ac2f2a3c 100644
--- a/src/views/subject/subject_lindidiaocha/index.vue
+++ b/src/views/subject/subject_lindidiaocha/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;
diff --git a/src/views/sys/exception/mapComponent/top_title.vue b/src/views/sys/exception/mapComponent/top_title.vue
index b2b5d216..2f6b6436 100644
--- a/src/views/sys/exception/mapComponent/top_title.vue
+++ b/src/views/sys/exception/mapComponent/top_title.vue
@@ -1,54 +1,64 @@
 <template>
-    <div class="screen-header-container">
-        <div class="screen-title"><img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
-        <span class="screen-currentTime"> 
-            <span class="time">{{ currentTime }}</span>
-            <span class="separator"></span>
-            <span class="weather">{{ Weather }}</span>
-        </span>
-         <div class="left-category-container">
-            <div class="category-item" v-for="(item,index) in left_categorys"
-                :style="{left:-index*26+'px'}"
-                @click="getHome(item)"
-                >{{item.title}}
-            </div>
-        </div>
-        <div class="right_category-container" >
-            <div class="category-item" v-for="(item,index) in right_categorys"
-                :style="{left:-index*26+'px'}"
-                @click="getHome(item)"
-            >{{item.title}}</div>
-        </div>
-        <div class="user-info">
-            <span style="color:#325E95;">{{fireUserLoginName}}</span>
-            &nbsp;
-            <span style="color:#ddd" @click="logout">退出</span>
-        </div>
+  <div class="screen-header-container">
+    <div class="screen-title">
+      <img src="/public/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
+    </div>
+    <span class="screen-currentTime">
+      <span class="time">{{ currentTime }}</span>
+      <span class="separator"></span>
+      <span class="weather">{{ Weather }}</span>
+    </span>
+    <div class="left-category-container">
+      <div
+        class="category-item"
+        v-for="(item, index) in left_categorys"
+        :key="index"
+        :style="{ left: -index * 26 + 'px' }"
+        @click="getHome(item)"
+      >
+        {{ item.title }}
+      </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)`,
-        }"
+        v-for="(item, index) in right_categorys"
+        :key="index"
+        :style="{ left: -index * 26 + 'px' }"
         @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() {
-    // 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;
-    });
+  async function getWeather() {
+    try {
+      // 百度国内天气查询API
+      const response = await axios.get('https://api.map.baidu.com/weather/v1/', {
+        params: {
+          district_id: 371300,
+          data_type: 'all',
+          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;
-        left: 50px;
-        top: -60px;
+      position: relative;
+      left: 50px;
+      top: -60px;
 
-        width: 344px;
-        height: 14px;
-        font-family: DengXian;
-        font-weight: 400;
+      width: 344px;
+      height: 14px;
+      font-family: DengXian;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8bd8ff;
+      line-height: 3px;
+      font-style: italic;
+      display: flex;
+      align-items: center;
+    }
+    .time,
+    .weather {
+      display: inline-block;
+    }
+    .separator {
+      margin: 0 50px;
+    }
+    .left-category-container {
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translate(calc(-50% - 570px), 0);
+      .category-item {
+        float: left;
+        width: 138px;
+        height: 32px;
         font-size: 14px;
-        color: #8BD8FF;
-        line-height: 3px;
-        font-style: italic;
-        display: flex;
-        align-items: center;
+        line-height: 32px;
+        text-align: center;
+        background-image: url('/public/statistical/category-left.png');
+        background-size: 138px 32px;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
       }
-      .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;
-              line-height:32px;
-              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;
-          }
+    }
+    .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{
-          width:120px;
-          color:#e1e1e1;
-          position:absolute;
-          top:48px;
-          right:20px;
-          font-size:14px;
-          &:hover{
-              cursor:pointer;
-              color:#8BE5EE;
-          }
+    .user-info {
+      width: 120px;
+      color: #e1e1e1;
+      position: absolute;
+      top: 48px;
+      right: 20px;
+      font-size: 14px;
+      &:hover {
+        cursor: pointer;
+        color: #8be5ee;
       }
+    }
   }
 </style>

From b5058b21eb77c7fce3f90f3207ee30682846bd42 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 16:51:30 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E9=97=B4=E9=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
index b9892ca4..d57af1b1 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -541,6 +541,7 @@
     width: 100vw;
     height: calc(100vh - 120px);
     display: flex;
+    padding: 0px 20px;
   }
   .detail-container::after {
     content: '';
@@ -551,7 +552,7 @@
   }
   .map-container {
     float: left;
-    width: 50vw;
+    width: 45vw;
     height: calc(100vh - 100px);
     margin-right: 20px;
   }

From 9e4092802a4341eda9d402498d394da191e80d3d Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 16:55:31 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E9=97=B4=E9=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../degraining/curbspotcity/MapList/ShowInfoModal/index.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
index 4e5c05cf..27ba63f0 100644
--- a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -541,6 +541,7 @@
     width: 100vw;
     height: calc(100vh - 120px);
     display: flex;
+    padding: 0px 20px;
   }
   .detail-container::after {
     content: '';
@@ -551,7 +552,7 @@
   }
   .map-container {
     float: left;
-    width: 50vw;
+    width: 45vw;
     height: calc(100vh - 100px);
     margin-right: 20px;
   }

From ed3ab7ed50f017dde94068f72539f74be94d84ba Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 17:06:57 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E8=AF=A6=E6=83=85=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E9=97=B4=E9=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/src/components/ImageUpload.vue           | 1 +
 .../degraining/curbspotcity/MapList/ShowInfoModal/index.vue    | 3 ++-
 .../curbspotcity/MapList/SplitPolygonModal/index.vue           | 3 ++-
 .../tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue    | 3 ++-
 .../curbspotcity/MapList/SplitPolygonModal/index.vue           | 3 ++-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue
index f0892341..a1734f1c 100644
--- a/src/components/Upload/src/components/ImageUpload.vue
+++ b/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;
diff --git a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
index 27ba63f0..399cf493 100644
--- a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -534,7 +534,7 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   .detail-container {
@@ -558,6 +558,7 @@
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-left){
     position: absolute;
diff --git a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
index 63a04ee4..3ecc1105 100644
--- a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
+++ b/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;
diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
index d57af1b1..fc76b8f1 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -534,7 +534,7 @@
 <style lang="scss" scoped>
   .image-div {
     width: 330px;
-    max-height: 200px;
+    max-height: 220px;
     overflow: auto;
   }
   .detail-container {
@@ -558,6 +558,7 @@
   }
   :deep(.ant-image){
     margin-right: 10px;
+    margin-bottom: 10px;
   }
   :deep(.ant-image-preview-switch-left){
     position: absolute;
diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
index d78f7638..d033f668 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
+++ b/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;

From 06d39ed24cc3f901584dfc7df965211cf16bf965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Mon, 5 Aug 2024 17:50:05 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/statistical/data-analysis-title-bg.png | Bin 0 -> 4922 bytes
 public/statistical/decline.png                | Bin 0 -> 1932 bytes
 public/statistical/down.png                   | Bin 0 -> 285 bytes
 public/statistical/go-up.png                  | Bin 0 -> 1771 bytes
 public/statistical/huanbi.webp                | Bin 0 -> 1804 bytes
 public/statistical/right-title-bg.png         | Bin 0 -> 12414 bytes
 public/statistical/select-bg.png              | Bin 0 -> 1914 bytes
 public/statistical/up.png                     | Bin 0 -> 342 bytes
 src/api/statistical/index.ts                  |  38 +-
 src/utils/global.ts                           |  28 ++
 .../rightDataScreen/brokenline/index.vue      | 381 ++++++++++++++++++
 .../rightDataScreen/circulation/index.vue     | 293 ++++++++++++++
 .../rightDataScreen/columnar/index.vue        | 380 +++++++++++++++++
 .../sys/exception/rightDataScreen/index.vue   | 117 ++++++
 .../sys/exception/rightDataScreen/page.ts     |   3 +
 15 files changed, 1234 insertions(+), 6 deletions(-)
 create mode 100644 public/statistical/data-analysis-title-bg.png
 create mode 100644 public/statistical/decline.png
 create mode 100644 public/statistical/down.png
 create mode 100644 public/statistical/go-up.png
 create mode 100644 public/statistical/huanbi.webp
 create mode 100644 public/statistical/right-title-bg.png
 create mode 100644 public/statistical/select-bg.png
 create mode 100644 public/statistical/up.png
 create mode 100644 src/views/sys/exception/rightDataScreen/brokenline/index.vue
 create mode 100644 src/views/sys/exception/rightDataScreen/circulation/index.vue
 create mode 100644 src/views/sys/exception/rightDataScreen/columnar/index.vue
 create mode 100644 src/views/sys/exception/rightDataScreen/index.vue
 create mode 100644 src/views/sys/exception/rightDataScreen/page.ts

diff --git a/public/statistical/data-analysis-title-bg.png b/public/statistical/data-analysis-title-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b370c93183cad73c072ff49b3e8cc2942780626c
GIT binary patch
literal 4922
zcmV-A6UFR_P)<h;3K|Lk000e1NJLTq002Ay007ho1^@s6!0SMr00001b5ch_0Itp)
z=>Px{^hrcPRCr$9oym?Q)fI+sR&_T940gBMEG*-B>SX8_;Hk`PFIga2;$=MGS@I*m
z#=R(cSOWIS0v7ZT)`^He>*R?u-iR!)6QQcgjEuP7{r@xEn^D!fHb3sX_1=K*`PX}&
z-2LI=`G;+2=WRDWPv2J`=kt3W&ga0-)$=IF-+A)=zo{Ib-hHOMz5CZR=+;^Z7;ox<
z#d|sQ=LxJTYR!BPFu|Qb+4i6f?ONN7U)kf%SKj|S{dmt(I1Stb%SQt64b?rIo<VO1
zyvEj71UrW6W(xNvEE&TaBr40!E^vEo_+~q6Un*aJ3u~7zYP`XS<MHV0?c<{?T?XC?
zloHq$aV(P6VoFv6ueCJ2e+y7eYz<xo9@^ujL99{v6tJGktARNzbzN2XErGq*g#%Ut
zODko8dE;>kTU#odz?DH{A+<Q$x)w(&Z<e%r7ZInhG)-(-;ogB%)!s^BDC@zRb(per
z#nRlWpBFGdm4(AmByD2pUf``)Oi|O}D%@+e9)-7PDKoI4rF(4sc>zbU8`j}9tC=ix
zuZto_baz_44Sg24$3a%lOvx&va@crOp)0U!Tx6*n#j*=r9S~qMJ@uA$j=C#8Ihz4v
z%eJa;Z-c`jB2`Pk)d5{KaJIurXK6k=5quRENvoPCWc>b5DO}AHR+gscqqZ{DcvJ^e
zQF*JxwW-2Aw#!1V1+K<#THz>mrOmDqIO@9O>#4F->4>th)ll)kHn((ja9QZ8b9%e0
zQXQ_SixX#od(N#j9GUFgRfn?!ylUV|9G7A^+aOecvy<r6-;)4W<Cu=mg7?I7Wx-I6
z;YxeSkIewDsl}D-JauA2+qF-YpB`e@(y~gVNOqYRohPztkILy7uEttM-Re2D3>{4h
zf4xiLj4Ii+@fte=Bx`Geeb9FL2jXijT}fD1rSi#vGte2gY|&j2EFN7+E2~N-j(ec9
zHU{LC0B7U4r@mK!VP&%{{d{<~eHPrslT9|KRJhVVy9)nwc($Ey1e}fIY|C2B%uto*
zfkg~wfHOACsGB*@+8&y#OXoTnFb0|dKV{<jzW~lAEeWeCoJm@h#e}DDHu*_gXMs~O
zOu&!Y<K|5vRoLirrc>HE1-w<#;xQaSXB!zhE~~C)XESL%mQ=WsWi4x070v={>bhAv
zTiByGj5@9_1TYk?KwC||*L(mr+jwNuwXAF|9(dBq0%v0Isw@p)TKlHT5+yBC7zrW+
zow4N>z$aChTQqYaPvxy@aWoFBj67Q}T1!~ETI?g0HR$L)J(J!Y!#yh#4<J(6OL|+>
z-!N%a6<%ZM2sQ&8DQg1rq_w5Wr%qa%0$0JMwY}ye8^@W1m2t}b_Hlb>_wU1Rmo_VD
zRiHJ9H41M9OAHI(*N1PpznK<Y+)`{!(u%H`wR3B2fAiuWQ%j9U1RN!hYNpOudJEwD
zZD`lqP6v*DQOg@Z6*$wDZUH>mdDuU5@z15g(eFG&1E|_MQrWs*rn8zsN!`-{TdMUW
zu4r;I@k@4|AHKq#-Fj@jHE;$Nq%(93j5kQzMKiBWR<)mwKJd-}Gj(Z5{lGohx~i}@
zsTo+rFKbA0z+O_Z231L1*0GU`B50xRdWEYh_gLC%7cF3b&Y78?LRa{#Jz?H*q^VI!
zU=?Vu99a{gsJcC{rL?w)kOS=r7dl6Woo!2#!t~fejR?95+zIN}VF2T(40zVonRDT~
z+Br7|etGzIyD{%tdcazp)dskw!XE6rIH2~?%yZY;i~Cy_zdY`xHDJx&mE`3?S4&cq
znf<I@0M5pARpo39ue5Tz)?OTwR$5`p-kFw@ACrw?IdPGl17#0Ms|+la&H&4J=g?V8
z_X5w#ZU@|xyrjyRNz;IXCIdD;YCKeh&*wUv?T0f7%(Hd${+>i7lpUcTwPAnz;#bF6
z`i<c`<1G((WTB<fG6pNanfMLL&rwJ}VjBP<a1|V2QMSIkiF{c%*8m&J9%5JpzTci$
z{I#X*<{UpRtFreV**8~}J!?C%vJbo~_R?O~<<Od~d*WAv=E@SF0L=k^X8dt4ZID*x
zwN$nyi65WM%z=%Mvb1UG8}nhk(3VZ{d=GF&S+4=1PHO@D%JAJr`_cqVu=Jqsv-?pR
zh-PaoX?e+N1K6>(RDrLvvP95;w-Q%Wa=bXUoFMHifo04F%8oCewPAnj;@8J@m=s3i
zfs@dHx#AkQwIb5W6g?MN+5_%^EdkF5A1rRw<|qq8X&%R#!W`C8mX#V)+_UA{IHxc_
zqdW;uYFU+gfh)=?uwx9TEG?%n>Y_ZQxysX>0hgT?UW3A1-3ZnIltW(vzcGBT(ViBP
zmG?omyoeQ-JR@7c8Cc84NmyNB0)Eh*7?Tu#SoK&YHu_mBIZ(3-ypghpPHSOlsW6U&
z;v7iJ7Bt&dTx-y@XrssU!P#VQSealoRp}a!+K$RhrW)~MbW0EI$)gi_O^0^#H=yYx
zh*4gO=z9XhbNHEnBUn_7EGh4+ueG-S>cwx4>+q|?_s1Bv9t1D#ZmA9hxW&23(_|bg
zOu(A588r#+8XNcn_Wk^P9ax(P0P%_7uHbRYRV8B*Fzl?sMxgXMfe{b~#5nQ13(PG&
z4RE^4$6FI~l`U`@92BOn1bp5e9)O4T!XaiYP{gzVne)H|ewj!Y6S2RoSz5+$CSI(`
z;2{9jCm2%p;RrnLHqEdSl>ZDR`FOPF=yjRw=JoOZ*2TNa7zQvBQs%c(qDkT16;@wo
zqq_IoS=%3C8F9!#U{z#is2kZ`8PgK@jo}BaN8t$Ae*GK$Z>_)cw7^s=<zsRS{XKZv
zYa-nrYrA%%osHk`#{bCV%lA=3LwRKSs=YqFpK`<HS8?1rU=4_00DppcN@z%Y1WHW<
zfa%7BYa=i{PlF{W`Z~qp^fMlS&isstVdv9gnEnx(C&w-(0@Bpu&jFI2n-m2o!4UG<
zs51RWKTp>?8&5&6(tznJe{cuLiI}dVKW6y-?Tg>i0hcFzb(nyo2UpL61Spi6RGt0@
z@B}!)PjCRA&MFm`<Dv=RYD;LY@^m+C0BnJIkP;M%0hYifb)hI3`chqjrp(OMh2n@|
zsXQhXz*?M7ds+(cdHZrC@F6DofpT&X5?opO9`*(>p8$R=l^+>aP#m$0Sl0#&`y)Kh
zErl&$9+O`Da!|}XLEfKL<7z&btvn^C<2WaH)ME(_#kqw&_<6khTNl4u#xQ_AKmc=9
z`JlMv0CQQ6mS7T?$33?zpJ=W&e_pe@3H;{pqxK-Mv=-MIES^Jl=4wlu16Tv4*DkxO
zWo-vIy%(`-Kra>cfUOwC>`GOUykKP-`1Lt1HDDaiCx}k~UlnOU@;SW@3rlOjR;HG*
z3UID00U|WGiV~QsujK$_dip9ecw}={oA);_et#UpuMIyQd+7*LQ}wts;9twT?69O-
zfW}vz7c`Xt%@-C{bA$xOThS>?E5K(;3~MKr7UIXq0V4wg8YM@@H@7ucl}{$WuBSG=
zN5uF3b_Q503EW09i%LtPByngA+5)x!`MKp5j-@s$VKHz<Sw1)<CSKBT4g%(&R_Q@F
zX*t3weOA2|<;u78T4e!*%*-vy6C0lA6C)F#6+T{zDP2gd<<~C$aGbQ>9DdRsDlr_L
zSX&Bez*+{Dsw0kNsAy$RCeO>=k!8J30b5;*RNpF5+@6{p`TO|mS_c;;No`|KjMG;*
z1B-!CbHQt_WoH>{R?S_bGE`UMS_dB5Q;Pkkr=$u5D$9p8Sb8tEQMDM>&L73HWqY|-
zJ&RWZwrnhw1u#v9x47^u4p1*+%gNv>VR8}EbKTDYYo!V0hb|&lRaX3Ir6Vdm5?FJS
zR2e_RO-$|m*DwCK%+k`*nzE#-WoJx=R8VHnio#yTwv@(t8n4rbX*WG!PuVDTwE<>;
zGjW_%SvhVA{MvA*p_h)Vtl8NrE!OTuWN9k_Lba$r;P!sd+S1Yh)?m>STNi_sWwNsB
zr`0CPYin^_0cOYQ3O7-fc!I)Wo@YdvQN4KMFjZhJIaTaEby|NqPFkd}2dvqc+YSwg
z24>Y@IcQ5^FF8p8=p4$22|h3^jEt<+Tg*DWMh_%2*if!r<<{#KDrY*vd3dqHa_7U^
z$<#^_l#`#~$}UT@<rXR{j#vV}JnS27)A9rrDQtC99K>3$_9$Gjwm5bP{N}J9mxnx2
z!Kz*fz@%_^9533tL%2y5wPhlY&C0GRe;<oyUEv$;sWBG4Zi>&G2CHRMZ+RCbE}j@I
zg{_Ru#-b~XER6(Yok%7%Z-ZWD=$;9QJ^=85=j+)D!^T!-mQ9GJK%}UI_I5O&YGmsG
zdVllc&veM;b_m5VDXcB%wRn<ch#wP`Bo3Tu5i<&xfhkMx=1$A1Z<!0r_geeMR+iQ*
zueqq0v2BIvMBb-|7-*ER<UW(tT58H@{k#QjWqj_q=?(y4X(()|i<#%0l@?dpt$<NX
zN3UCPY`H;USOUL3JU7;1510eWl@TtU*g;%;x}S;TmB~v7wl?wj@(&6}<t5v60HjxC
z%l;x%YQVA-@lO<ZtkA{fev&pZnYgpo<svo@KL+Q_1M?)sYqT~X`JC2tM9#3XuT~nP
zW0`C6z*?iBDV&APCYnm7&YW}CK4@?6{>uOA;d4#KF#mJ`v+3Cx$M8&@Nl1lt?RW{T
zAF!Yi%lF#{?VSjimm;sT;uqsLYFjF0V%P(yLeqq%6qeap+s4u2h(m9gw7hy8DI5aJ
z56iT=%M*$0pXoL2j=D^|Me0@+rsE&B4{b~H<sYCdVAxZt>U~~&DocAc`MiDTCoS1k
zS+mN4d9#sOG+;8TNeg3{esN^^0k{U9Rv2;X*-TT}QaITe9iqioP5rcAz2DmfmdT2K
zwq}#>Uq#6(ip@+3^BNHTnw%&TSnHd!<wY(WG+SHe>a{h8^nleEK5I{p@8LF%R6+l&
z|N2eda;FAX6@EAa6Qs8)lC@W^fvp}|tJ!N3S5%((M=qhl(ke0=YJ1Pd{S^z>X|}G$
zZ#9-v3VY244Uhv$m7|>#ISbX}Gr)XeRfWmYd=uVUDA2_KjE;)m|L6_g%LzSk4DhHP
zFMwYeo*%bqy*(>03j&<JdUv{3>u{7bqd3NxO-ol5=2q@mDXmRf9xxYZ*FHLKElJ_)
z^G19$Yx1`}Gut|mI}j#XUG-eyS(=~ge*5Tn@$j?Z`EdilTLQ{KR~8JgruD0SUi@Z%
zJ<!@1plhoNBZj>h)n1d}R@_DLi$7E#Ro+731u!Z6+5Az9mz|>wZLNU;QEe?VNh@P(
z)6$vQ)Y{2Rj7EcBQ<frVRbh%@f{9`Vz*>UwpuBSvtYzuQ9ef;C94{0`9gfnxwv{8n
zd%C6wIO9BmwU)6eFqNf9A*}>iAFEW8Pj82oQTS2&u>E3p?{fJ@NsF(RG`q?H$zP|T
z_e8&C5-D}6I4&nGE&ei}6jmFFwZN9G%L-eI1zv-L-z;(ewm=laQHGZjE0dSnc$~8h
z08bg^j`PDFbd+hmfk(+MsvcfxDl3eJgU2aPR(L)dv{lOZ^J_K(P-SGcE(6QmNevb;
zy*3WFm^4{l)4(!WX^ASc0iW%}wtz+aa+Mdr)OdI?%(ry-;J1Y3VN>nmwBwI&eie1t
z1D4&DmbB=Cy$c5nHflU7Ev8IhX-mslmphZ*{aDpb>kFZ<Wo4PIBXu)%^pv$Yr7#kf
zW;J=Yd!{T!&{t|{Er#VXP(o_ZQLo&)>%k{0+ko)Wl+My}v9Cd9l1XNror&SdC04dh
z0VAfYeJt&hhsc(Z13c*Lq;Y60Ca9M_S{_PE^OI|vbk+KsQ6`(TDwc+=Lxr`A^Yt&E
z#pu4QY?pN^OVfE53d;=uZaujK^xDg{eRKvo6Bg3ep~5^_p^M_R7vJN=nL50st+nLj
zJr^p>8x9$-+N}*4Wg_5A3|GQ~AG-j4eR$#Mmo2s3Ne-&Dm|3euwK$_*_F6bs8d$0e
zdsjXWuBZ}~wa6vbWSPLQGNpcP(Jw#g&sw=U&@I-*X-h|Twq`N1S@e1~hNJUn<1-bu
z`e*I7B%YbqY~INMW^7$`j2pw4LG4op3@-a=0|u7uj<T?u0m}<opDu7!=sj7W$c|SE
z{HQ&B__K;ut+h&1W}p!)5@04gHdENLvsRw68M?a4$xI#`mYGC4)=gTdwLD(s-8%e3
zvy7dy1H(15(Ao2<z_2u3RK~7cDIr5|ZNDt&T1($~>%H-x1G)F<-Iq+*>OEPq++@_K
z02ge1=jr$VGC6yG905aNEpf@E;+7d&W`3)|DS#gMOyK|Aed*|5$FQJrdtoMiD+8=5
zoN-NS%~qIz@$eS@-u;x8l{1rr_A*-mlCf+8%ds9}TC2aXexyoLh4I?axip(A=LeuX
sd=bMYuzVrA!vO^{>Q-ae2^9<Yzr8Q0bJP1})c^nh07*qoM6N<$f`+P9?EnA(

literal 0
HcmV?d00001

diff --git a/public/statistical/decline.png b/public/statistical/decline.png
new file mode 100644
index 0000000000000000000000000000000000000000..00b7d5bb5feee211132fb4233c9cb45642c73571
GIT binary patch
literal 1932
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
SX=ytE0000<MNUMnLSTYL;iP&1

literal 0
HcmV?d00001

diff --git a/public/statistical/down.png b/public/statistical/down.png
new file mode 100644
index 0000000000000000000000000000000000000000..b418dc0f188ed2362157e97ad1d0d75de4937ffc
GIT binary patch
literal 285
zcmV+&0pk9NP)<h;3K|Lk000e1NJLTq000yK000aK1^@s6Vho-800001b5ch_0Itp)
z=>Px#*GWV{R5(wq(=ls8F%*X3_p=ogaVbR?UBpFPbP$yK2mIYd6diQ2Tf68af`bl%
z+EXI2+}eAuwcfJ?l6+4N36Ys~fM=4amCURMJSO9Da9{yw0jWFDPhc#Em{|#E-U&`5
zEl!|ED?t69=uFaw%YK6%tpU{=(RWF2=gbe#qYa?^M|3V}8r&NOx;ghq#VhC%7)i2N
z(0BO&w1KAxbPWt79WU2^br^W0H1GoCFG3rjFKHikSS08>%>Z2>>%%+XRgxP+D;D%<
j4shSo)lkwl?ry&TVlF<M>sD(^00000NkvXXu0mjf831mc

literal 0
HcmV?d00001

diff --git a/public/statistical/go-up.png b/public/statistical/go-up.png
new file mode 100644
index 0000000000000000000000000000000000000000..e36ab5831cad363abfb87d0c86adc55aae278127
GIT binary patch
literal 1771
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
N002ovPDHLkV1lpDVxj;5

literal 0
HcmV?d00001

diff --git a/public/statistical/huanbi.webp b/public/statistical/huanbi.webp
new file mode 100644
index 0000000000000000000000000000000000000000..55b29420640552ca2b35f633986b30405099dbbb
GIT binary patch
literal 1804
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

literal 0
HcmV?d00001

diff --git a/public/statistical/right-title-bg.png b/public/statistical/right-title-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..11faa52520c0f12375a577667dd018e48a818111
GIT binary patch
literal 12414
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

literal 0
HcmV?d00001

diff --git a/public/statistical/select-bg.png b/public/statistical/select-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..7863384e5025ace3ce520e2a3ba311550cc5c5ed
GIT binary patch
literal 1914
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
A0ssI2

literal 0
HcmV?d00001

diff --git a/public/statistical/up.png b/public/statistical/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..e94f4275353dd006c53db88404861d9ffa2bce08
GIT binary patch
literal 342
zcmV-c0jd6pP)<h;3K|Lk000e1NJLTq000&M000mO1^@s6677#B00001b5ch_0Itp)
z=>Px$5J^NqR5(wy)4?i4Q5?td?{84DkOv?;D@%*HR~A!BO7R4kS0LU&;StnWTCuU9
z%!1re*1W*16$`1+{Yi{FjXN{fjQii7|M{F>=YNjKsg#pTcG!0_BEAG<SVF;Lw@}$&
z*CvH;fa!0nZWN$my%XLWc6CCGUIVjj$b<0$3ZK&O?y&F2MB@UOPfw=E3@@U&*Y@?!
zuuq1>)G4siW5DO;Z55T?Tl>;sTLo%IhRrOmMo@_<meJ>2zbX|jINCGpW<e9k`?12E
z&ak5`!NFh9X0Krz1&6;A`*vNZ(hr*8-az4Tautr21!us>ATZD{TKj?J=ouIv5N&RM
oX@#$V(m%n~-aoI;lX8PU0M(dCUvijm7ytkO07*qoM6N<$f^kEdod5s;

literal 0
HcmV?d00001

diff --git a/src/api/statistical/index.ts b/src/api/statistical/index.ts
index 5cde02eb..d87a2822 100644
--- a/src/api/statistical/index.ts
+++ b/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 });
-}
\ No newline at end of file
+}
+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 });
+}
diff --git a/src/utils/global.ts b/src/utils/global.ts
index 3301e2cb..f4c8b04a 100644
--- a/src/utils/global.ts
+++ b/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;
+};
diff --git a/src/views/sys/exception/rightDataScreen/brokenline/index.vue b/src/views/sys/exception/rightDataScreen/brokenline/index.vue
new file mode 100644
index 00000000..32e9c716
--- /dev/null
+++ b/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>
diff --git a/src/views/sys/exception/rightDataScreen/circulation/index.vue b/src/views/sys/exception/rightDataScreen/circulation/index.vue
new file mode 100644
index 00000000..dea6ce3c
--- /dev/null
+++ b/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>
diff --git a/src/views/sys/exception/rightDataScreen/columnar/index.vue b/src/views/sys/exception/rightDataScreen/columnar/index.vue
new file mode 100644
index 00000000..30a13cb5
--- /dev/null
+++ b/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>
diff --git a/src/views/sys/exception/rightDataScreen/index.vue b/src/views/sys/exception/rightDataScreen/index.vue
new file mode 100644
index 00000000..2249a596
--- /dev/null
+++ b/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>
diff --git a/src/views/sys/exception/rightDataScreen/page.ts b/src/views/sys/exception/rightDataScreen/page.ts
new file mode 100644
index 00000000..49b272b2
--- /dev/null
+++ b/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';