Compare commits
No commits in common. "50e865a9a919772d05e6aee6ee17f132068d1466" and "9621ea64b1862c6ce87da38cb8a5dac313d04219" have entirely different histories.
50e865a9a9
...
9621ea64b1
Binary file not shown.
|
Before Width: | Height: | Size: 840 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,24 +0,0 @@
|
||||||
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;"
|
|
||||||
}
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
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',
|
|
||||||
};
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,39 +1,17 @@
|
||||||
import { PublicConfigClass } from '@/packages/public'
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
import { chartInitConfig } from '@/settings/designSetting'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
import { ZhiLanRenYuanLeiXingConfig } from './index'
|
import { ZhiLanRenYuanLeiXingConfig } from './index'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
borderColor: '#D5D5D5',
|
boxId: 'linearGradientZhiLanRenYuanLeiXing',
|
||||||
textColors: ['#D0E6CF','#FFFFFF'],
|
colors: [],
|
||||||
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 {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = ZhiLanRenYuanLeiXingConfig.key
|
public key = ZhiLanRenYuanLeiXingConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 398, h: 500, zIndex: 1 }
|
public attr = { ...chartInitConfig, w: 346, h: 30, zIndex: 1 }
|
||||||
public chartConfig = cloneDeep(ZhiLanRenYuanLeiXingConfig)
|
public chartConfig = cloneDeep(ZhiLanRenYuanLeiXingConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
|
||||||
public filter = "return res.result;"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,118 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="go-title-03">
|
<div class="go-title-03">
|
||||||
<div class="box" v-for="(item,index) in dataset">
|
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, toRefs, ref, onMounted } from 'vue'
|
import { PropType, toRefs } from 'vue'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
import { useChartDataFetch } from '@/hooks';
|
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
|
@ -27,92 +14,33 @@ const props = defineProps({
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const maxValue = ref()
|
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
textColors,
|
colors,
|
||||||
textSize,
|
boxId
|
||||||
borderColor,
|
|
||||||
backgroundColor,
|
|
||||||
animalColor,
|
|
||||||
dataset,
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = 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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@include go('title-03') {
|
@include go('title-03') {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
padding: 10px 14px;
|
align-items: center;
|
||||||
overflow: auto;
|
|
||||||
.box{
|
svg {
|
||||||
display: flex;
|
position: absolute;
|
||||||
width: 100%;
|
z-index: -1;
|
||||||
height: 50px;
|
}
|
||||||
.label{
|
.fill {
|
||||||
width: 80px;
|
fill: v-bind('colors[0]');
|
||||||
height: 100%;
|
}
|
||||||
display: flex;
|
.fill-none {
|
||||||
align-items: end;
|
fill: none;
|
||||||
justify-content: end;
|
}
|
||||||
color: v-bind('textColors[0]');
|
.stroke {
|
||||||
font-size: v-bind('textSize[0]+"px"');
|
stroke: v-bind('colors[1]');
|
||||||
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
boxId: 'linearGradientZhiLanTitles',
|
boxId: 'linearGradientZhiLanTitles',
|
||||||
textColor: '#58FF95',
|
colors: [],
|
||||||
textSize: 18,
|
|
||||||
text: '人员类型统计'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="go-title-03">
|
<div class="go-title-03">
|
||||||
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
|
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
|
||||||
<div class="span">{{text}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -18,9 +17,8 @@ const props = defineProps({
|
||||||
|
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
textColor,
|
colors,
|
||||||
textSize,
|
boxId
|
||||||
text
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -28,13 +26,21 @@ const {
|
||||||
@include go('title-03') {
|
@include go('title-03') {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.span{
|
svg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 12%;
|
z-index: -1;
|
||||||
color: v-bind('textColor');
|
}
|
||||||
font-size: v-bind('textSize+"px"');
|
.fill {
|
||||||
|
fill: v-bind('colors[0]');
|
||||||
|
}
|
||||||
|
.fill-none {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.stroke {
|
||||||
|
stroke: v-bind('colors[1]');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -15,14 +15,12 @@ import { ZhiLanIcons14Config } from './ZhiLanIcons14/index';
|
||||||
import { ZLLingZhongMianJiConfig } from './ZLLingZhongMianJi/index';
|
import { ZLLingZhongMianJiConfig } from './ZLLingZhongMianJi/index';
|
||||||
import { ZhiLanTitlesConfig } from './ZhiLanTitles/index';
|
import { ZhiLanTitlesConfig } from './ZhiLanTitles/index';
|
||||||
import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
|
import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
|
||||||
import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
|
|
||||||
|
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
ZhiLanTitlesConfig,
|
ZhiLanTitlesConfig,
|
||||||
ZLLingZhongMianJiConfig,
|
ZLLingZhongMianJiConfig,
|
||||||
ZhiLanRenYuanLeiXingConfig,
|
ZhiLanRenYuanLeiXingConfig,
|
||||||
ZhiLanGongNengLeiXingConfig,
|
|
||||||
ZhiLanIcons01Config,
|
ZhiLanIcons01Config,
|
||||||
ZhiLanIcons02Config,
|
ZhiLanIcons02Config,
|
||||||
ZhiLanIcons03Config,
|
ZhiLanIcons03Config,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue