Skip to content

E
east-nanjing-new
Commit e6ca2db5 authored by 程卓's avatar 程卓
Browse files
Options

公共安全- 饼图完成

parent 1f6e1df5
Show whitespace changes
Inline Side-by-side
Showing with 287 additions and 4501 deletions
package-lock.json
View file @ e6ca2db5
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ e6ca2db5
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"countup.js": "^2.0.7", "countup.js": "^2.0.7",
"dayjs": "^1.10.4", "dayjs": "^1.10.4",
"echarts": "^5.0.1", "echarts": "^5.0.1",
"echarts-wordcloud": "^2.0.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"qs": "^6.9.6", "qs": "^6.9.6",
"vue": "^3.0.5", "vue": "^3.0.5",
......
src/ajax/axios.ts
View file @ e6ca2db5
...@@ -11,7 +11,7 @@ Axios.interceptors.request.use( ...@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
(config) => { (config) => {
// 添加token // 添加token
config.headers.Authorization = config.headers.Authorization =
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NDE3MTQ0LCJqdGkiOiIxOTZhNGE1ZS0yNzI3LTQ5ZTctOWIxOC02Y2U4OTAzNTQ2YWIiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg0MDk5NDQyNjd9.S2L88SbCklTArdG7jFPRw3xZ_xTNSk0r2fqI3ta92w23pFgi3aXazc-AQsno2lNF67eCT7K1KbXrqRa0-jHCT4iLyETPyzDj072QwgB06YzPtb1CqsYZLSAZUO8GH_MUB6Gqxp9Z2jLHJDDyfQF2EaWAaPtONbXxf_0Nsgq_pJDAJG84LSL8j8RyFZJ1ZtYRoCkyVGZvq06AeLTmZdwSqt1k8LKkFWsi9XTL_WVaQsvkZs4oJM7nZokvO70ISSIq7EUNLDUstFtMWwyrv6dnhsa2fkagoDkd4CGInGh3d35E5hXHsR_SD8zMfqzrzdgHzonf58mVhyvzQViNPQfKsw' 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NDkzNTMwLCJqdGkiOiI4ZjlmZTI2MS1iYWRiLTQyMTQtODBkZi04YzA4ZDBmMWI2NTQiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg0ODYzMzAwNzB9.g1F_LLv9aVbAUFBXiO3olTRCDN1PRHhlrj8CyBQLQBn-_nnyQ8aJ15HN1o0hzLMFUMDFU7FsT5hVtE7ECg-CTqTRsqpHauUiXb0F8XE-9xdRqRMN9tXGubzqj9VWBI5kLPlujrZZy1Isk_USxxuDlJAapL1rHm37NGM4wILMJGwIQEjiKAAjS10wGXip0rS60dvw7s3vbD5PTg7wB6aYzsVR9RgCo3W7Wkk2d5Y-ZtPj-y9mf8b2q5ABbDB0YmQPl9EoLrETa-X_Cwial4ZOqaCAxIJoZI5IacqmKYKlmUna1QuxPv0KxE9kNGtB9iEpYGGVyxnAspCNQOhcgKx63A'
return config return config
}, },
(error) => { (error) => {
......
src/store/actions.ts
View file @ e6ca2db5
...@@ -218,7 +218,7 @@ export default { ...@@ -218,7 +218,7 @@ export default {
const { content } = ( const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL }) await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL })
).data ).data
// console.log(content) // console.log(content, '房屋外立面')
commit('SET_PUBLICSAFE_OUTHOUSEWALL', content) commit('SET_PUBLICSAFE_OUTHOUSEWALL', content)
}, },
// 公共服务 - 重点关注楼宇 // 公共服务 - 重点关注楼宇
...@@ -240,7 +240,7 @@ export default { ...@@ -240,7 +240,7 @@ export default {
const { content } = ( const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA }) await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA })
).data ).data
// console.log(content) console.log(content, 'pie')
commit('SET_PUBLICSAFE_PIEDATA', content) commit('SET_PUBLICSAFE_PIEDATA', content)
}, },
// 左侧公共 - 指挥体系 // 左侧公共 - 指挥体系
......
src/view/right/key-task.vue
View file @ e6ca2db5
<template> <template>
<m-card title="重点工作"> <m-card title="重点工作">
<!-- <div id="cloud" class="box"></div> -->
<img src="@/assets/images/key-task.png" /> <img src="@/assets/images/key-task.png" />
</m-card> </m-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default defineComponent({ export default defineComponent({
name: 'KeyTask', name: 'KeyTask',
setup() {
console.log(echarts)
setTimeout(() => {
init()
console.log(document.getElementById('cloud'))
}, 1000)
const init = () => {
const cloudCharts = echarts.init(document.getElementById('cloud'))
//说明
//项目需要echarts-wordcloud.min.js
/* itemStyle: {
normal: {
opacity: .2 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
}
},*/
//1、自己项目中上面的属性设置0全透明。
//2、然后在页面上写一个div样式背景，加载一个美化过的云图片。
//3、重合放在这个图表下面。-----绝对定位浮动等等方式
//4、最后的效果就是进来时头像效果。
//必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
//必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
const symbolUrl = ''
const colorList = [
'#3a96f5',
'#5faaf7',
'#78bafe',
'#1563f2',
'#add2f8',
'#e24bf4',
'#1acaff',
'#ffde00',
'#89fda5',
]
const presents = [
'明厨亮灶',
'民宿群租',
'垃圾分类',
'小型工程纳管',
'非机动车停放',
'马桶改造',
'电梯加装',
'居改非',
'无证无照整治',
]
const data = []
for (var i = 0; i < presents.length; ++i) {
data.push({
name: presents[i],
value: (presents.length - i) * 20,
})
}
for (var i = 10; i < presents.length; ++i) {
const cnt = Math.floor(Math.random() * 10)
for (let j = 0; j < cnt; ++j) {
data.push({
name: presents[i],
value: Math.random() * 10,
})
}
}
// const maskImage = new Image()
// maskImage.src = symbolUrl
const option = {
backgroundColor: '#0A2E5D',
tooltip: {
show: true,
},
grid: {
left: 0,
bottom: 0,
top: 0,
right: 0,
},
xAxis: {
type: 'category',
show: false,
},
yAxis: {
max: 100,
show: false,
},
series: [
{
zlevel: -1,
type: 'pictorialBar',
name: 'pictorial',
silent: true,
symbol: 'image://' + symbolUrl, //按背景渲染云词
symbolSize: ['45.2%', '35.2%'],
symbolPosition: 'center',
barWidth: '100%',
barMaxWidth: '100%',
itemStyle: {
normal: {
opacity: 0, //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
},
},
data: [
{
value: 100,
},
],
},
{
type: 'wordCloud',
sizeRange: [15, 15],
rotationRange: [0, 0],
maskImage: cloudCharts,
textPadding: 0,
gridSize: 24, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
width: '45%',
height: '35%',
left: 'center',
top: 'center',
drawOutOfBound: false,
textStyle: {
normal: {
fontFamily: 'sans-serif',
color: function () {
const index = Math.floor(Math.random() * colorList.length)
return colorList[index]
},
},
},
data: data,
},
],
}
cloudCharts.setOption(option)
}
},
}) })
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
img .box
height 95% height 95%
width auto width 100%
margin auto border 1px solid red
background #000
</style> </style>
src/view/right/police.vue
View file @ e6ca2db5
...@@ -141,7 +141,7 @@ export default defineComponent({ ...@@ -141,7 +141,7 @@ export default defineComponent({
}) })
const clickStreetName = (item: any): void => { const clickStreetName = (item: any): void => {
searchModal.value = true searchModal.value = !searchModal.value
streetData.value = item streetData.value = item
} }
// const houseSum = ref<SummaryProp[]>([ // const houseSum = ref<SummaryProp[]>([
......
src/view/right/public-safety.vue
View file @ e6ca2db5
...@@ -46,7 +46,11 @@ ...@@ -46,7 +46,11 @@
<m-pie class="chart2" :dataset="pieData2" :option="pieOption" /> <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
</div> </div>
<div class="legend"> <div class="legend">
<div v-for="(item, i) in pieData2.source" :key="item.name"> <div
v-for="(item, i) in pieData2.source"
:key="item.name"
style="width: 70%"
>
<p> <p>
<span :style="{ background: pieOption.color[i][0] }" /> <span :style="{ background: pieOption.color[i][0] }" />
{{ item.name }} {{ item.name }}
...@@ -58,7 +62,11 @@ ...@@ -58,7 +62,11 @@
</div> </div>
</div> </div>
<div class="legendBottom"> <div class="legendBottom">
<div v-for="(item, i) in pieData1.source" :key="item.name"> <div
v-for="(item, i) in pieData1.source"
:key="item.name"
@click="changePie2(item)"
>
<p> <p>
<span :style="{ background: pieOption.color[i][0] }" /> <span :style="{ background: pieOption.color[i][0] }" />
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
...@@ -104,7 +112,7 @@ ...@@ -104,7 +112,7 @@
v-model="searchModal" v-model="searchModal"
enter="fadeInRight" enter="fadeInRight"
leave="fadeOutRight" leave="fadeOutRight"
offset="55%" offset="65%"
width="40%" width="40%"
title="重点关注楼宇清单" title="重点关注楼宇清单"
> >
...@@ -158,18 +166,106 @@ export default defineComponent({ ...@@ -158,18 +166,106 @@ export default defineComponent({
{ name: '隐患点数', value: 0 }, { name: '隐患点数', value: 0 },
{ name: '危险点数', value: 0 }, { name: '危险点数', value: 0 },
]) ])
const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
watch( watch(
// 监听年份切花更改检查楼数 隐患点数 危险点数
[() => outHouseWall.value, () => year.value], [() => outHouseWall.value, () => year.value],
([data, year]) => { ([data, year]) => {
if (data.length === 0) return if (data.length === 0) return
const { checkNum = 0, hiddenPoint = 0, dangerPoint = 0 } = data.find( const {
(e: any) => e.year === year checkNum = 0,
) hiddenPoint = 0,
dangerPoint = 0,
outerWallDangerPoint = 0,
outerWallFacilityDangerPoint = 0,
outerWallFacilityHiddenPoint = 0,
outerWallHiddenPoint = 0,
} = data.find((e: any) => e.year === year)
houseSum.value = [ houseSum.value = [
{ name: '检查楼数', value: checkNum }, { name: '检查楼数', value: checkNum },
{ name: '隐患点数', value: hiddenPoint }, { name: '隐患点数', value: hiddenPoint },
{ name: '危险点数', value: dangerPoint }, { name: '危险点数', value: dangerPoint },
] ]
pieData1.value = {
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{
name: '外墙面层隐患点',
value: outerWallHiddenPoint,
},
{
name: '外墙面层危险点',
value: outerWallDangerPoint,
},
{
name: '外立面附加设施隐患点',
value: outerWallFacilityHiddenPoint,
},
{
name: '外立面附加设施危险点',
value: outerWallFacilityDangerPoint,
},
],
}
},
{ immediate: true }
)
watch(
[() => pieData.value, () => year.value, () => secPieKey.value],
([data, year, secPieKey]) => {
if (data.length === 0) return
console.log(data, year)
const arr: any = []
data.forEach((item: any) => {
if (item.year == year) {
arr.push(item)
}
})
let secPieKeyName = ''
switch (secPieKey) {
case '外墙面层隐患点':
secPieKeyName = 'outerWallHiddenPoint'
break
case '外墙面层危险点':
secPieKeyName = 'outerWallDangerPoint'
break
case '外立面附加设施隐患点':
secPieKeyName = 'outerWallFacilityHiddenPoint'
break
case '外立面附加设施危险点':
secPieKeyName = 'outerWallFacilityDangerPoint'
break
default:
break
}
const first = arr.find(
(e: any) => e.workstationName == '第一综合网格工作站（武胜路）'
)[secPieKeyName]
const second = arr.find(
(e: any) => e.workstationName == '第二综合网格工作站（厦门路）'
)[secPieKeyName]
const third = arr.find(
(e: any) => e.workstationName == '第三综合网格工作站（牯林路）'
)[secPieKeyName]
// // 将第二张饼图的数据更新
pieData2.value = {
dimensions: [
{ name: 'name', displayName: secPieKey },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '第一工作站', value: first || 0 },
{ name: '第二工作站', value: second || 0 },
{ name: '第三工作站', value: third || 0 },
],
}
}, },
{ immediate: true } { immediate: true }
) )
...@@ -177,6 +273,11 @@ export default defineComponent({ ...@@ -177,6 +273,11 @@ export default defineComponent({
const changeYear = (value: string) => { const changeYear = (value: string) => {
year.value = value year.value = value
} }
//切换第二饼图展示的类别
const changePie2 = (item: any) => {
secPieKey.value = item.name
// console.log(secPieKey.value)
}
const list = computed(() => { const list = computed(() => {
return [ return [
...@@ -211,41 +312,39 @@ export default defineComponent({ ...@@ -211,41 +312,39 @@ export default defineComponent({
{ name: '楼宇名称', value: 4, danger: 1 }, { name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 }, { name: '楼宇名称', value: 4, danger: 1 },
]) ])
const pieData1 = computed(() => { const pieData1 = ref({
return {
dimensions: [ dimensions: [
{ name: 'name', displayName: '类型' }, { name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' }, { name: 'value', displayName: '数量' },
], ],
source: [ source: [
{ {
// name: '外立面附加设施危险点', name: '外立面附加设施危险点',
// value: outHouseWall.value.outerWallFacilityDangerPoint, value: 1,
// }, },
// { {
// name: '外立面附加设施隐患点', name: '外立面附加设施隐患点',
// value: outHouseWall.value.outerWallFacilityHiddenPoint, value: 1,
// }, },
// { {
// name: '外墙面层隐患点', name: '外墙面层隐患点',
// value: outHouseWall.value.outerWallHiddenPoint, value: 1,
// }, },
// { {
// name: '外墙面层危险点', name: '外墙面层危险点',
// value: outHouseWall.value.outerWallDangerPoint, value: 1,
}, },
], ],
}
}) })
const pieData2 = ref({ const pieData2 = ref({
dimensions: [ dimensions: [
{ name: 'name', displayName: '类型' }, { name: 'name', displayName: secPieKey.value },
{ name: 'value', displayName: '数量' }, { name: 'value', displayName: '数量' },
], ],
source: [ source: [
{ name: '第一工作站', value: 30 }, { name: '第一工作站', value: 1 },
{ name: '第二工作站', value: 40 }, { name: '第二工作站', value: 1 },
{ name: '第三工作站', value: 48 }, { name: '第三工作站', value: 1 },
], ],
}) })
const pieOption = ref({ const pieOption = ref({
...@@ -284,6 +383,7 @@ export default defineComponent({ ...@@ -284,6 +383,7 @@ export default defineComponent({
buildings, buildings,
outHouseWall, outHouseWall,
pieData, pieData,
changePie2,
} }
}, },
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment