This commit is contained in:
仲么了
2024-01-03 13:20:22 +08:00
6 changed files with 64 additions and 26666 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -22,14 +22,17 @@ const fetchConfig = async (name: string) => {
} }
// fetchConfig() // fetchConfig()
const emit = defineEmits(['getRegionByRegion']) const emit = defineEmits(['getRegionByRegion', 'eliminate'])
onMounted(() => {}) onMounted(() => {})
const GetEchar = async (name: string) => { const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap') let chartDom = document.getElementById('chartMap')
myCharts.value?.resize() myCharts.value?.dispose()
myCharts.value = echarts.init(chartDom) myCharts.value = echarts.init(chartDom)
echarts.registerMap('china', await fetchConfig(name)) //注册可用的地图 if (name != '中国') {
showCircle.value = true
}
echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
let option = { let option = {
title: { title: {
left: 'center', left: 'center',
@@ -77,9 +80,10 @@ const GetEchar = async (name: string) => {
'#B3B3B3' '#B3B3B3'
], ],
geo: { geo: {
map: 'china', map: name,
zoom: 1, zoom: 1.2,
// top: 0,
// bottom: 0,
roam: true, roam: true,
label: { label: {
normal: { normal: {
@@ -124,20 +128,20 @@ const GetEchar = async (name: string) => {
borderWidth: 0 borderWidth: 0
} }
}, },
regions: [ // regions: [
{ // {
name: '南海诸岛', // name: '南海诸岛',
itemStyle: { // itemStyle: {
// 隐藏地图 // // 隐藏地图
normal: { // normal: {
opacity: 0 // 为 0 时不绘制该图形 // opacity: 0 // 为 0 时不绘制该图形
} // }
}, // },
label: { // label: {
show: false // 隐藏文字 // show: false // 隐藏文字
} // }
} // }
] // ]
}, },
...props.options.options ...props.options.options
} }
@@ -149,9 +153,8 @@ const GetEchar = async (name: string) => {
myCharts.value.off('click') myCharts.value.off('click')
myCharts.value.on('click', (e: any) => { myCharts.value.on('click', (e: any) => {
if (name == '中国' && e.componentIndex == 0) { if (name == '中国' && e.componentIndex == 0) {
GetEchar(e.name)
MapReturn(e.name) MapReturn(e.name)
showCircle.value = true
// console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name)) // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name))
} }
}) })
@@ -160,21 +163,26 @@ const GetEchar = async (name: string) => {
const MapReturn = (name: string) => { const MapReturn = (name: string) => {
let area = dictData.state.area[0].children let area = dictData.state.area[0].children
let list = {} let list = {}
// break;
let flag = true
for (let i = 0; i < area.length; i++) { for (let i = 0; i < area.length; i++) {
if (area[i].name == name) { if (area[i].name == name) {
console.log(11111)
list = area[i] list = area[i]
flag = false
emit('getRegionByRegion', list)
break break
} else {
list = dictData.state.area[0]
} }
} }
if (flag) {
emit('getRegionByRegion', list) emit('eliminate', name)
}
} }
// 返回 // 返回
const circle = () => { const circle = () => {
GetEchar('中国') emit('getRegionByRegion', dictData.state.area[0])
showCircle.value = false showCircle.value = false
} }
const resizeHandler = () => { const resizeHandler = () => {

View File

@@ -3,7 +3,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, ref } from 'vue' import { defineComponent, ref, watch } from 'vue'
defineOptions({ defineOptions({
name: 'Area' name: 'Area'
@@ -27,8 +27,16 @@ const change = (e: any) => {
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1] areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
} }
} }
// watch(
// () => $attrs,
// (newVal, oldVal) => {
// console.log(123)
defineExpose({ areaName }) // // GetEchar('中国')
// }
// )
defineExpose({ areaName, change })
</script> </script>
<style scoped></style> <style scoped></style>

View File

@@ -20,13 +20,14 @@
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div> <div v-loading="loading">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<MyEchartMap <MyEchartMap
ref="EchartMap" ref="EchartMap"
:options="echartMapList" :options="echartMapList"
class="map" class="map"
@eliminate="eliminate"
@getRegionByRegion="getRegionByRegion" @getRegionByRegion="getRegionByRegion"
/> />
</el-col> </el-col>
@@ -77,6 +78,7 @@ const echartList = ref({})
const titleA = ref('') const titleA = ref('')
const distributionData = ref([]) const distributionData = ref([])
const area = ref() const area = ref()
const loading = ref(true)
const formInline = reactive({ const formInline = reactive({
deptIndex: dictData.state.area[0].id, deptIndex: dictData.state.area[0].id,
@@ -87,15 +89,17 @@ const formInline = reactive({
}) })
const onSubmit = () => { const onSubmit = () => {
loading.value = true
titleA.value = formInline.statisticalType.name titleA.value = formInline.statisticalType.name
getAreaLineDetail(formInline).then(res => { getAreaLineDetail(formInline).then(res => {
area.value.change()
// 处理地图数据 // 处理地图数据
map(res) map(res)
tabulation(res) tabulation(res)
histogram(res) histogram(res)
EchartMap.value.GetEchar(area.value.areaName) EchartMap.value.GetEchar(area.value.areaName)
console.log("🚀 ~ file: distribution.vue:98 ~ getAreaLineDetail ~ area.value.areaName:", area.value.areaName) loading.value = false
}) })
} }
@@ -104,6 +108,11 @@ const getRegionByRegion = (list: any) => {
formInline.deptIndex = list.id formInline.deptIndex = list.id
onSubmit() onSubmit()
} }
// 消除点
const eliminate = (name: string) => {
echartMapList.value.options.series = []
EchartMap.value.GetEchar(name)
}
// 地图数处理 // 地图数处理
const map = (res: any) => { const map = (res: any) => {
echartMapList.value = { echartMapList.value = {
@@ -233,7 +242,7 @@ const histogram = (res: any) => {
: titleA.value == '干扰源类型' : titleA.value == '干扰源类型'
? '干扰源类型' ? '干扰源类型'
: titleA.value == '电网拓扑' : titleA.value == '电网拓扑'
? '区域' ? area.value.areaName
: '' // 给X轴加单位 : '' // 给X轴加单位
}, },
tooltip: { tooltip: {

View File

@@ -99,7 +99,7 @@ const info = (list: any) => {
shareData.value = [ shareData.value = [
{ {
month: '总计', month: '总计',
notAssociated: all notAssociated: all.toFixed(2)
}, },
...list.monthlyStatistics.monthCalculation ...list.monthlyStatistics.monthCalculation
] ]

View File

@@ -11,7 +11,7 @@
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tabs v-model="activeName" type="border-card"> <el-tabs v-model="activeName" type="border-card" v-loading="loading">
<el-tab-pane label="图形" name="1"> <el-tab-pane label="图形" name="1">
<Echart :list="list" ref="echarts" /> <Echart :list="list" ref="echarts" />
</el-tab-pane> </el-tab-pane>
@@ -36,6 +36,7 @@ const list = ref([])
const echarts = ref() const echarts = ref()
const table = ref() const table = ref()
const dictData = useDictData() const dictData = useDictData()
const loading = ref(true)
const formInline = reactive({ const formInline = reactive({
deptInd: '', deptInd: '',
deptIndex: dictData.state.area[0].id, deptIndex: dictData.state.area[0].id,
@@ -57,12 +58,14 @@ const formInline = reactive({
}) })
// const locale=zhCn // const locale=zhCn
const onSubmit = async () => { const onSubmit = async () => {
loading.value = true
await getAreaCalculation(formInline).then(res => { await getAreaCalculation(formInline).then(res => {
list.value = res.data list.value = res.data
echarts.value.Processing(res.data.areaStatistics) echarts.value.Processing(res.data.areaStatistics)
echarts.value.Grade(res.data.voltageStatistics) echarts.value.Grade(res.data.voltageStatistics)
echarts.value.Relation(res.data.monthlyStatistics) echarts.value.Relation(res.data.monthlyStatistics)
table.value.info(res.data) table.value.info(res.data)
loading.value = false
}) })
} }