diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/mapViews/components/population/gridPopulation.vue b/src/views/mapViews/components/population/gridPopulation.vue new file mode 100644 index 0000000..488db79 --- /dev/null +++ b/src/views/mapViews/components/population/gridPopulation.vue @@ -0,0 +1,165 @@ + + + + + + diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/mapViews/components/population/gridPopulation.vue b/src/views/mapViews/components/population/gridPopulation.vue new file mode 100644 index 0000000..488db79 --- /dev/null +++ b/src/views/mapViews/components/population/gridPopulation.vue @@ -0,0 +1,165 @@ + + + + + + diff --git a/src/views/mapViews/mars3dMap.vue b/src/views/mapViews/mars3dMap.vue index 8e64348..5522034 100644 --- a/src/views/mapViews/mars3dMap.vue +++ b/src/views/mapViews/mars3dMap.vue @@ -16,7 +16,7 @@
- {{value.name}}
+ {{value.name}}
@@ -38,8 +38,9 @@
- - + + +
@@ -61,18 +62,22 @@ import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera' import communityInfo from './components/communityInfo.vue' import areaPopulation from './components/population/areaPopulation.vue' -import { nextTick } from 'vue/types/umd' +import gridPopulation from './components/population/gridPopulation.vue' +import buildingPopulation from './components/population/buildingPopulation.vue' +import { formatDateDefault } from '../../utils' // 导入必须的样式表 var Cesium = require('../../../node_modules/cesium/Source/Cesium') export default { name: 'Mars3dMap', - components: {MapFrame, Button2, Button3, communityInfo, areaPopulation}, + components: {MapFrame, Button2, Button3, buildingPopulation, communityInfo, areaPopulation, gridPopulation}, data () { return { top: '250px', showFrame: false, showCommunityInfo: false, showAreaPopulation: false, + showGridPopulation: false, + showBuildingPopulation: false, bottom_btn: [], bottom_choose: [], videoToken: '', // 视频云token @@ -161,14 +166,14 @@ {index: '26', name: '智慧城管', children: []}, {index: '22', name: '智慧工地', children: []}, {index: '23', name: '一卡通', children: []}, - {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']}, + {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']} ], layersShow: [false, false, false, false, false] } ], labelsRight: [ { - index: '03', + index: '', name: '视频云', children: [ {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']}, @@ -177,7 +182,7 @@ {index: '34', name: '智慧园林', children: []}, {index: '35', name: '智慧公安', children: []}, {index: '36', name: '智慧教育', children: []}], - layersShow: [false, false, false, false, false, false] + layersShowRight: [false, false, false, false, false, false] }, { index: '', @@ -188,11 +193,18 @@ {index: '63', name: '事件', children: ['社会治理事件', '城管执法事件']}, {index: '64', name: '交通', children: ['拥堵点分布', '交通事件分布', '高发事故点分布']}], layersShowRight: [false, false, false, false]}, + // { + // index: '', + // name: '应急指挥调度', + // children: [], + // layersShowRight: [] + // } { index: '', - name: '应急指挥调度', + name: '在建项目总览', children: [], - layersShowRight: []} + layersShowRight: [] + } ], data: { feature: [], @@ -267,12 +279,14 @@ this.labelsRight[i].layersShowRight[j] = false } } - if(val === 3) { + if (val === 3) { // 获取车辆并且渲染 this.drawCar() } }, - clickLabelRight (val) { + clickLabelRight (val, value) { + console.log('key', val) + console.log('value', value) this.layersShow = [false, false, false, false, false, false, false, false] this.layersShowRight = [false, false] this.layersShowRight[val] = true @@ -288,10 +302,22 @@ } } } - if (val === 1) { + if (value.name === '应急指挥调度') { console.log(this.$refs.mapframe) this.showFrame = true this.$refs.mapframe.reloadUrl() + } else if (value.name === '在建项目总览') { + this.layers.feature.clear() + this.layers.polygon.clear() + this.singleSearch('在建项目', 'B-ZH-0702', '2V026Q9MNX', require('@/assets/images/icon-project.png'), + [ + {name: '项目名称', value: 'SSSJFW'}, + {name: '工程类别', value: 'GCLB'}, + {name: '工程状态', value: 'JSJD'}, + {name: '管理单位：', value: 'S_XZQH_MC'}, + {name: '开工日期', value: 'GXSJ'}, + {name: '项目地址', value: 'S_DZQC'} + ], false) } }, initmap () { @@ -471,49 +497,51 @@ // fetchCarPostion(params).then(response => { // if (response.code === 200) { // if (response.data.length !== 0) { - var data = this.data.feature[str].geo.map(item => { return [item.split(' ')[0], item.split(' ')[1], 0] }) - console.log(data, 'data') - var flydata = { - name: '贴地表表面漫游', - speed: 200, - positions: data, - model: { - url: '../static/model/zhatuchelvse.gltf', - heading: 180, - minimumPixelSize: 25, - show: true - }, - label: { - text: this.data.feature[str].name, - font_size: 18, - color: '#ffffff', - pixelOffsetY: -50, - show: true - }, - path: { - color: '#32c3ff', - width: 3, - show: true - }, - camera: { - type: 'gs', - pitch: -30, - radius: 5000 - }, - interpolation: true, // 是否setInterpolationOptions插值 - clockLoop: false // 是否循环播放 - } - var roamLine = new mars3d.graphic.RoamLine(flydata) - this.layers.feature.addGraphic(roamLine) - roamLine.start() - // } + var data = this.data.feature[str].geo.map(item => { return [item.split(' ')[0], item.split(' ')[1], 0] }) + console.log(data, 'data') + var flydata = { + name: '贴地表表面漫游', + speed: 200, + positions: data, + model: { + url: '../static/model/zhatuchelvse.gltf', + heading: 180, + minimumPixelSize: 25, + show: true + }, + label: { + text: this.data.feature[str].name, + font_size: 18, + color: '#ffffff', + pixelOffsetY: -50, + show: true + }, + path: { + color: '#32c3ff', + width: 3, + show: true + }, + camera: { + type: 'gs', + pitch: -30, + radius: 5000 + }, + interpolation: true, // 是否setInterpolationOptions插值 + clockLoop: false // 是否循环播放 + } + var roamLine = new mars3d.graphic.RoamLine(flydata) + this.layers.feature.addGraphic(roamLine) + roamLine.start() + // } // } // }) }, fetchData ({value}) { - // console.log(value, 'value') + console.log(value, 'value') this.showCommunityInfo = false this.showAreaPopulation = false + this.showGridPopulation = false + this.showBuildingPopulation = false this.layers.feature.clear() this.layers.polygon.clear() if (this.layers.heatLayer) { @@ -632,19 +660,30 @@ } else if (value.index === 'new01') { this.singleSearch('食堂分布', 'B-ZH-canteen', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'), [{name: '食堂名称', value: 'name'}, {name: '食堂地址', value: 'location'}], false, true) - // this.drawPolygon('B-ZH-0702', '2V026Q9MNX') + this.drawPolygon('B-ZH-0702', '2V026Q9MNX') } else if (value.index === 'new02') { this.singleSearch('企业分布', 'B-ZH-enterprise', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'), [{name: '企业名称', value: 'name'}, {name: '企业地址', value: 'location'}], false, true) - // this.drawPolygon('B-ZH-0702', '2V026Q9MNX') + this.drawPolygon('B-ZH-0702', '2V026Q9MNX') } else if (value.index === 'new03') { // 区域人口分布 - this.$refs.areaPopulationRef.initData() this.showAreaPopulation = true + this.$refs.areaPopulationRef.initData() + } else if (value.index === 'new04') { // 网格人口分布 + this.showGridPopulation = true + this.$refs.gridPopulationRef.initData() + } else if (value.index === 'new05') { // 楼栋人口分布 + this.showBuildingPopulation = true + this.$refs.buildingPopulationRef.initData() } }, async singleSearch (value, code, key, icon, items, showbtn = false, isMockData = false) { fetchFeatureInfo(code, key, isMockData).then(response => { - this.data.feature = response.data.data[0].data + this.data.feature = response.data.data[0].data.map(item => { + return { + ...item, + GXSJ: item.GXSJ ? formatDateDefault(item.GXSJ) : item.GXSJ // 工地开工时间 + } + }) for (let i = 0; i < this.data.feature.length; i++) { var graphic = new mars3d.graphic.BillboardEntity({ name: value, @@ -657,12 +696,13 @@ clampToGround: true } }) - // 绑定点击事件 - graphic.on('click', (event) => { - // 执行自定义点击逻辑 - this.handleBillboardClick(value, graphic) - }) - + if (value === '社区分布') { + // 绑定点击事件 + graphic.on('click', (event) => { + // 执行自定义点击逻辑 + this.handleBillboardClick(value, graphic) + }) + } var str = `
${value}
` @@ -867,7 +907,7 @@ break } }, - drawCar() { + drawCar () { this.showCommunityInfo = false this.layers.feature.clear() this.layers.polygon.clear() @@ -875,50 +915,50 @@ this.map.removeLayer(this.layers.heatLayer, true) } clearInterval(this.cartimer) - fetchCarInfo().then(res => { - // console.log(res.data, '车辆信息') - this.data.feature = res.data - for (let i = 0; i < this.data.feature.length; i++) { - var graphic = new mars3d.graphic.ModelEntity({ - name: this.data.feature[i].name, - position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)], - style: { - url: '../static/model/zhatuchelvse.gltf', - scale: 0.5, - minimumPixelSize: 25, - label: { - text: this.data.feature[i].location, - font_size: 18, - color: '#ffffff', - pixelOffsetY: -50, - distanceDisplayCondition: true, - distanceDisplayCondition_far: 500000, - distanceDisplayCondition_near: 1000 - } + fetchCarInfo().then(res => { + // console.log(res.data, '车辆信息') + this.data.feature = res.data + for (let i = 0; i < this.data.feature.length; i++) { + var graphic = new mars3d.graphic.ModelEntity({ + name: this.data.feature[i].name, + position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)], + style: { + url: '../static/model/zhatuchelvse.gltf', + scale: 0.5, + minimumPixelSize: 25, + label: { + text: this.data.feature[i].location, + font_size: 18, + color: '#ffffff', + pixelOffsetY: -50, + distanceDisplayCondition: true, + distanceDisplayCondition_far: 500000, + distanceDisplayCondition_near: 1000 } - }) - var items = [{name: '车牌号', value: 'name'}, {name: '车辆状态', value: 'statusname'}, - {name: '车辆类型', value: 'typename'},{name: '车辆位置', value: 'location'}, - ] - var str = ` + } + }) + var items = [{name: '车牌号', value: 'name'}, {name: '车辆状态', value: 'statusname'}, + {name: '车辆类型', value: 'typename'}, {name: '车辆位置', value: 'location'} + ] + var str = `
渣土车分布
` - for (let j in items) { - var item = this.data.feature[i][items[j].value] - if (typeof item === 'undefined') item = '' - str += `
${item}
` - } - // var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\'' - // var vehiclenum = this.data.feature[i].vehiclenum - str += `
` + } + // var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\'' + // var vehiclenum = this.data.feature[i].vehiclenum + str += `` - str += `
` - graphic.bindPopup(str) - this.layers.feature.addGraphic(graphic) - if (i === 5) { + str += `
` + graphic.bindPopup(str) + this.layers.feature.addGraphic(graphic) + if (i === 5) { this.map.setCameraView({ lat: Number(25.808901), lng: Number(114.928765), alt: 3000, heading: 360, pitch: -31}) } - } + } // for (let i = 0; i < this.data.feature.length; i++) { // var graphic = new mars3d.graphic.BillboardEntity({ // name: '车辆', @@ -962,7 +1002,7 @@ // this.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 20000}) // } // } - }) + }) } } } diff --git a/src/api/map.js b/src/api/map.js index 55faac0..35571ae 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -53,11 +53,11 @@ }) } -// 区域人口 -export function fetchAreaPopulation () { +// 人口分布 +export function fetchMockData (url = '') { return request({ baseURL: config.mockUrl, - url: 'population/area', + url: url, data: {}, method: 'post' }) diff --git a/src/assets/images/icon-project.png b/src/assets/images/icon-project.png new file mode 100644 index 0000000..261c157 --- /dev/null +++ b/src/assets/images/icon-project.png Binary files differ diff --git a/src/components/board/ScrollBoard.vue b/src/components/board/ScrollBoard.vue index f8de7df..ae3484f 100644 --- a/src/components/board/ScrollBoard.vue +++ b/src/components/board/ScrollBoard.vue @@ -105,11 +105,22 @@ } }, watch: { - config () { // 配置改变后，停止动画，重新计算数据 - const { stopAnimation, calcData } = this - stopAnimation() - this.animationIndex = 0 - calcData() + // config () { // 配置改变后，停止动画，重新计算数据 + // const { stopAnimation, calcData } = this + // stopAnimation() + // this.animationIndex = 0 + // calcData() + // } + config: { + handler (newValue, oldValue) { + const { stopAnimation, calcData } = this + stopAnimation() + this.animationIndex = 0 + calcData() + }, + // 开启深度监听 + deep: true, + immediate: true } }, methods: { diff --git a/src/utils/automaticCarousel.js b/src/utils/automaticCarousel.js new file mode 100644 index 0000000..2e5edc8 --- /dev/null +++ b/src/utils/automaticCarousel.js @@ -0,0 +1,49 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel (option, myChart, t = 2000, getEndValue = 4) { + // 初始显示endValue + 1 条数据 + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + option && myChart.setOption(option) + let timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue += 1 + option.dataZoom[0].startValue += 1 + } + option && myChart.setOption(option) + }, t) + + myChart.on('mouseover', () => { + // 鼠标悬浮，停止自动轮播 + if (timer) { + clearInterval(timer) + } + }) + + myChart.on('mouseout', () => { + // 鼠标移出，重新开始自动轮播 + if (timer) { + clearInterval(timer) + } + timer = setInterval(() => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == option.xAxis.data.length) { + option.dataZoom[0].endValue = getEndValue + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + option && myChart.setOption(option) + }, t) + }) +} diff --git a/src/utils/index.js b/src/utils/index.js index 7bf37ad..af90bca 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -51,3 +51,14 @@ } return clonedObj } + +export function formatDateDefault (timeString) { + const date = new Date(timeString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` +} diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue index 9f8e51d..36792e1 100644 --- a/src/views/cityManage/cityManageLeft2.vue +++ b/src/views/cityManage/cityManageLeft2.vue @@ -42,7 +42,8 @@
- + +
@@ -81,6 +82,7 @@ import CaseLine from './components/cityManage/caseLine' import CasePie from './components/cityManage/casePie' import Introduce3 from './components/introduce/introduce3' +import eventCom from './components/introduce/event.vue' import Introduce4 from './components/introduce/introduce4' import PipeCountBar from './components/baseInfo/components/pipeCountBar' import TrafficCountBar from './components/baseInfo/components/trafficCountBar' @@ -125,7 +127,8 @@ PopulationPie, Introduce, Corner1, - wisdomTraffic + wisdomTraffic, + eventCom }, data () { return { diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue new file mode 100644 index 0000000..ee8104d --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/src/views/cityManage/components/introduce/components/eventPie.vue b/src/views/cityManage/components/introduce/components/eventPie.vue new file mode 100644 index 0000000..af0dc84 --- /dev/null +++ b/src/views/cityManage/components/introduce/components/eventPie.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/event.vue b/src/views/cityManage/components/introduce/event.vue new file mode 100644 index 0000000..4ffa7c1 --- /dev/null +++ b/src/views/cityManage/components/introduce/event.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue index 00f6993..dfd124d 100644 --- a/src/views/cityManage/components/introduce/introduce.vue +++ b/src/views/cityManage/components/introduce/introduce.vue @@ -6,34 +6,39 @@ + + diff --git a/src/views/mapViews/components/population/gridPopulation.vue b/src/views/mapViews/components/population/gridPopulation.vue new file mode 100644 index 0000000..488db79 --- /dev/null +++ b/src/views/mapViews/components/population/gridPopulation.vue @@ -0,0 +1,165 @@ + + + + + + diff --git a/src/views/mapViews/mars3dMap.vue b/src/views/mapViews/mars3dMap.vue index 8e64348..5522034 100644 --- a/src/views/mapViews/mars3dMap.vue +++ b/src/views/mapViews/mars3dMap.vue @@ -16,7 +16,7 @@
- {{value.name}}
+ {{value.name}}
@@ -38,8 +38,9 @@
- - + + +
@@ -61,18 +62,22 @@ import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera' import communityInfo from './components/communityInfo.vue' import areaPopulation from './components/population/areaPopulation.vue' -import { nextTick } from 'vue/types/umd' +import gridPopulation from './components/population/gridPopulation.vue' +import buildingPopulation from './components/population/buildingPopulation.vue' +import { formatDateDefault } from '../../utils' // 导入必须的样式表 var Cesium = require('../../../node_modules/cesium/Source/Cesium') export default { name: 'Mars3dMap', - components: {MapFrame, Button2, Button3, communityInfo, areaPopulation}, + components: {MapFrame, Button2, Button3, buildingPopulation, communityInfo, areaPopulation, gridPopulation}, data () { return { top: '250px', showFrame: false, showCommunityInfo: false, showAreaPopulation: false, + showGridPopulation: false, + showBuildingPopulation: false, bottom_btn: [], bottom_choose: [], videoToken: '', // 视频云token @@ -161,14 +166,14 @@ {index: '26', name: '智慧城管', children: []}, {index: '22', name: '智慧工地', children: []}, {index: '23', name: '一卡通', children: []}, - {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']}, + {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']} ], layersShow: [false, false, false, false, false] } ], labelsRight: [ { - index: '03', + index: '', name: '视频云', children: [ {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']}, @@ -177,7 +182,7 @@ {index: '34', name: '智慧园林', children: []}, {index: '35', name: '智慧公安', children: []}, {index: '36', name: '智慧教育', children: []}], - layersShow: [false, false, false, false, false, false] + layersShowRight: [false, false, false, false, false, false] }, { index: '', @@ -188,11 +193,18 @@ {index: '63', name: '事件', children: ['社会治理事件', '城管执法事件']}, {index: '64', name: '交通', children: ['拥堵点分布', '交通事件分布', '高发事故点分布']}], layersShowRight: [false, false, false, false]}, + // { + // index: '', + // name: '应急指挥调度', + // children: [], + // layersShowRight: [] + // } { index: '', - name: '应急指挥调度', + name: '在建项目总览', children: [], - layersShowRight: []} + layersShowRight: [] + } ], data: { feature: [], @@ -267,12 +279,14 @@ this.labelsRight[i].layersShowRight[j] = false } } - if(val === 3) { + if (val === 3) { // 获取车辆并且渲染 this.drawCar() } }, - clickLabelRight (val) { + clickLabelRight (val, value) { + console.log('key', val) + console.log('value', value) this.layersShow = [false, false, false, false, false, false, false, false] this.layersShowRight = [false, false] this.layersShowRight[val] = true @@ -288,10 +302,22 @@ } } } - if (val === 1) { + if (value.name === '应急指挥调度') { console.log(this.$refs.mapframe) this.showFrame = true this.$refs.mapframe.reloadUrl() + } else if (value.name === '在建项目总览') { + this.layers.feature.clear() + this.layers.polygon.clear() + this.singleSearch('在建项目', 'B-ZH-0702', '2V026Q9MNX', require('@/assets/images/icon-project.png'), + [ + {name: '项目名称', value: 'SSSJFW'}, + {name: '工程类别', value: 'GCLB'}, + {name: '工程状态', value: 'JSJD'}, + {name: '管理单位：', value: 'S_XZQH_MC'}, + {name: '开工日期', value: 'GXSJ'}, + {name: '项目地址', value: 'S_DZQC'} + ], false) } }, initmap () { @@ -471,49 +497,51 @@ // fetchCarPostion(params).then(response => { // if (response.code === 200) { // if (response.data.length !== 0) { - var data = this.data.feature[str].geo.map(item => { return [item.split(' ')[0], item.split(' ')[1], 0] }) - console.log(data, 'data') - var flydata = { - name: '贴地表表面漫游', - speed: 200, - positions: data, - model: { - url: '../static/model/zhatuchelvse.gltf', - heading: 180, - minimumPixelSize: 25, - show: true - }, - label: { - text: this.data.feature[str].name, - font_size: 18, - color: '#ffffff', - pixelOffsetY: -50, - show: true - }, - path: { - color: '#32c3ff', - width: 3, - show: true - }, - camera: { - type: 'gs', - pitch: -30, - radius: 5000 - }, - interpolation: true, // 是否setInterpolationOptions插值 - clockLoop: false // 是否循环播放 - } - var roamLine = new mars3d.graphic.RoamLine(flydata) - this.layers.feature.addGraphic(roamLine) - roamLine.start() - // } + var data = this.data.feature[str].geo.map(item => { return [item.split(' ')[0], item.split(' ')[1], 0] }) + console.log(data, 'data') + var flydata = { + name: '贴地表表面漫游', + speed: 200, + positions: data, + model: { + url: '../static/model/zhatuchelvse.gltf', + heading: 180, + minimumPixelSize: 25, + show: true + }, + label: { + text: this.data.feature[str].name, + font_size: 18, + color: '#ffffff', + pixelOffsetY: -50, + show: true + }, + path: { + color: '#32c3ff', + width: 3, + show: true + }, + camera: { + type: 'gs', + pitch: -30, + radius: 5000 + }, + interpolation: true, // 是否setInterpolationOptions插值 + clockLoop: false // 是否循环播放 + } + var roamLine = new mars3d.graphic.RoamLine(flydata) + this.layers.feature.addGraphic(roamLine) + roamLine.start() + // } // } // }) }, fetchData ({value}) { - // console.log(value, 'value') + console.log(value, 'value') this.showCommunityInfo = false this.showAreaPopulation = false + this.showGridPopulation = false + this.showBuildingPopulation = false this.layers.feature.clear() this.layers.polygon.clear() if (this.layers.heatLayer) { @@ -632,19 +660,30 @@ } else if (value.index === 'new01') { this.singleSearch('食堂分布', 'B-ZH-canteen', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'), [{name: '食堂名称', value: 'name'}, {name: '食堂地址', value: 'location'}], false, true) - // this.drawPolygon('B-ZH-0702', '2V026Q9MNX') + this.drawPolygon('B-ZH-0702', '2V026Q9MNX') } else if (value.index === 'new02') { this.singleSearch('企业分布', 'B-ZH-enterprise', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'), [{name: '企业名称', value: 'name'}, {name: '企业地址', value: 'location'}], false, true) - // this.drawPolygon('B-ZH-0702', '2V026Q9MNX') + this.drawPolygon('B-ZH-0702', '2V026Q9MNX') } else if (value.index === 'new03') { // 区域人口分布 - this.$refs.areaPopulationRef.initData() this.showAreaPopulation = true + this.$refs.areaPopulationRef.initData() + } else if (value.index === 'new04') { // 网格人口分布 + this.showGridPopulation = true + this.$refs.gridPopulationRef.initData() + } else if (value.index === 'new05') { // 楼栋人口分布 + this.showBuildingPopulation = true + this.$refs.buildingPopulationRef.initData() } }, async singleSearch (value, code, key, icon, items, showbtn = false, isMockData = false) { fetchFeatureInfo(code, key, isMockData).then(response => { - this.data.feature = response.data.data[0].data + this.data.feature = response.data.data[0].data.map(item => { + return { + ...item, + GXSJ: item.GXSJ ? formatDateDefault(item.GXSJ) : item.GXSJ // 工地开工时间 + } + }) for (let i = 0; i < this.data.feature.length; i++) { var graphic = new mars3d.graphic.BillboardEntity({ name: value, @@ -657,12 +696,13 @@ clampToGround: true } }) - // 绑定点击事件 - graphic.on('click', (event) => { - // 执行自定义点击逻辑 - this.handleBillboardClick(value, graphic) - }) - + if (value === '社区分布') { + // 绑定点击事件 + graphic.on('click', (event) => { + // 执行自定义点击逻辑 + this.handleBillboardClick(value, graphic) + }) + } var str = `
${value}
` @@ -867,7 +907,7 @@ break } }, - drawCar() { + drawCar () { this.showCommunityInfo = false this.layers.feature.clear() this.layers.polygon.clear() @@ -875,50 +915,50 @@ this.map.removeLayer(this.layers.heatLayer, true) } clearInterval(this.cartimer) - fetchCarInfo().then(res => { - // console.log(res.data, '车辆信息') - this.data.feature = res.data - for (let i = 0; i < this.data.feature.length; i++) { - var graphic = new mars3d.graphic.ModelEntity({ - name: this.data.feature[i].name, - position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)], - style: { - url: '../static/model/zhatuchelvse.gltf', - scale: 0.5, - minimumPixelSize: 25, - label: { - text: this.data.feature[i].location, - font_size: 18, - color: '#ffffff', - pixelOffsetY: -50, - distanceDisplayCondition: true, - distanceDisplayCondition_far: 500000, - distanceDisplayCondition_near: 1000 - } + fetchCarInfo().then(res => { + // console.log(res.data, '车辆信息') + this.data.feature = res.data + for (let i = 0; i < this.data.feature.length; i++) { + var graphic = new mars3d.graphic.ModelEntity({ + name: this.data.feature[i].name, + position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)], + style: { + url: '../static/model/zhatuchelvse.gltf', + scale: 0.5, + minimumPixelSize: 25, + label: { + text: this.data.feature[i].location, + font_size: 18, + color: '#ffffff', + pixelOffsetY: -50, + distanceDisplayCondition: true, + distanceDisplayCondition_far: 500000, + distanceDisplayCondition_near: 1000 } - }) - var items = [{name: '车牌号', value: 'name'}, {name: '车辆状态', value: 'statusname'}, - {name: '车辆类型', value: 'typename'},{name: '车辆位置', value: 'location'}, - ] - var str = ` + } + }) + var items = [{name: '车牌号', value: 'name'}, {name: '车辆状态', value: 'statusname'}, + {name: '车辆类型', value: 'typename'}, {name: '车辆位置', value: 'location'} + ] + var str = `
渣土车分布
` - for (let j in items) { - var item = this.data.feature[i][items[j].value] - if (typeof item === 'undefined') item = '' - str += `
${item}
` - } - // var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\'' - // var vehiclenum = this.data.feature[i].vehiclenum - str += `
` + } + // var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\'' + // var vehiclenum = this.data.feature[i].vehiclenum + str += `` - str += `
` - graphic.bindPopup(str) - this.layers.feature.addGraphic(graphic) - if (i === 5) { + str += `
` + graphic.bindPopup(str) + this.layers.feature.addGraphic(graphic) + if (i === 5) { this.map.setCameraView({ lat: Number(25.808901), lng: Number(114.928765), alt: 3000, heading: 360, pitch: -31}) } - } + } // for (let i = 0; i < this.data.feature.length; i++) { // var graphic = new mars3d.graphic.BillboardEntity({ // name: '车辆', @@ -962,7 +1002,7 @@ // this.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 20000}) // } // } - }) + }) } } } diff --git a/static/city.json b/static/city.json index ce4b1f2..0b8cf12 100644 --- a/static/city.json +++ b/static/city.json @@ -41,6 +41,26 @@ "gridCount": 105 }, + "eventDataDesc": "事件数量及趋势", + "eventData": { + "month": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + "trendData": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28], + "eventTypeData": { + "矛盾纠纷调解": [12, 9, 15, 18, 22, 19, 16, 14, 17, 20, 18, 15], + "治安案件处置": [8, 6, 10, 12, 9, 11, 8, 7, 9, 10, 8, 7], + "涉稳隐患排查": [5, 4, 6, 7, 8, 6, 5, 4, 6, 7, 5, 4], + "反邪宣传与排查": [3, 3, 4, 3, 5, 4, 3, 3, 4, 3, 3, 2] + } + }, + + "eventPieDesc": "事件分布", + "eventPie": [ + { "name": "矛盾纠纷调解", "value": 193 }, + { "name": "治安案件处置", "value": 105 }, + { "name": "涉稳隐患排查", "value": 68 }, + { "name": "反邪宣传与排查", "value": 4 } + ], + "adolescentDesc": "青少年犯罪与校园安全", "adolescent": {