火情线索完善

src/packages/components/Equipment/Equipment/HuoQingXianSuo/config.ts

@@ -18,29 +18,19 @@ export const option = {
   navsCheckColor: '#0D2822',
   navsCheckBackground: '#34FFE0',
   navsArr: [
-    { label: '待研判', value: '0', sql: '' },
-    { label: '待签收', value: '13', sql: '' },
-    { label: '待处置', value: '0', sql: '' },
-    { label: '待审核', value: '0', sql: '' },
-    { label: '已完成', value: '99+', sql: '' }
+    { label: '待确认', value: '0', sql: '' },
+    { label: '待处理', value: '0', sql: '' },
+    { label: '已处理', value: '0', sql: '' }
   ],
   sectionDatas:[
     { 
-      title: '巡护发现火情', 
-      type: '重大火灾',
-      position: '临沂市蒙阴县马田公路附近东北方向100米',
-      time: '2025/10/01 12:05:01',
+      describe: '巡护发现火情', 
+      degreeType: '重大火灾',
+      address: '临沂市蒙阴县马田公路附近东北方向100米',
+      reportTime: '2025/10/01 12:05:01',
       "lng":117.945311,
       "lat":35.463766
-    },
-    { 
-      title: '巡护发现火情', 
-      type: '重大火灾',
-      position: '临沂市蒙阴县马田公路附近东北方向100米',
-      time: '2025/10/01 12:05:01',
-      "lng":117.945311,
-      "lat":35.463766
-    },
+    }
   ],
 }
 
@@ -49,6 +39,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 378, h: 300, zIndex: 1 }
   public chartConfig = cloneDeep(EquipmentHuoQingXianSuoConfig)
   public option = cloneDeep(option)
-  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_weixinyaoganxinxi' }, }
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: "SELECT \"Id\", \"Describe\", \"DegreeType\", \"Address\", \"ReportTime\", \"Lng\", \"Lat\" FROM fm_fireclueinfo WHERE \"SourceType\" = 3" }, }
   public filter = "return res.result;"
 }

src/packages/components/Equipment/Equipment/HuoQingXianSuo/config.vue

@@ -1,4 +1,24 @@
 <template>
+  <CollapseItem name="按钮" :expanded="true">
+    <SettingItemBox name="" 
+      v-for="(item, index) in optionData.navsArr"
+      :key="index">
+      <SettingItem name="名称">
+        <n-input
+          size="small"
+          v-model:value="item.label"
+          placeholder="请输入"
+        />
+      </SettingItem>
+      <SettingItem name="查询语句">
+        <n-input
+          size="small"
+          v-model:value="item.sql"
+          placeholder="请输入"
+        />
+      </SettingItem>
+    </SettingItemBox> 
+  </CollapseItem>
   <CollapseItem name="标签" :expanded="true">
     <SettingItemBox name="样式">
       <SettingItem name="背景颜色">

src/packages/components/Equipment/Equipment/HuoQingXianSuo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div  class="go-title-03">
     <div class="flex ai-c jc-sb max-w navsbox">
-      <div class="flex navsli ai-c jc-c" v-for="(item,index) in navsArr" :class="index==navsIndex?'navsliactive':''" @click="navsClick(index)">
+      <div class="flex navsli ai-c jc-c" v-for="(item,index) in navsArr" :class="index==navsIndex?'navsliactive':''" @click="navsClick(item,index)">
         {{ item.label }}
         <span class="navsNum" v-if="item.value!=0">{{item.value}}</span>
       </div>
@@ -9,16 +9,16 @@
     <div class="flex column sectionBox">
       <div class="mt-1 sectionLi" v-for="(item,index) in sectionDatas" @click="handlerFireDetail(item)">
         <div class="flex jc-sb">
-          <div class="titleText">{{item.title}}</div>
-          <div class="mr-2 desStyle">{{item.type}}</div>
+          <div class="titleText">{{item.describe}}</div>
+          <div class="mr-2 desStyle">{{item.degreeType}}</div>
         </div>
-        <div class="flex mt-1">
+        <div class="flex mt-1 ai-c">
           <img class="mr-1" src="/src/assets/images/chart/equipment/address.png" />
-          <div class="numStyle">{{item.position}}</div>
+          <div class="numStyle">{{item.address}}</div>
         </div>
-        <div class="flex mt-1">
-          <img class="mr-1" src="/src/assets/images/chart/equipment/time.png" />
-          <div class="numStyle">{{item.time}}</div>
+        <div class="flex mt-1 ai-c">
+          <img class="mr-1 timeicon" src="/src/assets/images/chart/equipment/time.png" />
+          <div class="numStyle">{{item.reportTime}}</div>
         </div>
       </div>
     </div>
@@ -65,11 +65,16 @@ const {
 
 
 
- const navsClick = function(index){
+ const navsClick = function(item,index){
   navsIndex.value = index
+  props.chartConfig.request.requestSQLContent.sql = item.sql
+  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
+      props.chartConfig.option.sectionDatas = resData
+  })
  }
  // 数据callback处理（预览时触发）
 useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  console.log('resData', resData)
   props.chartConfig.option.sectionDatas = resData;
 });
 
@@ -222,9 +227,10 @@ const handlerFireDetail = (item) => {
     border-radius: 1px;
     border: 1px solid #4FE985;
     margin-bottom: 13px;
+    display: flex;
   }
   .navsli{
-    width: 20%;
+    flex: 1;
     height: 25px;
     color: v-bind('navsColor');
     font-size: v-bind('navsSize+"px"');
@@ -259,6 +265,11 @@ const handlerFireDetail = (item) => {
       width: 21px;
       height: 21px;
     }
+    .timeicon{
+      width: 15px;
+      height: 15px;
+      margin-left: 3px;
+    }
   }
   .sectionLi{
     padding: 9px 12px;

src/packages/components/XunChaGuiJi/XunChaGuiJi/GoBack/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { GoBackConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textSize: 18,
+  textColor: '#58FF95',
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GoBackConfig.key
+  public attr = { ...chartInitConfig, w: 377, h: 44, zIndex: 1 }
+  public chartConfig = cloneDeep(GoBackConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/XunChaGuiJi/XunChaGuiJi/GoBack/config.vue

@@ -0,0 +1,47 @@
+<template>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="颜色">
+      <SettingItem name="">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor = option.textColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="大小">
+      <SettingItem name="">
+        <n-input-number
+          v-model:value="optionData.textSize"
+          size="small"
+          :min="10"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/XunChaGuiJi/XunChaGuiJi/GoBack/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const GoBackConfig: ConfigType = {
+  key: 'GoBack',
+  chartKey: 'VGoBack',
+  conKey: 'VCGoBack',
+  title: '返回',
+  category: ChatCategoryEnum.XUNCHAGUIJI,
+  categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
+  package: PackagesCategoryEnum.XUNCHAGUIJI,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'goback.png',
+};

src/packages/components/XunChaGuiJi/XunChaGuiJi/GoBack/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div  class="go-title-xuncha">
+    <img class="img" src="/src/assets/images/chart/xunchaguiji/back.png" />
+    <span class="span">返回</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  textColor,
+  textSize,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-xuncha') {
+  position: relative;
+  display: flex;
+  align-items: center; 
+  .img{
+    width: 43px;
+    height: 43px;
+  }
+  .span{
+    margin-left: 10px;
+    color: v-bind('textColor');
+    font-size: v-bind('textSize + "px"');
+  }
+}
+</style>

src/packages/components/XunChaGuiJi/XunChaGuiJi/XunChaPersons/config.ts

@@ -0,0 +1,32 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { XunChaPersonsConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textColors: ['#FFFFFF','#FFFFFF'],
+  textSize: [11,10],
+  backgroundColors: ["#05231A","#0A392A","#06281D","#00611A"],
+  headerData:["乡镇/村庄","护林员姓名","在线状态","离线时长","操作"],
+  dataset: [
+    { town: '探沂镇' , name: '刘磊', onlinestatus: true, offlineduration: 10 },
+    { town: '梁邱镇' , name: '邵泽兰', onlinestatus: false, offlineduration: 10 },
+    { town: '马庄镇' , name: '邵泽兰', onlinestatus: true, offlineduration: 10 },
+    { town: '探沂镇' , name: '邵泽兰', onlinestatus: true, offlineduration: 10 },
+    { town: '梁邱镇' , name: '邵泽兰', onlinestatus: false, offlineduration: 10 },
+    { town: '探沂镇' , name: '邵泽兰', onlinestatus: false, offlineduration: 10 },
+    { town: '马庄镇' , name: '邵泽兰', onlinestatus: false, offlineduration: 10 },
+    { town: '探沂镇' , name: '邵泽兰', onlinestatus: true, offlineduration: 10 },
+    { town: '探沂镇' , name: '邵泽兰', onlinestatus: true, offlineduration: 10 },
+  ],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = XunChaPersonsConfig.key
+  public attr = { ...chartInitConfig, w: 378, h: 275, zIndex: 1 }
+  public chartConfig = cloneDeep(XunChaPersonsConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

src/packages/components/XunChaGuiJi/XunChaGuiJi/XunChaPersons/config.vue

@@ -0,0 +1,78 @@
+<template>
+  <CollapseItem name="文本样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.textColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColors[index] = option.textColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox
+      :name="`大小-${index + 1}`"
+      v-for="(item, index) in optionData.textSize"
+      :key="index"
+    >
+      <SettingItem name="">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize[index]"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`背景颜色-${index + 1}`"
+      v-for="(item, index) in optionData.backgroundColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.backgroundColors[index] = option.backgroundColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/XunChaGuiJi/XunChaGuiJi/XunChaPersons/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const XunChaPersonsConfig: ConfigType = {
+  key: 'XunChaPersons',
+  chartKey: 'VXunChaPersons',
+  conKey: 'VCXunChaPersons',
+  title: '人员列表',
+  category: ChatCategoryEnum.XUNCHAGUIJI,
+  categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
+  package: PackagesCategoryEnum.XUNCHAGUIJI,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'personslist.png',
+};

src/packages/components/XunChaGuiJi/XunChaGuiJi/XunChaPersons/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div  class="go-title-03">
+    <div class="headerbox">
+      <div class="headerli" v-for="item in headerData">{{item}}</div>
+    </div>
+    <div class="sectionbox">
+      <div class="secli" v-for="item in dataset">
+        <div class="li">
+          <div class="la">{{ item.town }}</div>
+        </div>
+        <div class="li">
+          <div class="la">{{ item.name }}</div>
+        </div>
+        <div class="li">
+          <span class="onlinecircle" v-if="item.onlinestatus"></span>
+          <span class="outlinecircle" v-else></span>
+          <span v-if="item.onlinestatus">在线</span>
+          <span v-else>离线</span>
+        </div>
+        <div class="li">{{ item.offlineduration }}</div>
+        <div class="li scopedbox">
+          <div class="locationbox">
+            <img class="img" src="/src/assets/images/chart/xunchaguiji/locationicon.png" />
+            <span>位置</span>
+          </div>
+          <div class="rotatebox">
+            <img class="img" src="/src/assets/images/chart/xunchaguiji/rotateicon.png" />
+            <span>轨迹</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, ref, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+ 
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  textColors,
+  textSize,
+  backgroundColors,
+  dataset,
+  headerData
+} = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+});
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .headerbox{
+    display: flex;
+    height: 38px;
+    border-top: 2px solid v-bind('backgroundColors[3]');
+    background-color: v-bind('backgroundColors[0]');
+
+    .headerli{
+      width: 25%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: v-bind('textSize[0]+"px"');
+      color: v-bind('textColors[0]');
+    }
+  }
+  .sectionbox{
+    height: calc(100% - 38px);
+    overflow: auto; 
+    .secli{
+      background: v-bind('backgroundColors[1]');
+      display: flex;
+      height: 38px;
+      .scopedbox{
+        height: 100%;
+        min-width: 120px;
+      }
+      .li{
+        width: 0;
+        flex: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        font-size: v-bind('textSize[1]+"px"');
+        color: v-bind('textColors[1]');
+        white-space: nowrap; 
+        overflow: hidden; 
+        text-overflow: ellipsis;
+        text-align: center;
+        .la{
+          white-space: nowrap; 
+          overflow: hidden; 
+          text-overflow: ellipsis;
+        }
+        .onlinecircle{
+          width: 4px;
+          height: 4px;
+          background: #73FF73;
+          box-shadow: 0px 0px 8px 1px rgba(0,255,64,0.75);
+        }
+        .outlinecircle{
+          width: 4px;
+          height: 4px;
+          background: #A1A4B1;
+          box-shadow: 0px 0px 8px 1px rgba(161,164,177,0.75);
+        }
+        .locationbox{
+          width: 47px;
+          height: 22px;
+          background: linear-gradient( 180deg, #1F2B1E 0%, #384232 100%);
+          border-radius: 2px;
+          border: 1px solid #F7CD7A;
+          font-size: 10px;
+          color: #FFFFFF;
+          .img{
+            width: 16px;
+            height: 16px;
+          }
+        }
+        .rotatebox{
+          width: 47px;
+          height: 22px;
+          background: linear-gradient( 180deg, #182B20 0%, #136C3D 100%);
+          border-radius: 2px;
+          border: 1px solid #8FF4B1;
+          font-size: 10px;
+          color: #FFFFFF;
+          .img{
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+    .secli:nth-child(2n){
+      background: v-bind('backgroundColors[2]');
+    }
+  }
+  
+}
+/* 整个滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 滚动条宽度 */
+}
+/* 滚动轨道的样式 */
+::-webkit-scrollbar-track {
+  background: #00611A; /* 轨道背景颜色 */
+}
+/* 滚动滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background: #0EB687; /* 滑块背景颜色 */
+}
+/* 当鼠标悬停在滑块上时改变颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
+}
+</style>

src/packages/components/XunChaGuiJi/XunChaGuiJi/index.ts

@@ -0,0 +1,7 @@
+import { GoBackConfig } from './GoBack/index';
+import { XunChaPersonsConfig } from './XunChaPersons/index';
+
+export default [
+    GoBackConfig,
+    XunChaPersonsConfig
+];

src/packages/components/XunChaGuiJi/index.d.ts

@@ -0,0 +1,7 @@
+export enum ChatCategoryEnum {
+  XUNCHAGUIJI = 'XunChaGuiJi',
+}
+
+export enum ChatCategoryEnumName {
+  XUNCHAGUIJI = '巡查轨迹',
+}

src/packages/components/XunChaGuiJi/index.ts

@@ -0,0 +1,3 @@
+import XunChaGuiJi from './XunChaGuiJi'
+
+export const XunChaGuiJiList = [...XunChaGuiJi]

src/packages/index.d.ts

@@ -213,6 +213,7 @@ export enum PackagesCategoryEnum {
   ZHIKU = 'Zhiku',
   EQUIPMENT = 'Equipment',
   TASKS = 'Tasks',
+  XUNCHAGUIJI= 'XunChaGuiJi'
 }
 
 // 包分类名称
@@ -231,7 +232,8 @@ export enum PackagesCategoryName {
   ZHICHU = '智处',
   ZHIKU = '智库',
   EQUIPMENT = '设备',
-  TASKS = '任务'
+  TASKS = '任务',
+  XUNCHAGUIJI = '巡查'
 }
 
 // 获取组件
@@ -257,4 +259,5 @@ export type PackagesType = {
   [PackagesCategoryEnum.ZHIKU]: ConfigType[];
   [PackagesCategoryEnum.EQUIPMENT]: ConfigType[];
   [PackagesCategoryEnum.TASKS]: ConfigType[];
+  [PackagesCategoryEnum.XUNCHAGUIJI]: ConfigType[];
 };

src/packages/index.ts

@@ -12,6 +12,8 @@ import { ZhichuList } from '@/packages/components/Zhichu/index';
 import { ZhikuList } from '@/packages/components/Zhiku/index';
 import { EquipmentList } from '@/packages/components/Equipment/index';
 import { TasksList } from '@/packages/components/Tasks/index';
+import { XunChaGuiJiList } from '@/packages/components/XunChaGuiJi/index';
+
 
 import {
   PackagesCategoryEnum,
@@ -53,6 +55,7 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.UNITS]: UnitsList,
   [PackagesCategoryEnum.ZHIGAN]: ZhiganList,
   [PackagesCategoryEnum.ZHILAN]: ZhilanList,
+  // [PackagesCategoryEnum.XUNCHAGUIJI]: XunChaGuiJiList,
   [PackagesCategoryEnum.ZHICHU]: ZhichuList,
   [PackagesCategoryEnum.ZHIKU]: ZhikuList,
   [PackagesCategoryEnum.EQUIPMENT]: EquipmentList,

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -79,6 +79,10 @@ const packagesListObj = {
   [PackagesCategoryEnum.EQUIPMENT]: {
     icon: renderIcon(AirPlaneOutlineIcon),
     label: PackagesCategoryName.EQUIPMENT
+  },
+  [PackagesCategoryEnum.XUNCHAGUIJI]: {
+    icon: renderIcon(AirPlaneOutlineIcon),
+    label: PackagesCategoryName.XUNCHAGUIJI
   }
 };