驾驶舱页面绘制
绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
This commit is contained in:
guanj
72
src/api/system-boot/file.ts
Normal file
72
src/api/system-boot/file.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
const SYSTEM_PREFIX = '/system-boot'
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param file
|
||||
*/
|
||||
export const uploadFile = (file: any, path: string) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('path', path)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/upload',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
export const deleteFile = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/delete',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
export const downloadFile = (filePath: any) => {
|
||||
// let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/download',
|
||||
method: 'GET',
|
||||
params: filePath,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件的短期url展示
|
||||
*/
|
||||
export const getFileUrl = (params:any) => {
|
||||
let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据获取文件的一个短期url及文件名
|
||||
*/
|
||||
export const getFileNameAndFilePath = (query: any) => {
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
BIN
src/assets/img/amplify.png
Normal file
BIN
src/assets/img/amplify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/img/reduce.png
Normal file
BIN
src/assets/img/reduce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
344
src/components/cockpit/F47Curve/index.vue
Normal file
344
src/components/cockpit/F47Curve/index.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--F47曲线 -->
|
||||
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - 80px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const echartList = ref({})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const data = reactive({
|
||||
name: '事件个数',
|
||||
gs: 0,
|
||||
krr: 0,
|
||||
bkrr: 0
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
let res = {
|
||||
data: { totalNumberOfEvents: 0, voltageToleranceCurveDataList: [] }
|
||||
}
|
||||
|
||||
const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
|
||||
data.gs = res.data.voltageToleranceCurveDataList.length
|
||||
data.krr = gongData.pointI.length
|
||||
data.bkrr = gongData.pointIun.length
|
||||
console.log(gongData)
|
||||
echartList.value = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: `F47曲线`
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (a: any) {
|
||||
var relVal = ''
|
||||
relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: 'log',
|
||||
min: 0.001,
|
||||
max: 1000,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
name: 's'
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: function (value: any) {
|
||||
return value.max + 20
|
||||
},
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: '%'
|
||||
}
|
||||
],
|
||||
color: ['#DAA520', 'green', 'red'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '边界线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointF
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointFun
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
function gongfunction(arr: any) {
|
||||
let standI = 0
|
||||
let unstandI = 0
|
||||
let standF = 0
|
||||
let unstandF = 0
|
||||
let total = 0
|
||||
let pointIun = []
|
||||
let pointI = []
|
||||
let pointF = []
|
||||
let pointFun = []
|
||||
total = arr.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let point = []
|
||||
let xx = arr[i].persistTime
|
||||
let yy = arr[i].eventValue
|
||||
let time = arr[i].time
|
||||
let eventId = arr[i].eventId
|
||||
// let index =arr[i].eventDetailIndex;
|
||||
point = [xx, yy, time, eventId]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
let line = 0
|
||||
line = 250 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
standI,
|
||||
unstandI,
|
||||
pointI,
|
||||
pointIun,
|
||||
standF,
|
||||
unstandF,
|
||||
pointF,
|
||||
pointFun
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 100)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
136
src/components/cockpit/directionStatistics/index.vue
Normal file
136
src/components/cockpit/directionStatistics/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂降方向统计 -->
|
||||
<my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: `calc(${prop.height} )` }" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '来自电网',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '来自负荷',
|
||||
value: 41
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂降方向统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['55%', '75%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限程度 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限严重度'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 7.5, 36, 0, 80],
|
||||
barMaxWidth: 30
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '指标名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '越限最大值',
|
||||
field: 'type',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '国标限值',
|
||||
field: 'type1',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '越限程度(%)',
|
||||
field: 'type2',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '发生日期',
|
||||
field: 'type3',
|
||||
minWidth: '100'
|
||||
},
|
||||
{
|
||||
title: '越限最高监测点',
|
||||
field: 'type4',
|
||||
minWidth: '90'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '闪变',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '谐波电压',
|
||||
type: '1.72',
|
||||
type1: '1.6',
|
||||
type2: '7.5',
|
||||
type3: '2025-03-09',
|
||||
type4: '10kV1#电动机'
|
||||
},
|
||||
{
|
||||
name: '谐波电流',
|
||||
type: '27.2',
|
||||
type1: '20.0',
|
||||
type2: '36.0',
|
||||
type3: '2025-03-16',
|
||||
type4: '380V电焊机(治理前)'
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '三相不平衡',
|
||||
type: '3.6',
|
||||
type1: '2.0',
|
||||
type2: '80.0',
|
||||
type3: '2025-03-01',
|
||||
type4: '380V电焊机(治理前)'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
1
src/components/cockpit/governanceReport/index.json
Normal file
1
src/components/cockpit/governanceReport/index.json
Normal file
File diff suppressed because one or more lines are too long
124
src/components/cockpit/governanceReport/index.vue
Normal file
124
src/components/cockpit/governanceReport/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--治理效果报表 -->
|
||||
<TableHeader :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="治理对象">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择治理对象"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
id="luckysheet"
|
||||
:style="{ width: `calc(${prop.width} )`, height: `calc(${prop.height} - 57px )` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { exportExcel } from '@/views/govern/reportForms/export.js'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import Json from './index.json'
|
||||
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// 下载表格
|
||||
const downloadExcel = () => {
|
||||
exportExcel(luckysheet.getAllSheets(), '治理效果报表')
|
||||
}
|
||||
onMounted(() => {
|
||||
luckysheet.create({
|
||||
container: 'luckysheet',
|
||||
title: '', // 表 头名
|
||||
lang: 'zh', // 中文
|
||||
showtoolbar: false, // 是否显示工具栏
|
||||
showinfobar: false, // 是否显示顶部信息栏
|
||||
showsheetbar: true, // 是否显示底部sheet按钮
|
||||
allowEdit: false, // 禁止所有编辑操作（必填）
|
||||
data: Json
|
||||
})
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--电网侧指标越限统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
barMaxWidth: 30,
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器电网侧',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.text || false"
|
||||
>
|
||||
<template #content>
|
||||
<span v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"></span>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0,
|
||||
text: ''
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0,
|
||||
text: ''
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key < 10) {
|
||||
return '#33996690'
|
||||
} else if (data[0].key < 80) {
|
||||
return '#FFCC3390'
|
||||
} else if (data[0].key <= 100) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
// trigger: 'axis'
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
console.log(params)
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '指标越限概率分布',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '指标越限',
|
||||
data: ['0-10', '10-20', '20-30', '30-40', '40-50'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '指标类型',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '越限占比'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: [
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0.2, 1]
|
||||
],
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const echartList1 = ref({
|
||||
title: {
|
||||
text: '越限时间概率分布'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '次' // 给X轴加单位
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '闪变',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '谐波电压',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '谐波电流',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 19],
|
||||
['2025-10-16 07:15:00', 19],
|
||||
['2025-10-16 07:30:00', 19],
|
||||
['2025-10-16 07:45:00', 19],
|
||||
['2025-10-16 08:00:00', 39],
|
||||
['2025-10-16 08:15:00', 59],
|
||||
['2025-10-16 08:30:00', 69],
|
||||
['2025-10-16 08:45:00', 79],
|
||||
['2025-10-16 09:00:00', 109],
|
||||
['2025-10-16 09:15:00', 129],
|
||||
['2025-10-16 09:30:00', 139],
|
||||
['2025-10-16 09:45:00', 149],
|
||||
['2025-10-16 10:00:00', 169],
|
||||
['2025-10-16 10:15:00', 169],
|
||||
['2025-10-16 10:30:00', 139],
|
||||
['2025-10-16 10:45:00', 129],
|
||||
['2025-10-16 11:00:00', 149],
|
||||
['2025-10-16 11:15:00', 89],
|
||||
['2025-10-16 11:30:00', 79],
|
||||
['2025-10-16 11:45:00', 99],
|
||||
['2025-10-16 12:00:00', 69],
|
||||
['2025-10-16 12:15:00', 69],
|
||||
['2025-10-16 12:30:00', 69],
|
||||
['2025-10-16 12:45:00', 69]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压偏差',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 12],
|
||||
['2025-10-16 07:15:00', 12],
|
||||
['2025-10-16 07:30:00', 12],
|
||||
['2025-10-16 07:45:00', 12],
|
||||
['2025-10-16 08:00:00', 32],
|
||||
['2025-10-16 08:15:00', 52],
|
||||
['2025-10-16 08:30:00', 62],
|
||||
['2025-10-16 08:45:00', 72],
|
||||
['2025-10-16 09:00:00', 112],
|
||||
['2025-10-16 09:15:00', 122],
|
||||
['2025-10-16 09:30:00', 122],
|
||||
['2025-10-16 09:45:00', 152],
|
||||
['2025-10-16 10:00:00', 122],
|
||||
['2025-10-16 10:15:00', 112],
|
||||
['2025-10-16 10:30:00', 132],
|
||||
['2025-10-16 10:45:00', 122],
|
||||
['2025-10-16 11:00:00', 142],
|
||||
['2025-10-16 11:15:00', 82],
|
||||
['2025-10-16 11:30:00', 72],
|
||||
['2025-10-16 11:45:00', 92],
|
||||
['2025-10-16 12:00:00', 62],
|
||||
['2025-10-16 12:15:00', 62],
|
||||
['2025-10-16 12:30:00', 62],
|
||||
['2025-10-16 12:45:00', 62]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '三相不平衡',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--主要监测点列表 -->
|
||||
<TableHeader :showReset="false" >
|
||||
<template v-slot:select>
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输关键字" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - 58px)`"></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
minWidth: '90',
|
||||
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '监测对象类型',
|
||||
field: 'type',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'whetherToGovern',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{ title: '主要存在的电能质量问题', field: 'question', minWidth: '150' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '10kV2#(治理后)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '所有指标均合格'
|
||||
},
|
||||
{
|
||||
name: '380V电焊机(治理前)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '380V水泵机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '所有指标均合格'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="指标合格率统计" v-model="dialogVisible" append-to-body width="70%">
|
||||
<TableHeader datePicker showExport :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
placeholder="请选择监测点名称"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup :height="height"></Table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, provide } from 'vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible: any = ref(false)
|
||||
const options = [
|
||||
{
|
||||
value: '35kV进线',
|
||||
label: '35kV进线'
|
||||
}
|
||||
]
|
||||
const height = mainHeight(0, 2).height as any
|
||||
const loop50 = (key: string) => {
|
||||
let list: any[] = []
|
||||
for (let i = 2; i < 51; i++) {
|
||||
list.push({
|
||||
title: i + '次',
|
||||
// field: key + i,
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
publicHeight: 30,
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
field: 'time',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '闪变越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
{
|
||||
title: '三相不平衡度越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '电压偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '频率偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标拟合图 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户功率">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择用户功率"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="越限情况">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择越限情况"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '三相总有功功率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '三相总无功功率',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '越限',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '不越限',
|
||||
value: '0'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '谐波电压总畸变率越限与功率负荷曲线拟合图'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{}, {}],
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '有功功率',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '谐波总畸变率',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 0],
|
||||
['2025-10-16 07:15:00', 0],
|
||||
['2025-10-16 07:30:00', 0],
|
||||
['2025-10-16 07:45:00', 0],
|
||||
['2025-10-16 08:00:00', 0],
|
||||
['2025-10-16 08:15:00', 0.1],
|
||||
['2025-10-16 08:30:00', 0.1],
|
||||
['2025-10-16 08:45:00', 0.1],
|
||||
['2025-10-16 09:00:00', 1],
|
||||
['2025-10-16 09:15:00', 1],
|
||||
['2025-10-16 09:30:00', 1],
|
||||
['2025-10-16 09:45:00', 1],
|
||||
['2025-10-16 10:00:00', 0.8],
|
||||
['2025-10-16 10:15:00', 0.8],
|
||||
['2025-10-16 10:30:00', 0.8],
|
||||
['2025-10-16 10:45:00', 0.8],
|
||||
['2025-10-16 11:00:00', 0.8],
|
||||
['2025-10-16 11:15:00', 0.1],
|
||||
['2025-10-16 11:30:00', 0.1],
|
||||
['2025-10-16 11:45:00', 0.1],
|
||||
['2025-10-16 12:00:00', 0],
|
||||
['2025-10-16 12:15:00', 0],
|
||||
['2025-10-16 12:30:00', 0],
|
||||
['2025-10-16 12:45:00', 0]
|
||||
],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--监测点列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} )`"></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '治理对象名称',
|
||||
field: 'name',
|
||||
minWidth: '80'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压等级',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '治理设备详情',
|
||||
field: 'type1',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{
|
||||
title: '治理前报告',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '监测点名称', field: 'type3', minWidth: '70' },
|
||||
{ title: '监测类型', field: 'type4', minWidth: '60' },
|
||||
{
|
||||
title: '监测点状态',
|
||||
field: 'type5',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='color: ${row.type5 === '中断' ? '#FF0000' : ''}'>${row.type5}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '最新数据时间', field: 'type6', minWidth: '140' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '中断',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--总体指标越限统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
barMaxWidth: 30,
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--敏感负荷列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height})`" isGroup></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '敏感负荷名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '敏感负荷类型',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '是否监测',
|
||||
field: 'type1',
|
||||
minWidth: '80'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'type2',
|
||||
minWidth: '80'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#变压器',
|
||||
type: '机房',
|
||||
type1: '是',
|
||||
type2: '100A APF'
|
||||
},
|
||||
{
|
||||
name: '380kV1#母线',
|
||||
type: 'PLC',
|
||||
type1: '是',
|
||||
type2: 'UPS'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 500)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
199
src/components/cockpit/transientDetails/index.vue
Normal file
199
src/components/cockpit/transientDetails/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.type || false"
|
||||
>
|
||||
<template #content>
|
||||
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
||||
<div v-for="item in list?.filter(item => item.time == data.day)">
|
||||
<div>电压暂降：{{ item.type || '' }}</div>
|
||||
<div>电压中断：{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升：{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-for="item in list?.filter(item => item.time == data.day)"
|
||||
>
|
||||
<div>电压暂降:{{ item.type || '' }}</div>
|
||||
<div>电压中断:{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升:{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key > 0) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
345
src/components/cockpit/transientDistribution/index.vue
Normal file
345
src/components/cockpit/transientDistribution/index.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
// trigger: 'axis'
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
console.log(params)
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂态事件概率分布',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '特征幅值',
|
||||
data: [
|
||||
'0-10%',
|
||||
'10%-20%',
|
||||
'20%-30%',
|
||||
'30%-40%',
|
||||
'40%-50%',
|
||||
'50%-60%',
|
||||
'60%-70%',
|
||||
'70%-80%',
|
||||
'80%-90%',
|
||||
'90%-100%'
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间',
|
||||
data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '暂态事件次数'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: [
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0.2, 1]
|
||||
],
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const echartList1 = ref({
|
||||
title: {
|
||||
text: '越限时间概率分布'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '次' // 给X轴加单位
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压中断',
|
||||
color: '#FF9100',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
color: '#FFBF00',
|
||||
name: '电压暂降',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压暂升',
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 19],
|
||||
['2025-10-16 07:15:00', 19],
|
||||
['2025-10-16 07:30:00', 19],
|
||||
['2025-10-16 07:45:00', 19],
|
||||
['2025-10-16 08:00:00', 39],
|
||||
['2025-10-16 08:15:00', 59],
|
||||
['2025-10-16 08:30:00', 69],
|
||||
['2025-10-16 08:45:00', 79],
|
||||
['2025-10-16 09:00:00', 109],
|
||||
['2025-10-16 09:15:00', 129],
|
||||
['2025-10-16 09:30:00', 139],
|
||||
['2025-10-16 09:45:00', 149],
|
||||
['2025-10-16 10:00:00', 169],
|
||||
['2025-10-16 10:15:00', 169],
|
||||
['2025-10-16 10:30:00', 139],
|
||||
['2025-10-16 10:45:00', 129],
|
||||
['2025-10-16 11:00:00', 149],
|
||||
['2025-10-16 11:15:00', 89],
|
||||
['2025-10-16 11:30:00', 79],
|
||||
['2025-10-16 11:45:00', 99],
|
||||
['2025-10-16 12:00:00', 69],
|
||||
['2025-10-16 12:15:00', 69],
|
||||
['2025-10-16 12:30:00', 69],
|
||||
['2025-10-16 12:45:00', 69]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
218
src/components/cockpit/transientStatistics/index.vue
Normal file
218
src/components/cockpit/transientStatistics/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '电压中断',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: 41
|
||||
},
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: 46
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
color: ['#FF9100', '#FFBF00', config.layout.elementUiPrimary[0]],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂态事件统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + data[2].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['50%', '70%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压中断(次)',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂降(次)',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂升(次)',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '35kV1进线',
|
||||
type: '2',
|
||||
type1: '38',
|
||||
type2: '35'
|
||||
},
|
||||
{
|
||||
name: '35kV1变压器',
|
||||
type: '2',
|
||||
type1: '1',
|
||||
type2: '3'
|
||||
},
|
||||
{
|
||||
name: '35kV1母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
},
|
||||
{
|
||||
name: '35kV2母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 200)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
280
src/components/cockpit/trendComparison/index.vue
Normal file
280
src/components/cockpit/trendComparison/index.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--趋势对比 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择监测点名称"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="谐波次数">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择谐波次数"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '2次',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '3次',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '4次',
|
||||
value: '4'
|
||||
},
|
||||
{
|
||||
label: '5次',
|
||||
value: '5'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '趋势对比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'line',
|
||||
name: '治理前',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '治理后',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
@@ -64,8 +64,8 @@ const initChart = () => {
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 10,
|
||||
top: 0,
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存图片'
|
||||
@@ -76,8 +76,8 @@ const initChart = () => {
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 40,
|
||||
top: 10,
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
@@ -89,7 +89,7 @@ const initChart = () => {
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '60px',
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
@@ -139,7 +139,7 @@ const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 10
|
||||
item.barMinHeight = 5
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export let color = [ '#07CCCA','#00BFF5', '#FFBF00', '#77DA63', '#D5FF6B', '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
|
||||
export let color = [ '#07CCCA','#00BFF5', '#FFBF00', '#77DA63', '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
|
||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { createVNode, resolveComponent, defineComponent, computed, type CSSProperties } from 'vue'
|
||||
import svg from '@/components/icon/svg/index.vue'
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
<el-image
|
||||
:hide-on-click-modal="true"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="[fullUrl(fieldValue)]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"
|
||||
:preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"
|
||||
></el-image>
|
||||
</div>
|
||||
|
||||
@@ -146,7 +146,7 @@ import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
@@ -226,6 +226,11 @@ const handlerCommand = (item: OptButton) => {
|
||||
break
|
||||
}
|
||||
}
|
||||
const getUrl = (url: string) => {
|
||||
getFileUrl({ filePath: url }).then(res => {
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -292,4 +297,7 @@ const handlerCommand = (item: OptButton) => {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<div ref="tableHeader" class="cn-table-header">
|
||||
<div class="table-header ba-scroll-style" :key="num">
|
||||
|
||||
<el-form style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap" ref="headerForm"
|
||||
@submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
|
||||
<el-form
|
||||
style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap"
|
||||
ref="headerForm"
|
||||
@submit.prevent=""
|
||||
@keyup.enter="onComSearch"
|
||||
label-position="left"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
|
||||
</el-form-item>
|
||||
@@ -20,14 +25,26 @@
|
||||
</el-button>
|
||||
<el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
|
||||
<el-button @click="onResetForm" v-if="showSearch && showReset" :icon="RefreshLeft">重置</el-button>
|
||||
<el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
|
||||
icon="el-icon-Download">导出</el-button>
|
||||
<el-button
|
||||
@click="onExport"
|
||||
v-if="showExport"
|
||||
:loading="tableStore.table.loading"
|
||||
type="primary"
|
||||
icon="el-icon-Download"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
<slot name="operation"></slot>
|
||||
</div>
|
||||
<el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
|
||||
ref="headerFormSecond" @submit.prevent="" @keyup.enter="onComSearch" label-position="left"
|
||||
:inline="true"></el-form>
|
||||
<el-form
|
||||
:style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
|
||||
ref="headerFormSecond"
|
||||
@submit.prevent=""
|
||||
@keyup.enter="onComSearch"
|
||||
label-position="left"
|
||||
:inline="true"
|
||||
></el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -40,7 +57,7 @@ import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { Search, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { defineProps } from 'vue'
|
||||
const emit = defineEmits(['selectChange',])
|
||||
const emit = defineEmits(['selectChange'])
|
||||
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const tableHeader = ref()
|
||||
@@ -116,10 +133,8 @@ const handlerHeight = () => {
|
||||
}
|
||||
// 刷新页面handler高度出下拉
|
||||
const computedSearchRow = () => {
|
||||
|
||||
if (!headerForm.value.$el) return
|
||||
|
||||
|
||||
// 清空headerFormSecond.value.$el下的元素
|
||||
while (headerFormSecond.value.$el.firstChild) {
|
||||
headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
|
||||
@@ -135,7 +150,6 @@ const computedSearchRow = () => {
|
||||
if (width > headerForm.value.$el.offsetWidth) {
|
||||
headerFormSecond.value.$el.appendChild(elFormItem[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 判断是否需要折叠
|
||||
@@ -149,7 +163,9 @@ const computedSearchRow = () => {
|
||||
const showSelect = ref(false)
|
||||
const showSelectChange = () => {
|
||||
showSelect.value = !showSelect.value
|
||||
emit('selectChange', showSelect.value)
|
||||
setTimeout(() => {
|
||||
emit('selectChange', showSelect.value, tableHeader.value.offsetHeight)
|
||||
}, 20)
|
||||
}
|
||||
const onComSearch = async () => {
|
||||
if (props.datePicker) {
|
||||
@@ -273,7 +289,6 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
|
||||
|
||||
html.dark {
|
||||
.table-search-button-group {
|
||||
|
||||
button:focus,
|
||||
button:active {
|
||||
background-color: var(--el-color-info-dark-2);
|
||||
|
||||
@@ -1,44 +1,24 @@
|
||||
<template>
|
||||
<div :style="{ height: tableStore.table.height }">
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
:key="key"
|
||||
:data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading"
|
||||
v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
:showOverflow="showOverflow"
|
||||
:sort-config="{ remote: true }"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
|
||||
<vxe-table ref="tableRef" height="auto" :key="key" :data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading" v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent" @checkbox-change="selectChangeEvent" :showOverflow="showOverflow"
|
||||
:sort-config="{ remote: true }" @sort-change="handleSortChange">
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if="isGroup">
|
||||
<GroupColumn :column="tableStore.table.column" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column
|
||||
:attr="item"
|
||||
:key="key + '-column'"
|
||||
v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode"
|
||||
>
|
||||
<Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode">
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if="item.render" #default="scope">
|
||||
<FieldRender
|
||||
:field="item"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
<FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
"
|
||||
/>
|
||||
" />
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
@@ -47,16 +27,11 @@
|
||||
</div>
|
||||
|
||||
<div v-if="tableStore.showPage" class="table-pagination">
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
<el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes" background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
:total="tableStore.table.total" @size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"></el-pagination>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
@@ -81,11 +56,13 @@ const key = ref(0)
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
isGroup?: boolean
|
||||
showOverflow?: boolean
|
||||
height?: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isGroup: false,
|
||||
showOverflow: true
|
||||
showOverflow: true,
|
||||
height: undefined
|
||||
})
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||
@@ -148,6 +125,7 @@ watch(
|
||||
() => tableStore.table.allFlag,
|
||||
newVal => {
|
||||
if (tableStore.table.allFlag) {
|
||||
|
||||
tableRef.value?.exportData({
|
||||
filename: tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
@@ -207,7 +185,5 @@ defineExpose({
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<!-- @/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue -->
|
||||
|
||||
355
src/styles/app.css
Normal file
355
src/styles/app.css
Normal file
@@ -0,0 +1,355 @@
|
||||
@charset "UTF-8";
|
||||
/* 基本样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: var(--ba-bg-color);
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 修改纵向滚动条轨道 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* 修改纵向滚动条拇指（thumb） */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 5px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* 修改横向滚动条轨道 */
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* 修改横向滚动条拇指（thumb） */
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.iconfont-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.w100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.h100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.ba-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.default-main {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
|
||||
}
|
||||
|
||||
.form-one {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-one .el-form-item {
|
||||
display: flex;
|
||||
width: 98%;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.form-one .el-form-item .el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-one .el-form-item .el-form-item__content .el-select,
|
||||
.form-one .el-form-item .el-form-item__content .el-cascader,
|
||||
.form-one .el-form-item .el-form-item__content .el-input__inner,
|
||||
.form-one .el-form-item .el-form-item__content .el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-two {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-two .el-form-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.form-two .el-form-item .el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-two .el-form-item .el-form-item__content .el-select,
|
||||
.form-two .el-form-item .el-form-item__content .el-cascader,
|
||||
.form-two .el-form-item .el-form-item__content .el-input__inner,
|
||||
.form-two .el-form-item .el-form-item__content .el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uploadFile .el-form-item__content {
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.uploadFile .el-form-item__content div {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.uploadFile .el-form-item__content .el-upload-list__item-name {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.uploadFile .el-form-item__content .el-upload-list--text {
|
||||
margin: 0px 20px 0 !important;
|
||||
}
|
||||
|
||||
.zoom-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
.block-help {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* 表格顶部菜单-s */
|
||||
.table-header .table-header-operate .icon {
|
||||
font-size: 14px !important;
|
||||
color: var(--el-color-white) !important;
|
||||
}
|
||||
|
||||
.table-header .el-button.is-disabled .icon {
|
||||
color: var(--el-button-disabled-text-color) !important;
|
||||
}
|
||||
|
||||
/* 表格顶部菜单-e */
|
||||
/* 鼠标置入浮动效果-s */
|
||||
.suspension {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.suspension:hover {
|
||||
-webkit-transform: translateY(-4px) scale(1.02);
|
||||
-moz-transform: translateY(-4px) scale(1.02);
|
||||
-ms-transform: translateY(-4px) scale(1.02);
|
||||
-o-transform: translateY(-4px) scale(1.02);
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
|
||||
z-index: 999;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 鼠标置入浮动效果-e */
|
||||
/* 表格-s */
|
||||
.ba-table-box {
|
||||
border-radius: var(--el-border-radius-round);
|
||||
}
|
||||
|
||||
.ba-table-alert {
|
||||
background-color: var(--el-fill-color-darker) !important;
|
||||
border: 1px solid var(--ba-boder-color);
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* 表格-e */
|
||||
.ba-operate-form {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* 新增/编辑表单-e */
|
||||
/* 全局遮罩-s */
|
||||
.ba-layout-shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999990;
|
||||
}
|
||||
|
||||
/* 全局遮罩-e */
|
||||
/* 图片上传预览-s */
|
||||
.img-preview-dialog .el-dialog__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.img-preview-dialog .el-dialog__body img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 图片上传预览-e */
|
||||
/* 页面切换动画-s */
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active,
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active {
|
||||
will-change: transform;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-right-enter-from, .slide-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.slide-right-leave-to, .slide-left-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* 页面切换动画-e */
|
||||
/* 布局相关-s */
|
||||
.frontend-footer-brother {
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.user-views {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.user-views .user-views-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ba-aside-drawer .el-drawer__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 布局相关-e */
|
||||
/* 暗黑模式公共样式-s */
|
||||
.ba-icon-dark {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
/* 暗黑模式公共样式-e */
|
||||
/* NProgress-s */
|
||||
#nprogress .bar,
|
||||
#nprogress .spinner {
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
/* NProgress-e */
|
||||
/* 自适应-s */
|
||||
@media screen and (max-width: 768px) {
|
||||
.xs-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.cn-operate-dialog {
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.user-views {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自适应-e */
|
||||
.custom-table-header {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: 13px 15px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.custom-table-header .title {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.custom-table-header .el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.child-router {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-select__wrapper {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlimamaFangYuanTiVF';
|
||||
src: url("../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff") format("woff"), url("../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'nablaRegular';
|
||||
src: url("../assets/font/ali/Nabla_Regular.woff") format("woff"), url("../assets/font/ali/Nabla_Regular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlimamaDongFangDaKai';
|
||||
src: url("../assets/font/ali/AlimamaDongFangDaKai-Regular.woff") format("woff"), url("../assets/font/ali/AlimamaDongFangDaKai-Regular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
1
src/styles/app.min.css
vendored
Normal file
1
src/styles/app.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -31,6 +31,7 @@ body,
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 5px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
/* 修改横向滚动条轨道 */
|
||||
::-webkit-scrollbar:horizontal {
|
||||
|
||||
247
src/styles/element.css
Normal file
247
src/styles/element.css
Normal file
@@ -0,0 +1,247 @@
|
||||
@charset "UTF-8";
|
||||
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
|
||||
.el-input .el-input__inner {
|
||||
height: 30px;
|
||||
line-height: calc(var(--el-input-height, 40px) - 4px);
|
||||
}
|
||||
|
||||
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
|
||||
.datetime-picker {
|
||||
height: 32px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.el-divider__text.is-center {
|
||||
transform: translateX(-50%) translateY(-62%);
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.el-menu .el-menu-item:hover,
|
||||
.el-menu .el-sub-menu__title:hover {
|
||||
background-color: var(--el-menu-hover-color) !important;
|
||||
color: var(--el-menu-active-color) !important;
|
||||
}
|
||||
|
||||
.el-menu .el-menu-item:hover .icon,
|
||||
.el-menu .el-sub-menu__title:hover .icon {
|
||||
color: var(--el-menu-active-color) !important;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.el-dialog .el-dialog__footer {
|
||||
padding: 15px;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
background: var(--el-color-primary);
|
||||
padding: 15px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.el-dialog__header .el-dialog__headerbtn {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.el-dialog__header .el-dialog__headerbtn .el-icon {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.el-dialog__header .el-dialog__headerbtn:hover .el-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.el-dialog__header .el-dialog__title {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: var(--ba-border-color);
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 1px solid var(--el-border-color-extra-light);
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
padding: 5px 11px;
|
||||
}
|
||||
|
||||
/* dialog滚动条-s */
|
||||
.el-overlay-dialog,
|
||||
.el-tabs__content,
|
||||
.ba-scroll-style {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.el-overlay-dialog::-webkit-scrollbar,
|
||||
.el-tabs__content::-webkit-scrollbar,
|
||||
.ba-scroll-style::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.el-overlay-dialog::-webkit-scrollbar-thumb,
|
||||
.el-tabs__content::-webkit-scrollbar-thumb,
|
||||
.ba-scroll-style::-webkit-scrollbar-thumb {
|
||||
background: #eaeaea;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.el-overlay-dialog:hover::-webkit-scrollbar-thumb:hover,
|
||||
.el-tabs__content:hover::-webkit-scrollbar-thumb:hover,
|
||||
.ba-scroll-style:hover::-webkit-scrollbar-thumb:hover {
|
||||
background: #c8c9cc;
|
||||
}
|
||||
|
||||
/* dialog滚动条-e */
|
||||
/* 小屏设备 el-radio-group 样式优化-s */
|
||||
.ba-input-item-radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ba-input-item-radio .el-radio-group .el-radio {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 小屏设备 el-radio-group 样式调整-e */
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-form--inline .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.el-page-header__header {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-page-header__header .el-page-header__content {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.el-tabs__content .el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-button--primary:focus {
|
||||
color: var(--el-color-white);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
color: var(--el-color-white);
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
background-color: var(--el-color-primary-light-3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.el-button.is-plain:focus {
|
||||
color: var(--el-button-text-color);
|
||||
border-color: var(--el-button-border-color);
|
||||
}
|
||||
|
||||
.el-button.is-plain:hover {
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-button.is-link:focus {
|
||||
color: var(--el-button-text-color);
|
||||
}
|
||||
|
||||
.el-button.is-link:hover {
|
||||
color: var(--el-button-hover-link-text-color);
|
||||
}
|
||||
|
||||
.el-button--primary.is-link:hover,
|
||||
.el-button--primary.is-plain:hover,
|
||||
.el-button--primary.is-text:hover {
|
||||
color: var(--el-color-primary-light-5);
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
|
||||
.el-radio__input.is-disabled.is-checked .el-radio__inner {
|
||||
background-color: var(--el-color-primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sgmap-ctrl-bottom-left {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.custom-tabs-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.custom-tabs-label .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.el-pagination__sizes .el-select {
|
||||
min-width: 128px;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.el-popup-parent--hidden {
|
||||
width: 100% !important;
|
||||
}
|
||||
1
src/styles/element.min.css
vendored
Normal file
1
src/styles/element.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.el-input .el-input__inner{height:30px;line-height:calc(var(--el-input-height, 40px) - 4px)}.datetime-picker{height:32px;padding-top:0;padding-bottom:0}.el-divider__text.is-center{transform:translateX(-50%) translateY(-62%)}.el-menu{user-select:none}.el-menu .el-menu-item:hover,.el-menu .el-sub-menu__title:hover{background-color:var(--el-menu-hover-color) !important;color:var(--el-menu-active-color) !important}.el-menu .el-menu-item:hover .icon,.el-menu .el-sub-menu__title:hover .icon{color:var(--el-menu-active-color) !important}.el-select{min-width:200px}.el-dialog{padding:0px !important}.el-dialog .el-dialog__footer{padding:15px;box-shadow:var(--el-box-shadow);width:100%;bottom:0}.el-dialog__body{max-height:60vh;overflow-y:auto;padding:10px}.el-dialog__header{background:var(--el-color-primary);padding:15px;margin-right:0px}.el-dialog__header .el-dialog__headerbtn{top:5px}.el-dialog__header .el-dialog__headerbtn .el-icon{color:var(--el-color-white)}.el-dialog__header .el-dialog__headerbtn:hover .el-icon{color:#409eff}.el-dialog__header .el-dialog__title{color:var(--el-color-white)}.el-table{--el-table-border-color:var(--ba-border-color)}.el-card{border:none}.el-card__header{border-bottom:1px solid var(--el-border-color-extra-light)}.el-textarea__inner{padding:5px 11px}.el-overlay-dialog,.el-tabs__content,.ba-scroll-style{scrollbar-width:none}.el-overlay-dialog::-webkit-scrollbar,.el-tabs__content::-webkit-scrollbar,.ba-scroll-style::-webkit-scrollbar{width:5px;height:5px}.el-overlay-dialog::-webkit-scrollbar-thumb,.el-tabs__content::-webkit-scrollbar-thumb,.ba-scroll-style::-webkit-scrollbar-thumb{background:#eaeaea;border-radius:var(--el-border-radius-base);box-shadow:none;-webkit-box-shadow:none;cursor:pointer !important}.el-overlay-dialog:hover::-webkit-scrollbar-thumb:hover,.el-tabs__content:hover::-webkit-scrollbar-thumb:hover,.ba-scroll-style:hover::-webkit-scrollbar-thumb:hover{background:#c8c9cc}.ba-input-item-radio{margin-bottom:10px}.ba-input-item-radio .el-radio-group .el-radio{margin-bottom:8px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{background:var(--el-color-primary);color:var(--el-color-white)}.el-tabs__header{margin-bottom:0}.el-form--inline .el-form-item{margin-bottom:10px}.el-tabs--border-card>.el-tabs__content{padding:10px}.el-page-header__header{line-height:32px}.el-page-header__header .el-page-header__content{font-size:14px;font-weight:700}.el-tabs__content{height:calc(100% - 40px)}.el-tabs__content .el-tab-pane{height:100%}.el-button--primary:focus{color:var(--el-color-white);outline:0}.el-button--primary:hover{color:var(--el-color-white);border-color:var(--el-color-primary-light-3);background-color:var(--el-color-primary-light-3);outline:0}.el-button.is-plain:focus{color:var(--el-button-text-color);border-color:var(--el-button-border-color)}.el-button.is-plain:hover{color:var(--el-color-primary);border-color:var(--el-color-primary)}.el-button.is-link:focus{color:var(--el-button-text-color)}.el-button.is-link:hover{color:var(--el-button-hover-link-text-color)}.el-button--primary.is-link:hover,.el-button--primary.is-plain:hover,.el-button--primary.is-text:hover{color:var(--el-color-primary-light-5);background-color:var(--el-color-primary-light-9) !important}.el-divider--horizontal{margin:15px 0}.el-step__title{cursor:pointer}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:var(--el-color-primary);opacity:0.6}.sgmap-ctrl-bottom-left{display:none !important}.el-drawer__header{margin-bottom:0 !important}.custom-tabs-label{display:flex;align-items:center;justify-content:space-between}.custom-tabs-label .el-icon{margin-right:5px}.el-pagination__sizes .el-select{min-width:128px}.el-collapse-item__content{padding-bottom:0}.el-popup-parent--hidden{width:100% !important}
|
||||
@@ -103,6 +103,7 @@
|
||||
border-radius: var(--el-border-radius-base);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
4043
src/styles/mixins.css
Normal file
4043
src/styles/mixins.css
Normal file
File diff suppressed because it is too large
Load Diff
1
src/styles/mixins.min.css
vendored
Normal file
1
src/styles/mixins.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -31,6 +31,9 @@
|
||||
|
||||
// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
|
||||
@for $i from 0 through 100 {
|
||||
.md#{$i} {
|
||||
margin: #{$i}px !important;
|
||||
}
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px !important;
|
||||
}
|
||||
@@ -47,6 +50,9 @@
|
||||
margin-left: #{$i}px !important;
|
||||
}
|
||||
|
||||
.pd#{$i} {
|
||||
padding: #{$i}px !important;
|
||||
}
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px !important;
|
||||
}
|
||||
|
||||
@@ -281,10 +281,7 @@ export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
|
||||
* @param date 日期
|
||||
* @param days 天数
|
||||
*/
|
||||
export function getDayRange(
|
||||
date: dayjs.ConfigType,
|
||||
days: number
|
||||
): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
export function getDayRange(date: dayjs.ConfigType, days: number): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const day = dayjs(date).add(days, 'd')
|
||||
return getDateRange(day, day)
|
||||
}
|
||||
@@ -321,12 +318,46 @@ export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
*/
|
||||
export function getDateRange(
|
||||
beginDate: dayjs.ConfigType,
|
||||
endDate: dayjs.ConfigType
|
||||
): [string, string] {
|
||||
export function getDateRange(beginDate: dayjs.ConfigType, endDate: dayjs.ConfigType): [string, string] {
|
||||
return [
|
||||
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
|
||||
]
|
||||
}
|
||||
/**
|
||||
* 获取当月时间
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
* @param key 1:年 2:季 3:月 4:周 5:日
|
||||
*/
|
||||
export function getTimeOfTheMonth(key: any): [string, string] {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth()
|
||||
|
||||
switch (key) {
|
||||
case '1': // 年
|
||||
return [formatDate(new Date(year, 0, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '2': // 季
|
||||
const quarterStartMonth = Math.floor(month / 3) * 3
|
||||
const quarterEndMonth = quarterStartMonth + 2
|
||||
|
||||
return [formatDate(new Date(year, quarterStartMonth, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '3': // 月
|
||||
return [formatDate(new Date(year, month, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '4': // 周
|
||||
const dayOfWeek = now.getDay() // 0是周日
|
||||
const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一
|
||||
const weekStart = new Date(year, month, diff)
|
||||
return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '5': // 日
|
||||
return [formatDate(now, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
default:
|
||||
throw new Error('Invalid key')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
<el-button icon="el-icon-ArrowLeftBold" @click="emit('shutDown')">返回</el-button>
|
||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</el-upload>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
||||
<el-button icon="el-icon-ArrowLeftBold" @click="emit('shutDown')">返回</el-button>
|
||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
@@ -60,8 +60,8 @@ interface LayoutItem {
|
||||
error?: any
|
||||
}
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/imgs/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/imgs/reduce.png`, import.meta.url)
|
||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url)
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
@@ -111,7 +111,7 @@ const registerComponent = (path: string): Component | string | null => {
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
const modules = import.meta.glob('@/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="pd10">
|
||||
<el-card>
|
||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
||||
<el-form-item label="页面名称:" prop="pageName">
|
||||
<el-form-item label="页面名称" prop="pageName">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
@@ -11,7 +11,7 @@
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="页面排序:" prop="sort">
|
||||
<el-form-item label="页面排序" prop="sort">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit-number
|
||||
@@ -23,7 +23,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注:" class="top">
|
||||
<el-form-item label="备注" class="top">
|
||||
<el-input
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
@@ -131,6 +131,9 @@ import { Tools, CloseBold } from '@element-plus/icons-vue'
|
||||
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { useRoute } from 'vue-router'
|
||||
// defineOptions({
|
||||
// name: 'cockpit/popup'
|
||||
// })
|
||||
const { go } = useRouter()
|
||||
const { query } = useRoute()
|
||||
const height = mainHeight(108)
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class=" layoutHeader">
|
||||
<!-- <div class=" layoutHeader">
|
||||
<div class="title">{{title}}</div>
|
||||
<back-component />
|
||||
</div>
|
||||
</div> -->
|
||||
<TableHeader :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<back-component />
|
||||
</template>
|
||||
</TableHeader>
|
||||
<GridLayout
|
||||
v-model:layout="layout"
|
||||
:row-height="rowHeight"
|
||||
@@ -30,8 +40,9 @@
|
||||
v-if="item.component"
|
||||
class="pd10"
|
||||
:key="key"
|
||||
:height="rowHeight * item.h - (item.h == 6 ? -20 : item.h == 2 ? 20 : 5) + 'px'"
|
||||
:width="rowWidth * item.w - 5 + 'px'"
|
||||
:timeValue="datePickerRef.timeValue"
|
||||
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
|
||||
:width="rowWidth * item.w - 30 + 'px'"
|
||||
:timeKey="item.timeKey"
|
||||
/>
|
||||
<div v-else class="pd10">组件加载失败...</div>
|
||||
@@ -47,12 +58,14 @@ import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, t
|
||||
import { GridLayout } from 'grid-layout-plus'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { useRouter } from 'vue-router'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
// defineOptions({
|
||||
// name: 'cockpit/homePage'
|
||||
// name: 'cockpit/view'
|
||||
// })
|
||||
const { query } = useRoute()
|
||||
// 定义类型
|
||||
@@ -68,14 +81,15 @@ interface LayoutItem {
|
||||
loading?: boolean
|
||||
error?: any
|
||||
}
|
||||
const datePickerRef = ref()
|
||||
const title = ref('')
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/imgs/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/imgs/reduce.png`, import.meta.url)
|
||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url)
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
const layout = ref<LayoutItem[]>([
|
||||
const layout: any = ref<LayoutItem[]>([
|
||||
// {
|
||||
// x: 4,
|
||||
// y: 0,
|
||||
@@ -121,7 +135,7 @@ const registerComponent = (path: string): Component | string | null => {
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
const modules = import.meta.glob('@/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
@@ -175,6 +189,15 @@ const fetchLayoutData = async () => {
|
||||
// 可以添加错误提示逻辑
|
||||
}
|
||||
}
|
||||
const seRowHeight = (value: any) => {
|
||||
if (value == 6) return 0
|
||||
if (value == 5) return 12
|
||||
if (value == 4) return 20
|
||||
if (value == 3) return 30
|
||||
if (value == 2) return 40
|
||||
if (value == 1) return 50
|
||||
return 0
|
||||
}
|
||||
|
||||
// 窗口大小变化处理 - 使用防抖
|
||||
const handleResize = useDebounceFn(() => {
|
||||
@@ -232,8 +255,10 @@ onUnmounted(() => {
|
||||
:deep(.vgl-item) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
@@ -246,6 +271,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.HelpFilled {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@@ -253,12 +279,14 @@ onUnmounted(() => {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.layoutHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="930px" :title="title" @close="cancel">
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="1000px" :title="title"
|
||||
@close="cancel">
|
||||
<div style="display: flex">
|
||||
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
|
||||
<el-form-item class="top" label="组件名称" prop="name">
|
||||
@@ -31,10 +32,10 @@
|
||||
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="width: 550px; height: 370px; overflow: hidden">
|
||||
<div style="width: 600px; height: 360px; overflow: hidden">
|
||||
<div class="ml10" style="font-weight: 600">组件展示</div>
|
||||
<component :is="registerComponent(form.path)" v-if="registerComponent(form.path)"
|
||||
class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'533px'"
|
||||
class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'580px'"
|
||||
:timeKey="form.timeKey" />
|
||||
<!-- <div class="pd10">组件加载失败...</div> -->
|
||||
<el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
|
||||
@@ -57,6 +58,7 @@ import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删
|
||||
import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const dictData = useDictData()
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
@@ -104,11 +106,12 @@ const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
let url = ''
|
||||
|
||||
|
||||
await html2canvas(document.querySelector('.GridLayout'), {
|
||||
scale: 2
|
||||
}).then(canvas => {
|
||||
url = canvas.toDataURL('image/png')
|
||||
console.log('🚀 ~ html2canvas ~ url:', url)
|
||||
})
|
||||
if (title.value == '新增组件') {
|
||||
await componentAdd({
|
||||
@@ -150,7 +153,7 @@ const registerComponent = (path: string): Component | string | null => {
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
const modules = import.meta.glob('@/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
|
||||
@@ -5,16 +5,13 @@
|
||||
<el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
/>
|
||||
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }" />
|
||||
<Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { ref, onMounted, provide,nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
@@ -42,12 +39,13 @@ const tableStore = new TableStore({
|
||||
width: '80',
|
||||
render: 'icon'
|
||||
},
|
||||
{ field: 'code', title: '组件标识' },
|
||||
{ field: 'code', title: '组件标识', minWidth: '100', },
|
||||
{ field: 'path', title: '组件路径' },
|
||||
{ field: 'image', title: '组件展示', render: 'image' },
|
||||
{
|
||||
title: '操作',
|
||||
render: 'buttons',
|
||||
width: '150',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
@@ -93,8 +91,8 @@ const tableStore = new TableStore({
|
||||
loadCallback: () => {
|
||||
addFlag.value = false
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
tableRef.value?.getRef()?.setAllTreeExpand(true)
|
||||
}, 0)
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.state = 0
|
||||
})
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
<el-button icon="el-icon-ArrowLeftBold" @click="emit('shutDown')">返回</el-button>
|
||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</el-upload>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
||||
<el-button icon="el-icon-ArrowLeftBold" @click="emit('shutDown')">返回</el-button>
|
||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
Reference in New Issue
Block a user