diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/views/bigScreen/components/deptDangerTable.vue b/src/views/bigScreen/components/deptDangerTable.vue index 87aad20..8a4c37d 100644 --- a/src/views/bigScreen/components/deptDangerTable.vue +++ b/src/views/bigScreen/components/deptDangerTable.vue @@ -1,88 +1,123 @@ - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/views/bigScreen/components/deptDangerTable.vue b/src/views/bigScreen/components/deptDangerTable.vue index 87aad20..8a4c37d 100644 --- a/src/views/bigScreen/components/deptDangerTable.vue +++ b/src/views/bigScreen/components/deptDangerTable.vue @@ -1,88 +1,123 @@ - - - - diff --git a/src/views/bigScreen/components/echartContainer.vue b/src/views/bigScreen/components/echartContainer.vue deleted file mode 100644 index 1ec17d8..0000000 --- a/src/views/bigScreen/components/echartContainer.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/views/bigScreen/components/deptDangerTable.vue b/src/views/bigScreen/components/deptDangerTable.vue index 87aad20..8a4c37d 100644 --- a/src/views/bigScreen/components/deptDangerTable.vue +++ b/src/views/bigScreen/components/deptDangerTable.vue @@ -1,88 +1,123 @@ - - - - diff --git a/src/views/bigScreen/components/echartContainer.vue b/src/views/bigScreen/components/echartContainer.vue deleted file mode 100644 index 1ec17d8..0000000 --- a/src/views/bigScreen/components/echartContainer.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue index b128fff..e7635e3 100644 --- a/src/views/bigScreen/index.vue +++ b/src/views/bigScreen/index.vue @@ -6,15 +6,16 @@ import { computed, defineComponent, getCurrentInstance, onActivated, onMounted, reactive, ref, toRef, watch } from 'vue' import { useRoute } from 'vue-router' import autoScalContainer from './components/autoScalContainer.vue' +import areaDanger from './components/areaDanger.vue' +import dangerPoint from './components/dangerPoint.vue' import deptDangerTable from './components/deptDangerTable.vue' +import dangerTimeAnalysis from './components/dangerTimeAnalysis.vue' +import alarmInfo from './components/alarmInfo.vue' +import alarmYear from './components/alarmYear.vue' import ViewHead from './components/viewHead.vue' import { setRem } from './common/rem.js' import bg from './assets/bg.png' import boxBg from './assets/boxBg.png' -import Box_2 from './components/box_2.vue' -import Box_3 from './components/box_3.vue' -import Box_4 from './components/box_4.vue' -import Box_5 from './components/box_5.vue' const route = useRoute() const dataContainer = reactive({ loading: false, @@ -63,31 +64,30 @@
- - - +
隐患分类
+ >
- - +
区域隐患分类
+
- +
单位隐患分布
- - +
年度告警分析
+
- - +
各单位预警时间分析
+
- - +
报警信息
+
@@ -140,6 +140,7 @@ display: flex; flex-direction: column; > .box { + position: relative; width: 100%; flex: 1 1 0; height: 0; @@ -148,18 +149,30 @@ background-size: 100% 100%; background-position: center; margin: 0 0 0.938rem 0; + padding: 1.5rem 0.7rem 0.7rem 0.7rem; &:last-child { - margin: 0; + margin: 0; + } + .box-title { + position: absolute; + color: #fcfcfc; + letter-spacing: 0.2rem; + font-weight: 600; + font-size: 1.2rem; + top: -0.8rem; + // 水平居中 + left: 50%; + transform:translate(-50% , 0); } } } > .left { height: 100%; - width: 24.375rem; + width: 26rem; } > .right { height: 100%; - width: 24.375rem; + width: 36rem; } } } diff --git a/public/config/config.json b/public/config/config.json index 33afb5e..f36b722 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -1,7 +1,7 @@ { "title": "安全生产智慧监管系统", "baseUrl": "http://192.168.83.42:6909/safe-server/", - "mediaBaseUrl": "http://192.168.83.42:80", + "mediaBaseUrl": "http://10.8.208.54:18080", "lat-bd": "39.91459528", "lng-bd": "116.26499505", "lat": "39.90", @@ -10,7 +10,9 @@ "maxZoom": "18", "zoom": "15", "timeGap": 3000, - "systemType": "gm", + "systemType": "sm", "lineWidth": "3", - "fontSize": "18px" + "lineColor": "#1aa034", + "fontSize": "18px", + "fontColor": "#1aa034" } diff --git a/src/api/index.ts b/src/api/index.ts index 3fe9d5b..76c92b7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -42,8 +42,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') @@ -87,7 +87,10 @@ if (window.localStorage.getItem('systemType') === 'gm') { // token失效状态跳转到登录页 - toLogin() + // toLogin() + router.push({ + path: '/noPage', + }) } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 router.push({ diff --git a/src/api/indexMedia.ts b/src/api/indexMedia.ts index 02d0ee9..5c6915b 100644 --- a/src/api/indexMedia.ts +++ b/src/api/indexMedia.ts @@ -44,8 +44,8 @@ * 以下代码为示例，在请求头里带上 token 信息 */ if (userStore.isLogin && request.headers) { - request.headers.token = userStore.token - // request.headers.token = localStorage.getItem('token') + // request.headers.token = userStore.token + request.headers.token = localStorage.getItem('token') } if (!userStore.isLogin && localStorage.getItem('tokenBak') === 'true') { // 未登录且url带token request.headers.token = localStorage.getItem('token') diff --git a/src/assets/Digital.ttf b/src/assets/Digital.ttf new file mode 100644 index 0000000..233c1cb --- /dev/null +++ b/src/assets/Digital.ttf Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 0ebd6ef..965339c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -53,6 +53,7 @@ PieChart: typeof import('./components/Echart/PieChart.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] + RadarChart: typeof import('./components/Echart/radarChart.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ScanSampleDialog: typeof import('./components/ScanSampleDialog/index.vue')['default'] diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue index 78bb736..5d4cde8 100644 --- a/src/components/Echart/BarChartVertical.vue +++ b/src/components/Echart/BarChartVertical.vue @@ -9,6 +9,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { barOption, barSeriesOption, lineDataI } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' const props = defineProps({ /** * id @@ -242,6 +243,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -280,6 +293,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -287,6 +301,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -340,6 +355,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as barSeriesOption[], } // 标题 @@ -459,13 +484,23 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 3) + // } chart.setOption({}) + nextTick(() => { + chart.resize() + }) } // 刷新图表 function refreshChart() { if (chart) { const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 2) + } chart.setOption(option as unknown as ECBasicOption, true) } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d11b707..7433084 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -6,6 +6,7 @@ import type { ECBasicOption } from 'echarts/types/dist/shared' import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface' import tdTheme from './theme.json' // 引入默认主题 +import { automaticCarousel } from './automaticCarousel' import { formatColor, getAlphaColor } from './utils' const props = defineProps({ /** @@ -115,8 +116,8 @@ type: Array, default: () => { return [ - '#2d8cf0', - '#19be6b', + '#f5b637', + '#45c7f2', '#ff9900', '#E46CBB', '#9A66E4', @@ -139,6 +140,11 @@ type: String, default: '#7a6b74', }, + // x轴标签倾斜 + Xrotate: { + type: Number, + default: 0, + }, /** * 轴线上文字颜色 */ @@ -174,6 +180,18 @@ type: Boolean, default: true, }, + isAutomaticCarousel: { // 图表是否自动轮播 + type: Boolean, + default: false, + }, + tooltipTextColor: { + type: String, + default: '#737373', + }, + tooltipBackgroundColor: { + type: String, + default: '#fff', + }, }) // 图表对象 @@ -199,6 +217,7 @@ trigger: 'axis', textStyle: { fontSize: 16, + color: props.tooltipTextColor, }, axisPointer: { type: 'cross', @@ -206,6 +225,7 @@ fontSize: 13, }, }, + backgroundColor: props.tooltipBackgroundColor, valueFormatter: (value: string | number) => { return value + props.unit }, @@ -220,8 +240,10 @@ }, }, axisLabel: { + show: true, color: props.fontColor, // X轴名称颜色 - fontSize: 14, + fontSize: 12, + rotate: props.Xrotate, }, splitLine: { show: false, @@ -243,6 +265,10 @@ color: props.axisLineColor, // 轴线的颜色 }, }, + axisLabel: { + color: props.fontColor, // X轴名称颜色 + fontSize: 14, + }, nameTextStyle: { color: props.fontColor, fontSize: 14, @@ -257,6 +283,16 @@ }, }, ], + dataZoom: [ + // 滑动条 + { + xAxisIndex: 0, // 这里是从X轴的0刻度开始 + show: false, // 是否显示滑动条，不影响使用 + type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 开始位置。 + endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个） + }, + ], series: [] as lineSeriesOption[], } // 标题 @@ -328,15 +364,22 @@ // 初始化图表 function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) + const option = buildOption() + // if (props.isAutomaticCarousel) { + // automaticCarousel(option, chart, 3000, 6) + // } chart.setOption({}) + chart.resize() } // 刷新图表 function refreshChart() { if (chart) { console.log('渲染折线图') - const option = buildOption() + if (props.isAutomaticCarousel) { + automaticCarousel(option, chart, 3000, 5) + } chart.setOption(option as unknown as ECBasicOption, true) chart.resize() } diff --git a/src/components/Echart/automaticCarousel.ts b/src/components/Echart/automaticCarousel.ts new file mode 100644 index 0000000..d5890aa --- /dev/null +++ b/src/components/Echart/automaticCarousel.ts @@ -0,0 +1,51 @@ +/** + * 图表自动轮播 + * @param option 图表配置 + * @param myChart 图表实例 + * @param t 滚动间隔 + * @param endValue 图表显示endValue + 1条数据 + */ +export function automaticCarousel(option: any, myChart: any, 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[0].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[0].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/components/Echart/radarChart.vue b/src/components/Echart/radarChart.vue new file mode 100644 index 0000000..bca09e4 --- /dev/null +++ b/src/components/Echart/radarChart.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/views/bigScreen/components/deptDangerTable.vue b/src/views/bigScreen/components/deptDangerTable.vue index 87aad20..8a4c37d 100644 --- a/src/views/bigScreen/components/deptDangerTable.vue +++ b/src/views/bigScreen/components/deptDangerTable.vue @@ -1,88 +1,123 @@ - - - - diff --git a/src/views/bigScreen/components/echartContainer.vue b/src/views/bigScreen/components/echartContainer.vue deleted file mode 100644 index 1ec17d8..0000000 --- a/src/views/bigScreen/components/echartContainer.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue index b128fff..e7635e3 100644 --- a/src/views/bigScreen/index.vue +++ b/src/views/bigScreen/index.vue @@ -6,15 +6,16 @@ import { computed, defineComponent, getCurrentInstance, onActivated, onMounted, reactive, ref, toRef, watch } from 'vue' import { useRoute } from 'vue-router' import autoScalContainer from './components/autoScalContainer.vue' +import areaDanger from './components/areaDanger.vue' +import dangerPoint from './components/dangerPoint.vue' import deptDangerTable from './components/deptDangerTable.vue' +import dangerTimeAnalysis from './components/dangerTimeAnalysis.vue' +import alarmInfo from './components/alarmInfo.vue' +import alarmYear from './components/alarmYear.vue' import ViewHead from './components/viewHead.vue' import { setRem } from './common/rem.js' import bg from './assets/bg.png' import boxBg from './assets/boxBg.png' -import Box_2 from './components/box_2.vue' -import Box_3 from './components/box_3.vue' -import Box_4 from './components/box_4.vue' -import Box_5 from './components/box_5.vue' const route = useRoute() const dataContainer = reactive({ loading: false, @@ -63,31 +64,30 @@
- - - +
隐患分类
+ >
- - +
区域隐患分类
+
- +
单位隐患分布
- - +
年度告警分析
+
- - +
各单位预警时间分析
+
- - +
报警信息
+
@@ -140,6 +140,7 @@ display: flex; flex-direction: column; > .box { + position: relative; width: 100%; flex: 1 1 0; height: 0; @@ -148,18 +149,30 @@ background-size: 100% 100%; background-position: center; margin: 0 0 0.938rem 0; + padding: 1.5rem 0.7rem 0.7rem 0.7rem; &:last-child { - margin: 0; + margin: 0; + } + .box-title { + position: absolute; + color: #fcfcfc; + letter-spacing: 0.2rem; + font-weight: 600; + font-size: 1.2rem; + top: -0.8rem; + // 水平居中 + left: 50%; + transform:translate(-50% , 0); } } } > .left { height: 100%; - width: 24.375rem; + width: 26rem; } > .right { height: 100%; - width: 24.375rem; + width: 36rem; } } } diff --git a/src/views/monitor/realTime/index.vue b/src/views/monitor/realTime/index.vue index 6fcbcfa..90799dd 100644 --- a/src/views/monitor/realTime/index.vue +++ b/src/views/monitor/realTime/index.vue @@ -1,3 +1,4 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index a2d2d9a..bdb7442 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,9 @@ window.localStorage.setItem('timeGap', result.data.timeGap) window.localStorage.setItem('systemType', result.data.systemType) window.localStorage.setItem('lineWidth', result.data.lineWidth) + window.localStorage.setItem('lineColor', result.data.lineColor) window.localStorage.setItem('fontSize', result.data.fontSize) + window.localStorage.setItem('fontColor', result.data.fontColor) window.localStorage.setItem('zoom', result.data.zoom) const app = createApp(App) diff --git a/src/router/index.ts b/src/router/index.ts index 6b9e05b..86edcda 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,7 @@ asyncRoutes, asyncRoutesByFilesystem, constantRoutes, - constantRoutesByFilesystem, + constantRoutesByFilesystem } from './routes' import pinia from '@/store' import useSettingsStore from '@/store/modules/settings' @@ -24,7 +24,7 @@ routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem - : (constantRoutes as RouteRecordRaw[]), + : (constantRoutes as RouteRecordRaw[]) }) router.beforeEach(async (to, from, next) => { @@ -37,31 +37,27 @@ settingsStore.app.enableProgress && (isLoading.value = true) // 是否已登录 if (userStore.isLogin) { - if (to.name === 'login') { - // 如果还要进入登录页，直接跳转 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } - } - else { + } else { // 携带token 需要去掉 const hrefIdx = window.location.href.indexOf('token') // url中是否携带token if (hrefIdx > -1) { const params = queryString(window.location.href) const token = stripscript(params.token) + console.log('已登录状态设置新的Token：', token) localStorage.setItem('token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } @@ -72,27 +68,32 @@ // 是否已根据权限动态生成并注册路由 if (routeStore.isGenerate) { // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态 - settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path) + settingsStore.menu.menuMode !== 'single' && + menuStore.setActived(to.path) // 如果已登录状态下，进入登录页会强制跳转到控制台页面 if (to.name === 'login') { console.log('跳转控制台') next({ name: 'index', - replace: true, + replace: true }) } // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块 else if (!settingsStore.dashboard.enable && to.name === 'dashboard') { if (menuStore.sidebarMenus.length > 0) { - console.log('如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块') + console.log( + '如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块' + ) next({ path: menuStore.sidebarMenusFirstDeepestPath, - replace: true, + replace: true }) } // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面 else { - console.log('如果侧边栏导航第一个模块无法命中，则还是进入控制台页面') + console.log( + '如果侧边栏导航第一个模块无法命中，则还是进入控制台页面' + ) next() } } @@ -100,8 +101,7 @@ else { next() } - } - else { + } else { // 生成动态路由 switch (settingsStore.app.routeBaseOn) { @@ -149,12 +149,10 @@ }) } } - } - else { + } else { console.log('未登录') // 携带token 需要去掉 - const hrefIdx = window.location.href.indexOf('token') // url中是否携带token console.log('hrefIdx', hrefIdx) console.log('window.location.href', window.location.href) @@ -165,8 +163,7 @@ localStorage.setItem('token', token) console.log('url中携带token', token) localStorage.setItem('tokenBak', 'true') - } - else { + } else { localStorage.setItem('tokenBak', 'false') } if (localStorage.getItem('tokenBak') === 'true') { @@ -266,41 +263,36 @@ replace: true }) } - } - else { + } else { if (window.localStorage.getItem('systemType') === 'gm') { next({ name: 'login', query: { - redirect: to.fullPath, - }, + redirect: to.fullPath + } }) - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } - } - else { + } else { // 未登录跳转到登录 if (window.localStorage.getItem('systemType') === 'gm') { next() - } - else if (window.localStorage.getItem('systemType') === 'sm') { + } else if (window.localStorage.getItem('systemType') === 'sm') { // sm走网关 next({ name: 'SmGateway', - replace: true, + replace: true }) } } } - } - else { + } else { next() } }) diff --git a/src/router/modules/monitor.ts b/src/router/modules/monitor.ts index b431c4b..5d45895 100644 --- a/src/router/modules/monitor.ts +++ b/src/router/modules/monitor.ts @@ -22,8 +22,8 @@ // import('@/views/monitor/realTime/index-noPlugin-single.vue'), // SDK单路 // import('@/views/monitor/realTime/index-noPlugin.vue'), // SDK4路 // import('@/views/monitor/realTime/index-isc-single.vue'), // isc - // import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 - import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 + import('@/views/monitor/realTime/index-media-single.vue'), // 商流媒体单路 + // import('@/views/monitor/realTime/index-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', @@ -37,8 +37,8 @@ name: 'control', // component: () => import('@/views/monitor/realTime/control-noPlugin.vue'), // SDK // component: () => import('@/views/monitor/realTime/control-isc.vue'), // isc - // component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 - component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 + component: () => import('@/views/monitor/realTime/control-media.vue'), // 流媒体 + // component: () => import('@/views/monitor/realTime/control-new-gm-plugin.vue'), // 国 meta: { title: '实时监控', auth: '/realTime', diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index dee9056..568e57a 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -17,6 +17,7 @@ }, }) const emits = defineEmits(['givepointsInfo']) +const lineColor = ref('#1aa034') const baseurl = ref(window.location.href.split('/#')[0]) const canvas = ref(null) as any const myCtx = ref(null) as any @@ -41,12 +42,12 @@ ctx.lineTo(e.boundary[3].x, e.boundary[3].y) } // ctx.strokeStyle = e.pointColor - ctx.strokeStyle = e.pointColor || '#1aa034' + ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034' ctx.closePath() // ctx.font = `${window.localStorage.getItem('fontSize')} Arial` || '13px Arial' ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' // ctx.fillStyle = e.pointColor - ctx.fillStyle = e.pointColor || '#1aa034' + ctx.fillStyle = window.localStorage.getItem('fontColor') || '#1aa034' // const minY = Math.min(e.boundary[0].y, e.boundary[1].y, e.boundary[2].y, e.boundary[3].y) // const minX = Math.min(e.boundary[0].x, e.boundary[1].x, e.boundary[2].x, e.boundary[3].x) const textX = e.boundary[0].x === 0 ? 0 : e.boundary[0].x + 3 > props.width - 60 ? props.width - 60 : e.boundary[0].x + 3 @@ -129,6 +130,7 @@ } onMounted(() => { + lineColor.value = window.localStorage.getItem('lineColor')! canvas.value = document.getElementById('myCanvas') myCtx.value = canvas.value.getContext('2d') }) @@ -179,8 +181,9 @@ :key="index" :class="props.dialogStatus === 'detail' ? 'detail-point' : 'point'" :style="{ - top: `${item.y - 5}px`, - left: `${item.x - 5}px`, + 'top': `${item.y - 5}px`, + 'left': `${item.x - 5}px`, + '--lineColor': lineColor, }" /> @@ -208,7 +211,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + background-color: var(--lineColor); + /* background-color: #1aa034; */ opacity: 0.8; top: 0; left: 0; @@ -223,7 +227,8 @@ height: 10px; position: absolute; border-radius: 50%; - background-color: #1aa034; + /* background-color: #1aa034; */ + background-color: var(--lineColor); opacity: 0.5; top: 0; left: 0; diff --git a/src/views/bigScreen/components/alarmInfo.vue b/src/views/bigScreen/components/alarmInfo.vue new file mode 100644 index 0000000..4c88302 --- /dev/null +++ b/src/views/bigScreen/components/alarmInfo.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/bigScreen/components/alarmYear.vue b/src/views/bigScreen/components/alarmYear.vue new file mode 100644 index 0000000..1f56d17 --- /dev/null +++ b/src/views/bigScreen/components/alarmYear.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/views/bigScreen/components/areaDanger.vue b/src/views/bigScreen/components/areaDanger.vue new file mode 100644 index 0000000..7f134c1 --- /dev/null +++ b/src/views/bigScreen/components/areaDanger.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/bigScreen/components/autoScalContainerBak.vue b/src/views/bigScreen/components/autoScalContainerBak.vue deleted file mode 100644 index bc6f4a1..0000000 --- a/src/views/bigScreen/components/autoScalContainerBak.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_2.vue b/src/views/bigScreen/components/box_2.vue deleted file mode 100644 index ec6feff..0000000 --- a/src/views/bigScreen/components/box_2.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_3.vue b/src/views/bigScreen/components/box_3.vue deleted file mode 100644 index 3f1a807..0000000 --- a/src/views/bigScreen/components/box_3.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_4.vue b/src/views/bigScreen/components/box_4.vue deleted file mode 100644 index a169a23..0000000 --- a/src/views/bigScreen/components/box_4.vue +++ /dev/null @@ -1,241 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_5.vue b/src/views/bigScreen/components/box_5.vue deleted file mode 100644 index f89a18f..0000000 --- a/src/views/bigScreen/components/box_5.vue +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/box_6.vue b/src/views/bigScreen/components/box_6.vue deleted file mode 100644 index 2f14604..0000000 --- a/src/views/bigScreen/components/box_6.vue +++ /dev/null @@ -1,472 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/components/dangerPoint.vue b/src/views/bigScreen/components/dangerPoint.vue new file mode 100644 index 0000000..d78e61b --- /dev/null +++ b/src/views/bigScreen/components/dangerPoint.vue @@ -0,0 +1,229 @@ + + + + + + diff --git a/src/views/bigScreen/components/dangerTimeAnalysis.vue b/src/views/bigScreen/components/dangerTimeAnalysis.vue new file mode 100644 index 0000000..98306d8 --- /dev/null +++ b/src/views/bigScreen/components/dangerTimeAnalysis.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/views/bigScreen/components/deptDangerTable.vue b/src/views/bigScreen/components/deptDangerTable.vue index 87aad20..8a4c37d 100644 --- a/src/views/bigScreen/components/deptDangerTable.vue +++ b/src/views/bigScreen/components/deptDangerTable.vue @@ -1,88 +1,123 @@ - - - - diff --git a/src/views/bigScreen/components/echartContainer.vue b/src/views/bigScreen/components/echartContainer.vue deleted file mode 100644 index 1ec17d8..0000000 --- a/src/views/bigScreen/components/echartContainer.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue index b128fff..e7635e3 100644 --- a/src/views/bigScreen/index.vue +++ b/src/views/bigScreen/index.vue @@ -6,15 +6,16 @@ import { computed, defineComponent, getCurrentInstance, onActivated, onMounted, reactive, ref, toRef, watch } from 'vue' import { useRoute } from 'vue-router' import autoScalContainer from './components/autoScalContainer.vue' +import areaDanger from './components/areaDanger.vue' +import dangerPoint from './components/dangerPoint.vue' import deptDangerTable from './components/deptDangerTable.vue' +import dangerTimeAnalysis from './components/dangerTimeAnalysis.vue' +import alarmInfo from './components/alarmInfo.vue' +import alarmYear from './components/alarmYear.vue' import ViewHead from './components/viewHead.vue' import { setRem } from './common/rem.js' import bg from './assets/bg.png' import boxBg from './assets/boxBg.png' -import Box_2 from './components/box_2.vue' -import Box_3 from './components/box_3.vue' -import Box_4 from './components/box_4.vue' -import Box_5 from './components/box_5.vue' const route = useRoute() const dataContainer = reactive({ loading: false, @@ -63,31 +64,30 @@
- - - +
隐患分类
+ >
- - +
区域隐患分类
+
- +
单位隐患分布
- - +
年度告警分析
+
- - +
各单位预警时间分析
+
- - +
报警信息
+
@@ -140,6 +140,7 @@ display: flex; flex-direction: column; > .box { + position: relative; width: 100%; flex: 1 1 0; height: 0; @@ -148,18 +149,30 @@ background-size: 100% 100%; background-position: center; margin: 0 0 0.938rem 0; + padding: 1.5rem 0.7rem 0.7rem 0.7rem; &:last-child { - margin: 0; + margin: 0; + } + .box-title { + position: absolute; + color: #fcfcfc; + letter-spacing: 0.2rem; + font-weight: 600; + font-size: 1.2rem; + top: -0.8rem; + // 水平居中 + left: 50%; + transform:translate(-50% , 0); } } } > .left { height: 100%; - width: 24.375rem; + width: 26rem; } > .right { height: 100%; - width: 24.375rem; + width: 36rem; } } } diff --git a/src/views/monitor/realTime/index.vue b/src/views/monitor/realTime/index.vue index 6fcbcfa..90799dd 100644 --- a/src/views/monitor/realTime/index.vue +++ b/src/views/monitor/realTime/index.vue @@ -1,3 +1,4 @@ +