gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

main
userName 2025-02-27 16:58:42 +08:00
parent 5fe08b6e5a b568697777
commit 43b0d5755a
43 changed files with 864 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/hooks/eventHandler.hook.ts
View File

@ -6,24 +6,14 @@ import { EventBus } from '@/utils/eventBus';
const chartEditStore = useChartEditStore();
const ceshiFunction = mapFun();
// 交互事件
export const eventHandlerHook = (
export const eventCommonHandler = (
componentList: any,
interactConfigEvents: any,
elementList: any,
type: string,
params: any = null,
) => {
let obj: any = {};
let index = 0;
const elementList: any = [];
for (let i = 0; i < interactConfigEvents.length; i++) {
if (interactConfigEvents[i].type == type) {
for (let j = 0; j < interactConfigEvents[i].movementList.length; j++) {
elementList.push(interactConfigEvents[i].movementList[j]);
}
}
}
for (let i = 0; i < componentList.length; i++) {
for (let j = 0; j < elementList.length; j++) {
if (elementList[j].movement == 'newaddress') {
@ -102,3 +92,38 @@ export const eventHandlerHook = (
}
}
};
// 交互事件
export const eventHandlerHook = (
componentList: any,
interactConfigEvents: any,
type: string,
params: any = null,
) => {
const elementList: any = [];
for (let i = 0; i < interactConfigEvents.length; i++) {
if (interactConfigEvents[i].type == type) {
if (!interactConfigEvents[i].movementList) {
return false;
}
for (let j = 0; j < interactConfigEvents[i].movementList.length; j++) {
elementList.push(interactConfigEvents[i].movementList[j]);
}
}
}
if (componentList.length == 0 || elementList.length == 0) {
return false;
}
eventCommonHandler(componentList, elementList, type, params);
};
// websocket事件
export const websocketEvent = (interactConfigEvents: any, params: any = null) => {
console.log('websocketEvent', interactConfigEvents, params);
interactConfigEvents.forEach((element) => {
if (element.messageType == params.type) {
element.elementId.forEach((item) => {
EventBus.emit(item + 'websocket', params);
});
}
});
};

12
src/packages/components/Icons/Default/Icon/index.vue
View File

@ -20,6 +20,7 @@
import { GoIconify } from '@/components/GoIconify';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const chartEditStore = useChartEditStore();
const props = defineProps({
@ -30,7 +31,6 @@
});
const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
@ -71,6 +71,16 @@
val,
);
};
onMounted(() => {
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
console.log('data', data);
});
// websocket传过来的值
EventBus.on(props.chartConfig.id + 'websocket', (data) => {
console.log('data', data);
});
});
</script>
<style lang="scss" scoped>

24
src/packages/components/Zhigan/Zhigan/GeneralHead/config.ts
View File

@ -5,10 +5,30 @@ import { chartInitConfig } from '@/settings/designSetting'
import { GeneralHeadConfig } from './index'
export const option = {
title: '组件标题栏',
titleStyle: {
dataset: '组件标题栏',
dataStyle: {
fontSize: 20,
fontColor: '#FFFFFF',
x: 80,
y: 30,
gPolygonFillColorTL: '#EBBE10',
gFillColorTR: '#00C157',
gPolygonFillColorBL1: '#EBBE10',
gPolygonFillColorBL2: '#4FE985',
linearGradientStopColorR1: '#08251E',
linearGradientStopColorR2: '#00A374',
linearGradientStopColorL1: '#11B472',
linearGradientStopColorL2: '#00A374',
linearGradientStopColorM1: '#00FF8C',
linearGradientStopColorM2: '#00F4B6',
linearGradientStopColorRT1: '#00FF77',
linearGradientStopColorRT2: '#00BF6B',
linearGradientStopColorT1: '#00673F',
linearGradientStopColorT2: '#00683F',
linearGradientStopColorB1: '#72A18A',
linearGradientStopColorB2: '#1CC370',
}
}

329
src/packages/components/Zhigan/Zhigan/GeneralHead/config.vue
View File

@ -2,12 +2,29 @@
<CollapseItem name="标题设置" :expanded="true">
<n-tag type="primary">若标题名称的配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.title" type="text" size="small" />
<SettingItem>
<n-input v-model:value="optionData.dataset" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题样式">
<SettingItem name="标题字体大小">
<n-input-number
size="small"
:min="0"
v-model:value="optionData.dataStyle.fontSize"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.fontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="标题横坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.x"
v-model:value="optionData.dataStyle.x"
:min="0"
size="small"
placeholder="宽度"
@ -15,13 +32,296 @@
</SettingItem>
<SettingItem name="标题纵坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.y"
v-model:value="optionData.dataStyle.y"
:min="0"
size="small"
placeholder="高度"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题颜色">
<SettingItem name="左上角装饰颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.gPolygonFillColorTL"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.gPolygonFillColorTL = dataStyleClone.gPolygonFillColorTL"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="右上角装饰颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.gFillColorTR"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.gFillColorTR = dataStyleClone.gFillColorTR"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="左下角装饰颜色1">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.gPolygonFillColorBL1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.gPolygonFillColorBL1 = dataStyleClone.gPolygonFillColorBL1"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="左下角装饰颜色2">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.gPolygonFillColorBL2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.gPolygonFillColorBL2 = dataStyleClone.gPolygonFillColorBL2"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题左侧颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorL1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorL1 =
dataStyleClone.linearGradientStopColorL1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题左侧颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorL2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorL2 =
dataStyleClone.linearGradientStopColorL2
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题中间颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorM1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorM1 =
dataStyleClone.linearGradientStopColorM1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题中间颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorM2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorM2 =
dataStyleClone.linearGradientStopColorM2
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题右侧颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorR1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorR1 =
dataStyleClone.linearGradientStopColorR1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题右侧颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorR2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorR2 =
dataStyleClone.linearGradientStopColorR2
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题右侧边颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorRT1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorRT1 =
dataStyleClone.linearGradientStopColorRT1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题右侧边颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorRT2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorRT2 =
dataStyleClone.linearGradientStopColorRT2
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题上部分颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorT1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorT1 =
dataStyleClone.linearGradientStopColorT1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题上部分颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorT2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorT2 =
dataStyleClone.linearGradientStopColorT2
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题下部分颜色(始)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorB1"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorB1 =
dataStyleClone.linearGradientStopColorB1
"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题下部分颜色(终)">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.linearGradientStopColorB2"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="
optionData.dataStyle.linearGradientStopColorB2 =
dataStyleClone.linearGradientStopColorB2
"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
@ -37,4 +337,25 @@
required: true,
},
});
const dataStyleClone = {
gPolygonFillColorTL: '#EBBE10',
gFillColorTR: '#00C157',
gPolygonFillColorBL1: '#EBBE10',
gPolygonFillColorBL2: '#4FE985',
linearGradientStopColorR1: '#08251E',
linearGradientStopColorR2: '#00A374',
linearGradientStopColorL1: '#11B472',
linearGradientStopColorL2: '#00A374',
linearGradientStopColorM1: '#00FF8C',
linearGradientStopColorM2: '#00F4B6',
linearGradientStopColorRT1: '#00FF77',
linearGradientStopColorRT2: '#00BF6B',
linearGradientStopColorT1: '#00673F',
linearGradientStopColorT2: '#00683F',
linearGradientStopColorB1: '#72A18A',
linearGradientStopColorB2: '#1CC370',
};
</script>

6
src/packages/components/Zhigan/Zhigan/GeneralHead/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="GeneralHead">
<Title :title="option.title" :w="w" :h="h" :titleStyle="option.titleStyle" />
<Title :dataset="option.dataset" :w="w" :h="h" :dataStyle="option.dataStyle" />
</div>
</template>
@ -22,8 +22,8 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
title: props.chartConfig.option.title,
titleStyle: props.chartConfig.option.titleStyle,
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
</script>

72
src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue
View File

@ -10,12 +10,24 @@
>
<defs>
<linearGradient x1="97.3499803%" y1="112.35863%" x2="0%" y2="112.35863%" id="GeneralHead-1">
<stop stop-color="#08251E" stop-opacity="0.1742622" offset="0%"></stop>
<stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorR1"
stop-opacity="0.1742622"
offset="0%"
></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorR2"
stop-opacity="0"
offset="100%"
></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="GeneralHead-2">
<stop stop-color="#11B472" offset="0%"></stop>
<stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
<stop :stop-color="props.dataStyle.linearGradientStopColorL1" offset="0%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorL2"
stop-opacity="0"
offset="100%"
></stop>
</linearGradient>
<polygon
id="path-GeneralHead-3"
@ -30,8 +42,12 @@
gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)"
id="radialGradient-5"
>
<stop stop-color="#00FF8C" offset="0%"></stop>
<stop stop-color="#00F4B6" stop-opacity="0" offset="100%"></stop>
<stop :stop-color="props.dataStyle.linearGradientStopColorM1" offset="0%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorM2"
stop-opacity="0"
offset="100%"
></stop>
</radialGradient>
<filter
x="-3.0%"
@ -50,16 +66,28 @@
y2="50.2892453%"
id="GeneralHead-7"
>
<stop stop-color="#00FF77" offset="0%"></stop>
<stop stop-color="#00BF6B" stop-opacity="0" offset="100%"></stop>
<stop :stop-color="props.dataStyle.linearGradientStopColorRT1" offset="0%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorRT2"
stop-opacity="0"
offset="100%"
></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="GeneralHead-8">
<stop stop-color="#00673F" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#00683F" offset="100%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorT1"
stop-opacity="0"
offset="0%"
></stop>
<stop :stop-color="props.dataStyle.linearGradientStopColorT2" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="GeneralHead-9">
<stop stop-color="#72A18A" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#1CC370" offset="100%"></stop>
<stop
:stop-color="props.dataStyle.linearGradientStopColorB1"
stop-opacity="0"
offset="0%"
></stop>
<stop :stop-color="props.dataStyle.linearGradientStopColorB2" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@ -107,14 +135,14 @@
></polygon>
<polygon
id="路径-11"
fill="#EBBE10"
:fill="props.dataStyle.gPolygonFillColorTL"
points="0 0 0 7.33194884 7.88666648 0"
></polygon>
<g
id="编组-2"
opacity="0.691816057"
transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)"
fill="#00C157"
:fill="props.dataStyle.gFillColorTR"
>
<polygon
id="矩形"
@ -151,12 +179,12 @@
<g id="装饰线" transform="translate(8.3051, 37.5255)">
<polygon
id="矩形"
fill="#EBBE10"
:fill="props.dataStyle.gPolygonFillColorBL1"
points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"
></polygon>
<polygon
id="矩形备份-13"
fill="#4FE985"
:fill="props.dataStyle.gPolygonFillColorBL2"
points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"
></polygon>
<polygon
@ -173,18 +201,18 @@
</g>
</g>
<text
:x="props.titleStyle.x"
:y="props.titleStyle.y"
:x="props.dataStyle.x"
:y="props.dataStyle.y"
text-anchor="middle"
font-size="20"
fill="#ffffff"
:font-size="props.dataStyle.fontSize"
:fill="props.dataStyle.fontColor"
>
{{ props.title }}
{{ props.dataset }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['title', 'w', 'h', 'titleStyle']);
const props = defineProps(['dataset', 'w', 'h', 'dataStyle']);
</script>

8
src/packages/components/Zhigan/Zhigan/HeadMoreButton/config.ts
View File

@ -5,15 +5,15 @@ import { chartInitConfig } from '@/settings/designSetting'
import { HeadMoreButtonConfig } from './index'
export const option = {
buttonName: '更多',
buttonStyle:{
dataset: '更多',
dataStyle:{
color: '#FFFFFF',
fontSize: 16,
iconMarginLeft: 10,
iconFlag: true,
iconWidth: 11,
iconHeight: 13,
iconWidth: 12,
iconHeight: 15,
iconColor: '#57FF94',
}
}

22
src/packages/components/Zhigan/Zhigan/HeadMoreButton/config.vue
View File

@ -3,7 +3,7 @@
<n-tag type="primary">若按钮内容配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="按钮内容">
<SettingItem :alone="true">
<n-input v-model:value="optionData.buttonName" type="text" size="small" />
<n-input v-model:value="optionData.dataset" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="字体设置">
@ -11,12 +11,12 @@
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.buttonStyle.color"
v-model:value="optionData.dataStyle.color"
></n-color-picker>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number
v-model:value="optionData.buttonStyle.fontSize"
v-model:value="optionData.dataStyle.fontSize"
type="text"
:min="0"
size="small"
@ -26,38 +26,38 @@
<SettingItemBox name="图标宽度">
<SettingItem name="文字与图标的间隔">
<n-input-number
v-model:value="optionData.buttonStyle.iconMarginLeft"
v-model:value="optionData.dataStyle.iconMarginLeft"
type="text"
:min="0"
size="small"
/>
</SettingItem>
<SettingItem>
<n-checkbox v-model:checked="optionData.buttonStyle.iconFlag" size="small">
<n-checkbox v-model:checked="optionData.dataStyle.iconFlag" size="small">
是否展示图标
</n-checkbox>
</SettingItem>
<SettingItem>
<SettingItem name="图标宽度">
<n-input-number
v-model:value="optionData.buttonStyle.iconWidth"
v-model:value="optionData.dataStyle.iconWidth"
type="text"
:min="0"
size="small"
/>
</SettingItem>
<SettingItem name="图标长度">
<!-- <SettingItem name="图标长度">
<n-input-number
v-model:value="optionData.buttonStyle.iconHeight"
v-model:value="optionData.dataStyle.iconHeight"
type="text"
:min="0"
size="small"
/>
</SettingItem>
</SettingItem> -->
<SettingItem name="图标颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.buttonStyle.iconColor"
v-model:value="optionData.dataStyle.iconColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>

25
src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="MoreButton" @click="clickBtn">
<n-button text :color="option.buttonStyle.color" size="large">
<span :style="{ fontSize: option.buttonStyle.fontSize + 'px' }">{{ option.buttonName }}</span>
<Title v-if="option.buttonStyle.iconFlag" class="title" :buttonStyle="option.buttonStyle" />
<n-button text :color="option.dataStyle.color" size="large">
<span :style="{ fontSize: option.dataStyle.fontSize + 'px' }">{{ option.dataset }}</span>
<Title v-if="option.dataStyle.iconFlag" class="title" :dataStyle="option.dataStyle" />
</n-button>
</div>
</template>
@ -27,13 +27,23 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
buttonName: props.chartConfig.option.buttonName,
buttonStyle: props.chartConfig.option.buttonStyle,
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
watch(
() => option.dataStyle.iconWidth,
() => {
option.dataStyle.iconHeight = (option.dataStyle.iconWidth * 15) / 12;
},
{
immediate: true,
deep: true,
},
);
// 单击交互
const clickElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') {
@ -42,7 +52,6 @@
}
}
}
const clickBtn = () => {
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
};
@ -58,6 +67,6 @@
}
.title {
margin-left: v-bind('`${option.buttonStyle.iconMarginLeft}px`');
margin-left: v-bind('`${option.dataStyle.iconMarginLeft}px`');
}
</style>

10
src/packages/components/Zhigan/Zhigan/HeadMoreButton/svg/title.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<svg
:width="props.buttonStyle.iconWidth"
:height="props.buttonStyle.iconHeight"
:viewBox="`0 0 ${props.buttonStyle.iconWidth} ${props.buttonStyle.iconHeight}`"
:width="props.dataStyle.iconWidth"
:height="props.dataStyle.iconHeight"
viewBox="0 0 12 15"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@ -12,7 +12,7 @@
<g
id="林业防火-智感-重复报警弹窗-切图版"
transform="translate(-532, -220)"
:fill="props.buttonStyle.iconColor"
:fill="props.dataStyle.iconColor"
>
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
<g id="文字" transform="translate(64.7326, 10.2458)">
@ -42,5 +42,5 @@
</template>
<script setup lang="ts">
const props = defineProps(['buttonStyle']);
const props = defineProps(['dataStyle']);
</script>

6
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/config.ts
View File

@ -1,7 +1,7 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { MeiRiShangBaoConfig } from './index'
import dataJson from './data.json'
@ -12,7 +12,7 @@ export const option = {
dataStyle: {
listWidth: 363,
listHeight: 28,
sortOrder: true,
sortOrder: '1',
titleColor: '#FFFFFF',
titleFontSize: 16,
timeColor: '#16E795',
@ -28,6 +28,8 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = MeiRiShangBaoConfig.key
public attr = { ...chartInitConfig, w: 400, h: 200, zIndex: -1 }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_meirishangbaoshuliangtongji' }, }
public filter = "return res.result;"
public chartConfig = cloneDeep(MeiRiShangBaoConfig)
public option = cloneDeep(option)
}

18
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/config.vue
View File

@ -57,13 +57,17 @@
></n-input-number>
</SettingItem>
<SettingItem>
<n-space>
<n-switch v-model:value="optionData.dataStyle.sortOrder" size="small">
<template #checked> 数量排序 </template>
<template #unchecked> 时间排序 </template>
</n-switch>
<n-text>排序方式</n-text>
</n-space>
<n-radio-group
v-model:value="optionData.dataStyle.sortOrder"
size="small"
name="radiogroup"
>
<n-space>
<n-radio value="0"> 数量排序 </n-radio>
<n-radio value="1"> 时间排序 </n-radio>
<n-text>排序方式</n-text>
</n-space>
</n-radio-group>
</SettingItem>
</SettingItemBox>
</CollapseItem>

87
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/index.vue
View File

@ -40,45 +40,6 @@
dataStyle: props.chartConfig.option.dataStyle,
});
watch(
() => option.dataStyle.sortOrder,
() => {
if (option.dataStyle.sortOrder) {
// 数量排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.num) - parseInt(a.num));
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
} else {
// 时间排序
option.dataset = option.dataset.sort((a, b) => {
const timeA = dayjs(a.time, 'HH:mm:ss');
const timeB = dayjs(b.time, 'HH:mm:ss');
return timeB.diff(timeA);
});
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
}
},
{
immediate: true,
deep: true,
},
);
watch(
() => w.value,
() => {
@ -100,6 +61,54 @@
deep: true,
},
);
watch(
() => option.dataStyle.sortOrder,
() => {
sort();
},
{
immediate: true,
deep: true,
},
);
function sort() {
if (option.dataStyle.sortOrder == '0') {
// 数量排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.num) - parseInt(a.num));
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
}
if (option.dataStyle.sortOrder == '1') {
// 时间排序
option.dataset = option.dataset.sort((a, b) => {
return dayjs(b.time).diff(dayjs(a.time));
});
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
}
}
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
sort();
});
</script>
<style lang="scss" scoped>

10
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/svg/xinxi.vue
View File

@ -97,9 +97,8 @@
:fill="props.dataStyle.timeColor"
:font-size="props.dataStyle.timeFontSize"
>
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
{{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
{{ dayjs(props.item.time).hour() }} 小时 {{ dayjs(props.item.time).minute() }} 分钟
{{ dayjs(props.item.time).second() }} 秒
</text>
<text
x="85%"
@ -213,9 +212,8 @@
:fill="props.dataStyle.timeColor"
:font-size="props.dataStyle.timeFontSize"
>
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
{{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
{{ dayjs(props.item.time).hour() }} 小时 {{ dayjs(props.item.time).minute() }} 分钟
{{ dayjs(props.item.time).second() }} 秒
</text>
<text
x="85%"

4
src/packages/components/Zhigan/Zhigan/ModalButton/config.ts
View File

@ -5,8 +5,8 @@ import { chartInitConfig } from '@/settings/designSetting'
import { ModalButtonConfig } from './index'
export const option = {
buttonName: '辅助决策',
buttonStyle:{
dataset: '辅助决策',
dataStyle:{
color: 'yellow',
fontsize: 16,
fontcolor: '#FFFFFF',

38
src/packages/components/Zhigan/Zhigan/ModalButton/config.vue
View File

@ -1,24 +1,21 @@
<template>
<CollapseItem name="按钮设置" :expanded="true">
<n-tag type="primary">若按钮内容配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="按钮内容">
<SettingItem :alone="true">
<n-input v-model:value="optionData.buttonName" type="text" size="small" />
<SettingItem name="按钮文字内容手动输入">
<n-input v-model:value="optionData.dataset" type="text" size="small" />
</SettingItem>
<SettingItem name="按钮常用内容">
<n-select v-model:value="optionData.dataset" :options="dataList" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="内容设置">
<!-- <SettingItem name="按钮颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.buttonStyle.color"
></n-color-picker>
</SettingItem> -->
<SettingItemBox name="样式设置">
<SettingItem name="按钮常用颜色">
<n-select v-model:value="optionData.buttonStyle.color" :options="colorList" size="small" />
<n-select v-model:value="optionData.dataStyle.color" :options="colorList" size="small" />
</SettingItem>
<SettingItem name="按钮字体大小">
<n-input-number
v-model:value="optionData.buttonStyle.fontsize"
v-model:value="optionData.dataStyle.fontsize"
type="text"
:min="0"
size="small"
@ -28,7 +25,7 @@
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.buttonStyle.fontcolor"
v-model:value="optionData.dataStyle.fontcolor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
@ -48,6 +45,21 @@
},
});
const dataList = [
{
value: '辅助决策',
label: '辅助决策',
},
{
value: '非火情',
label: '非火情',
},
{
value: '重复报警',
label: '重复报警',
},
];
const colorList = [
{
value: 'red',

8
src/packages/components/Zhigan/Zhigan/ModalButton/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="ModalButton" @click="clickBtn">
<n-button text>
<Button :w="w" :h="h" :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
<Button :w="w" :h="h" :dataset="option.dataset" :dataStyle="option.dataStyle" />
</n-button>
</div>
</template>
@ -26,13 +26,12 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
buttonName: props.chartConfig.option.buttonName,
buttonStyle: props.chartConfig.option.buttonStyle,
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
// 单击交互
const clickElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') {
@ -41,7 +40,6 @@
}
}
}
const clickBtn = () => {
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
};

26
src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue
View File

@ -2,7 +2,7 @@
<div>
<!-- 黄色 -->
<svg
v-if="props.buttonStyle.color == 'yellow'"
v-if="props.dataStyle.color == 'yellow'"
:width="props.w"
:height="props.h"
viewBox="0 0 121 44"
@ -135,15 +135,15 @@
x="50%"
y="60%"
text-anchor="middle"
:font-size="props.buttonStyle.fontsize"
:fill="props.buttonStyle.fontcolor"
:font-size="props.dataStyle.fontsize"
:fill="props.dataStyle.fontcolor"
>
{{ props.buttonName }}
{{ props.dataset }}
</text>
</svg>
<!-- 绿色 -->
<svg
v-if="props.buttonStyle.color == 'green'"
v-if="props.dataStyle.color == 'green'"
:width="props.w"
:height="props.h"
viewBox="0 0 121 44"
@ -270,15 +270,15 @@
x="50%"
y="60%"
text-anchor="middle"
:font-size="props.buttonStyle.fontsize"
:fill="props.buttonStyle.fontcolor"
:font-size="props.dataStyle.fontsize"
:fill="props.dataStyle.fontcolor"
>
{{ props.buttonName }}
{{ props.dataset }}
</text>
</svg>
<!-- 红色 -->
<svg
v-if="props.buttonStyle.color == 'red'"
v-if="props.dataStyle.color == 'red'"
:width="props.w"
:height="props.h"
viewBox="0 0 121 44"
@ -394,15 +394,15 @@
x="50%"
y="60%"
text-anchor="middle"
:font-size="props.buttonStyle.fontsize"
:fill="props.buttonStyle.fontcolor"
:font-size="props.dataStyle.fontsize"
:fill="props.dataStyle.fontcolor"
>
{{ props.buttonName }}
{{ props.dataset }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['buttonName', 'buttonStyle', 'w', 'h']);
const props = defineProps(['dataset', 'dataStyle', 'w', 'h']);
</script>

2
src/packages/components/Zhigan/Zhigan/ModalHead/config.ts
View File

@ -5,7 +5,7 @@ import { chartInitConfig } from '@/settings/designSetting'
import { ModalHeadConfig } from './index'
export const option = {
data: '组件标题栏',
dataset: '组件标题栏',
dataStyle: {
x: 40,
y: 23,

2
src/packages/components/Zhigan/Zhigan/ModalHead/config.vue
View File

@ -3,7 +3,7 @@
<n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.data" type="text" size="small" />
<n-input v-model:value="optionData.dataset" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题设置">

4
src/packages/components/Zhigan/Zhigan/ModalHead/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="title">
<Title :data="option.data" :w="w" :h="h" :dataStyle="option.dataStyle" />
<Title :dataset="option.dataset" :w="w" :h="h" :dataStyle="option.dataStyle" />
</div>
</template>
@ -22,7 +22,7 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
data: props.chartConfig.option.data,
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
</script>

4
src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue
View File

@ -56,12 +56,12 @@
:font-size="props.dataStyle.fontSize"
:fill="props.dataStyle.fontColor"
>
{{ props.data }}
{{ props.dataset }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['data', 'w', 'h', 'dataStyle']);
const props = defineProps(['dataset', 'w', 'h', 'dataStyle']);
</script>

5
src/packages/components/Zhigan/Zhigan/ModalInfo/index.vue
View File

@ -58,6 +58,11 @@
deep: true,
},
);
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
});
</script>
<style lang="scss" scoped>

4
src/packages/components/Zhigan/Zhigan/ModalTimeLine/data.json
View File

@ -5,8 +5,8 @@
"type": "success",
"content": "临沂市，山东省辖地级市，位于山东省东南部，地跨北纬34°22′～36°13′，东经117°24′～119°11′之间，属温带季风气候，四季分明，雨热同季，地势自北而南有沂山、蒙山、尼山3条主要山脉延伸，控制着沂沭河上游及其支流的流向，向南构成的扇状临郯苍平原是山东三平原之一。",
"time": "2025-02-11 01:27:14",
"imageUrl": "/src/assets/logo.png",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"imageurl": "/src/assets/logo.png",
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"临沂市",

15
src/packages/components/Zhigan/Zhigan/ModalTimeLine/index.vue
View File

@ -71,7 +71,7 @@
</div>
<!-- 图片 -->
<div
v-if="item.imageUrl"
v-if="item.imageurl"
:style="{
display: 'flex',
alignItems: 'center',
@ -83,7 +83,7 @@
>
<n-image
preview-disabled
:src="item.imageUrl"
:src="item.imageurl"
:style="{
border: `${option.dataStyle.imageBorderWidth}px solid ${option.dataStyle.imageBorderColor}`,
padding: `${option.dataStyle.imagePadding}px`,
@ -95,7 +95,7 @@
/>
</div>
<!-- 视频 -->
<div v-if="item.videoUrl" class="timeLineVideoDiv">
<div v-if="item.videourl" class="timeLineVideoDiv">
<!-- 编辑状态 -->
<video
v-if="isEdit"
@ -161,10 +161,10 @@
function handlerPlayVideo() {
option.dataset.forEach((element, index) => {
if (players[index]) {
players[index].src(element.videoUrl);
players[index].src(element.videourl);
} else {
players[index] = TCPlayer(element.title + element.index, {});
players[index].src(element.videoUrl);
players[index].src(element.videourl);
}
});
}
@ -193,6 +193,11 @@
});
}
});
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
});
</script>
<style lang="scss" scoped>

3
src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/config.ts
View File

@ -25,13 +25,14 @@ export const option = {
timeColor: '#ffffff',
timeFontSize: 16,
listMarginbottom: 0,
sortOrder: '1'
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WeiXingYaoGanConfig.key
public attr = { ...chartInitConfig, w: 400, h: 475, zIndex: -1 }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from t_goview_component' }, }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_weixinyaoganxinxi' }, }
public filter = "return res.result;"
public chartConfig = cloneDeep(WeiXingYaoGanConfig)
public option = cloneDeep(option)

9
src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/config.vue
View File

@ -103,6 +103,15 @@
placeholder="间隔距离"
></n-input-number>
</SettingItem>
<SettingItem>
<n-radio-group v-model:value="optionData.dataStyle.sortOrder" name="radiogroup">
<n-space>
<n-radio value="0"> 时间正序排列 </n-radio>
<n-radio value="1"> 时间倒序排列 </n-radio>
<n-text>排序方式</n-text>
</n-space>
</n-radio-group>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>

41
src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/data.json
View File

@ -2,74 +2,73 @@
"source": [
{
"key": "1",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:00"
},
{
"key": "2",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
},
{
"key": "3",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:02"
},
{
"key": "4",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:03"
},
{
"key": "5",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:04"
},
{
"key": "6",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:05"
},
{
"key": "7",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:06"
},
{
"key": "8",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:07"
},
{
"key": "9",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:08"
},
{
"key": "10",
"title":"巡护发现火情",
"title": "巡护发现火情",
"type": "重大火情",
"position": "临沂市蒙阴县马田公路附近东北方向100米",
"time": "2025/10/01 12:05:01"
"time": "2025/10/01 12:05:09"
}
]
}
}

33
src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/index.vue
View File

@ -20,6 +20,7 @@
import { useChartDataFetch } from '@/hooks';
import Xinxi from './svg/xinxi.vue';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import dayjs from 'dayjs';
const chartEditStore = useChartEditStore();
@ -37,6 +38,7 @@
dataStyle: props.chartConfig.option.dataStyle,
});
// 变换组件宽度
watch(
() => w.value,
() => {
@ -58,6 +60,31 @@
deep: true,
},
);
// 排序
watch(
() => option.dataStyle.sortOrder,
() => {
sort();
},
{
immediate: true,
deep: true,
},
);
function sort() {
if (option.dataStyle.sortOrder == '0') {
option.dataset = option.dataset.sort((a, b) =>
dayjs(a.time, 'yyyy-MM-dd HH:mm:ss').diff(dayjs(b.time, 'yyyy-MM-dd HH:mm:ss')),
);
}
if (option.dataStyle.sortOrder == '1') {
option.dataset = option.dataset.sort((a, b) =>
dayjs(b.time, 'yyyy-MM-dd HH:mm:ss').diff(dayjs(a.time, 'yyyy-MM-dd HH:mm:ss')),
);
}
}
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
@ -66,6 +93,12 @@
val,
);
};
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
sort();
});
</script>
<style lang="scss" scoped>

4
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts
View File

@ -1,7 +1,7 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { WuRenJiFeiXingShuJuConfig } from './index'
import dataJson from './data.json'
@ -45,6 +45,8 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WuRenJiFeiXingShuJuConfig.key
public attr = { ...chartInitConfig, w: 400, h: 240, zIndex: -1 }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_wurenjifeixinghuamian' }, }
public filter = "return res.result;"
public chartConfig = cloneDeep(WuRenJiFeiXingShuJuConfig)
public option = cloneDeep(option)
}

5
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue
View File

@ -48,6 +48,11 @@
deep: true,
},
);
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
});
</script>
<style lang="scss" scoped>

4
src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts
View File

@ -5,9 +5,7 @@ import { chartInitConfig } from '@/settings/designSetting'
import { WuRenJiImageConfig } from './index'
export const option = {
dataset: {
url: 'src/assets/images/chart/zhigan/component/example1.gif'
},
dataset: 'src/assets/images/chart/zhigan/component/example1.gif',
}
export default class Config extends PublicConfigClass implements CreateComponentType {

4
src/packages/components/Zhigan/Zhigan/WuRenJiImage/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="title">
<n-image :width="w" :height="h" :src="option.dataset.url" preview-disabled />
<n-image :width="w" :height="h" :src="option.dataset" preview-disabled />
<span class="Tupian">
<Tupian :w="w" :h="h" />
</span>
@ -28,7 +28,7 @@
dataset: props.chartConfig.option.dataset,
});
onMounted(() => {
// 获取点击事件传过来的值
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'click', (data) => {
console.log('data', data);
});

4
src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.ts
View File

@ -1,7 +1,7 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { WuRenJiShiShiHuaMianConfig } from './index'
import dataJson from './data.json'
@ -45,6 +45,8 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WuRenJiShiShiHuaMianConfig.key
public attr = { ...chartInitConfig, w: 400, h: 343, zIndex: -1 }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_wurenjishishihuamian' }, }
public filter = "return res.result;"
public chartConfig = cloneDeep(WuRenJiShiShiHuaMianConfig)
public option = cloneDeep(option)
}

12
src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/data.json
View File

@ -2,27 +2,27 @@
"source": [
{
"title":"DJA-72无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"DJ-057无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"DJA-20无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"DJA-035无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"DJA-11无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
},
{
"title":"DJ-021无人机监控画面",
"videoUrl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
"videourl": "http://221.2.83.254:7012/live/37130100181328000001.m3u8"
}
]
}

9
src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue
View File

@ -85,10 +85,10 @@
function handlerPlayVideo() {
option.dataset.forEach((element, index) => {
if (players[index]) {
players[index].src(element.videoUrl);
players[index].src(element.videourl);
} else {
players[index] = TCPlayer(element.title + element.index, {});
players[index].src(element.videoUrl);
players[index].src(element.videourl);
}
});
}
@ -117,6 +117,11 @@
});
}
});
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
});
</script>
<style lang="scss" scoped>

4
src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts
View File

@ -1,7 +1,7 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { XianSuoShangBaoConfig } from './index'
import dataJson from './data.json'
@ -50,6 +50,8 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = XianSuoShangBaoConfig.key
public attr = { ...chartInitConfig, w: 400, h: 225, zIndex: -1 }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_xiansuoshangbao' }, }
public filter = "return res.result;"
public chartConfig = cloneDeep(XianSuoShangBaoConfig)
public option = cloneDeep(option)
}

71
src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue
View File

@ -61,37 +61,6 @@
dataStyle: props.chartConfig.option.dataStyle,
});
watch(
() => option.dataStyle.sortOrder,
() => {
if (option.dataStyle.sortOrder == '0') {
// 分母排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total));
} else if (option.dataStyle.sortOrder == '1') {
// 分子排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled));
} else if (option.dataStyle.sortOrder == '2') {
// 比例排序
option.dataset = option.dataset.sort(
(a, b) =>
parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total),
);
}
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
key: newKey,
};
});
},
{
immediate: true,
deep: true,
},
);
watch(
() => w.value,
() => {
@ -106,6 +75,46 @@
deep: true,
},
);
watch(
() => option.dataStyle.sortOrder,
() => {
sort();
},
{
immediate: true,
deep: true,
},
);
function sort() {
if (option.dataStyle.sortOrder == '0') {
// 分母排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total));
} else if (option.dataStyle.sortOrder == '1') {
// 分子排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled));
} else if (option.dataStyle.sortOrder == '2') {
// 比例排序
option.dataset = option.dataset.sort(
(a, b) => parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total),
);
}
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
key: newKey,
};
});
}
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData;
sort();
});
</script>
<style lang="scss" scoped>

26
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
View File

@ -107,7 +107,16 @@
:options="routeOptions"
/>
</div>
<!-- 消息类型 -->
</template>
<div class="movement-type__element" v-if="eventType == 'websocket'">
消息类型
<n-select
v-model:value="panel.messageType"
placeholder="请选择"
:options="messageOptions"
/>
</div>
</div>
</div>
</n-tab-pane>
@ -126,6 +135,7 @@
import { previewPath } from '@/utils';
import { projectListApi } from '@/api/path/project.api';
import { funSelectOptions } from '@/hooks/ceshiFun.hook';
import { getLoad } from '@/api/sys/sysDataItemDetail';
const { chartEditStore } = useTargetData();
@ -145,7 +155,7 @@
},
]);
const publishOptions = ref([]);
const messageOptions = ref([]);
const props = defineProps({
eventData: {
type: Object,
@ -159,6 +169,7 @@
],
}),
},
eventType: String,
});
const emits = defineEmits(['changeTab']);
const eventValue = ref(props.eventData.type);
@ -247,6 +258,18 @@
};
});
};
// 获取消息分类
const getMsgTypeList = async () => {
const data = await getLoad({
code: 'websocket',
});
data.forEach((item) => {
messageOptions.value.push({
label: item.itemName,
value: item.itemValue,
});
});
};
onMounted(() => {
routeOptions.value = [
{
@ -256,6 +279,7 @@
];
getRouteList();
getPublishedPageList();
getMsgTypeList();
});
</script>
<style lang="scss" scoped>

2
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/index.vue
View File

@ -62,7 +62,7 @@
:key="panel.type"
:name="'交互' + (Number(panelIndex) + 1) + '-' + getEventName(panel.type)"
>
<EventItem :eventData="panel" @changeTab="changeTab" />
<EventItem :eventType="panel.type" :eventData="panel" @changeTab="changeTab" />
</n-tab-pane>
<template #prefix> 事件 <n-icon :component="HandLeftOutline" /></template>
</n-tabs>

4
src/views/chart/ContentConfigurations/components/hooks/eventData.hook.ts
View File

@ -22,6 +22,10 @@ export const eventTypeOptions: EventOptionsItemType[] = [
label: '鼠标移出',
value: 'mouseout',
},
{
label: '前后端通信',
value: 'websocket',
},
];
// * 动作类型
export const movementTypeOptions: EventOptionsItemType[] = [

1
src/views/preview/components/PreviewRenderGroup/index.vue
View File

@ -119,5 +119,6 @@
<style lang="scss" scoped>
.chart-item {
position: absolute;
cursor: pointer;
}
</style>

83
src/views/preview/suspenseIndex.vue
View File

@ -23,6 +23,7 @@
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
<!-- <button @click="test">测试</button> -->
</div>
</div>
</template>
@ -30,7 +31,7 @@
</template>
<script setup lang="ts">
import { computed, watch } from 'vue';
import { computed, watch, onMounted, ref } from 'vue';
import { PreviewRenderList } from './components/PreviewRenderList';
import { getFilterStyle, setTitle } from '@/utils';
import {
@ -46,13 +47,15 @@
import type { ChartEditStorageType } from './index.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useRoute } from 'vue-router';
import { EventBus } from '@/utils/eventBus';
import { websocketEvent, eventCommonHandler } from '@/hooks/eventHandler.hook';
// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
const route = useRoute();
await getSessionStorageInfo();
const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType;
console.log('chartEditStore', chartEditStore);
setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`);
const previewRefStyle = computed(() => {
@ -80,6 +83,82 @@
location.reload();
},
);
const createListeningEvent = (value) => {
chartEditStore.getComponentList.forEach((item) => {
item.events.interactConfigEvents.forEach((event) => {
if (event.type == 'websocket') {
eventCommonHandler(chartEditStore.getComponentList, event.movementList, value);
websocketEvent(event.movementList, value);
}
});
});
};
const myWebSocket = ref();
const lockReconnect = ref(false);
const myWebSocketTimer = ref();
function websocketReconnect() {
if (lockReconnect.value) {
// 是否已经执行重连
return;
}
lockReconnect.value = true;
// 没连接上会一直重连，设置延迟避免请求过多
var tt = null;
tt && clearTimeout(tt);
tt = setTimeout(function () {
initWebSocket();
lockReconnect.value = false;
// console.log("正在发起1次WebSocket重连")
}, 120000);
}
function initWebSocket() {
if ('WebSocket' in window) {
myWebSocket.value = new WebSocket('ws://192.168.10.163:9000');
myWebSocket.value.onopen = function () {
console.log('websocket连接成功');
if (myWebSocketTimer.value) {
clearInterval(myWebSocketTimer.value);
}
webSocketHeart();
};
myWebSocket.value.onmessage = function (evt) {
const data = JSON.parse(evt.data);
console.log('websock-message', data);
createListeningEvent(data);
};
myWebSocket.value.onclose = function () {
// 如果断开则重新连接
websocketReconnect();
};
} else {
alert('您的浏览器不支持 WebSocket!');
}
}
function webSocketHeart() {
//长连接心跳检测
let total = 1;
myWebSocketTimer.value = setInterval(function () {
if (myWebSocket.value) {
// console.log("WebSocket","向服务器发送了第"+total+"条心跳检测消息");
// myWebSocket.value.send('发送数据');
total = total + 1;
}
}, 30000);
}
const test = () => {
const data = {
type: 'type1',
data: 'test',
};
myWebSocket.value.send(JSON.stringify(data));
};
onMounted(() => {
initWebSocket();
});
</script>
<style lang="scss" scoped>