diff --git a/src/assets/images/bgs/map.png b/src/assets/images/bgs/map.png new file mode 100644 index 00000000..acbad4c4 Binary files /dev/null and b/src/assets/images/bgs/map.png differ diff --git a/src/views/home/components/provincial/Top2.vue b/src/views/home/components/provincial/Top2.vue index e1a61742..6e0e4ba2 100644 --- a/src/views/home/components/provincial/Top2.vue +++ b/src/views/home/components/provincial/Top2.vue @@ -13,6 +13,7 @@ >
{{ mechanizationTotal > 0 ? mechanizationTotal : equipData[item.key] || 0 }}% + 657 {{ equipData[item.key] || 0 }}
{{ item.name }}
@@ -45,8 +46,14 @@ 电缆工程 + + 在库 + 自用 + +
-
+
+
@@ -75,6 +82,7 @@ export default { { id: 2, name: '装备总量(台)', key: 'total' }, { id: 3, name: '配置率(分)', key: 'configuration' }, { id: 4, name: '机械化率', key: 'mechanization' }, + { id: 5, name: '装备分布(个)', key: 'distribution' }, ], equipData: { totalPrice: 0, // 总价值 @@ -89,6 +97,7 @@ export default { // 机械化率总数 mechanizationTotal: 0, requestId: 0, + myChart: null, } }, created() { @@ -134,9 +143,7 @@ export default { ...item, value: [...item.location.split(','), item.totalValue], })) - } - - if (this.btnIndex == 2 || this.btnIndex == 3) { + } else if (this.btnIndex == 2 || this.btnIndex == 3) { let params = {} if (this.btnIndex == 2) { params = { @@ -152,9 +159,7 @@ export default { ...item, value: [...item.location.split(','), item.num], })) - } - - if (this.btnIndex == 4) { + } else if (this.btnIndex == 4) { const typeMap = { 1: '线路', 2: '变电', @@ -167,12 +172,18 @@ export default { this.mechanizationTotal = res.data.find((item) => item.dataType === 'total')?.mechanizationRate this.cityData = res.data.filter((item) => item.cityName) + } else if (this.btnIndex = 5) { + this.myChart.dispose() + this.myChart = null + return } - this.$nextTick(() => { - if (currentId !== this.requestId) return - this.initChart() - }) + if (this.btnIndex != 5) { + this.$nextTick(() => { + if (currentId !== this.requestId) return + this.initChart() + }) + } } catch (error) { if (currentId === this.requestId) { console.error(error) @@ -190,7 +201,7 @@ export default { echarts.registerMap('ah', jsonData) const charEle = document.getElementById('mapChart') - const myChart = echarts.init(charEle) + this.myChart = echarts.init(charEle) // let tooltip = gzjhTooltip(arr) const option = { tooltip: { @@ -424,9 +435,9 @@ export default { ], }, } - myChart.setOption(option) + this.myChart.setOption(option) // 监听地图绑定双击事件(双击进入地图下一级) - myChart.on('click', (params) => { + this.myChart.on('click', (params) => { console.log('🚀 ~ 点击 ~ params-->:', params) console.log('🚀 ~ initChart ~ params.data-->>:', params.data) if (!params.data) return @@ -451,13 +462,13 @@ export default { // window.open(`${window.location.origin}/screen/cityScreen?cityName=${city}`, '_blank') } }) - myChart.on('mouseover', (params) => { + this.myChart.on('mouseover', (params) => { // console.log('🚀 ~ 移入 ~ params:', params) }) - myChart.on('mouseout', () => { + this.myChart.on('mouseout', () => { // this.selectedCity = null }) - return myChart + return this.myChart }, renderOneCompany(data, btnIndex) { if (btnIndex == 1) { @@ -598,6 +609,12 @@ export default { align-items: center; justify-content: center; } +.map-bg { + width: 500px; + height: 532px; + background: url('~@/assets/images/bgs/map.png'); + background-size: 100% 100%; +} .echarts { width: 100%; height: 100%;