添加sql请求
parent
be9feba558
commit
f7012b6321
|
|
@ -16,6 +16,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||||
public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
|
public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
|
||||||
public chartConfig = cloneDeep(TitlesTextConfig)
|
public chartConfig = cloneDeep(TitlesTextConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_meirishangbaoshuliangtongji' }, }
|
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||||
public filter = "return res.result;"
|
public filter = "return res.result;"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||||
public attr = { ...chartInitConfig, w: 378, h: 193, zIndex: 1 }
|
public attr = { ...chartInitConfig, w: 378, h: 193, zIndex: 1 }
|
||||||
public chartConfig = cloneDeep(EquipmentHuoQingJianCeConfig)
|
public chartConfig = cloneDeep(EquipmentHuoQingJianCeConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_meirishangbaoshuliangtongji' }, }
|
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||||
public filter = "return res.result;"
|
public filter = "return res.result;"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,13 +28,13 @@ export const option = {
|
||||||
{
|
{
|
||||||
title: '巡护发现火情',
|
title: '巡护发现火情',
|
||||||
type: '重大火灾',
|
type: '重大火灾',
|
||||||
address: '临沂市蒙阴县马田公路附近东北方向100米',
|
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
||||||
time: '2025/10/01 12:05:01'
|
time: '2025/10/01 12:05:01'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '巡护发现火情',
|
title: '巡护发现火情',
|
||||||
type: '重大火灾',
|
type: '重大火灾',
|
||||||
address: '临沂市蒙阴县马田公路附近东北方向100米',
|
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
||||||
time: '2025/10/01 12:05:01'
|
time: '2025/10/01 12:05:01'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -45,6 +45,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||||
public attr = { ...chartInitConfig, w: 378, h: 300, zIndex: 1 }
|
public attr = { ...chartInitConfig, w: 378, h: 300, zIndex: 1 }
|
||||||
public chartConfig = cloneDeep(EquipmentHuoQingXianSuoConfig)
|
public chartConfig = cloneDeep(EquipmentHuoQingXianSuoConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_meirishangbaoshuliangtongji' }, }
|
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_weixinyaoganxinxi' }, }
|
||||||
public filter = "return res.result;"
|
public filter = "return res.result;"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mt-1">
|
<div class="flex mt-1">
|
||||||
<img class="mr-1" src="/src/assets/images/chart/equipment/address.png" />
|
<img class="mr-1" src="/src/assets/images/chart/equipment/address.png" />
|
||||||
<div class="numStyle">{{item.address}}</div>
|
<div class="numStyle">{{item.position}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mt-1">
|
<div class="flex mt-1">
|
||||||
<img class="mr-1" src="/src/assets/images/chart/equipment/time.png" />
|
<img class="mr-1" src="/src/assets/images/chart/equipment/time.png" />
|
||||||
|
|
@ -69,11 +69,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@include go('title-03') {
|
@include go('title-03') {
|
||||||
|
height: v-bind('h');
|
||||||
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
padding-top:10px;
|
||||||
justify-content: center;
|
scrollbar-width: none;
|
||||||
align-items: center;
|
-ms-overflow-style: none;
|
||||||
flex-direction: column;
|
|
||||||
.max-w{
|
.max-w{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -101,6 +102,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||||
}
|
}
|
||||||
.navsbox{
|
.navsbox{
|
||||||
width: 92%;
|
width: 92%;
|
||||||
|
margin-left: 4%;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background: v-bind('navsBackground');
|
background: v-bind('navsBackground');
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
|
@ -136,6 +138,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||||
}
|
}
|
||||||
.sectionBox{
|
.sectionBox{
|
||||||
width: 92%;
|
width: 92%;
|
||||||
|
margin-left: 4%;
|
||||||
img{
|
img{
|
||||||
width: 21px;
|
width: 21px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { PublicConfigClass } from '@/packages/public'
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
import { chartInitConfig } from '@/settings/designSetting'
|
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
import { EquipmentTitlesbg04Config } from './index'
|
import { EquipmentTitlesbg04Config } from './index'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
@ -7,6 +7,10 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
export const option = {
|
export const option = {
|
||||||
boxId: 'EquipmentTitlesbg04',
|
boxId: 'EquipmentTitlesbg04',
|
||||||
colors: ['#457453','#0D6336','#FFCE00','#4FE985','#9BCCB8'],
|
colors: ['#457453','#0D6336','#FFCE00','#4FE985','#9BCCB8'],
|
||||||
|
textColors: ['#4FE985','#CBE7CD'],
|
||||||
|
textSize: 28,
|
||||||
|
textSize1: 14,
|
||||||
|
dataset: {label: '在线', value: '23'}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
@ -14,4 +18,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||||
public attr = { ...chartInitConfig, w: 103, h: 94, zIndex: 1 }
|
public attr = { ...chartInitConfig, w: 103, h: 94, zIndex: 1 }
|
||||||
public chartConfig = cloneDeep(EquipmentTitlesbg04Config)
|
public chartConfig = cloneDeep(EquipmentTitlesbg04Config)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
|
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||||
|
public filter = "return res.result;"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,35 @@
|
||||||
/>
|
/>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
|
<CollapseItem name="文字样式" :expanded="true">
|
||||||
|
<SettingItem name="大小">
|
||||||
|
<n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="大小">
|
||||||
|
<n-input-number v-model:value="optionData.textSize1" size="small" :min="12"></n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItemBox
|
||||||
|
:name="`颜色-${index + 1}`"
|
||||||
|
v-for="(item, index) in optionData.textColors"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="optionData.textColors[index]"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem>
|
||||||
|
<n-button
|
||||||
|
size="small"
|
||||||
|
@click="optionData.textColors[index] = option.textColors[index]"
|
||||||
|
>
|
||||||
|
恢复默认
|
||||||
|
</n-button>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
<CollapseItem name="样式" :expanded="true">
|
<CollapseItem name="样式" :expanded="true">
|
||||||
<SettingItemBox
|
<SettingItemBox
|
||||||
:name="`颜色-${index + 1}`"
|
:name="`颜色-${index + 1}`"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="go-title-03">
|
<div class="go-title-03">
|
||||||
|
<div class="flex ai-c jc-c column">
|
||||||
|
<div class="dataValue flex ai-c jc-c"> {{dataset.value}} </div>
|
||||||
|
<div class="dataLabel flex ai-c jc-c"> {{dataset.label}} </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<svg :width="w" :height="h">
|
<svg :width="w" :height="h">
|
||||||
<title>编组 66</title>
|
<title>编组 66</title>
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
|
@ -9,7 +14,7 @@
|
||||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||||
<g id="标题模块--左侧1" transform="translate(0, 219.1528)">
|
<g id="标题模块--左侧1" transform="translate(0, 219.1528)">
|
||||||
<g id="编组-66" :transform="`translate(164.5, 11.9394)`">
|
<g id="编组-66" :transform="`translate(164.5, 11.9394)`">
|
||||||
<!-- w: 103, h: 94 -->
|
|
||||||
<rect id="矩形" :stroke="colors[0]" x="0.00126503312" y="0.266825726" :width="`${w/1.03}`" :height="`${h/1.04}`"></rect>
|
<rect id="矩形" :stroke="colors[0]" x="0.00126503312" y="0.266825726" :width="`${w/1.03}`" :height="`${h/1.04}`"></rect>
|
||||||
<polygon
|
<polygon
|
||||||
id="矩形" :fill="colors[1]"
|
id="矩形" :fill="colors[1]"
|
||||||
|
|
@ -29,6 +34,8 @@
|
||||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||||
:points="`0 ${h/1.13} 0 ${h/1.04} ${w/14.67} ${h/1.04}`"
|
:points="`0 ${h/1.13} 0 ${h/1.04} ${w/14.67} ${h/1.04}`"
|
||||||
></polyline>
|
></polyline>
|
||||||
|
<!-- w: 103, h: 94 -->
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||||
:transform="`translate(${w/1.06}, ${h/26.12}) scale(-1, -1) translate(-${w/1.09}, -${h/26.12})`"
|
:transform="`translate(${w/1.06}, ${h/26.12}) scale(-1, -1) translate(-${w/1.09}, -${h/26.12})`"
|
||||||
|
|
@ -58,6 +65,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, toRefs } from 'vue'
|
import { PropType, toRefs } from 'vue'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartDataFetch } from '@/hooks';
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
|
@ -69,8 +78,16 @@ const props = defineProps({
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
colors,
|
colors,
|
||||||
boxId
|
textColors,
|
||||||
|
textSize,
|
||||||
|
textSize1,
|
||||||
|
dataset
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
// 数据callback处理(预览时触发)
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||||
|
props.chartConfig.option.dataset = resData;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
@ -93,5 +110,27 @@ const {
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke: v-bind('colors[1]');
|
stroke: v-bind('colors[1]');
|
||||||
}
|
}
|
||||||
|
.dataLabel{
|
||||||
|
color: v-bind('textColors[1]');
|
||||||
|
font-size: v-bind('textSize1+"px"');
|
||||||
|
height: v-bind('h/2+"px"');
|
||||||
|
}
|
||||||
|
.dataValue{
|
||||||
|
height: v-bind('h/2+"px"');
|
||||||
|
color: v-bind('textColors[0]');
|
||||||
|
font-size: v-bind('textSize+"px"');
|
||||||
|
}
|
||||||
|
.column{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.jc-c{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.ai-c{
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue