Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步现场电网一张图

Browse Source
This commit is contained in:
GGJ
2024-05-14 18:28:27 +08:00
parent 25f5272967
commit 91ab15ecab
27 changed files with 1449 additions and 916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/api/system/subject/index.ts Normal file
View File

@@ -0,0 +1,34 @@
import createAxios from '@/utils/request'
//激活主题
export function activateTheme(params: String) {
return createAxios({
url: '/system-boot/theme/activateTheme',
method: 'PUT',
params: params
})
}
//删除主题
export function deleteTheme(params: String) {
return createAxios({
url: '/system-boot/theme/deleteTheme',
method: 'DELETE',
params: params
})
}
//新增主题
export function addTheme(data: anyObj) {
return createAxios({
url: '/system-boot/theme/addTheme',
method: 'POST',
data
})
}
//修改主题
export function updateTheme(data: anyObj) {
return createAxios({
url: '/system-boot/theme/updateTheme',
method: 'PUT',
data
})
}

1
src/components/icon/src/data.ts
View File

@@ -603,6 +603,7 @@ export const IconJson = {
'id-badge',
'ils',
'image',
'imagebes64',
'imdb',
'inbox',
'indent',

4
src/components/table/fieldRender/index.vue
View File

@@ -22,7 +22,7 @@
:hide-on-click-modal="true"
:preview-teleported="true"
:preview-src-list="[fullUrl(fieldValue)]"
:src="fullUrl(fieldValue)"
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"
></el-image>
</div>
@@ -240,7 +240,7 @@ const handlerCommand = (item: OptButton) => {
}
.el-image {
height: 36px;
width: 36px;
// width: 36px;
}
.table-operate-text {
padding-left: 5px;

2
src/components/table/header/index.vue
View File

@@ -17,7 +17,7 @@
</el-form-item>
<slot name="select"></slot>
</el-form>
<template v-if="$slots.select || datePicker">
<template v-if="$slots.select || datePicker || showSearch">
<el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
<Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
<Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />

5
src/layouts/admin/components/navMenus.vue
View File

@@ -39,18 +39,19 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
<!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
<Icon
:color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon"
name="fa fa-cogs"
size="18"
/>
</div>
</div> -->
<Config />
<PopupPwd ref="popupPwd" />
<AdminInfo ref="popupAdminInfo" />
<!-- <TerminalVue /> -->
</div>
</template>

118
src/stores/config.ts
View File

@@ -120,6 +120,124 @@ export const useConfig = defineStore(
return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
},
// () => {
//
// console.log('🚀 ~ subject:', subject)
// const layout: Layout = reactive({
// /* 全局 */
// showDrawer: false,
// // 是否收缩布局(小屏设备)
// shrink: false,
// // 后台布局方式，可选值<Default|Classic|Streamline|Double>
// layoutMode: 'Classic',
// // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
// mainAnimation: subject.mainAnimation,
// // 是否暗黑模式
// isDark: false,
// elementUiPrimary: JSON.parse(subject.elementUiPrimary),
// tableHeaderBackground: JSON.parse(subject.tableHeaderBackground),
// tableHeaderColor:JSON.parse(subject.tableHeaderColor),
// tableCurrent: JSON.parse(subject.tableCurrent),
// /* 侧边菜单 */
// // 侧边菜单背景色
// menuBackground: JSON.parse(subject.menuBackground),
// // 侧边菜单文字颜色
// menuColor:JSON.parse(subject.menuColor),
// // 侧边菜单激活项背景色
// menuActiveBackground:JSON.parse(subject.menuActiveBackground),
// // 侧边菜单激活项文字色
// menuActiveColor:JSON.parse(subject.menuActiveColor),
// // 侧边菜单顶栏背景色
// menuTopBarBackground: JSON.parse(subject.menuTopBarBackground),
// // 侧边菜单宽度(展开时)，单位px
// menuWidth: 260,
// // 侧边菜单项默认图标
// menuDefaultIcon: 'fa fa-circle-o',
// // 是否水平折叠收起菜单
// menuCollapse: false,
// // 是否只保持一个子菜单的展开(手风琴)
// menuUniqueOpened: false,
// // 显示菜单栏顶栏(LOGO)
// menuShowTopBar: true,
// /* 顶栏 */
// // 顶栏文字色
// headerBarTabColor:JSON.parse(subject.headerBarTabColor),
// // // 顶栏激活项背景色
// headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
// // 顶栏激活项文字色
// headerBarTabActiveColor: ['#000000', '#409EFF'],
// // 顶栏背景色
// headerBarBackground: JSON.parse(subject.headerBarBackground),
// // 顶栏悬停时背景色
// headerBarHoverBackground: ['#f5f5f5', '#18222c']
// })
// // console.log(123, window.localStorage.getItem('getTheme'))
// const lang = reactive({
// // 默认语言，可选值<zh-cn|en>
// defaultLang: 'zh-cn',
// // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
// fallbackLang: 'zh-cn',
// // 支持的语言列表
// langArray: [
// { name: 'zh-cn', value: '中文简体' },
// { name: 'en', value: 'English' }
// ]
// })
// function menuWidth() {
// if (layout.shrink) {
// return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
// }
// // 菜单是否折叠
// return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
// }
// function setLang(val: string) {
// lang.defaultLang = val
// }
// function onSetLayoutColor(data = layout.layoutMode) {
// // 切换布局时，如果是为默认配色方案，对菜单激活背景色重新赋值
// const tempValue = layout.isDark
// ? { idx: 1, color: '#1d1e1f', newColor: '#141414' }
// : { idx: 0, color: '#ffffff', newColor: '#f5f5f5' }
// if (
// data == 'Classic' &&
// layout.headerBarBackground[tempValue.idx] == tempValue.color &&
// layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.color
// ) {
// layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.newColor
// } else if (
// data == 'Default' &&
// layout.headerBarBackground[tempValue.idx] == tempValue.color &&
// layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.newColor
// ) {
// layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.color
// }
// }
// function setLayoutMode(data: string) {
// layout.layoutMode = data
// onSetLayoutColor(data)
// }
// const setLayout = (name: keyof Layout, value: any) => {
// layout[name] = value as never
// }
// const getColorVal = function (name: keyof Layout): string {
// const colors = layout[name] as string[]
// if (layout.isDark) {
// return colors[1]
// } else {
// return colors[0]
// }
// }
// return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
// },
{
persist: {
key: STORE_CONFIG

37
src/views/pqs/harmonicMonitoring/embed/liabiiyty/inex.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="default-main" :style="height" v-loading="loading">
<iframe
:key="num"
:src="iframeSrc"
id="frame1"
ref="iframeRef"
frameborder="0"
style="width: 100%; height: 100%; border: 0px solid"
/>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'harmonic-boot/detailedAnalysis/responsibility'
})
const height = mainHeight(20)
const num = ref(0)
const loading = ref(true)
// console.log("🚀 ~ num:", window.location.origin)
const iframeRef: any = ref(null)
const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
onMounted(() => {
iframeRef.value.onload = () => {
iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
setTimeout(() => {
num.value++
loading.value = false
}, 0)
}
})
</script>
<style lang="scss" scoped></style>

10
src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue
View File

@@ -115,7 +115,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -142,7 +142,7 @@ const info = (row: any) => {
},
{
type: 'value',
name: '在线率',
name: '%',
splitLine: {
show: false
},
@@ -165,7 +165,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
},
{
@@ -176,7 +176,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -223,7 +223,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]

9
src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
View File

@@ -342,7 +342,7 @@ const info = (row: any) => {
axisLabel: {
color: '#000',
fontSize: 12,
interval:0
interval: 0
}
},
grid: {
@@ -361,7 +361,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12,
fontSize: 10,
formatter: function (params: any) {
return `${params.value == 3.14159 ? '' : params.value}`
}
@@ -374,7 +374,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12,
fontSize: 10,
formatter: function (params: any) {
return `${params.value == 3.14159 ? '' : params.value}`
}
@@ -415,7 +415,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -548,6 +548,7 @@ defineExpose({ info, show })
}
.monitoringPoints {
display: grid;
font-size: 12px;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 10px;
margin-bottom: 10px;

20
src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue
View File

@@ -5,29 +5,29 @@
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="deptName" title="地市" />
<vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
<vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
<vxe-colgroup title="各项指标得分">
<vxe-column field="qualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-colgroup title="电压偏差">
<vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="vdevQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="vdevQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="频率偏差">
<vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="freqQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="freqQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="谐波含量">
<vxe-colgroup title="电压总谐波畸变率">
<vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="harmQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="harmQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="电压闪变">
<vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="flickerQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="flickerQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="三相不平衡度">
<vxe-colgroup title="三相电压不平衡度">
<vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="unbalanceQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="unbalanceQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
</vxe-colgroup>
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px">

8
src/views/pqs/qualityInspeection/panorama/components/details/point.vue
View File

@@ -33,11 +33,11 @@
<div class="title">
<span>区域监测点统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="orgName" title="区域" :formatter="formatter" />
<vxe-column field="num" title="监测点个数" :formatter="formatter" />
<vxe-column field="integrityRate" title="数据完整率(%)" />
<vxe-column field="onLineRate" title="数据在线率(%)" />
<vxe-column field="integrityRate" title="完整率(%)" />
<vxe-column field="onLineRate" title="在线率(%)" />
<vxe-column field="outOfStandardRate" title="超标监测点占比(%)" />
</vxe-table>
</div>
@@ -99,7 +99,7 @@ const analysis = (e: any) => {
trendEChart.value = {
title: {
text: '监测点数量'
text: '在线监测点数量'
},
xAxis: {
name: '时间',

2
src/views/pqs/qualityInspeection/panorama/components/details/stand.vue
View File

@@ -52,7 +52,7 @@
<div class="title mb10">
<span>区域变电站统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="name" title="区域" />
<vxe-column field="num" title="变电站总数" />
<vxe-column field="num1" title="无污染数量" :formatter="formatter" />

30
src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue
View File

@@ -2,7 +2,7 @@
<template>
<!-- 终端 -->
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
<el-row style="height: 330px" :gutter="20">
<el-row style="height: 300px" :gutter="20">
<el-col :span="12">
<div class="title">
<span>稳态电能质量水平评估</span>
@@ -42,7 +42,7 @@
<span>稳态电能质量水平评估环比变化</span>
</div>
<div class="pie">
<div style="height: 260px; width: 100%" ref="chartRef"></div>
<div style="height: 250px; width: 100%" ref="chartRef"></div>
</div>
</el-col>
</el-row>
@@ -50,7 +50,7 @@
<div class="title">
<span>区域稳态电能质量水平评估</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column field="deptName" title="区域" />
<vxe-column field="onlineNum" title="在线监测点数量(个)" />
<vxe-column field="overNum" title="超标监测点数量(个)" />
@@ -103,15 +103,21 @@ const tableData: any = ref([])
const title = ['电压偏差', '频率偏差', '电压总谐波畸变率', '闪变', '三相电压不平衡度']
const echart = (row: any) => {
let maxList: any = []
row.forEach((item: any) => {
maxList.push(...(item.ratioList || [0]))
})
let max = Math.max(...maxList) > 50 ? 100 : 50
let chart = echarts.init(chartRef.value as HTMLDivElement)
let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
let datamax = [100, 100, 100, 100, 100, 100]
// let datamax = [100, 100, 100, 100, 100, 100]
let indicator = []
for (let i = 0; i < dataname.length; i++) {
indicator.push({
name: dataname[i],
max: datamax[i]
max: max
})
}
@@ -150,8 +156,8 @@ const echart = (row: any) => {
}
},
radar: {
center: ['50%', '50%'],
radius: '65%',
center: ['50%', '60%'],
radius: '75%',
startAngle: 90,
splitNumber: 5,
splitArea: {
@@ -252,17 +258,17 @@ defineExpose({ open })
justify-content: space-around;
}
.evaluationData {
height: 40px;
height: 33px;
margin: 8px 30px;
width: 100%;
box-shadow: 1px 1px 1px 1px #e8e3e3;
display: flex;
font-size: 18px;
line-height: 40px;
line-height: 35px;
img {
height: 30px;
width: 30px;
margin: 5px 30px;
height: 25px;
width: 25px;
margin: 4px 20px 0px 30px;
}
}

47
src/views/pqs/qualityInspeection/panorama/components/details/technique.vue
View File

@@ -2,14 +2,14 @@
<template>
<el-dialog draggable title="技术监督管理统计" v-model="dialogVisible" width="1400px">
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="devName" />
<vxe-column field="devName" title="异常问题总数" />
<vxe-column field="devName" title="已关联工单数" />
<vxe-column field="devName" title="工单转换率(%)" />
<vxe-column field="devName" title="工单总数" />
<vxe-column field="devName" title="已处理工单数" />
<vxe-column field="devName" title="工单处置率(%)" />
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="devName" title="区域" />
<vxe-column field="num" title="异常问题总数" />
<vxe-column field="num" title="已关联工单数" />
<vxe-column field="num" title="工单转换率(%)" />
<vxe-column field="num" title="工单总数" />
<vxe-column field="num" title="已处理工单数" />
<vxe-column field="num" title="工单处置率(%)" />
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px">
@@ -24,7 +24,36 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible: any = ref(false)
const tableData: any = ref([])
const tableData: any = ref([
{
devName: '张家口',
num: ''
},
{
devName: '秦皇岛',
num: ''
},
{
devName: '承德',
num: ''
},
{
devName: '唐山',
num: ''
},
{
devName: '廊坊',
num: ''
},
{
devName: '风光储',
num: ''
},
{
devName: '超高压',
num: ''
}
])
const picEChart = ref({
title: {

12
src/views/pqs/qualityInspeection/panorama/components/details/temporaryState.vue
View File

@@ -2,7 +2,7 @@
<template>
<el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column field="name" title="区域" />
<vxe-column field="sagTimes" title="暂降次数" />
@@ -16,22 +16,22 @@
</vxe-colgroup>
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px; display: flex">
<div style="height: 250px; margin-top: 10px; display: flex">
<!--
-->
<div class="statistics-main">
<div class="statistics-box">
<MyEChart style="height: 300px" :options="picEChart" />
<MyEChart style="height: 250px" :options="picEChart" />
<el-table size="small" height="300px" :data="descentData">
<el-table size="small" height="250px" :data="descentData">
<el-table-column prop="name" label="暂降原因" width="80px" align="center" />
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
</el-table>
</div>
<div class="statistics-box">
<MyEChart style="height: 300px" :options="picEChart1" />
<el-table size="small" height="300px" :data="resembleData">
<MyEChart style="height: 250px" :options="picEChart1" />
<el-table size="small" height="250px" :data="resembleData">
<el-table-column prop="name" label="暂降类型" width="80px" align="center" />
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
</el-table>

10
src/views/pqs/qualityInspeection/panorama/components/details/terminal.vue
View File

@@ -52,12 +52,12 @@
<div class="title">
<span>区域终端统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="orgName" title="区域" />
<vxe-column field="runNum" title="运行个数 " />
<vxe-column field="overhaulNum" title="检修个数 " />
<vxe-column field="refundNum" title="退役个数" />
<vxe-column field="onLineRate" title="数据在线率(%)" />
<vxe-column field="onLineRate" title="终端在线率(%)" />
</vxe-table>
</div>
</el-dialog>
@@ -177,14 +177,16 @@ const analysis = (e: any) => {
getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
let name = []
let data = []
let num = 0
for (let k in res.data) {
name.push(k)
data.push(res.data[k])
num = num + res.data[k]
data.push(num)
}
trendEChart.value = {
title: {
text: '终端接入数量'
text: '终端接入总数量'
},
xAxis: {
name: '时间',

10
src/views/pqs/qualityInspeection/panorama/components/line/history.vue
View File

@@ -16,7 +16,7 @@
></el-option>
</el-option-group>
</el-select>
<MyEChart :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
<MyEChart v-loading="loading" :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
</template>
<script setup lang="ts">
@@ -34,6 +34,7 @@ const prop = defineProps({
})
const datePickerRef = ref()
const loading = ref(true)
const traceability = ref<any>([])
const list = ref<any>([])
const rowHeight = mainHeight(-80, 3).height
@@ -49,6 +50,7 @@ const formData: any = reactive({
})
const History = () => {
loading.value = true
formData.lineId = [prop.lineId]
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
@@ -1123,12 +1125,12 @@ const rendering = () => {
}
opitonserise.push(data)
} else if (item.chufa !== undefined && item2 == '暂态触发点') {
console.log(123,new URL('@/assets/point.png', import.meta.url).href);
console.log(123, new URL('@/assets/point.png', import.meta.url).href)
let data = {
name: item2,
type: 'scatter',
symbol:`image://`+ new URL('@/assets/point.png', import.meta.url).href,
symbol: `image://` + new URL('@/assets/point.png', import.meta.url).href,
symbolSize: 16,
itemStyle: {
width: '16px',
@@ -1505,13 +1507,13 @@ const getEcharts = () => {
]
}
})
loading.value = false
}
onMounted(() => {
nextTick(() => {
setTimeout(() => {
History()
}, 0)
})
})
defineExpose({ History })

37
src/views/pqs/qualityInspeection/panorama/components/line/info.vue
View File

@@ -37,13 +37,21 @@
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts" />
</div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
暂态事件统计
</h3>
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
监测点总体评价结论
</h3>
<div class="evaluationData">
<el-row style="width: 96%" class="row pb5">
<el-col :span="12" style="display: flex">
@@ -72,8 +80,6 @@
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
@@ -81,13 +87,6 @@
</h3>
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
暂态事件统计
</h3>
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="24">
@@ -119,8 +118,7 @@ import {
getLineAssess,
getEventDetailByLineId
} from '@/api/device-boot/panorama'
import { title } from 'process'
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight'
const emit = defineEmits(['back'])
const dropList: any = ref({})
const evaluationData: any = ref([])
@@ -227,7 +225,7 @@ const open = async (id: string) => {
// 稳态指标合格率
})
// 在线率
getTotalOnlineRates(form).then((res: any) => {
getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
let num = (res.data || 0) / 100
onLineCharts.value = {
title: {
@@ -375,8 +373,8 @@ const open = async (id: string) => {
]
incidentCharts.value = {
title: {
text: `${res.data?.swellTimes + res.data?.sagTimes + res.data?.interruptTimes}`,
left: '37%',
text: ' ' + (data[0].value + data[1].value + data[2].value),
left: '41%',
top: '40%',
textStyle: {
fontWeight: 600,
@@ -397,7 +395,6 @@ const open = async (id: string) => {
top: 'center',
right: '10%',
formatter: function (e: any) {
console.log('🚀 ~ open ~ e:', e)
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
}
},
@@ -412,8 +409,8 @@ const open = async (id: string) => {
series: [
{
type: 'pie',
center: ['40%', '50%'],
radius: ['50%', '70%'],
center: ['45%', '50%'],
radius: ['60%', '80%'],
label: {
show: false,
position: 'outside',
@@ -590,12 +587,12 @@ defineExpose({ open })
display: grid;
grid-template-rows: repeat(5, auto);
.row {
margin: 5px 2%;
margin: 4px 2%;
width: 100%;
box-shadow: 1px 1px 1px 1px #e8e3e3;
}
img {
width: 7%;
width: 6%;
margin: 0px 15px;
}
}

675
src/views/pqs/qualityInspeection/panorama/components/map.vue
View File

@@ -1,82 +1,643 @@
<template>
<div id="mapId" style="width: 100%; height: 100%"></div>
<DatePicker ref="datePickerRef" style="display: none" />
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
<div id="nrDeviceCard"></div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'
// import '@/assets/panorama/map.js'
import { mainHeight } from '@/utils/layout'
const powerMap: any = ref(null)
powerMap.value = new PowerMapProgram(() => {
// 初始化地图
powerMap.value.initMap({
mapId: 'mapId',
style: 'sjDark', // sjRaster sjBase sjDark
import { useDictData } from '@/stores/dictData'
// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import DatePicker from '@/components/form/datePicker/index.vue'
import '@/assets/panorama/narimap.css'
import '@/assets/panorama/nrgisCommon.css'
const emit = defineEmits(['changeValue', 'drop', 'show'])
const prop = defineProps({
lineInfo: {
type: Boolean
}
})
const narimap = window?.narimap
const dictData = useDictData()
const datePickerRef = ref()
const map: any = ref(null)
const deviceCard: any = ref(null)
const popup: any = ref(null)
const powerManageGridMap: any = ref(null)
const orgId = ref(dictData.state.area[0].code)
const deptIndex = ref(dictData.state.area[0].id)
narimap.Require(
['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
() => {
if (narimap.Config.examples.notlogin) {
initMap(narimap.Config.styles.sjDark)
} else {
//电网GIS地图服务登录
narimap.SGAuth.login()
.then((result: any) => {
if (result.success) {
console.log('登录成功')
} else {
console.log('登录失败', result)
}
//默认打开电网GIS影像图
initMap(narimap.Config.styles.sjDark)
})
.catch((err: any) => {
console.log('错误', err)
})
}
}
)
function initMap(styleurl: any) {
map.value = new narimap.Map({
container: 'map',
style: styleurl,
zoom: 6,
center: [116.478, 39.997]
center: [116.478935, 39.997761],
controls: false,
country: true,
// 地图默认字体
localIdeographFontFamily: 'Microsoft YoHei'
})
setTimeout(() => {
powerMap.value.createGridMap({
theme: 'light',
zoom: 7,
country: true,
map.value.on('load', () => {
nextTick(() => {
// 添加图层
addLayer()
city: {
minzoom: 5,
maxzoom: 8
},
label: {
// label 文字颜色
textColor: '#fff',
// label 文字透明度
textOpacity: 1
},
default: {
fill: {
// 默认填充颜色, 支持 rgba 格式
fillColor: '#028b98',
fillOpacity: 0.4
},
Query()
})
})
}
const Query = () => {
// 添加行政区划
powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
powerManageGridMap.value.init(
{
base: {
outline: {
// 默认轮廓线颜色
lineColor: '#0ec6d0',
// 默认轮廓线宽
lineWidth: 2
paint: {
'line-color': '#0D867F',
'line-width': 1,
'line-opacity': 1
}
},
fill: {
paint: {
'fill-color': '#0D867F',
'fill-opacity': 0.3
}
},
label: {
paint: {
'text-color': '#063094',
'text-halo-color': '#ffffff',
'text-halo-width': 1
}
},
hover: {
type: 'all',
fill: {
paint: {
'fill-color': 'rgba(1,1,1,0)',
'fill-opacity': 0
}
},
outline: {
paint: {
'line-color': '#0D867F',
'line-width': 4,
'line-opacity': 1
}
}
}
},
hover: {
fill: {
fillColor: '#028b98',
fillOpacity: 0.6
},
outline: {
lineColor: '#009ea8',
lineWidth: 2
}
},
highLight: {
fill: {
fillColor: '#028b98',
fillOpacity: 0.6
},
outline: {
lineColor: '#009ea8',
lineWidth: 2
levels: {
city: {
// minzoom: 10,
maxzoom: 13
}
}
},
{
initOrgIds: [orgId.value],
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true
}
)
setTimeout(() => {
addLine()
const query = new narimap.Components.Query(map.value)
query.init(map.value.getContainer())
query.setQueryOrgId(orgId.value)
setTimeout(() => {
locatePositions({ data: dictData.state.area[0] })
}, 500)
}, 500)
}
// 添加变电站线路
const addLine = () => {
//添加电网图层
let psrmap = new narimap.PSRMap(map.value, {
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
})
psrmap.addPSR()
initDeviceCard()
const devTree = new narimap.Components.DeviceTreeGW(map.value)
devTree.init({ orgId: orgId.value })
//添加电网要素点击事件
// device-tree-gw__button
document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
emit('show', true)
}
//添加电网要素点击事件
psrmap.on('click', (features: any) => {
console.log(features)
})
}
// 添加变电站弹框
const initDeviceCard = () => {
deviceCard.value && deviceCard.value.close()
let options = {
map: map.value, // map实例
container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
narimap: narimap, //nariMap实例
//用户自定义功能
customButtons: {
popupButtons: {
buttons: []
},
detailsButtons: {
buttons: []
}
}
}
deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
deviceCard.value.on('click', (res: any) => {
if (res.button.id == 'nariPopupViewDetail') {
emit('show', true)
}
setTimeout(() => {
document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
emit('show', false)
}
}, 10)
})
//
}
// 添加图层
const addLayer = () => {
map.value.loadImage(
new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到map，第一个参数为图片设置id
map.value.addImage('poi1', image)
map.value.addLayer({
id: 'spotImg-ZY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi1',
'icon-size': 0.7,
'icon-ignore-placement': true,
'icon-allow-overlap': true
}
})
map.value.addLayer({
id: 'spotName-ZY',
type: 'symbol',
minzoom: 10,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
'text-halo-width': 1.33333
}
})
}
)
map.value.loadImage(
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到map，第一个参数为图片设置id
map.value.addImage('poi2', image)
map.value.addLayer({
id: 'spotImg-TY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi2',
'icon-size': 0.7,
// 'text-field': '{name}',
'icon-ignore-placement': true,
'icon-allow-overlap': true
// 'text-ignore-placement': false,
// 'text-size': 12,
// 'text-max-width': 8,
// 'text-offset': [0, 2],
// 'text-font': ['Microsoft YaHei Regular']
}
// paint: {
// 'text-color': '#ccc',
// // 'text-halo-color': '#FFFFFF',
// 'text-halo-width': 1.33333
// }
})
map.value.addLayer({
id: 'spotName-TY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
// 'icon-image': 'poi2',
// 'icon-size': 0.7,
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
// 'text-halo-color': '#FFFFFF',
'text-halo-width': 1.33333
}
})
}
)
// 添加地图弹框
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY']
})
// 监听行政区域点击事件
}, 1000)
})
if (features.length > 0) {
popup.value && popup.value.remove()
setTimeout(() => {
deviceCard.value.popup && deviceCard.value.popup.remove()
}, 10)
let data = JSON.parse(features[0].properties.list)
let markerHeight = 20
let markerRadius = 10
let linearOffset = 25
let popupOffsets = {
top: [0, 0],
'top-left': [0, 0],
'top-right': [0, 0],
bottom: [0, -markerHeight + 10],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
left: [markerRadius, (markerHeight - markerRadius) * -1],
right: [-markerRadius, (markerHeight - markerRadius) * -1]
}
popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
.setLngLat([data.lng, data.lat])
.setHTML(
`<div class="popup-box"><div class="popup_content">
<img src="${data.imageUrl}"/>
<div>
<div style="display: flex">
<span class="title">${data.lineName}</span>
<span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
data.comFlag == 0 ? '停运' : '在运'
}</span>
</div>
<div class="info">
<span>${data.subName} </span>
<span>${data.voltageName}</span>
</div>
</div>
</div>
<div class="popup_footer">
<span id="ids" data-sid="${data.lineId}">查看详情</span>
</div>
</div>
`
)
.addTo(map.value)
document.getElementById('ids').onclick = function (v: any) {
// console.log(e.target.dataset.sid)
emit('drop', v.target.dataset.sid)
}
}
})
}
//添加多个监测点
const addMarkers = async (row?: any) => {
let params = {
deptIndex: deptIndex.value,
monitorFlag: 2,
powerFlag: 2,
searchBeginTime: datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value.timeValue[1],
serverName: 'event-boot',
statisticalType: {},
...row
}
let { data } = await getAreaLineInfo(params)
let r = 0.0035
let tempFeatureZ: any = []
let tempFeatureT: any = []
data.forEach((item: any) => {
if (item.children.length > 10 && item.children.length < 100) {
r = 0.0055
} else if (item.children.length >= 100) {
r = 0.01055
}
item.children.forEach((val: any, i: number) => {
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
val.imageUrl =
val.comFlag == 0
? new URL('@/assets/txzdwzj.png', import.meta.url).href
: new URL('@/assets/txzcwzj.png', import.meta.url).href
// // 监测点图标
let tempFeature = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [val.lng, val.lat]
},
properties: {
name: val.lineName,
list: val
}
}
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
}
})
})
map.value.getSource('spotImg-ZY').setData({
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotName-ZY').setData({
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotImg-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
map.value.getSource('spotName-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
}
onMounted(() => {
// 监听地图初始化完成事件
})
const locatePositions = (e: any) => {
// let mapList = [
// {
// code: '1100F3DE20806FADE050007F01006CBE', //冀北
// centralCoordinate: [117.14740482, 40.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE246A6FADE050007F01006CBE', //超高压
// centralCoordinate: [117.14740482, 40.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
// centralCoordinate: [118.335849137, 39.7213593355],
// zoom: 7
// },
// {
// code: '1100F3DE20816FADE050007F01006CBE', //张家口
// centralCoordinate: [115.032504679, 40.8651549951],
// zoom: 7
// },
// {
// code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
// centralCoordinate: [119.185113833, 40.0879119754],
// zoom: 7
// },
// {
// code: '1100F3DE23466FADE050007F01006CBE', //承德
// centralCoordinate: [117.548498365, 41.3475890632],
// zoom: 7
// },
// {
// code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
// centralCoordinate: [116.628004129, 39.2589378611],
// zoom: 7
// }
// ]
// let data: any = []
// data = mapList.filter(item => item.code == e.data.code) || []
if (map.value != null) {
deptIndex.value = e.data.id
// 加载点
addMarkers()
powerManageGridMap.value.drillDown({
// 判断超高压
orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
onlyDisplay: true
})
}
}
defineExpose({ locatePositions, addMarkers })
const height = mainHeight(20)
</script>
<style lang="scss" scoped>
@import '@/assets/panorama/map.css';
:deep(.query-box-wrap) {
position: absolute;
top: 10px;
left: calc(50% - 295px);
.query-box {
border-radius: 8px 0 0 8px;
}
}
:deep(.device-tree-gw__button) {
position: absolute;
top: 10px;
border-radius: 0 8px 8px 0;
left: calc(50% + 35px);
z-index: 0 !important;
}
:deep(.province-selector) {
position: absolute;
top: 10px;
left: 50%;
.distribution__body {
height: auto;
}
.province-selector__options {
height: auto;
}
.province-op {
width: 48%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.province-selector__button {
width: 100px;
padding: 4px 12px;
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.province-selector__options {
z-index: 1;
}
}
:deep(.sgmap-canvas) {
width: 100% !important;
}
:deep(.my-popup) {
max-width: 400px !important;
.popup-box {
width: 300px;
height: 70px;
.popup_content {
display: grid;
grid-template-columns: 50px 1fr;
img {
width: 42px;
height: 42px;
}
.title {
font-weight: 550;
}
.state {
width: 45px;
margin-left: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.info {
color: #18181b99;
margin: 5px 0;
span {
display: inline-block;
width: 120px;
height: 14px;
line-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-orient: vertical;
&::after {
display: inline-block;
margin: 0 3px;
content: ' ';
width: 2px;
height: 11px;
background: #e5e6eb73;
vertical-align: middle;
}
}
}
}
.popup_footer {
padding: 5px 5px;
border-top: 1px solid #e5e6eb;
color: var(--el-color-primary);
span {
margin-right: 8px;
cursor: pointer;
}
}
}
.sgmap-popup-content {
padding: 15px 10px 10px !important;
}
.sgmap-popup-close-button {
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
}
}
#nrDeviceCard {
position: absolute;
top: 11px;
right: 70px;
width: 450px;
z-index: 0;
}
</style>

717
src/views/pqs/qualityInspeection/panorama/components/map1.vue
View File

@@ -1,717 +0,0 @@
<template>
<DatePicker ref="datePickerRef" style="display: none" />
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
<div id="nrDeviceCard"></div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import DatePicker from '@/components/form/datePicker/index.vue'
import '@/assets/panorama/narimap.css'
import '@/assets/panorama/nrgisCommon.css'
const emit = defineEmits(['changeValue', 'drop', 'show'])
const prop = defineProps({
lineInfo: {
type: Boolean
}
})
const narimap = window?.narimap
const dictData = useDictData()
const datePickerRef = ref()
const map: any = ref(null)
const deviceCard: any = ref(null)
const popup: any = ref(null)
const markerGroup: any = ref(null)
const orgId = ref(dictData.state.area[0].code)
narimap.Require(
['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
() => {
if (narimap.Config.examples.notlogin) {
initMap(narimap.Config.styles.sjDark)
} else {
//电网GIS地图服务登录
narimap.SGAuth.login()
.then((result: any) => {
if (result.success) {
console.log('登录成功')
} else {
console.log('登录失败', result)
}
//默认打开电网GIS影像图
initMap(narimap.Config.styles.sjDark)
})
.catch((err: any) => {
console.log('错误', err)
})
}
}
)
function initMap(styleurl: any) {
map.value = new narimap.Map({
container: 'map',
style: styleurl,
zoom: 6,
center: [116.478935, 39.997761],
controls: false,
country: true,
// 地图默认字体
localIdeographFontFamily: 'Microsoft YoHei'
})
map.value.on('load', () => {
nextTick(() => {
// 加载点
addMarkers()
// 查询组件
Query()
})
})
}
const Query = () => {
// 添加行政区划
let powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(map.value)
powerManageGridMap.init(
{
base: {
outline: {
paint: {
'line-color': '#0D867F',
'line-width': 1,
'line-opacity': 1
}
},
fill: {
paint: {
'fill-color': '#0D867F',
'fill-opacity': 0
}
},
label: {
paint: {
'text-color': '#063094',
'text-halo-color': '#ffffff',
'text-halo-width': 1
}
},
hover: {
enable: !0,
type: 'all',
fill: {
enable: !0,
paint: {
'fill-color': 'rgba(1,1,1,0)',
'fill-opacity': 0
}
},
outline: {
enable: !0,
paint: {
'line-color': '#0D867F',
'line-width': 4,
'line-opacity': 1
}
}
}
}
},
{
initOrgIds: [orgId.value],
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true
}
)
// 添加区域选择
let component = new narimap.Components.RegionSelector(map.value, {
isIntegratedGridmap: true,
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true,
orgId: orgId.value
})
component.on('regionSelect', (e: any) => {
emit('changeValue', e)
})
setTimeout(() => {
addLine()
const query = new narimap.Components.Query(map.value)
query.init(map.value.getContainer())
query.setQueryOrgId(orgId.value)
}, 500)
}
// 添加变电站线路
const addLine = () => {
//添加电网图层
let psrmap = new narimap.PSRMap(map.value, {
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
})
psrmap.addPSR()
initDeviceCard()
const devTree = new narimap.Components.DeviceTreeGW(map.value)
devTree.init({ orgId: orgId.value })
//添加电网要素点击事件
// device-tree-gw__button
document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
emit('show', true)
}
//添加电网要素点击事件
psrmap.on('click', (features: any) => {
console.log(features)
})
}
// 添加变电站弹框
const initDeviceCard = () => {
deviceCard.value && deviceCard.value.close()
let options = {
map: map.value, // map实例
container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
narimap: narimap, //nariMap实例
//用户自定义功能
customButtons: {
popupButtons: {
buttons: []
},
detailsButtons: {
buttons: []
}
}
}
deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
deviceCard.value.on('click', (res: any) => {
if (res.button.id == 'nariPopupViewDetail') {
emit('show', true)
}
setTimeout(() => {
document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
emit('show', false)
}
}, 10)
})
//
}
//添加多个监测点
const addMarkers = async () => {
let params = {
deptIndex: dictData.state.area[0].id,
monitorFlag: 2,
powerFlag: 2,
searchBeginTime: datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value.timeValue[1],
serverName: 'event-boot',
statisticalType: {}
}
let { data } = await getAreaLineInfo(params)
let r = 0.0035
let tempFeatureZ: any = []
let tempFeatureT: any = []
data.forEach((item: any) => {
if (item.children.length > 10 && item.children.length < 100) {
r = 0.0055
} else if (item.children.length >= 100) {
r = 0.01055
}
item.children.forEach((val: any, i: number) => {
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
val.imageUrl =
val.comFlag == 0
? new URL('@/assets/txzdwzj.png', import.meta.url).href
: new URL('@/assets/txzcwzj.png', import.meta.url).href
// // 监测点图标
let tempFeature = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [val.lng, val.lat]
},
properties: {
name: val.lineName,
list: val
}
}
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
}
})
})
map.value.loadImage(
new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到map，第一个参数为图片设置id
map.value.addImage('poi1', image)
map.value.addLayer({
id: 'spotImg-ZY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureZ
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi1',
'icon-size': 0.7,
'icon-ignore-placement': true,
'icon-allow-overlap': true
}
})
map.value.addLayer({
id: 'spotName-ZY',
type: 'symbol',
minzoom: 10,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureZ
}
},
layout: {
// 为图层设置引用的图片ID
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
'text-halo-width': 1.33333
}
})
}
)
map.value.loadImage(
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到map，第一个参数为图片设置id
map.value.addImage('poi2', image)
map.value.addLayer({
id: 'spotImg-TY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureT
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi2',
'icon-size': 0.7,
// 'text-field': '{name}',
'icon-ignore-placement': true,
'icon-allow-overlap': true
// 'text-ignore-placement': false,
// 'text-size': 12,
// 'text-max-width': 8,
// 'text-offset': [0, 2],
// 'text-font': ['Microsoft YaHei Regular']
}
// paint: {
// 'text-color': '#ccc',
// // 'text-halo-color': '#FFFFFF',
// 'text-halo-width': 1.33333
// }
})
map.value.addLayer({
id: 'spotName-TyY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureT
}
},
layout: {
// 为图层设置引用的图片ID
// 'icon-image': 'poi2',
// 'icon-size': 0.7,
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
// 'text-halo-color': '#FFFFFF',
'text-halo-width': 1.33333
}
})
}
)
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY']
})
if (features.length > 0) {
popup.value && popup.value.remove()
setTimeout(() => {
deviceCard.value.popup && deviceCard.value.popup.remove()
}, 10)
let data = JSON.parse(features[0].properties.list)
let markerHeight = 20
let markerRadius = 10
let linearOffset = 25
let popupOffsets = {
top: [0, 0],
'top-left': [0, 0],
'top-right': [0, 0],
bottom: [0, -markerHeight + 10],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
left: [markerRadius, (markerHeight - markerRadius) * -1],
right: [-markerRadius, (markerHeight - markerRadius) * -1]
}
popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
.setLngLat([data.lng, data.lat])
.setHTML(
`<div class="popup-box"><div class="popup_content">
<img src="${data.imageUrl}"/>
<div>
<div style="display: flex">
<span class="title">${data.lineName}</span>
<span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
data.comFlag == 0 ? '停运' : '在运'
}</span>
</div>
<div class="info">
<span>监测点</span>
<span>${data.voltageScale}</span>
<span>${data.gdName} </span>
</div>
</div>
</div>
<div class="popup_footer">
<span id="ids" data-sid="${data.lineId}">查看详情</span>
</div>
</div>
`
)
.addTo(map.value)
document.getElementById('ids').onclick = function (v: any) {
// console.log(e.target.dataset.sid)
emit('drop', v.target.dataset.sid)
}
}
})
}
//添加多个监测点
// const addMarkers = async () => {
// let params = {
// deptIndex: dictData.state.area[0].id,
// monitorFlag: 2,
// powerFlag: 2,
// searchBeginTime: datePickerRef.value.timeValue[0],
// searchEndTime: datePickerRef.value.timeValue[1],
// serverName: 'event-boot',
// statisticalType: {}
// }
// let markerGroup = new narimap.MarkerGroup(map.value)
// let { data } = await getAreaLineInfo(params)
// let r = 0.0035
// data.forEach((item: any) => {
// if (item.children.length > 10 && item.children.length < 100) {
// r = 0.0055
// } else if (item.children.length >= 100) {
// r = 0.01055
// }
// item.children.forEach((val: any, i: number) => {
// val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
// val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
// // // 监测点图标
// val.icon = {
// imageUrl: '',
// iconSize: [24, 24] // 设置图标大小
// }
// switch (val.comFlag) {
// case 0:
// val.icon.imageUrl = new URL('@/assets/txzdwzj.png', import.meta.url).href
// break
// case 1:
// val.icon.imageUrl = new URL('@/assets/txzcwzj.png', import.meta.url).href
// break
// }
// let marker = new narimap.Marker().setLngLat([val.lng, val.lat]).setImage(val.icon)
// marker.data = val
// markerGroup.addMarker(val.lineId, marker)
// markerGroup.hide()
// })
// })
// setTimeout(() => {
// markerGroup.on('click', (e: any) => {
// popup.value && popup.value.close()
// deviceCard.value.popup && deviceCard.value.popup.remove()
// let data = e.marker.data
// let markerHeight = 20
// let markerRadius = 10
// let linearOffset = 25
// let popupOffsets = {
// top: [0, 0],
// 'top-left': [0, 0],
// 'top-right': [0, 0],
// bottom: [0, -markerHeight],
// 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// left: [markerRadius, (markerHeight - markerRadius) * -1],
// right: [-markerRadius, (markerHeight - markerRadius) * -1]
// }
// popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
// .setLngLat([data.lng, data.lat])
// .setHTML(
// `<div class="popup-box"><div class="popup_content">
// <img src="${data.icon.imageUrl}"/>
// <div>
// <div style="display: flex">
// <span class="title">${data.lineName}</span>
// <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
// data.comFlag == 0 ? '停运' : '在运'
// }</span>
// </div>
// <div class="info">
// <span>监测点</span>
// <span>${data.voltageScale}</span>
// <span>${data.gdName} </span>
// </div>
// </div>
// </div>
// <div class="popup_footer">
// <span id="ids" data-sid="${data.lineId}">查看详情</span>
// </div>
// </div>
// `
// )
// .addTo(map.value)
// document.getElementById('ids').onclick = function (v: any) {
// // console.log(e.target.dataset.sid)
// emit('drop', v.target.dataset.sid)
// }
// })
// }, 0)
// map.value.on('zoom', (e: any) => {
// // map.value.getZoom()
// if (map.value.getZoom() > 7) {
// markerGroup.show()
// } else {
// markerGroup.hide()
// }
// })
// }
onMounted(() => {
// 监听地图初始化完成事件
})
// const locatePositions = (e: any) => {
// let mapList = [
// {
// code: '1100F3DE20806FADE050007F01006CBE', //冀北
// centralCoordinate: [116.13740482, 39.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
// centralCoordinate: [118.335849137, 39.7213593355],
// zoom: 7
// },
// {
// code: '1100F3DE20816FADE050007F01006CBE', //张家口
// centralCoordinate: [115.032504679, 40.8651549951],
// zoom: 7
// },
// {
// code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
// centralCoordinate: [119.185113833, 40.0879119754],
// zoom: 7
// },
// {
// code: '1100F3DE23466FADE050007F01006CBE', //承德
// centralCoordinate: [117.548498365, 41.3475890632],
// zoom: 7
// },
// {
// code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
// centralCoordinate: [116.628004129, 39.2589378611],
// zoom: 7
// }
// ]
// let data: any = []
// data = mapList.filter(item => item.code == e.data.code) || []
// if (data.length > 0) {
// // orgId.value = e.data.code
// // addCity()
// console.log('🚀 ~ locatePositions ~ data[0].zoom:', data[0].zoom)
// map.value.locatePositions(data[0].centralCoordinate, {
// zoom: data[0].zoom
// })
// }
// }
// defineExpose({ locatePositions })
const height = mainHeight(20)
</script>
<style lang="scss" scoped>
:deep(.query-box-wrap) {
position: absolute;
top: 10px;
left: calc(50% - 385px);
.query-box {
border-radius: 8px 0 0 8px;
}
}
:deep(.device-tree-gw__button) {
position: absolute;
top: 10px;
border-radius: 0 8px 8px 0;
left: calc(50% - 55px);
z-index: 0 !important;
}
:deep(.province-selector) {
position: absolute;
top: 10px;
left: 50%;
.distribution__body {
height: auto;
}
.province-selector__options {
height: auto;
}
.province-op {
width: 48%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.province-selector__button {
width: 100px;
padding: 4px 12px;
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.province-selector__options {
z-index: 1;
}
}
:deep(.sgmap-canvas) {
width: 100% !important;
}
:deep(.my-popup) {
max-width: 400px !important;
.popup-box {
width: 260px;
height: 70px;
.popup_content {
display: grid;
grid-template-columns: 50px 1fr;
img {
width: 42px;
height: 42px;
}
.title {
font-weight: 550;
}
.state {
width: 45px;
margin-left: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.info {
color: #18181b99;
margin: 5px 0;
span {
&::after {
display: inline-block;
margin: 0 5px;
content: ' ';
width: 2px;
height: 11px;
background: #e5e6eb73;
vertical-align: middle;
}
}
}
}
.popup_footer {
padding: 5px 5px;
border-top: 1px solid #e5e6eb;
color: var(--el-color-primary);
span {
margin-right: 8px;
cursor: pointer;
}
}
}
.sgmap-popup-content {
padding: 15px 10px 10px !important;
}
.sgmap-popup-close-button {
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
}
}
#nrDeviceCard {
position: absolute;
top: 11px;
right: 70px;
width: 450px;
z-index: 0;
}
</style>

106
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
View File

@@ -20,12 +20,22 @@
<el-col :span="12" class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<span :style="`color: ${item.color[0]}`">{{ item.list[4].numOne }}</span>
<span
:style="`color: ${item.color[0]}; cursor: pointer;`"
@click="LookMap(item.list[4].numOneList, 0)"
>
{{ item.list[4].numOne }}
</span>
</el-col>
<el-col :span="12" class="cor">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span :style="`color: ${item.color[1]}`">{{ item.list[4].numTwo }}</span>
<span
:style="`color: ${item.color[1]}; cursor: pointer;`"
@click="LookMap(item.list[4].numTwoList, 1)"
>
{{ item.list[4].numTwo }}
</span>
</el-col>
</el-row>
</div>
@@ -36,11 +46,11 @@
<span class="vol">500kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[0].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[0].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
@@ -52,11 +62,11 @@
<span class="vol">220kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[1].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[1].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
@@ -68,11 +78,11 @@
<span class="vol">110kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[2].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[2].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
@@ -84,11 +94,11 @@
<span class="vol">350kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[3].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[3].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
@@ -123,7 +133,7 @@ import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import { getSubLineGiveAnAlarm, getGridDiagramMonitor, getGridDiagramDev } from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
@@ -138,23 +148,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
@@ -166,23 +186,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
@@ -194,23 +224,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
@@ -263,6 +303,15 @@ const info = (row: any) => {
})
})
}
// 点击
const LookMap = (row: object, num: number) => {
console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: num == 0 ? row : [],
alarmList: num == 1 ? row : []
}
emit('LookMap', form)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
@@ -280,10 +329,12 @@ defineExpose({ info, show })
.cardBox {
display: flex;
flex-wrap: wrap;
.card {
margin-top: 10px;
width: 48%;
margin-right: 2%;
.cor {
display: flex;
align-items: center;
@@ -330,6 +381,9 @@ defineExpose({ info, show })
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
div {
cursor: pointer;
}
span {
font-size: 14px;
font-weight: 550;

4
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
View File

@@ -379,9 +379,9 @@ const transientChange = () => {
transientNum.value = 0
if (formRow.value.isUpToGrid == 0) {
data = res.data.info
transientNum.value = res.data.data
transientNum.value = res.data.data.toFixed(2)
} else {
transientNum.value = res.data.gwData
transientNum.value = res.data.gwData.toFixed(2)
data = res.data.gwInfo
}
WTList.value = data

51
src/views/pqs/qualityInspeection/panorama/index.vue
View File

@@ -4,13 +4,13 @@
<DatePicker ref="datePickerRef" style="display: none" />
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item>
<!-- <Area
<Area
ref="areaRef"
:show-all-levels="false"
v-model="form.orgNo"
style="width: 100px"
@changeValue="changeValue"
/> -->
/>
</el-form-item>
<el-form-item>
<el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
@@ -27,13 +27,13 @@
<!-- <Map ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop" @show="infoShow" /> -->
<div v-show="lineInfo">
<!-- 省级 -->
<div v-show="control == 3">
<mapL ref="mapLRef" class="mapL" />
<div v-show="control == 1">
<mapL ref="mapLRef" class="mapL" @LookMap="LookMap" />
<mapR ref="mapRRef" class="mapR" />
</div>
<!-- 市级 -->
<!-- <div v-show="control == 4"> -->
<div v-show="control > 3">
<div v-show="control == 2">
<cityMapL ref="cityMapLRef" class="mapL" />
<cityMapR ref="cityMapRRef" class="mapR" />
</div>
@@ -46,7 +46,7 @@
<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue'
// import Map from './components/map1.vue'
// import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue'
@@ -57,9 +57,10 @@ import cityMapR from './components/cityMapR.vue'
import Info from './components/line/info.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { map } from 'xe-utils'
const dictData = useDictData()
defineOptions({
name: '/panorama'
name: 'panorama'
})
const datePickerRef = ref()
const areaRef = ref()
@@ -70,7 +71,7 @@ const InfoRef = ref()
const mapRRef = ref()
const cityMapLRef = ref()
const cityMapRRef = ref()
const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
const options: any = ref([
{
name: dictData.state.area[0].name,
@@ -81,21 +82,21 @@ const options: any = ref([
id: 1
}
])
const control = ref(3)
const control = ref(1)
const form: any = ref({
name: '',
orgNo: dictData.state.area[0].id,
isUpToGrid: 0
})
const height = mainHeight(10)
// 获取区域名称
const changeValue = (e: any) => {
form.value.orgNo = list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
options.value[0].name = e.name
mapRef.value.locatePositions(e)
form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
options.value[0].name = e.data.areaName
control.value = e.type
control.value = e.data.level
info()
}
@@ -107,21 +108,15 @@ const drop = (id: string) => {
})
}
// 关闭左右数据展示
const infoShow = (e:boolean) => {
const infoShow = (e: boolean) => {
mapLRef.value.show = e
mapRRef.value.show = e
cityMapLRef.value.show = e
cityMapRRef.value.show = e
}
const reset = () => {
form.value = {
name: '',
orgNo: dictData.state.area[0].id,
isUpToGrid: 0
}
info()
// 地图控制图层
const LookMap = (row: any) => {
mapRef.value.addMarkers({ ...row, type: 1 })
}
const info = () => {
form.value.startTime = datePickerRef.value.timeValue[0]
@@ -133,7 +128,8 @@ const info = () => {
// form.value.endTime = `2024-07-30`
// form.value.searchEndTime = `2024-07-30`
form.value.type = datePickerRef.value.interval
if (control.value == 3) {
mapRef.value.addMarkers()
if (control.value == 1) {
mapLRef.value.info(form.value)
mapRRef.value.info(form.value)
} else {
@@ -142,7 +138,8 @@ const info = () => {
}
}
onMounted(() => {
info()
// info()
changeValue({ data: dictData.state.area[0] })
// aaa()
})
</script>
@@ -162,6 +159,10 @@ onMounted(() => {
border-radius: 8px;
}
}
.el-input__wrapper {
height: 46px;
border-radius: 8px;
}
.el-form-item {
margin-right: 15px;
}

2
src/views/system/auth/userList/popupPwd.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" title="修改密码">
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" title="修改密码">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="新密码" prop="newPwd">

237
src/views/system/subject/form/index.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" :before-close="Cancel">
<el-scrollbar>
<el-form :inline="false" :model="configStore" label-width="160px">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global form-two">
<el-form-item label="组件主名称">
<el-input v-model="configStore.name" placeholder="请输入主题名称" />
</el-form-item>
<el-form-item label="后台页面切换动画">
<el-select v-model="configStore.mainAnimation">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker v-model="configStore.elementUiPrimary[0]" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker v-model="configStore.tableHeaderBackground[0]" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker v-model="configStore.tableHeaderColor[0]" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker v-model="configStore.tableCurrent[0]" />
</el-form-item>
<el-form-item label="组件主描述">
<el-input
v-model="configStore.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
/>
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker v-model="configStore.menuBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker v-model="configStore.menuColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker v-model="configStore.menuActiveBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker v-model="configStore.menuActiveColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker v-model="configStore.menuTopBarBackground[0]" />
</el-form-item>
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image
style="height: 50px"
:src="logoFile.url"
:preview-src-list="[logoFile.url]"
v-if="logoFile.url"
class="mr10"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button @click="Cancel">取消</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const title = ref('')
import { addTheme, updateTheme } from '@/api/system/subject/index'
const emit = defineEmits(['Cancels'])
const configStore = ref({
// 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
mainAnimation: 'slide-right',
elementUiPrimary: ['#0e8780', '#0e8780'],
tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
tableHeaderColor: ['#111', '#fff'],
tableCurrent: ['#F3F6F9', '#F3F6F9'],
/* 侧边菜单 */
// 侧边菜单背景色
menuBackground: ['#0e8780', '#1d1e1f'],
// 侧边菜单文字颜色
menuColor: ['#FFFFFF', '#CFD3DC'],
// 侧边菜单激活项背景色
menuActiveBackground: ['#0c7973', '#1d1e1f'],
// 侧边菜单激活项文字色
menuActiveColor: ['#00f5fd', '#3375b9'],
// 侧边菜单顶栏背景色
menuTopBarBackground: ['#0e8780', '#1d1e1f'],
// 顶栏文字色
headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏背景色
headerBarBackground: ['#0e8780', '#1d1e1f'],
logoFile: '',
name: '',
color: '',
faviconFile: '',
remark: ''
})
const logoFile = reactive({
url: '',
raw: ''
})
const open = (e: any) => {
title.value = e.text
dialogVisible.value = true
if (e.text == '修改主题') {
let form = JSON.parse(JSON.stringify(e.row))
for (let k in form) {
if (
k == 'elementUiPrimary' ||
k == 'tableHeaderBackground' ||
k == 'tableHeaderColor' ||
k == 'tableCurrent' ||
k == 'menuBackground' ||
k == 'menuColor' ||
k == 'menuActiveBackground' ||
k == 'menuActiveColor' ||
k == 'menuTopBarBackground' ||
k == 'headerBarTabColor' ||
k == 'headerBarBackground'
) {
form[k] = JSON.parse(form[k])
}
}
logoFile.url = form.logoUrl
configStore.value = form
}
}
// 确定主题
const onSubmit = () => {
configStore.value.faviconFile = configStore.value.logoFile
configStore.value.color = configStore.value.elementUiPrimary[0]
let form = new FormData()
for (let k in configStore.value) {
if (
k == 'logoFile' ||
k == 'faviconFile' ||
k == 'name' ||
k == 'color' ||
k == 'remark' ||
k == 'mainAnimation' ||
k == 'id'
) {
form.append(k, configStore.value[k])
} else if (k == 'logoUrl' || k == 'faviconUrl') {
if (configStore.value.logoFile == null) {
let str = configStore.value[k].match(/base64,([^"]+)/)[1]
let bin = atob(str)
let arr = new Array(bin.length)
for (let i = 0; i < bin.length; i++) {
arr[i] = bin.charCodeAt(i)
}
let b = new Uint8Array(arr)
const blob = new Blob([b], { type: 'image/jpeg' })
form.append('faviconFile', blob)
form.append('logoFile', blob)
}
} else {
form.append(k, JSON.stringify(configStore.value[k]))
}
}
if (title.value == '新增主题') {
addTheme(form).then(res => {
ElMessage.success('新增成功')
Cancel()
})
}
if (title.value == '修改主题') {
updateTheme(form).then(res => {
ElMessage.success('修改成功')
Cancel()
})
}
}
// 取消
const Cancel = () => {
// dialogVisible.value = false
emit('Cancels')
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
console.log('🚀 ~ chooseImage ~ e:', URL.createObjectURL(e.raw!))
logoFile.url = URL.createObjectURL(e.raw!)
configStore.value.logoFile = e.raw
// uploadFile(e.raw, 'sgGovern/').then(res => {
// logoFile.name = res.data.name
// logoFile.url = res.data.url
// configStore.logoFile = res.data.name
// ElMessage.success('新增成功')
// })
}
defineExpose({ open })
</script>

150
src/views/system/subject/index.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div class="default-main">
<TableHeader select ref="TableHeaderRef">
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { activateTheme, deleteTheme } from '@/api/system/subject/index'
import formTab from './form/index.vue'
import { ElMessage } from 'element-plus'
import { useConfig } from '@/stores/config'
import { getTheme } from '@/api/systerm'
const configStore = useConfig()
defineOptions({
name: 'user-boot/function/functionTree'
})
const formTabRef = ref()
const TableHeaderRef = ref()
const show = ref(false)
const tableStore: any = new TableStore({
url: '/system-boot/theme/getAllThemes',
method: 'GET',
column: [
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'name', title: '主题名称' },
{ field: 'remark', title: '描述' },
{ field: 'logoUrl', title: '主题图标', render: 'image' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '激活 ',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: row => {
return row.active == 1
},
click: row => {
activateTheme({ id: row.id }).then(res => {
ElMessage({
message: '激活成功!',
type: 'success'
})
tableStore.index()
})
}
},
{
name: 'edit',
title: '修改 ',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
show.value = true
setTimeout(() => {
formTabRef.value.open({
text: '修改主题',
row: row
})
}, 10)
}
},
{
name: 'edit',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗？'
},
click: row => {
deleteTheme({ id: row.id }).then(res => {
ElMessage({
message: '删除成功!',
type: 'success'
})
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
getTheme().then(res => {
let list: any = [
'elementUiPrimary',
'tableHeaderBackground',
'tableHeaderColor',
'tableCurrent',
'menuBackground',
'menuColor',
'menuTopBarBackground',
'menuActiveBackground',
'menuActiveColor',
'headerBarTabColor',
'headerBarBackground'
]
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
for (let i = 0; i < list.length; i++) {
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
}
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
})
}
})
provide('tableStore', tableStore)
// 新增主题
const add = () => {
show.value = true
setTimeout(() => {
formTabRef.value.open({
text: '新增主题'
})
}, 10)
}
onMounted(() => {
tableStore.index()
})
</script>

23
src/views/user/login.vue
View File

@@ -74,12 +74,13 @@ import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage'
import { getTheme } from '@/api/systerm.ts'
import { getTheme } from '@/api/systerm'
import { useConfig } from '@/stores/config'
import PopupUpdatePwd from './popupUpdatePwd.vue'
const router = useRouter()
let timer: number
const configStore = useConfig()
const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
@@ -126,8 +127,26 @@ onBeforeUnmount(() => {
pageBubble.removeListeners()
})
getTheme().then(res => {
let list: any = [
'elementUiPrimary',
'tableHeaderBackground',
'tableHeaderColor',
'tableCurrent',
'menuBackground',
'menuColor',
'menuTopBarBackground',
'menuActiveBackground',
'menuActiveColor',
'headerBarTabColor',
'headerBarBackground'
]
getThemeList.value = res.data
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
for (let i = 0; i < list.length; i++) {
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
}
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
})
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return