diff --git a/src/api/screen/index.ts b/src/api/screen/index.ts index 47d8d45..351b80e 100644 --- a/src/api/screen/index.ts +++ b/src/api/screen/index.ts @@ -1,31 +1,36 @@ import request from '@/config/axios' - // 数据大屏 API export const ScreenApi = { - // 查询大屏左侧第一个接口 - getLeftFirst: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getLeftFirst`, params }) - }, + // 查询大屏左侧第一个接口 + getLeftFirst: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getLeftFirst`, params }) + }, + + getLeftSecond: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getLeftSecond`, params }) + }, - getLeftSecond: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getLeftSecond`, params }) - }, + getLeftThird: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getLeftThird`, params }) + }, - getLeftThird: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getLeftThird`, params }) - }, + getRightFirst: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getRightFirst`, params }) + }, - getRightFirst: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getRightFirst`, params }) - }, + getRightSecond: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getRightSecond`, params }) + }, - - getRightSecond: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getRightSecond`, params }) - }, + getRightThird: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getRightThird`, params }) + }, - getRightThird: async (params: any) => { - return await request.get({ url: `/system/big-view-data/getRightThird`, params }) - }, -} \ No newline at end of file + getRightFourth: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getRightFourth`, params }) + }, + getCenter: async (params: any) => { + return await request.get({ url: `/system/big-view-data/getCenter`, params }) + } +} diff --git a/src/views/screen/compenonts/leftwrapper.vue b/src/views/screen/compenonts/leftwrapper.vue index 504171a..c5276cc 100644 --- a/src/views/screen/compenonts/leftwrapper.vue +++ b/src/views/screen/compenonts/leftwrapper.vue @@ -16,7 +16,6 @@ import TitleBox from './titleBox.vue' import { ScreenApi } from '@/api/screen' - const leftWrapperRef = ref() let observer: Nullable = null @@ -50,6 +49,9 @@ const row1Options = ref({ }, yAxis: { type: 'value', + max: (v) => { + return Math.floor(v.max * 1.1 + 1) + }, axisTick: { show: false, lineStyle: { @@ -139,8 +141,7 @@ const row2Options = ref({ series: [ { type: 'pie', - itemStyle: { - }, + itemStyle: {}, radius: ['55%', '75%'], center: ['50%', '50%'], label: { @@ -313,32 +314,38 @@ const handlerResize = () => { unref(row3Chart).resizeHandler() } -const queryParams:any = ref(); - - +const queryParams: any = ref() //左一数据 -const leftFirst = async() => { - const data:any = await ScreenApi.getLeftFirst(queryParams.value); - row1Options.value.xAxis.data = data.map(i=>i.name) - row1Options.value.series[0].data = data.map(i=>i.value) +const leftFirst = async () => { + const data: any = await ScreenApi.getLeftFirst(queryParams.value) + row1Options.value.xAxis.data = data.map((i) => i.name) + row1Options.value.series[0].data = data.map((i) => i.value) + row1Options.value.series[1].data = data.map((i) => i.value) } //左二数据 -const leftSecond = async() => { - const data = await ScreenApi.getLeftSecond(queryParams.value); +const leftSecond = async () => { + const data = await ScreenApi.getLeftSecond(queryParams.value) row2Options.value.title.text = data.enterpriseCount row2Options.value.series[0].data = data.enterpriseCountGroup } //左三数据 -const leftThird = async() => { - const data = await ScreenApi.getLeftThird(queryParams.value); - row3Options.value.yAxis[0].data = data.map(i=>i.name) - row3Options.value.yAxis[1].data = data.map(i=>i.finishCount) +const leftThird = async () => { + const data = await ScreenApi.getLeftThird(queryParams.value) + row3Options.value.yAxis[0].data = data.map((i) => i.name) + row3Options.value.yAxis[1].data = data.map((i) => i.execCount) + row3Options.value.series[1].data = data.map((i) => i.finishCount) + row3Options.value.series[2].data = data.map((i) => { + return { + name: i.name, + value: i.finishCount, + symbolSize: !i.finishCount ? 0 : [10, 15] + } + }) } - onMounted(() => { leftFirst() leftSecond() @@ -346,7 +353,7 @@ onMounted(() => { initChart() observer = new ResizeObserver(handlerResize) observer.observe(leftWrapperRef.value) - handlerResize() + handlerResize() }) onUnmounted(() => { diff --git a/src/views/screen/compenonts/map.vue b/src/views/screen/compenonts/map.vue index 8249f22..2bdc006 100644 --- a/src/views/screen/compenonts/map.vue +++ b/src/views/screen/compenonts/map.vue @@ -3,8 +3,8 @@ - - + +
@@ -16,9 +16,9 @@ import AirQuality from './airQuality.vue' import Weather from './weather.vue' import Numbox from './numbox.vue' import Tabber from './tabber.vue' -import Norm from './norm.vue' -let observer: Nullable = null +import Norm from './norm.vue' +let observer: Nullable = null const mapWrapperRef = ref() const mapChartRef = ref() @@ -92,6 +92,8 @@ const handlerResize = () => { unref(mapChartRef).resizeHandler() } + + onMounted(() => { observer = new ResizeObserver(handlerResize) observer.observe(mapWrapperRef.value) @@ -139,12 +141,12 @@ onUnmounted(() => { left: 12px; top: 0; } - .nomr-box{ - position: absolute; - right: 12px; - top: 50%; - transform: translateY(-50%); - } + .nomr-box { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + } .weather { position: absolute; left: 50%; @@ -156,18 +158,18 @@ onUnmounted(() => { right: 12px; top: 0; } - .tabber-box{ - position: absolute; - left: 50%; - bottom: 0; - transform: translateX(-50%); - z-index: 2; - } + .tabber-box { + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + z-index: 2; + } .block-box { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(3px); - z-index: 2; + z-index: 2; } } @keyframes rotate { diff --git a/src/views/screen/compenonts/numbox.vue b/src/views/screen/compenonts/numbox.vue index 093f965..0295347 100644 --- a/src/views/screen/compenonts/numbox.vue +++ b/src/views/screen/compenonts/numbox.vue @@ -1,4 +1,16 @@ diff --git a/src/views/screen/compenonts/rightwrapper.vue b/src/views/screen/compenonts/rightwrapper.vue index 4a54c4d..ecc0254 100644 --- a/src/views/screen/compenonts/rightwrapper.vue +++ b/src/views/screen/compenonts/rightwrapper.vue @@ -7,10 +7,24 @@ -
+
+
+ {{ row.name }} +
+ 逾期 + + 天 +
+
+
- - + + @@ -58,6 +72,9 @@ const row1Options = ref({ color: '#fff' } }, + max: (v) => { + return Math.floor(v.max * 1.1 + 1) + }, axisLabel: { show: false }, @@ -76,6 +93,9 @@ const row1Options = ref({ color: '#fff' } }, + max: (v) => { + return Math.floor(v.max * 1.1 + 1) + }, axisLabel: { show: false }, @@ -154,7 +174,7 @@ const row1Options = ref({ } } }) - +const list: any = ref([]) const color = ['#56CA00', '#FFE700', '#16B1FF'] const row2Options = ref({ series: [ @@ -226,184 +246,216 @@ const row2Options = ref({ }) } }) -const row3Options=ref({ - grid: { - top: 40, - bottom: 0, - left: 10, - right: 10, - containLabel: true - }, - xAxis: { - type: 'category', - data: ['一大队', '二大队', '三大队', '四大队', '五大队'], - axisTick: { - show: false - }, - splitLine: { - show: false - }, - axisLine: { - lineStyle: { - color: 'rgba(255, 255, 255, 0.20)' - } - }, - axisLabel: { - color: '#fff', - fontSize: 12 - } - }, - yAxis: [ - { - type: 'value', - axisTick: { - show: false, - lineStyle: { - color: '#fff' - } - }, - axisLabel: { - show: false - }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(255,255,255,0.2)' - } - } - }, - { - type: 'value', - axisTick: { - show: false, - lineStyle: { - color: '#fff' - } - }, - axisLabel: { - show: false - }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(255,255,255,0.2)' - } - } - } - ], - series: [ - { - type: 'line', - yAxisIndex: 0, - name: '执法记录', - data: [120, 70, 10, 90, 90, 20, 56, 89], - smooth: true, - symbol: 'circle', - itemStyle: { - color: '#56CA00' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: 'rgba(86, 220, 0, 0.4)' - }, - { - offset: 1, - color: 'rgba(86, 220, 0, 0)' - } - ] - } - }, - }, - { - name: '任务数量', - type: 'line', - yAxisIndex: 1, - smooth: true, - symbol: 'circle', - itemStyle: { - color: 'rgba(22, 177, 255, 1)' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: 'rgba(22, 177, 255, 0.4)' - }, - { - offset: 1, - color: 'rgba(22, 177, 255, 0)' - } - ] - } - }, - data: [1000, 900, 100, 900, 900, 200, 560, 819] - } - ], - tooltip: { - trigger: 'axis', - backgroundColor: 'rgba(25, 119, 43,1)', - borderColor: 'transparent', - textStyle: { - color: '#fff' - }, - axisPointer: { - type: 'shadow', - label: { - backgroundColor: '#6a7985' - } - } - }, - legend: { - top: 0, - left: 'center', - show: true, - itemWidth: 10, - itemHeight: 10, - textStyle: { - color: '#fff' - } - } +const row3Options = ref({ + grid: { + top: 40, + bottom: 0, + left: 10, + right: 10, + containLabel: true + }, + xAxis: { + type: 'category', + data: ['一大队', '二大队', '三大队', '四大队', '五大队'], + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.20)' + } + }, + axisLabel: { + color: '#fff', + fontSize: 12 + } + }, + yAxis: [ + { + type: 'value', + axisTick: { + show: false, + lineStyle: { + color: '#fff' + } + }, + max: (v) => { + return Math.floor(v.max * 1.1 + 1) + }, + axisLabel: { + show: false + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.2)' + } + } + }, + { + type: 'value', + axisTick: { + show: false, + lineStyle: { + color: '#fff' + } + }, + max: (v) => { + return Math.floor(v.max * 1.1 + 1) + }, + axisLabel: { + show: false + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.2)' + } + } + } + ], + series: [ + { + type: 'line', + yAxisIndex: 0, + name: '执法记录', + data: [120, 70, 10, 90, 90, 20, 56, 89], + smooth: true, + symbol: 'circle', + itemStyle: { + color: '#56CA00' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: 'rgba(86, 220, 0, 0.4)' + }, + { + offset: 1, + color: 'rgba(86, 220, 0, 0)' + } + ] + } + } + }, + { + name: '任务数量', + type: 'line', + yAxisIndex: 1, + smooth: true, + symbol: 'circle', + itemStyle: { + color: 'rgba(22, 177, 255, 1)' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: 'rgba(22, 177, 255, 0.4)' + }, + { + offset: 1, + color: 'rgba(22, 177, 255, 0)' + } + ] + } + }, + data: [1000, 900, 100, 900, 900, 200, 560, 819] + } + ], + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(25, 119, 43,1)', + borderColor: 'transparent', + textStyle: { + color: '#fff' + }, + axisPointer: { + type: 'shadow', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + top: 0, + left: 'center', + show: true, + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: '#fff' + } + } }) const row1Chart = ref() const row2Chart = ref() const row3Chart = ref() const initChart = () => {} -const queryParams:any = ref() +const queryParams: any = ref() -//左一数据 -// const rightFirst = async() => { -// const data:any = await ScreenApi.getRightFirst(queryParams.value); -// row1Options.value.xAxis.data = data.map(i=>i.name) -// row1Options.value.series[0].data = data.map(i=>i.value) -// } +//右一数据 +const rightFirst = async () => { + const data: any = await ScreenApi.getRightFirst(queryParams.value) + row1Options.value.xAxis.data = data.map((i) => i.name) + row1Options.value.series[0].data = data.map((i) => i.value) + row1Options.value.series[1].data = data.map((i) => i.taskValue) +} -//左二数据 -const rightSecond = async() => { - const data = await ScreenApi.getRightSecond(queryParams.value); - row2Options.value.series[0].data = data +//右二数据 +const rightSecond = async () => { + const data = await ScreenApi.getRightSecond(queryParams.value) + row2Options.value.series[0].data = data.map((i, index) => { + return { + value: i.value, + name: i.name, + itemStyle: { + color: color[index] + } + } + }) + row2Options.value.legend.data = data.map((i, index) => { + return { + name: `${i.name}`, + textStyle: { + color: color[index] + } + } + }) + row2Options.value.legend.formatter = (v) => { + const count = data.find((d) => v == d.name).value + return `${v} ${count}` + } } -//左三数据 -// const rightThird = async() => { -// const data = await ScreenApi.getRightThird(queryParams.value); -// row3Options.value.yAxis[0].data = data.map(i=>i.name) -// row3Options.value.yAxis[1].data = data.map(i=>i.finishCount) -// } +// 右三数据 +const rightThird = async () => { + list.value = await ScreenApi.getRightThird(queryParams.value) +} +// 右四数据 +const rightFourth = async () => { + const data = await ScreenApi.getRightFourth(queryParams.value) + row3Options.value.xAxis.data = data.map((i) => i.name) + row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate) + row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate) +} const handlerResize = () => { unref(row1Chart).resizeHandler() @@ -413,10 +465,13 @@ const handlerResize = () => { onMounted(() => { initChart() + rightFirst() rightSecond() + rightFourth() + rightThird() observer = new ResizeObserver(handlerResize) observer.observe(rightWrapperRef.value) - handlerResize() + handlerResize() }) onUnmounted(() => { diff --git a/src/views/system/user/examine.vue b/src/views/system/user/examine.vue index be6e089..823b686 100644 --- a/src/views/system/user/examine.vue +++ b/src/views/system/user/examine.vue @@ -125,7 +125,7 @@ @pagination="getList" /> - +