智览-种植数量面积

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

@@ -0,0 +1,48 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+const { source } = dataJson;
+
+export const option = {
+  dataset: source,
+  dataStyle: {
+    backgroud: '#FFFFFF00',
+    marginTop: 100,
+    marginLeft: 25,
+    sortOrder: '0',
+
+    unitTitle: '单位 / 平方米',
+    unitName: 'm²',
+    unitFontSize: 14,
+    unitFontColor: '#738073',
+
+    itemMarginTop: 15,
+    itemHeight: 40,
+
+    labelFontSize: 13,
+    labelFontColor: '#9ab398',
+    labelWidth: 100,
+    labelAlign: 'center',
+
+    valueFontSize: 16,
+    valueFontColor: '#FFFFFF',
+
+    lineBackgroud: '#000000',
+    lineBorderWidth: 1,
+    lineBorderColor: '#ffffff',
+    lineHeight: 15,
+    lineStartColor: '#0B4D2C',
+    lineEndColor: '#4DFFB5',
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ZhiLan_ZhongZhiShuLiangMianJiConfig.key
+  public attr = { ...chartInitConfig, w: 400, h: 900, zIndex: 1 }
+  public chartConfig = cloneDeep(ZhiLan_ZhongZhiShuLiangMianJiConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,237 @@
+<template>
+  <CollapseItem name="样式设置" :expanded="true">
+    <SettingItemBox :alone="false" name="整体设置">
+      <SettingItem :alone="false" name="上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginTop"
+          :min="0"
+          size="small"
+          placeholder="上方距离"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="左右距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginLeft"
+          :min="0"
+          size="small"
+          placeholder="左右距离"
+        />
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="单个高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.itemHeight"
+          :min="0"
+          size="small"
+          placeholder="单个高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="单位与内容之间的距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.itemMarginTop"
+          :min="0"
+          size="small"
+          placeholder="单位与内容之间的距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="排序方式">
+        <n-radio-group
+          v-model:value="optionData.dataStyle.sortOrder"
+          size="small"
+          name="radiogroup"
+        >
+          <n-space>
+            <n-radio value="0"> 不排序 </n-radio>
+            <n-radio value="1"> 升序 </n-radio>
+            <n-radio value="2"> 降序 </n-radio>
+          </n-space>
+        </n-radio-group>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="单位设置">
+      <SettingItem :alone="false" name="单位名称">
+        <n-input
+          v-model:value="optionData.dataStyle.unitTitle"
+          size="small"
+          placeholder="单位名称"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="单位符号">
+        <n-input
+          v-model:value="optionData.dataStyle.unitName"
+          size="small"
+          placeholder="单位符号"
+        />
+      </SettingItem>
+      <SettingItem name="单位字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.unitFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.unitFontColor = dataStyleClone.unitFontColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem :alone="false" name="单位字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.unitFontSize"
+          :min="0"
+          size="small"
+          placeholder="单位字体大小"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="标题设置">
+      <SettingItem name="标题宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.labelWidth"
+          :min="0"
+          size="small"
+          placeholder="标题宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.labelFontSize"
+          :min="0"
+          size="small"
+          placeholder="标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.labelFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.labelFontColor = dataStyleClone.labelFontColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题对齐方式">
+        <n-select
+          v-model:value="optionData.dataStyle.labelAlign"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="进度条设置">
+      <SettingItem name="进度条背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineBackgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="进度条高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.lineHeight"
+          :min="0"
+          size="small"
+          placeholder="进度条高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="进度条边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineBorderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="进度条边框宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.lineBorderWidth"
+          :min="0"
+          size="small"
+          placeholder="进度条边框宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineStartColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.dataStyle.lineStartColor = '#0B4D2C'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineEndColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.dataStyle.lineEndColor = '#4DFFB5'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="值设置">
+      <SettingItem name="值的字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.valueFontSize"
+          :min="0"
+          size="small"
+          placeholder="值的字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="值的字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.valueFontColor"
+        ></n-color-picker>
+      </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,
+    },
+  });
+
+  const dataStyleClone = {
+    unitFontColor: '#738073',
+    labelFontColor: '#9ab398',
+    lineStartColor: '#0B4D2C',
+    lineEndColor: '#4DFFB5',
+  };
+</script>

src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/data.json

@@ -0,0 +1,64 @@
+{
+  "source": [
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    },
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    },
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const ZhiLan_ZhongZhiShuLiangMianJiConfig: ConfigType = {
+  key: 'ZhiLan_ZhongZhiShuLiangMianJi',
+  chartKey: 'VZhiLan_ZhongZhiShuLiangMianJi',
+  conKey: 'VCZhiLan_ZhongZhiShuLiangMianJi',
+  title: '种植数量面积',
+  category: ChatCategoryEnum.ZHILAN,
+  categoryName: ChatCategoryEnumName.ZHILAN,
+  package: PackagesCategoryEnum.ZHILAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ZhiLan_ZhongZhiShuLiangMianJi.png',
+};

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

@@ -0,0 +1,187 @@
+<template>
+  <div class="ZhiLan_ZhongZhiShuLiangMianJi">
+    <div class="box">
+      <div class="unit">{{ option.dataStyle.unitTitle }} （{{ option.dataStyle.unitName }}）</div>
+      <div class="itemList">
+        <div class="item" v-for="(item, index) in sortData" :key="index">
+          <div class="label">{{ item.label }}</div>
+          <div class="backbox">
+            <div class="num">
+              <div
+                class="rate"
+                :style="{
+                  width: `${(item.value / maxValue) * valueWidth * 0.7}px`,
+                  background: `linear-gradient(90deg, 
+                    ${option.dataStyle.lineStartColor} 0%, 
+                    ${option.dataStyle.lineEndColor} 100%)`,
+                }"
+              >
+              </div>
+              <span class="value">{{ item.value }}</span>
+              <span class="value_unit">{{ option.dataStyle.unitName }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { PropType, toRefs, ref, reactive, computed } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { cloneDeep } from 'lodash-es';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    dataset: props.chartConfig.option.dataset,
+    dataStyle: props.chartConfig.option.dataStyle,
+  });
+
+  // 排序
+  const sortData = computed(() => {
+    let cloneData = cloneDeep(option.dataset);
+    if (option.dataStyle.sortOrder == '0') {
+      // 不排序
+      return cloneData;
+    } else if (option.dataStyle.sortOrder == '1') {
+      // 升序
+      return cloneData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
+    } else if (option.dataStyle.sortOrder == '2') {
+      // 降序
+      return cloneData.sort((a, b) => parseInt(b.value) - parseInt(a.value));
+    }
+  });
+
+  // 最大值
+  const maxValue = Math.max(...option.dataset.map((item) => parseInt(item.value, 10)));
+  // 进度条宽度
+  const valueWidth = computed(() => {
+    return w.value - option.dataStyle.marginLeft * 2 - option.dataStyle.labelWidth;
+  });
+  // 单位DIV高度
+  const unitHeight = computed(() => {
+    return document.querySelector('.unit')?.offsetHeight;
+  });
+
+  // setdata 数据监听与更改
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+    props.chartConfig.option.dataset = newData;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ZhiLan_ZhongZhiShuLiangMianJi {
+    background: v-bind('`${option.dataStyle.backgroud}`');
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+  }
+
+  .box {
+    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
+    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
+    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
+  }
+
+  .unit {
+    text-align: right;
+    color: v-bind('`${option.dataStyle.unitFontColor}`');
+    font-size: v-bind('`${option.dataStyle.unitFontSize}px`');
+    margin-bottom: v-bind('`${option.dataStyle.itemMarginTop}px`');
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  .itemList {
+    overflow-y: auto;
+    height: v-bind(
+      '`${h - option.dataStyle.marginTop - option.dataStyle.itemMarginTop - unitHeight}px`'
+    );
+  }
+  .itemList::-webkit-scrollbar {
+    display: none;
+  }
+  .itemList {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .item {
+    display: inline-flex;
+    width: 100%;
+    height: v-bind('`${option.dataStyle.itemHeight}px`');
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: v-bind('`${option.dataStyle.labelAlign}`');
+    width: v-bind('`${option.dataStyle.labelWidth}px`');
+    border-right: 1px solid #ffffff;
+
+    color: v-bind('`${option.dataStyle.labelFontColor}`');
+    font-size: v-bind('`${option.dataStyle.labelFontSize}px`');
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 400;
+    text-align: right;
+    font-style: normal;
+  }
+
+  .backbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: v-bind('`${valueWidth}px`');
+    height: 100%;
+
+    .num {
+      background: v-bind('`${option.dataStyle.lineBackgroud}`');
+      border: v-bind('`${option.dataStyle.lineBorderWidth}px`') solid
+        v-bind('`${option.dataStyle.lineBorderColor}`');
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      height: v-bind('`${option.dataStyle.lineHeight}px`');
+
+      .rate {
+        height: v-bind('`${option.dataStyle.lineHeight * 0.5}px`');
+        margin-right: 10px;
+      }
+
+      .value {
+        color: v-bind('`${option.dataStyle.valueFontColor}`');
+        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
+        font-family: D-DIN, D-DIN;
+        font-weight: bold;
+        font-style: normal;
+      }
+      .value_unit {
+        color: v-bind('`${option.dataStyle.valueFontColor}`');
+        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
+        font-family: D, D;
+        font-weight: normal;
+        font-style: normal;
+      }
+    }
+  }
+</style>

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

@@ -18,7 +18,7 @@ import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
 import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
 import { WeiXingGuoLvConfig } from './WeiXingGuoLv/index';
 import { WeiXingImgConfig } from './WeiXingImg/index';
-
+import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './ZhiLan_ZhongZhiShuLiangMianJi/index';
 
 export default [
     ZhiLanTitlesConfig,
@@ -27,6 +27,7 @@ export default [
     ZhiLanGongNengLeiXingConfig,
     WeiXingGuoLvConfig,
     WeiXingImgConfig,
+    ZhiLan_ZhongZhiShuLiangMianJiConfig,
     ZhiLanIcons01Config,
     ZhiLanIcons02Config,
     ZhiLanIcons03Config,