Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

src/packages/components/Zhilan/Zhilan/ZhiLanGongNengLeiXing/config.ts

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { ZhiLanGongNengLeiXingConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textColors: ['#738073','#FFFFFF','#D0E6CF'],
+  textSize: [16,14,13],
+  backgroundColor: '#2D332B',
+  dataset: [
+    { label: '水泵取水' , value: '400 m³' },
+    { label: '直升机调放' , value: '4331 m³' }
+  ],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ZhiLanGongNengLeiXingConfig.key
+  public attr = { ...chartInitConfig, w: 398, h: 200, zIndex: 1 }
+  public chartConfig = cloneDeep(ZhiLanGongNengLeiXingConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

src/packages/components/Zhilan/Zhilan/ZhiLanGongNengLeiXing/config.vue

@@ -0,0 +1,74 @@
+<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="背景颜色">
+      <SettingItem name="">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.backgroundColor = option.backgroundColor"
+        >
+          恢复默认
+        </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/Zhilan/Zhilan/ZhiLanGongNengLeiXing/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const ZhiLanGongNengLeiXingConfig: ConfigType = {
+  key: 'ZhiLanGongNengLeiXing',
+  chartKey: 'VZhiLanGongNengLeiXing',
+  conKey: 'VCZhiLanGongNengLeiXing',
+  title: '功能类型统计',
+  category: ChatCategoryEnum.ZHILAN,
+  categoryName: ChatCategoryEnumName.ZHILAN,
+  package: PackagesCategoryEnum.ZHILAN,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'zlgnlx.png',
+};

src/packages/components/Zhilan/Zhilan/ZhiLanGongNengLeiXing/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div  class="go-title-03">
+    <div class="box" v-for="item in dataset">
+      <div class="label">
+        <div class="circle"></div>
+      </div>
+      <div class="linebg">
+        <div class="line">
+          <div class="title">{{ item.label }}</div>
+          <div class="valbox">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="btnbox">{{ item.label }}</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,
+  backgroundColor,
+  dataset,
+} = 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;
+  padding: 10px 14px;
+  overflow: auto; 
+  .box{
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    width: 100%;
+    height: 50px;
+    margin-bottom: 20px;
+    position: relative;
+    .label{
+      width: 87px;
+      height: 32px;
+      background: url('/src/assets/images/chart/zhilan/zllabelicon01.png');
+      background-size: 100% 100%;
+      .circle{
+        width: 33px;
+        height: 32px;
+        background: url('/src/assets/images/chart/zhilan/zllabelicon02.png');
+        background-size: 100% 100%;
+      }
+    }
+    .linebg{
+      flex:1;
+      height: 2px;
+      background: v-bind('backgroundColor');
+      margin-left: -60px;
+      margin-bottom: 16px;
+      .line{
+        width: 70%;
+        height: 100%;
+        background: #D4FFCC;
+        box-shadow: 0px 0px 5px 0px rgba(102,255,115,0.7);
+        border: 0px solid rgba(255,255,255,0.34);
+        position: relative;
+        .title{
+          font-size: v-bind('textSize[0]+"px"');
+          color: v-bind('textColors[0]');
+          position: absolute;
+          top: -30px;
+          left: 10px;
+        }
+        .valbox{
+          height: 24px;
+          font-weight: bold;
+          font-size: v-bind('textSize[1]+"px"');
+          color: v-bind('textColors[1]');
+          background: url('/src/assets/images/chart/zhilan/textbg.png');
+          background-size: 100% 100%;
+          position: absolute;
+          right: 0;top: -30px;
+          transform: translateX(50%);
+          padding: 0 4px;
+        }
+      }
+    }
+    .btnbox{
+      width: 95px;
+      height: 24px;
+      background: url('/src/assets/images/chart/zhilan/zlbtnbg.png');
+      background-size: 100% 100%;
+      margin-bottom: 5px;
+      font-size: v-bind('textSize[2]+"px"');
+      color: v-bind('textColors[2]');
+      text-align: center;
+      line-height: 24px;
+    }
+  }
+}
+/* 整个滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 滚动条宽度 */
+}
+/* 滚动轨道的样式 */
+::-webkit-scrollbar-track {
+  background: #00611A; /* 轨道背景颜色 */
+}
+/* 滚动滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background: #0EB687; /* 滑块背景颜色 */
+}
+/* 当鼠标悬停在滑块上时改变颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
+}
+</style>

src/packages/components/Zhilan/Zhilan/ZhiLanRenYuanLeiXing/config.ts

@@ -1,17 +1,39 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { ZhiLanRenYuanLeiXingConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  boxId: 'linearGradientZhiLanRenYuanLeiXing',
-  colors: [],
+  borderColor: '#D5D5D5',
+  textColors: ['#D0E6CF','#FFFFFF'],
+  textSize: [14,28],
+  backgroundColor: '#2D332B',
+  dataset: [
+    { label: '护林员' , value: '38' },
+    { label: '消防员' , value: '75' },
+    { label: '驻防队伍' , value: '102' },
+    { label: '林区住户' , value: '103' },
+    { label: '向导' , value: '103' },
+    { label: '防火驿站' , value: '103' },
+    { label: '墓地' , value: '103' },
+  ],
+  animalColor: [
+    { color1: '#215229', color2: '#91F2A1' },
+    { color1: '#81510E', color2: '#FFCF47' },
+    { color1: '#5C230A', color2: '#FC2D22' },
+    { color1: '#0A5C4D', color2: '#22FCF0' },
+    { color1: '#0A5C2D', color2: '#22FC4A' },
+    { color1: '#0A285C', color2: '#1832F1' },
+    { color1: '#210A5C', color2: '#8222FC' }
+  ]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ZhiLanRenYuanLeiXingConfig.key
-  public attr = { ...chartInitConfig, w: 346, h: 30, zIndex: 1 }
+  public attr = { ...chartInitConfig, w: 398, h: 500, zIndex: 1 }
   public chartConfig = cloneDeep(ZhiLanRenYuanLeiXingConfig)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

src/packages/components/Zhilan/Zhilan/ZhiLanRenYuanLeiXing/config.vue

@@ -1,5 +1,118 @@
 <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="边框颜色">
+      <SettingItem name="">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.borderColor = option.borderColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景颜色">
+      <SettingItem name="">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.backgroundColor = option.backgroundColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.animalColor"
+      :key="index"
+    >
+      <SettingItem name="颜色1">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.animalColor[index].color1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.animalColor[index].color1 = option.animalColor[index].color1"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="颜色2">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.animalColor[index].color2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.animalColor[index].color2 = option.animalColor[index].color2"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <n-button ghost @click="optionData.animalColor.splice(index, 1)"> - </n-button>
+    </SettingItemBox>
+    <SettingItem>
+      <n-button size="small" @click="optionData.animalColor.push({ color1: '#215229' ,color2: '#22FCF0' })"> + 新增</n-button>
+    </SettingItem>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">

src/packages/components/Zhilan/Zhilan/ZhiLanRenYuanLeiXing/index.vue

@@ -1,12 +1,25 @@
 <template>
   <div  class="go-title-03">
-    <img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
+    <div class="box" v-for="(item,index) in dataset">
+      <div class="label">{{ item.label }}</div>
+      <div class="chartsbox">
+        <div class="val" :style="'margin-left:'+ (item.value)/maxValue*70 +'%'">{{ item.value }}</div>
+        <div class="bg">
+          <div class="rate" 
+              :style="{
+                  width: (item.value / maxValue * 90) + '%',
+                  background: 'linear-gradient(90deg, ' + animalColor[index].color1 + ' 0%, ' + animalColor[index].color2 + ' 100%)'}">
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+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: {
@@ -15,32 +28,91 @@ const props = defineProps({
   }
 })
  
+const maxValue = ref()
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
-  colors,
-  boxId
+  textColors,
+  textSize,
+  borderColor,
+  backgroundColor,
+  animalColor,
+  dataset,
 } = toRefs(props.chartConfig.option)
+
+onMounted(() => {
+  let arr = []
+  props.chartConfig.option.dataset.forEach(item =>{
+    arr.push(item.value)
+  })
+  maxValue.value = Math.max.apply(null, arr);
+});
+ // 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+  let arr = []
+  resData.forEach(item =>{
+    arr.push(item.value)
+  })
+  maxValue.value = Math.max.apply(null, arr);
+});
 </script>
 
 <style lang="scss" scoped>
 @include go('title-03') {
   position: relative;
   display: flex;
-  justify-content: center;
-  align-items: center; 
-
-  svg {
-    position: absolute;
-    z-index: -1;
-  }
-  .fill {
-    fill: v-bind('colors[0]');
-  }
-  .fill-none {
-    fill: none;
-  }
-  .stroke {
-    stroke: v-bind('colors[1]');
+  flex-direction: column;
+  padding: 10px 14px;
+  overflow: auto; 
+  .box{
+    display: flex;
+    width: 100%;
+    height: 50px;
+    .label{
+      width: 80px;
+      height: 100%;
+      display: flex;
+      align-items: end;    
+      justify-content: end;
+      color: v-bind('textColors[0]');
+      font-size: v-bind('textSize[0]+"px"'); 
+      margin-right: 15px;
+    }
+    .chartsbox{
+      width: calc(100% - 81px);
+      height: 100%;    
+      border-left: 1px solid v-bind('borderColor');
+      .val{
+        font-weight: bold;
+        font-size: v-bind('textSize[1]+"px"');
+        color: v-bind('textColors[1]');
+        line-height: 30px;
+      }
+      .bg{
+        width: 100%;
+        height: 10px;
+        background: v-bind('backgroundColor');
+        .rate{
+          height: 100%;
+        }
+      }
+    }
   }
 }
+/* 整个滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 滚动条宽度 */
+}
+/* 滚动轨道的样式 */
+::-webkit-scrollbar-track {
+  background: #00611A; /* 轨道背景颜色 */
+}
+/* 滚动滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background: #0EB687; /* 滑块背景颜色 */
+}
+/* 当鼠标悬停在滑块上时改变颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
+}
 </style>

src/packages/components/Zhilan/Zhilan/ZhiLanTitles/config.ts

@@ -6,7 +6,9 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   boxId: 'linearGradientZhiLanTitles',
-  colors: [],
+  textColor: '#58FF95',
+  textSize: 18,
+  text: '人员类型统计'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Zhilan/Zhilan/ZhiLanTitles/config.vue

@@ -1,5 +1,44 @@
 <template>
-  
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="文字">
+      <SettingItem name="">
+        <n-input
+          size="small"
+          v-model:value="optionData.text"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="文字大小">
+      <SettingItem name="">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <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>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">

src/packages/components/Zhilan/Zhilan/ZhiLanTitles/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div  class="go-title-03">
     <img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
+    <div class="span">{{text}}</div>
   </div>
 </template>
 
@@ -17,8 +18,9 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
-  colors,
-  boxId
+  textColor,
+  textSize,
+  text
 } = toRefs(props.chartConfig.option)
 </script>
 
@@ -26,21 +28,13 @@ const {
 @include go('title-03') {
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center; 
 
-  svg {
+  .span{
     position: absolute;
-    z-index: -1;
-  }
-  .fill {
-    fill: v-bind('colors[0]');
-  }
-  .fill-none {
-    fill: none;
-  }
-  .stroke {
-    stroke: v-bind('colors[1]');
+    left: 12%;
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
   }
 }
 </style>

src/packages/components/Zhilan/Zhilan/index.ts

@@ -15,12 +15,14 @@ import { ZhiLanIcons14Config } from './ZhiLanIcons14/index';
 import { ZLLingZhongMianJiConfig } from './ZLLingZhongMianJi/index';
 import { ZhiLanTitlesConfig } from './ZhiLanTitles/index';
 import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
+import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
 
 
 export default [
     ZhiLanTitlesConfig,
     ZLLingZhongMianJiConfig,
     ZhiLanRenYuanLeiXingConfig,
+    ZhiLanGongNengLeiXingConfig,
     ZhiLanIcons01Config,
     ZhiLanIcons02Config,
     ZhiLanIcons03Config,