添加sql请求

main
userName 2025-02-28 16:40:17 +08:00
parent be9feba558
commit f7012b6321
7 changed files with 90 additions and 13 deletions

View File

@ -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;"
} }

View File

@ -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;"
} }

View File

@ -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;"
} }

View File

@ -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;

View File

@ -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;"
} }

View File

@ -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}`"

View File

@ -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>