图表优化，智览模块
userName
parent
218294b63b
commit
6d14561e64
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
|
|
@ -1,10 +1,15 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<div class="valuebox">
|
||||
<div class="valuebox" v-if="valueText.length>0">
|
||||
<div v-for="(item, index) in valueText">
|
||||
{{ item }} <span class="unitbox">{{ unitText[index] || null }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="valuebox" v-else>
|
||||
<div>
|
||||
{{ valueText }} <span class="unitbox">{{ unitText[0] || null }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="labelbox">{{ labelText }}</div>
|
||||
<svg :width="w" :height="h">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LeftChartsConfig } from './index'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
|
|
@ -9,6 +10,10 @@ import dataJson from './data.json'
|
|||
export const includes = ['xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
textBtnArr: [
|
||||
{ label: '本月', value: '1' },
|
||||
{ label: '今年', value: '2' }
|
||||
],
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
|
|
@ -38,14 +43,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#91F2A1'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
color: '#f00'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -62,4 +68,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
|||
public chartConfig = cloneDeep(LeftChartsConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,26 @@
|
|||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="按钮" :expanded="true">
|
||||
<SettingItemBox name=""
|
||||
v-for="(item, index) in optionData.textBtnArr"
|
||||
:key="index">
|
||||
<SettingItem name="label">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="item.label"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="value">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="item.value"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
|
|
@ -23,7 +43,22 @@
|
|||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="chartEditStore.getEditCanvasConfig.chartThemeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
|
|
@ -75,6 +110,7 @@
|
|||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
|
|
@ -86,10 +122,10 @@ const props = defineProps({
|
|||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
const chartEditStore = useChartEditStore()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,33 @@
|
|||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"dimensions": ["product", "data1"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
"data1": 120
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
"data1": 200
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
"data1": 150
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
"data1": 80
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
"data1": 70
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
"data1": 110
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
"data1": 130
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
<div class="go-title-03">
|
||||
<div class="btnbox">
|
||||
<div class="btn" v-for="(item, index) in textBtnArr" @click="btnClick(item,index)">
|
||||
<img class="img" v-if="btnIndex==index" src="/src/assets/images/chart/units/texttitle05bg.png" />
|
||||
<img class="img" v-else src="/src/assets/images/chart/units/texttitle050bg.png" />
|
||||
{{item.label}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartsbox">
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import { reactive, watch, PropType, toRefs, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
|
|
@ -31,7 +42,10 @@ const props = defineProps({
|
|||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const {
|
||||
textBtnArr
|
||||
} = toRefs(props.chartConfig.option)
|
||||
const btnIndex = ref(1)
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
|
@ -50,18 +64,19 @@ watch(
|
|||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
console.log('themeColor', themeColor)
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: value.lineStyle.color
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
|
|
@ -80,7 +95,51 @@ watch(
|
|||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const btnClick = function(item,index){
|
||||
btnIndex.value = index
|
||||
props.chartConfig.request.requestSQLContent.sql = item.value
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
}
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
.btnbox{
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
.btn{
|
||||
width: 80px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.img{
|
||||
width: 80px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartsbox{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { RightBox02Config } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
|
@ -9,7 +10,7 @@ import dataJson from './data.json'
|
|||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
|
||||
color: [],
|
||||
legend: {
|
||||
textStyle:{
|
||||
fontSize: 12
|
||||
|
|
@ -46,14 +47,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#EFD50BFF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
color: '#EFD50BFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -75,14 +77,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#10D562FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][5]
|
||||
color: '#10D562FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -104,14 +107,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#0CEDE5FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
color: '#0CEDE5FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -128,4 +132,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
|||
public chartConfig = cloneDeep(RightBox02Config)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,20 @@
|
|||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="chartEditStoreRight.getEditCanvasConfig.chartThemeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
|
|
@ -75,6 +89,7 @@
|
|||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
|
|
@ -92,4 +107,6 @@ const props = defineProps({
|
|||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const chartEditStoreRight = useChartEditStore()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -47,14 +47,13 @@ watch(
|
|||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.color = []
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
props.chartConfig.option.color.push(value.lineStyle.color)
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
color: value.lineStyle.color
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { RightBox03Config } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
|
@ -9,7 +10,12 @@ import dataJson from './data.json'
|
|||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
|
||||
textBtnArr: [
|
||||
{ label: '按年', value: '1' },
|
||||
{ label: '按月', value: '2' },
|
||||
{ label: '按日', value: '3' }
|
||||
],
|
||||
color: [],
|
||||
legend: {
|
||||
left: 'right',
|
||||
data: ['路网规划率', '信息处置率'],
|
||||
|
|
@ -47,14 +53,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#08EE73FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
color: '#08EE73FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -76,14 +83,15 @@ const option = {
|
|||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
type: 'solid',
|
||||
color: '#DC9D15FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][5]
|
||||
color: '#DC9D15FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
@ -101,4 +109,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
|||
public chartConfig = cloneDeep(RightBox03Config)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,30 @@
|
|||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="按钮" :expanded="true">
|
||||
<SettingItemBox name=""
|
||||
v-for="(item, index) in optionData.textBtnArr"
|
||||
:key="index">
|
||||
<SettingItem name="label">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="item.label"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="value">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="item.value"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
|
|
@ -23,6 +47,20 @@
|
|||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="chartEditStoreRight.getEditCanvasConfig.chartThemeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
|
|
@ -75,6 +113,7 @@
|
|||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
|
|
@ -92,4 +131,5 @@ const props = defineProps({
|
|||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
const chartEditStoreRight = useChartEditStore()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
<div class="go-title-03">
|
||||
<div class="btnsbox">
|
||||
<div class="pos-r">
|
||||
<img class="img" src="/src/assets/images/chart/units/titlesbg01.png" />
|
||||
<div class="container">
|
||||
<div v-for="(item,index) in textBtnArr" @click="btnClick(item,index)" class="li" :class="btnIndex==index?'active':''">{{item.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartsbox">
|
||||
<v-chart ref="vChartRefRight" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import { reactive, watch, PropType, toRefs, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
|
|
@ -31,11 +44,13 @@ const props = defineProps({
|
|||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const {
|
||||
textBtnArr
|
||||
} = toRefs(props.chartConfig.option)
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
const chartEditStoreRight = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
|
|
@ -43,28 +58,27 @@ const option = reactive({
|
|||
|
||||
// 渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
() => chartEditStoreRight.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
if (!isPreview()) {
|
||||
props.chartConfig.option.color = []
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
props.chartConfig.option.color.push(value.lineStyle.color)
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: value.lineStyle.color
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
|
@ -80,7 +94,67 @@ watch(
|
|||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const btnIndex = ref(0)
|
||||
const btnClick = function(item,index){
|
||||
btnIndex.value = index
|
||||
props.chartConfig.request.requestSQLContent.sql = item.value
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
}
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
.btnsbox{
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
width: 146px;
|
||||
height: 30px;
|
||||
z-index: 9;
|
||||
.pos-r{
|
||||
position: relative;
|
||||
width: 146px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
position: absolute;
|
||||
width: 146px;
|
||||
height: 30px;
|
||||
}
|
||||
.container{
|
||||
width: 92%;
|
||||
height: 60%;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
.li{
|
||||
flex: 1;
|
||||
color: #099860;
|
||||
font-size: 14px;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
background: #099860;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartsbox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TitlesBg01Config } from './index'
|
||||
import { UnitTitlesBg01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
|
|
@ -11,8 +11,8 @@ export const option = {
|
|||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TitlesBg01Config.key
|
||||
public key = UnitTitlesBg01Config.key
|
||||
public attr = { ...chartInitConfig, w: 146, h: 30, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TitlesBg01Config)
|
||||
public chartConfig = cloneDeep(UnitTitlesBg01Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TitlesBg01Config: ConfigType = {
|
||||
key: 'TitlesBg01',
|
||||
chartKey: 'VTitlesBg01',
|
||||
conKey: 'VCTitlesBg01',
|
||||
export const UnitTitlesBg01Config: ConfigType = {
|
||||
key: 'UnitTitlesBg01',
|
||||
chartKey: 'VUnitTitlesBg01',
|
||||
conKey: 'VCUnitTitlesBg01',
|
||||
title: '背景图',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
|
|
@ -24,7 +24,7 @@ import { RightBox01Icon03Config } from './RightBox01Icon03/index';
|
|||
import { RightBox01Icon04Config } from './RightBox01Icon04/index';
|
||||
import { RightBox02Config } from './RightBox02/index';
|
||||
import { RightBox03Config } from './RightBox03/index';
|
||||
import { TitlesBg01Config } from './TitlesBg01/index';
|
||||
import { UnitTitlesBg01Config } from './UnitTitlesBg01/index';
|
||||
import { UnitsBg01Config } from './UnitsBg01/index';
|
||||
import { UnitsBg02Config } from './UnitsBg02/index';
|
||||
import { UnitsBg03Config } from './UnitsBg03/index';
|
||||
|
|
@ -59,7 +59,7 @@ export default [
|
|||
RightBox01Icon04Config,
|
||||
RightBox02Config,
|
||||
RightBox03Config,
|
||||
TitlesBg01Config,
|
||||
UnitTitlesBg01Config,
|
||||
UnitsBg01Config,
|
||||
UnitsBg02Config,
|
||||
UnitsBg03Config,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { ZLLingZhongMianJiConfig } from './index'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#70CC80',
|
||||
borderRadius: 2
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZLLingZhongMianJiConfig.key
|
||||
public chartConfig = cloneDeep(ZLLingZhongMianJiConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
|
||||
<SettingItemBox name="图形">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"dimensions": ["product", "data1"],
|
||||
"source": [
|
||||
{
|
||||
"product": "林种类型1",
|
||||
"data1": 120
|
||||
},
|
||||
{
|
||||
"product": "林种类型2",
|
||||
"data1": 200
|
||||
},
|
||||
{
|
||||
"product": "林种类型3",
|
||||
"data1": 150
|
||||
},
|
||||
{
|
||||
"product": "林种类型4",
|
||||
"data1": 80
|
||||
},
|
||||
{
|
||||
"product": "林种类型5",
|
||||
"data1": 70
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ZLLingZhongMianJiConfig: ConfigType = {
|
||||
key: 'ZLLingZhongMianJi',
|
||||
chartKey: 'VZLLingZhongMianJi',
|
||||
conKey: 'VCZLLingZhongMianJi',
|
||||
title: '林种面积',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlbar.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr,
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue';
|
||||
import VChart from 'vue-echarts';
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook';
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import config, { includes, seriesItem } from './config';
|
||||
import { mergeTheme } from '@/packages/public/chart';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { isPreview } from '@/utils';
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import isObject from 'lodash/isObject';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting);
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
const replaceMergeArr = ref<string[]>();
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes);
|
||||
});
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return;
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = [];
|
||||
// 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
|
||||
// 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
|
||||
const oldDimensions =
|
||||
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1
|
||||
? oldData.dimensions.length
|
||||
: 1;
|
||||
const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
|
||||
const dimensionsGap = newDimensions - oldDimensions;
|
||||
if (dimensionsGap < 0) {
|
||||
props.chartConfig.option.series.splice(newDimensions - 1);
|
||||
} else if (dimensionsGap > 0) {
|
||||
if (
|
||||
!oldData ||
|
||||
!oldData?.dimensions ||
|
||||
!Array.isArray(oldData?.dimensions) ||
|
||||
!oldData?.dimensions.length
|
||||
) {
|
||||
props.chartConfig.option.series = [];
|
||||
}
|
||||
for (let i = 0; i < dimensionsGap; i++) {
|
||||
seriesArr.push(cloneDeep(seriesItem));
|
||||
}
|
||||
props.chartConfig.option.series.push(...seriesArr);
|
||||
}
|
||||
replaceMergeArr.value = ['series'];
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = [];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false,
|
||||
},
|
||||
);
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '蓄水池',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons01Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons01Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons01Config: ConfigType = {
|
||||
key: 'ZhiLanIcons01',
|
||||
chartKey: 'VZhiLanIcons01',
|
||||
conKey: 'VCZhiLanIcons01',
|
||||
title: '图标-蓄水池',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons01.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons01.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '塘坝',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons02Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons02Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons02Config: ConfigType = {
|
||||
key: 'ZhiLanIcons02',
|
||||
chartKey: 'VZhiLanIcons02',
|
||||
conKey: 'VCZhiLanIcons02',
|
||||
title: '图标-塘坝',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons02.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons02.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '水库',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons03Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons03Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons03Config: ConfigType = {
|
||||
key: 'ZhiLanIcons03',
|
||||
chartKey: 'VZhiLanIcons03',
|
||||
conKey: 'VCZhiLanIcons03',
|
||||
title: '图标-水库',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons03.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons03.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '水罐',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons04Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons04Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons04Config: ConfigType = {
|
||||
key: 'ZhiLanIcons04',
|
||||
chartKey: 'VZhiLanIcons04',
|
||||
conKey: 'VCZhiLanIcons04',
|
||||
title: '图标-水罐',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons04.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons04.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '水窖',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons05Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons05Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons05Config: ConfigType = {
|
||||
key: 'ZhiLanIcons05',
|
||||
chartKey: 'VZhiLanIcons05',
|
||||
conKey: 'VCZhiLanIcons05',
|
||||
title: '图标-水窖',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons05.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons05.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons06Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '绿色小桶',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons06Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons06Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons06Config: ConfigType = {
|
||||
key: 'ZhiLanIcons06',
|
||||
chartKey: 'VZhiLanIcons06',
|
||||
conKey: 'VCZhiLanIcons06',
|
||||
title: '图标-绿色小桶',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons06.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons06.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons07Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '风力灭火机',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons07Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons07Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons07Config: ConfigType = {
|
||||
key: 'ZhiLanIcons07',
|
||||
chartKey: 'VZhiLanIcons07',
|
||||
conKey: 'VCZhiLanIcons07',
|
||||
title: '图标-风力灭火机',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons07.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons07.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons08Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '2号工具',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons08Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons08Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons08Config: ConfigType = {
|
||||
key: 'ZhiLanIcons08',
|
||||
chartKey: 'VZhiLanIcons08',
|
||||
conKey: 'VCZhiLanIcons08',
|
||||
title: '图标-2号工具',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons08.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons08.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons09Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '3号工具',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons09Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons09Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons09Config: ConfigType = {
|
||||
key: 'ZhiLanIcons09',
|
||||
chartKey: 'VZhiLanIcons09',
|
||||
conKey: 'VCZhiLanIcons09',
|
||||
title: '图标-3号工具',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons09.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons09.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons10Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '油锯',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons10Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons10Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons10Config: ConfigType = {
|
||||
key: 'ZhiLanIcons10',
|
||||
chartKey: 'VZhiLanIcons10',
|
||||
conKey: 'VCZhiLanIcons10',
|
||||
title: '图标-油锯',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons10.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons10.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons11Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '灭火弹',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons11Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons11Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons11Config: ConfigType = {
|
||||
key: 'ZhiLanIcons11',
|
||||
chartKey: 'VZhiLanIcons11',
|
||||
conKey: 'VCZhiLanIcons11',
|
||||
title: '图标-灭火弹',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons11.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons11.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons12Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '水桶',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons12Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons12Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons12Config: ConfigType = {
|
||||
key: 'ZhiLanIcons12',
|
||||
chartKey: 'VZhiLanIcons12',
|
||||
conKey: 'VCZhiLanIcons12',
|
||||
title: '图标-水桶',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons12.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons12.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons13Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '铁扫帚',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons13Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons13Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons13Config: ConfigType = {
|
||||
key: 'ZhiLanIcons13',
|
||||
chartKey: 'VZhiLanIcons13',
|
||||
conKey: 'VCZhiLanIcons13',
|
||||
title: '图标-铁扫帚',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons13.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons13.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanIcons14Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#CBE7CD',
|
||||
text: '铁锹',
|
||||
dataset: [
|
||||
{label: '容量' ,value :'500 m³' },
|
||||
{label: '尺寸' ,value :'10m × 5m × 3m' },
|
||||
{label: '水深' ,value :'7.5m' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanIcons14Config.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 121, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanIcons14Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox
|
||||
name="文本"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
v-model:value="optionData.text"
|
||||
size="small"
|
||||
></n-input>
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanIcons14Config: ConfigType = {
|
||||
key: 'ZhiLanIcons14',
|
||||
chartKey: 'VZhiLanIcons14',
|
||||
conKey: 'VCZhiLanIcons14',
|
||||
title: '图标-铁锹',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlicons14.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w*0.71" :height="h*0.69" src="/src/assets/images/chart/zhilan/zlicons14.png" />
|
||||
<div class="box">{{ text }}</div>
|
||||
<div class="mousebox">
|
||||
<div class="title">{{ text }}</div>
|
||||
<div v-for="item in dataset" class="span">
|
||||
<div>{{item.label}}：</div><div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } 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 {
|
||||
text,
|
||||
textColor,
|
||||
textSize,
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover .mousebox{
|
||||
display: block;
|
||||
}
|
||||
.box{
|
||||
width: v-bind('w+"px"');
|
||||
height: v-bind('h*0.26+"px"');;
|
||||
background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mousebox{
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
background: url('/src/assets/images/chart/zhilan/zliconsdetail.png');
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-left: 25px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.span{
|
||||
color: #CBE6CD;
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiLanTitlesConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientZhiLanTitles',
|
||||
colors: [],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiLanTitlesConfig.key
|
||||
public attr = { ...chartInitConfig, w: 346, h: 30, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiLanTitlesConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiLanRenYuanLeiXingConfig: ConfigType = {
|
||||
key: 'ZhiLanRenYuanLeiXing',
|
||||
chartKey: 'VZhiLanRenYuanLeiXing',
|
||||
conKey: 'VCZhiLanRenYuanLeiXing',
|
||||
title: '人员类型统计',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zlrenyuanleixing.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/zhilantitles.png" />
|
||||
</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 {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</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]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue