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

组件完善

main
userName 2025-03-25 15:07:30 +08:00
parent f9821911f6
commit c76032188a
15 changed files with 543 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/units/right4bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

7
src/packages/components/Tasks/Tasks/TaskReceivPerson/index.vue
View File

@ -158,6 +158,13 @@ const handleSelectionChange = (val)=> {
receivePeople.value = val
}
const sendClick = ()=>{
if(!receivePeople.value || receivePeople.value.length == 0){
ElMessage({
message: '请选择接收人',
type: 'warning',
})
return
}
let querys = {
content: taskContent.value,
lng: lng.value,

5
src/packages/components/Units/Titles/LeftCharts/config.ts
View File

@ -1,6 +1,6 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { LeftChartsConfig } from './index'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
@ -33,6 +33,7 @@ const option = {
series: [
{
type: 'line',
name: '火情',
smooth: true,
symbolSize: 10, //设定实心点的大小
itemStyle: {
@ -74,6 +75,4 @@ 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;"
}

4
src/packages/components/Units/Titles/LeftCharts/config.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="按钮" :expanded="true">
<!-- <CollapseItem name="按钮" :expanded="true">
<SettingItemBox name=""
v-for="(item, index) in optionData.textBtnArr"
:key="index">
@ -20,7 +20,7 @@
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</CollapseItem> -->
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"

43
src/packages/components/Units/Titles/LeftCharts/index.vue
View File

@ -14,19 +14,20 @@
</template>
<script setup lang="ts">
import { reactive, watch, PropType, toRefs, ref } from 'vue'
import { reactive, watch, PropType, toRefs, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartDataFetch } from '@/hooks'
import { isPreview, colorGradientCustomMerge} from '@/utils'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps({
themeSetting: {
@ -48,7 +49,6 @@ const {
const btnIndex = ref(1)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()
const option = reactive({
@ -97,16 +97,33 @@ watch(
)
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
})
getListData()
}
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
const getListData=()=>{
axios({
method: "get",
url: VITE_GLOB_API_URL + '/api/FireManagement/GetFireClueStatistics',
params: {
type: textBtnArr.value[btnIndex.value].value,
},
headers: {
'X-Token': localStorage.getItem("X-Token")
}
}).then(res => {
let arr = []
res.data.result.forEach(item =>{
arr.push({
label: item.dateTime,
value: item.count
})
})
props.chartConfig.option.dataset.source = arr
})
}
onMounted(() => {
getListData()
})
</script>
<style lang="scss" scoped>

4
src/packages/components/Units/Titles/RightBox03/config.ts
View File

@ -11,9 +11,9 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
const option = {
textBtnArr: [
{ label: '按年', value: '1' },
{ label: '按年', value: '3' },
{ label: '按月', value: '2' },
{ label: '按日', value: '3' }
{ label: '按日', value: '1' }
],
color: [],
legend: {

4
src/packages/components/Units/Titles/RightBox03/config.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="按钮" :expanded="true">
<!-- <CollapseItem name="按钮" :expanded="true">
<SettingItemBox name=""
v-for="(item, index) in optionData.textBtnArr"
:key="index">
@ -24,7 +24,7 @@
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</CollapseItem> -->
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"

2
src/packages/components/Units/Titles/RightBox03/data.json
View File

@ -1,5 +1,5 @@
{
"dimensions": ["product", "data1", "data2","data3"],
"dimensions": ["product", "data1", "data2"],
"source": [
{
"product": "Mon",

35
src/packages/components/Units/Titles/RightBox03/index.vue
View File

@ -16,7 +16,7 @@
</template>
<script setup lang="ts">
import { reactive, watch, PropType, toRefs, ref } from 'vue'
import { reactive, watch, PropType, toRefs, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
@ -27,8 +27,10 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartDataFetch } from '@/hooks'
import { isPreview, colorGradientCustomMerge} from '@/utils'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps({
themeSetting: {
@ -97,13 +99,32 @@ watch(
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
getListData()
}
const getListData=()=>{
axios({
method: "get",
url: VITE_GLOB_API_URL + '/api/FireManagement/GetFireClueStatisticsByState',
params: {
type: textBtnArr.value[btnIndex.value].value,
},
headers: {
'X-Token': localStorage.getItem("X-Token")
}
}).then(res => {
let arr = []
res.data.result.forEach(item =>{
arr.push({
product: item.dateTime,
data1: item.untreatedCount,
data1: item.treatedCount
})
})
props.chartConfig.option.dataset.source = arr
})
}
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
onMounted(() => {
getListData()
})
</script>
<style lang="scss" scoped>

100
src/packages/components/Units/Titles/RightBox04/config.ts Normal file
View File

@ -0,0 +1,100 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { RightBox04Config } 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'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
const option = {
textBtnArr: [
{ label: '按年', value: '3' },
{ label: '按月', value: '2' },
{ label: '按日', value: '1' }
],
color: [],
legend: {
left: 'right',
data: ['特大火灾', '重大火灾'],
textStyle:{
fontSize: 12
}
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
xAxis: {
show: true,
type: 'category'
},
yAxis: {
show: true,
type: 'value'
},
dataset: { ...dataJson },
series: [
{
type: 'line',
name: '特大火灾',
smooth: false,
symbolSize: 10, //设定实心点的大小
itemStyle: {
// 设置symbol的颜色
normal: {
color: '#FFC600'
}
},
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
lineStyle: {
width: 3,
type: 'solid',
color: '#FFC600'
},
},
{
type: 'line',
name: '重大火灾',
smooth: false,
symbolSize: 10, //设定实心点的大小
itemStyle: {
// 设置symbol的颜色
normal: {
color: '#0FD985'
}
},
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
lineStyle: {
width: 3,
type: 'solid',
color: '#0FD985'
},
},
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = RightBox04Config.key
public chartConfig = cloneDeep(RightBox04Config)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
public filter = "return res.result;"
}

142
src/packages/components/Units/Titles/RightBox04/config.vue Normal file
View File

@ -0,0 +1,142 @@
<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"
name="单折线面积图"
:expanded="true"
>
<SettingItemBox name="线条">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
: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="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.itemStyle.normal.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 { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
},
})
const seriesList = computed(() => {
return props.optionData.series
})
const chartEditStoreRight = useChartEditStore()
</script>

40
src/packages/components/Units/Titles/RightBox04/data.json Normal file
View File

@ -0,0 +1,40 @@
{
"dimensions": ["product", "data1", "data2"],
"source": [
{
"product": "Mon",
"data1": 120,
"data2": 130
},
{
"product": "Tue",
"data1": 200,
"data2": 130
},
{
"product": "Wed",
"data1": 150,
"data2": 312
},
{
"product": "Thu",
"data1": 80,
"data2": 268
},
{
"product": "Fri",
"data1": 70,
"data2": 155
},
{
"product": "Sat",
"data1": 110,
"data2": 117
},
{
"product": "Sun",
"data1": 130,
"data2": 160
}
]
}

14
src/packages/components/Units/Titles/RightBox04/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const RightBox04Config: ConfigType = {
key: 'RightBox04',
chartKey: 'VRightBox04',
conKey: 'VCRightBox04',
title: '上报数量统计',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'right4bg.png'
}

171
src/packages/components/Units/Titles/RightBox04/index.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<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, toRefs, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { isPreview, colorGradientCustomMerge} from '@/utils'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
const {
textBtnArr
} = toRefs(props.chartConfig.option)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStoreRight = useChartEditStore()
const option = reactive({
value: {}
})
// 渐变色处理
watch(
() => chartEditStoreRight.getEditCanvasConfig.chartThemeColor,
(newColor: keyof typeof chartColorsSearch) => {
try {
if (!isPreview()) {
props.chartConfig.option.color = []
props.chartConfig.option.series.forEach((value: any, index: number) => {
props.chartConfig.option.color.push(value.lineStyle.color)
})
}
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
} catch (error) {
console.log(error)
}
},
{
immediate: true
}
)
watch(
() => props.chartConfig.option.dataset,
() => {
option.value = props.chartConfig.option
}
)
const btnIndex = ref(0)
const btnClick = function(item,index){
btnIndex.value = index
getListData()
}
const getListData=()=>{
axios({
method: "get",
url: VITE_GLOB_API_URL + '/api/FireManagement/GetFireClueStatisticsByDegreeType',
params: {
type: textBtnArr.value[btnIndex.value].value,
},
headers: {
'X-Token': localStorage.getItem("X-Token")
}
}).then(res => {
let arr = []
res.data.result.forEach(item =>{
arr.push({
product: item.dateTime,
data1: item.extraLargeCount,
data1: item.largeCount
})
})
props.chartConfig.option.dataset.source = arr
})
}
onMounted(() => {
getListData()
})
</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>

2
src/packages/components/Units/Titles/index.ts
View File

@ -24,6 +24,7 @@ import { RightBox01Icon03Config } from './RightBox01Icon03/index';
import { RightBox01Icon04Config } from './RightBox01Icon04/index';
import { RightBox02Config } from './RightBox02/index';
import { RightBox03Config } from './RightBox03/index';
import { RightBox04Config } from './RightBox04/index';
import { UnitTitlesBg01Config } from './UnitTitlesBg01/index';
import { UnitsBg01Config } from './UnitsBg01/index';
import { UnitsBg02Config } from './UnitsBg02/index';
@ -59,6 +60,7 @@ export default [
RightBox01Icon04Config,
RightBox02Config,
RightBox03Config,
RightBox04Config,
UnitTitlesBg01Config,
UnitsBg01Config,
UnitsBg02Config,