renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
1.青海大屏
This commit is contained in:
weixin
2025-06-19 16:15:43 +08:00
parent 25b8acdda6
commit 2db1e6d33c
21 changed files with 4699 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/screen.svg"/> <link rel="icon" type="image/svg+xml" href="/screen.svg"/>
package.json
+2 -1
View File
@@ -19,6 +19,8 @@
"autoprefixer": "^10.4.16", "autoprefixer": "^10.4.16",
"axios": "^1.6.2", "axios": "^1.6.2",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"echarts": "5.4.3",
"echarts-gl": "^2.0.9",
"jsencrypt": "^3.3.2", "jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mitt": "^3.0.1", "mitt": "^3.0.1",
@@ -42,7 +44,6 @@
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^4.0.1", "@vitejs/plugin-vue-jsx": "^4.0.1",
"ant-design-vue": "^3.2.20", "ant-design-vue": "^3.2.20",
"echarts": "^5.4.3",
"eslint": "^8.51.0", "eslint": "^8.51.0",
"eslint-config-prettier": "^8.10.0", "eslint-config-prettier": "^8.10.0",
"eslint-define-config": "^1.24.1", "eslint-define-config": "^1.24.1",
src/enum/pageEnum.ts
+2
View File
@@ -6,8 +6,10 @@ export enum PageEnum {
BASE_LOGIN_YINCHUAN = '/screenLogin', BASE_LOGIN_YINCHUAN = '/screenLogin',
// centralScreenLogin // centralScreenLogin
CENTRAL_SCREEN_LOGIN = '/centralScreenLogin', CENTRAL_SCREEN_LOGIN = '/centralScreenLogin',
Q_SCREEN_LOGIN = '/qLogin',
YINCHUAN_HOME = '/yinChuanHome', YINCHUAN_HOME = '/yinChuanHome',
CENTRAL_SCREEN = '/centralScreen', CENTRAL_SCREEN = '/centralScreen',
Q_SCREEN = '/qScreen',
} }
export function setBaseLogin(baseLogin) { export function setBaseLogin(baseLogin) {
src/router/index.ts
+18
View File
@@ -99,6 +99,24 @@ const routes: Array<RouteRecordRaw> = [
}, },
component: () => import('/@/views/centralScreen/centralScreenD.vue'), component: () => import('/@/views/centralScreen/centralScreenD.vue'),
}, },
{
path: '/qLogin',
name: 'qLogin',
meta: {
//青海大屏登录
title: '登录',
},
component: () => import('/@/views/sys/login.vue'),
},
{
path: '/qScreen',
name: 'qScreen',
meta: {
//青海大屏登录
title: '数据看板',
},
component: () => import('/src/views/qh/qScreen.vue'),
},
]; ];
const router: Router = createRouter({ const router: Router = createRouter({
src/router/utils.js
+115
View File
@@ -0,0 +1,115 @@
import proj4 from 'proj4';
//北京54--3度带--zone
proj4.defs("EPSG:2401", "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-25----73.5°E to 76.5°E
proj4.defs("EPSG:2402", "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-26----76.5°E to 79.5°E
proj4.defs("EPSG:2403", "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-27----79.5°E to 82.5°E
proj4.defs("EPSG:2404", "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-28----82.5°E to 85.5°E
proj4.defs("EPSG:2405", "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-29----85.5°E to 88.5°E
proj4.defs("EPSG:2406", "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-30----88.5°E to 91.5°E
proj4.defs("EPSG:2407", "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-31----91.5°E to 94.5°E
proj4.defs("EPSG:2408", "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-32----94.5°E to 97.5°E
proj4.defs("EPSG:2409", "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-33----97.5°E to 100.5°E
proj4.defs("EPSG:2410", "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-34----100.5°E to 103.5°E
proj4.defs("EPSG:2411", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-35----103.5°E to 106.5°E
proj4.defs("EPSG:2412", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-36----106.5°E to 109.5°E
proj4.defs("EPSG:2413", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-37----109.5°E to 112.5°E
proj4.defs("EPSG:2414", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-38----112.5°E to 115.5°E
proj4.defs("EPSG:2415", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-39----115.5°E to 118.5°E
proj4.defs("EPSG:2416", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-40----118.5°E to 121.5°E
proj4.defs("EPSG:2417", "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-41----121.5°E to 124.5°E
proj4.defs("EPSG:2418", "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-42----124.5°E to 127.5°E
proj4.defs("EPSG:2419", "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-43----127.5°E to 130.5°E
proj4.defs("EPSG:2420", "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-44----130.5°E to 133.5°E
proj4.defs("EPSG:2421", "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-zone-45----133.5°E to 136.5°E
//北京54--3度带--CM
proj4.defs("EPSG:2422", "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-75E----73.5°E to 76.5°E
proj4.defs("EPSG:2423", "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-78E----76.5°E to 79.5°E
proj4.defs("EPSG:2424", "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-81E----79.5°E to 82.5°E
proj4.defs("EPSG:2425", "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-84E----82.5°E to 85.5°E
proj4.defs("EPSG:2426", "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-87E----85.5°E to 88.5°E
proj4.defs("EPSG:2427", "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-90E----88.5°E to 91.5°E
proj4.defs("EPSG:2428", "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-93E----91.5°E to 94.5°E
proj4.defs("EPSG:2429", "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-96E----94.5°E to 97.5°E
proj4.defs("EPSG:2430", "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-99E----97.5°E to 100.5°E
proj4.defs("EPSG:2431", "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-102E----100.5°E to 103.5°E
proj4.defs("EPSG:2432", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-105E----103.5°E to 106.5°E
proj4.defs("EPSG:2433", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-108E----106.5°E to 109.5°E
proj4.defs("EPSG:2434", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-111E----109.5°E to 112.5°E
proj4.defs("EPSG:2435", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-114E----112.5°E to 115.5°E
proj4.defs("EPSG:2436", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-117E----115.5°E to 118.5°E
proj4.defs("EPSG:2437", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-120E----118.5°E to 121.5°E
proj4.defs("EPSG:2438", "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-123E----121.5°E to 124.5°E
proj4.defs("EPSG:2439", "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-126E----124.5°E to 127.5°E
proj4.defs("EPSG:2440", "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-129E----127.5°E to 130.5°E
proj4.defs("EPSG:2441", "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-132E----130.5°E to 133.5°E
proj4.defs("EPSG:2442", "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs "); //北京1954-3度分带-高斯克吕格投影-CM-135E----133.5°E to 136.5°E
//4525
proj4.defs("EPSG:4525", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
/**
* 投影坐标54到经纬度（WGS48 epsg:4326）转换方法
* @param epsgId epsg的id值。目前使用的是"EPSG:2412"
* @param bj54Coordinate 54坐标值 类型为Object类，包含x y 属性。 {x:number,y:number}
* @returns result 输出结果，类型为object类，里面包含 longitude，latitude 属性
*/
export default {
bj54CoordinateTransfer(epsgId, bj54Coordinate) {
let bj54Projection = new proj4.Proj(epsgId);
let wgs84Projection = new proj4.Proj('EPSG:4326');
let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y]);
return {
longitude: transformedPoint.x,
latitude: transformedPoint.y
}
},
// 经纬度坐标转2000坐标系
bj2000CoordinateTransfer(epsgId, bj54Coordinate) {
let bj54Projection = new proj4.Proj('EPSG:4326');
let wgs84Projection = new proj4.Proj(epsgId);
let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.longitude, bj54Coordinate.latitude]);
return {
x: transformedPoint.x,
y: transformedPoint.y,
}
},
// 2000转wgs84
wgs84CoordinateTransfer(epsgId, bj54Coordinate) {
let bj54Projection = new proj4.Proj(epsgId);
let wgs84Projection = new proj4.Proj('EPSG:4326');
let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y, bj54Coordinate.z]);
return {
x: transformedPoint.x,
y: transformedPoint.y,
z: transformedPoint.z
}
},
wgs84CoordinateTransfer1(epsgId, bj54Coordinate) {
let bj54Projection = new proj4.Proj(epsgId);
let wgs84Projection = new proj4.Proj('EPSG:4326');
let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y]);
return {
x: transformedPoint.x,
y: transformedPoint.y,
}
},
bj54TransformArry(bj54Coord1, bj54Coord2) {
},
bj54TransformPoint(bj54Coord) {
let bj54Coordinate = {
x: parseFloat(bj54Coord.longitude),
y: parseFloat(bj54Coord.latitude)
}
let transformedCoord = this.bj54CoordinateTransfer("EPSG:2412", bj54Coordinate);
let wgs84Coordinate = {
longitude: transformedCoord.longitude,
latitude: transformedCoord.latitude,
height: parseFloat(bj54Coord.height)
}
return wgs84Coordinate
}
}
src/store/modules/user.ts
+8
View File
@@ -19,6 +19,7 @@ export const useUserStore = defineStore({
flag1: '', //银川权限标识 flag1: '', //银川权限标识
flag2: '', //西安权限标识 flag2: '', //西安权限标识
flag3: '', //新版大屏标识 flag3: '', //新版大屏标识
flag4: '', //青海大屏标识
centerId: '', //中心点id centerId: '', //中心点id
centerInfo: null, //应急中心信息 centerInfo: null, //应急中心信息
count: 0, count: 0,
@@ -45,6 +46,9 @@ export const useUserStore = defineStore({
getFlag3(): string { getFlag3(): string {
return this.flag3 || getAuthCache('flag3'); return this.flag3 || getAuthCache('flag3');
}, },
getFlag4(): string {
return this.flag4 || getAuthCache('flag4');
},
getCenterId(): string { getCenterId(): string {
return this.centerId || getAuthCache('centerId'); return this.centerId || getAuthCache('centerId');
}, },
@@ -83,6 +87,10 @@ export const useUserStore = defineStore({
this.flag3 = info ? info : ''; this.flag3 = info ? info : '';
setAuthCache('flag3', info); setAuthCache('flag3', info);
}, },
setFlag4(info: string | undefined) {
this.flag4 = info ? info : '';
setAuthCache('flag4', info);
},
setCenterId(info: string | undefined) { setCenterId(info: string | undefined) {
this.centerId = info ? info : ''; this.centerId = info ? info : '';
setAuthCache('centerId', info); setAuthCache('centerId', info);
src/views/qh/components/middleD.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<div style="width: 100%; height: 100%" ref="middleRef"> </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getOption } from '/@/views/qh/hooks/middle.ts';
const middleRef = ref();
onMounted(() => {
initE();
});
function initE() {
try {
let myChart = echarts.init(middleRef.value);
myChart.setOption(getOption());
window.addEventListener('resize', () => {
myChart.resize();
});
} catch (e) {
console.log(e);
}
}
</script>
<style scoped lang="less"></style>
src/views/qh/components/oneLeft.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div></div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/components/oneRight.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div></div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/components/threeLeft.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div></div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/components/threeRight.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div></div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/components/twoLeft.vue
+101
View File
@@ -0,0 +1,101 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div ref="chartRef"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { nextTick, onMounted, ref } from 'vue';
import { bindListen, getPie3D } from '/@/views/qh/hooks/twoLeft';
const chartRef = ref();
const optionData = ref([
{
name: '骨科',
value: 30,
itemStyle: {
color: '#e27c3d',
},
},
{
name: '外科',
value: 40,
itemStyle: {
color: '#eca298',
},
},
{
name: '内科',
value: 70,
itemStyle: {
color: 'red',
},
},
]);
const option = ref({});
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
onMounted(() => {
nextTick(() => {
initE();
});
});
function initE() {
//构建3d饼状图
let myChart = echarts.init(chartRef.value);
// 传入数据生成 option
option.value = getPie3D(optionData.value, 0.5);
myChart.setOption(option.value);
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.value.series.push({
name: 'pie2d',
type: 'pie',
labelLine: {
length: 10,
length2: 10,
},
label: {
show: true,
position: 'inner',
rich: {
a: {
color: 'red',
fontSize: 12,
lineHeight: 20,
},
c: {
fontSize: 16,
},
},
formatter: '{b|{b} \n}{c|{c}}{b| 亩}',
},
startAngle: -20, //起始角度，支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['20%', '50%'],
center: ['50%', '50%'],
data: optionData.value,
itemStyle: {
opacity: 0,
},
});
myChart.setOption(option.value);
window.addEventListener('resize', () => {
myChart.resize();
});
bindListen(myChart, option.value);
}
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/components/twoRight.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<div class="qh-item-d">
<div class="qh-son-title">
{{ props.title }}
</div>
<div ref="chartRef"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { getOption } from '/@/views/qh/hooks/twoRight.ts';
const chartRef = ref();
const props = defineProps({
title: {
type: String,
default: () => '',
},
});
onMounted(() => {
initE();
});
function initE() {
let myChart = echarts.init(chartRef.value);
myChart.setOption(getOption(['消化道', '消化道', '消化道', '消化道'], [23, 51, 23, 63]));
window.addEventListener('resize', () => {
myChart.resize();
});
}
</script>
<style scoped lang="less">
@import '/@/views/qh/style/index.less';
</style>
src/views/qh/hooks/china.json
+3179
View File
File diff suppressed because it is too large Load Diff
src/views/qh/hooks/middle.ts
+447
View File
@@ -0,0 +1,447 @@
import * as echarts from 'echarts';
import chinaJson from './china.json';
echarts.registerMap('china', chinaJson);
let outname = [
'南海诸岛',
'天津',
'上海',
'重庆',
'河北',
'河南',
'云南',
'辽宁',
'黑龙江',
'湖南',
'安徽',
'山东',
'新疆',
'江苏',
'浙江',
'江西',
'湖北',
'广西',
'甘肃',
'山西',
'内蒙古',
'陕西',
'吉林',
'福建',
'贵州',
'广东',
'青海',
'西藏',
'四川',
'宁夏',
'海南',
'台湾',
'香港',
'澳门',
];
let outvalue = [
0, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225,
];
let outdata: any[] = [];
let bjname: any[] = ['北京'];
let bjvalue: any[] = [300];
let beijing: any[] = [];
for (let i = 0; i < outname.length; i++) {
outdata.push({
name: outname[i],
value: outvalue[i],
});
}
for (let i = 0; i < bjname.length; i++) {
beijing.push({
name: bjname[i],
value: bjvalue[i],
});
}
let geoCoordMap = {};
/*获取地图数据*/
let mapFeatures = chinaJson.features;
mapFeatures.forEach(function (v) {
// 地区名称
let name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
let convertData = function (data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
let points = [
{
name: 'aa',
value: [117.4219, 39.4189],
itemStyle: {
color: 'red',
},
},
{
value: [103.5901, 36.3043],
itemStyle: {
color: 'red',
},
},
{
value: [112.3352, 37.9413],
itemStyle: {
color: 'red',
},
},
{
value: [113.62, 34.75],
itemStyle: {
color: 'red',
},
},
{
value: [109.48, 36.6],
itemStyle: {
color: 'red',
},
},
{
value: [107.13, 34.37],
itemStyle: {
color: 'red',
},
},
{
value: [113.23, 23.16],
itemStyle: {
color: 'red',
},
},
{
value: [117.4219, 39.4189],
itemStyle: {
color: 'red',
},
},
{
value: [108.37, 22.82],
itemStyle: {
color: 'red',
},
},
{
value: [109.1162, 34.2004],
itemStyle: {
color: 'red',
},
},
{
value: [103.5901, 36.3043],
itemStyle: {
color: 'red',
},
},
{
value: [106.3586, 38.1775],
itemStyle: {
color: 'red',
},
},
{
value: [103.9526, 30.7617],
itemStyle: {
color: 'red',
},
},
];
let option = {
backgroundColor: 'transparent',
geo: {
map: 'china',
aspectScale: 0.75, //长宽比
zoom: 1.1,
// scaleLimit: {
// min: 1,
// max: 4,
// },
roam: false,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: '#09132c', // 0% 处的颜色
},
{
offset: 1,
color: '#274d68', // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
shadowColor: 'rgb(58,115,192)',
shadowOffsetX: 3,
shadowOffsetY: 4,
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
show: false,
},
},
},
regions: [
{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9',
},
},
},
},
],
},
series: [
{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#1DE9B6',
},
},
emphasis: {
textStyle: {
color: 'rgb(183,185,14)',
},
},
},
itemStyle: {
normal: {
borderColor: 'rgb(147, 235, 248)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: '#09132c', // 0% 处的颜色
},
{
offset: 1,
color: '#274d68', // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
},
emphasis: {
areaColor: 'rgb(46,229,206)',
// shadowColor: 'rgb(12,25,50)',
borderWidth: 0.1,
},
},
zoom: 1.1,
// roam: false,
map: 'china', //使用
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
offset: [0, 15],
color: 'red',
show: true,
fontSize: 15,
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
// function(value) {
// //随机颜色
// return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
// },
shadowBlur: 10,
shadowColor: '#333',
},
},
symbolSize: 12,
data: points,
}, //地图线的动画效果 后面的注释掉，防止后期要线
// {
// type: 'lines',
// zlevel: 2,
// effect: {
// show: true,
// period: 4, //箭头指向速度，值越小速度越快
// trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
// symbol: 'arrow', //箭头图标
// symbolSize: 5, //图标大小
// },
// lineStyle: {
// normal: {
// color: '#1DE9B6',
// /* function (value){ //随机颜色
//
// ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
// '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
// '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
// '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
// '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
// '#52b9c7','#4fb6d2','#4ab2e5']
// return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
// }*/
// width: 1, //线条宽度
// opacity: 0.1, //尾迹线条透明度
// curveness: 0.3, //尾迹线条曲直度
// },
// },
// data: [
// {
// coords: [
// [117.4219, 39.4189],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#f58414',
// },
// },
// {
// coords: [
// [112.3352, 37.9413],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#f58f0e',
// },
// },
// {
// coords: [
// [103.5901, 36.3043],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#e7ab0b',
// },
// },
// {
// coords: [
// [106.3586, 38.1775],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#dfae10',
// },
// },
// {
// coords: [
// [103.9526, 30.7617],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [108.37, 22.82],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [113.23, 23.16],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [107.13, 34.37],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [109.48, 36.6],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [113.62, 34.75],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// {
// coords: [
// [105.7314, 34.5874],
// [109.1162, 34.2004],
// ],
// lineStyle: {
// color: '#c1bb1f',
// },
// },
// ],
// },
],
};
export const getOption = () => {
return option;
};
src/views/qh/hooks/twoLeft.ts
+371
View File
@@ -0,0 +1,371 @@
import 'echarts-gl';
export function getPie3D(pieData, internalDiameterRatio) {
//internalDiameterRatio:透明的空心占比
let series = [];
let sumValue = 0;
let startValue = -5;
let endValue = 0;
let legendData = [];
let legendBfb = [];
let k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return a.value - b.value;
});
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
center: ['10%', '50%'],
};
if (typeof pieData[i].itemStyle != 'undefined') {
let itemStyle = {};
typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
legendData = [];
legendBfb = [];
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
let bfb = formatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb,
});
legendBfb.push({
name: series[i].name,
value: bfb,
});
}
let boxHeight = getHeight3D(series, 30); //通过传参设定3d饼/环的高度，26代表26px
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
legend: {
data: legendData,
orient: 'vertical',
right: '12%',
top: '42%',
itemGap: 10,
textStyle: {
color: '#A1E2FF',
},
show: true,
formatter: function (param) {
let item = legendBfb.filter((item) => item.name == param)[0];
let bfs = formatFloat(item.value * 100, 2) + '%';
return `${item.name} ${bfs}`;
},
},
labelLine: {
show: true,
lineStyle: {
color: '#7BC0CB',
},
},
// label: {
// show: true,
// position: 'inner',
// rich: {
// a: {
// color: 'red',
// fontSize: 12,
// lineHeight: 20,
// },
// c: {
// fontSize: 16,
// },
// },
// formatter: '{b|{b} \n}{c|{c}}{b| 亩}',
// },
tooltip: {
formatter: (params) => {
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
return (
`${params.seriesName}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${bfb}%`
);
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 3.5,
},
grid3D: {
show: false,
boxHeight: boxHeight, //圆环的高度
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 40, //角度
distance: 270, //调整视角到主体的距离，类似调整zoom
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
return option;
}
//获取3d丙图的最高扇区的高度
function getHeight3D(series, height) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
return (height * 25) / series[0].pieData.value;
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.03 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
function formatFloat(num, n) {
let f = parseFloat(num);
if (isNaN(f)) {
return false;
}
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
let s = f.toString();
let rs = s.indexOf('.');
//判定如果是整数，增加小数点再补0
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + n) {
s += '0';
}
return s;
}
export function bindListen(myChart, option) {
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
let selectedIndex = '';
let hoveredIndex = '';
// 监听点击事件，实现选中效果（单选）
// myChart.on('click', function (params) {
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
// let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
// let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
// let k = option.series[params.seriesIndex].pieStatus.k;
// let startRatio = option.series[params.seriesIndex].pieData.startRatio;
// let endRatio = option.series[params.seriesIndex].pieData.endRatio;
// // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
// if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
// option.series[selectedIndex].parametricEquation = getParametricEquation(
// option.series[selectedIndex].pieData.startRatio,
// option.series[selectedIndex].pieData.endRatio,
// false,
// false,
// k,
// option.series[selectedIndex].pieData.value
// );
// option.series[selectedIndex].pieStatus.selected = false;
// }
// // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
// option.series[params.seriesIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k,
// option.series[params.seriesIndex].pieData.value
// );
// option.series[params.seriesIndex].pieStatus.selected = isSelected;
// // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
// isSelected ? (selectedIndex = params.seriesIndex) : null;
// // 使用更新后的 option，渲染图表
// myChart.setOption(option);
// });
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on('mouseover', function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
});
// 修正取消高亮失败的 bug
myChart.on('globalout', function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
}
src/views/qh/hooks/twoRight.ts
+44
View File
@@ -0,0 +1,44 @@
export const getOption = (dx: any, dy: any) => {
return {
grid: {
left: '60',
},
xAxis: {
axisTick: {
show: false,
lineStyle: {
color: '#000000',
},
},
type: 'category',
data: dx,
},
yAxis: {
splitLine: {
show: true,
lineStyle: {
color: 'red',
width: 1,
type: 'soild',
},
},
interval: 25, // 步长
min: 0, // 起始 - 设置y轴刻度的最小值
max: 100, // 终止 - 设置y轴刻度的最大值
type: 'value',
axisLabel: {
color: '#ffffff',
formatter: function (value, index) {
return value + (index === 0 ? '' : '%');
},
},
},
series: [
{
data: dy,
type: 'bar',
barWidth: 10,
},
],
};
};
src/views/qh/qScreen.vue
+238
View File
@@ -0,0 +1,238 @@
<template>
<div class="qh-outer-d">
<div class="qh-title-d">
<div>
<div>
{{ dateInfo?.day }}
</div>
<div>
{{ dateInfo?.times }}
</div>
</div>
<div> 青海油田员工健康服务数据看板 </div>
<div>
{{ rightDate }}
</div>
</div>
<div class="qh-body-d">
<div class="qh-body-d-left">
<one-left :title="titleInfo?.oneLeft" />
<two-left :title="titleInfo?.twoLeft" />
<three-left :title="titleInfo?.threeLeft" />
</div>
<div class="qh-body-d-middle">
<div>
<div>
<div class="people-num">930</div>
<div class="people-num-des">累计咨询总人数（人）</div>
</div>
<div>
<div class="people-num">265</div>
<div class="people-num-des">累计应急总人数（人）</div>
</div>
</div>
<middle-d />
</div>
<div class="qh-body-d-right">
<one-right :title="titleInfo?.oneRight" />
<two-right :title="titleInfo?.twoRight" />
<three-right :title="titleInfo?.threeRight" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { onMounted, ref, watch, onBeforeUnmount } from 'vue';
import OneLeft from '/@/views/qh/components/oneLeft.vue';
import TwoLeft from '/@/views/qh/components/twoLeft.vue';
import ThreeLeft from '/@/views/qh/components/threeLeft.vue';
import OneRight from '/@/views/qh/components/oneRight.vue';
import TwoRight from '/@/views/qh/components/twoRight.vue';
import ThreeRight from '/@/views/qh/components/threeRight.vue';
import MiddleD from '/@/views/qh/components/middleD.vue';
const titleInfo = ref({
oneLeft: '最新咨询记录',
twoLeft: '就医科室占比',
threeLeft: '最新咨询记录',
oneRight: '最新咨询记录',
twoRight: '最新咨询记录',
threeRight: '最新咨询记录',
});
const dateInfo = ref<object>({});
const rightDate = ref<string>('');
const qhInterval = ref<any>();
onMounted(() => {
getTime();
qhInterval.value = setInterval(() => {
getTime();
}, 1000);
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
});
onBeforeUnmount(() => {
if (qhInterval.value) clearInterval(qhInterval.value);
});
const getTime = () => {
dateInfo.value = {
day: dayjs().format('YYYY年MM月DD日'),
times: dayjs().format('HH:mm:ss'),
};
};
watch(
() => dateInfo.value.day,
() => {
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
}
);
</script>
<style scoped lang="less">
@import './style/index.less';
.qh-outer-d {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0 20px;
background: #010b15;
.qh-title-d {
color: #ffffff;
height: 80px;
display: flex;
align-items: center;
padding: 0 30px;
> div {
flex: 1;
&:nth-child(1),
&:nth-child(3) {
font-size: 27px;
}
&:nth-child(2) {
font-size: 40px;
text-align: center;
}
&:nth-child(1) {
display: flex;
justify-content: flex-start;
> div {
&:nth-child(1) {
margin-right: 10px;
}
&:nth-child(2) {
padding: 0 15px;
position: relative;
&:before {
position: absolute;
height: 60%;
top: 20%;
left: 0;
width: 1px;
background: #000000;
content: '';
}
&:after {
position: absolute;
height: 60%;
top: 20%;
right: 0;
width: 1px;
background: #000000;
content: '';
}
}
}
}
&:nth-child(3) {
text-align: right;
}
}
}
.qh-body-d {
flex: 1;
display: flex;
padding-bottom: 10px;
> div {
&:nth-child(1),
&:nth-child(3) {
width: 25%;
}
&:nth-child(2) {
width: 50%;
}
}
}
.qh-body-d-left,
.qh-body-d-right {
display: flex;
flex-direction: column;
> div {
flex: 1;
padding: 0 0 0;
}
}
.qh-body-d-left,
.qh-body-d-right {
> div {
padding-bottom: 25px !important;
}
}
.qh-body-d-middle {
padding: 0 20px;
display: flex;
flex-direction: column;
position: relative;
.people-num {
font-size: 30px;
font-weight: bold;
}
.people-num-des {
padding-top: 5px;
font-size: 20px;
}
> div {
&:nth-child(1) {
position: absolute;
width: 100%;
left: 0;
top: 100px;
display: flex;
justify-content: center;
> div {
color: #ffffff;
font-size: 18px;
text-align: center;
padding: 20px 30px;
background: red;
&:nth-child(1) {
margin: 50px 100px 0 0;
}
&:nth-child(2) {
margin: 50px 0 0 100px;
}
}
}
&:nth-child(2) {
flex: 1;
}
}
}
}
</style>
src/views/qh/style/index.less
+21
View File
@@ -0,0 +1,21 @@
.qh-item-d {
display: flex;
flex-direction: column;
justify-content: space-between;
.qh-son-title {
font-size: 30px;
padding: 10px;
color: #ffffff;
}
> div {
&:nth-child(1) {
background: linear-gradient(to right, #0b3d50 0% , #021a24 100% );
}
&:nth-child(2) {
background: #071d34;
flex: 1
}
}
}
src/views/qh/utils.ts
View File
src/views/sys/login.vue
+13 -7
View File
@@ -191,11 +191,13 @@
try { try {
let { code, result, message: msg } = await getAuth(); let { code, result, message: msg } = await getAuth();
let centerInfo = {}; let centerInfo = {};
try { if(route.path !== PageEnum.Q_SCREEN_LOGIN) {
let { result } = await getEmergencyCenterApi(); try {
centerInfo = result; let { result } = await getEmergencyCenterApi();
userStore.setCenterInfo(centerInfo); centerInfo = result;
} catch (e) {} userStore.setCenterInfo(centerInfo);
} catch (e) {}
}
let goPath = PageEnum.BASE_HOME; let goPath = PageEnum.BASE_HOME;
if (code == 200) { if (code == 200) {
@@ -204,19 +206,23 @@
let flag3 = let flag3 =
result?.codeList?.find((item: any) => ['emergency:screen:show:centralScreen'].includes(item)) || result?.codeList?.find((item: any) => ['emergency:screen:show:centralScreen'].includes(item)) ||
userInfo?.roleCodes.split(',').findIndex((item: any) => item === 'large_screen' || item === 'large_screen_admin') > -1; userInfo?.roleCodes.split(',').findIndex((item: any) => item === 'large_screen' || item === 'large_screen_admin') > -1;
let flag4 = result?.codeList?.find((item: any) => ['emergency:screen:show:qinghai'].includes(item));
userStore.setFlag1(flag1 || ''); userStore.setFlag1(flag1 || '');
userStore.setFlag2(flag2 || ''); userStore.setFlag2(flag2 || '');
userStore.setFlag3(flag3 || ''); userStore.setFlag3(flag3 || '');
userStore.setFlag4(flag4 || '');
if (!flag1 && !flag2 && !flag3) { if (!flag1 && !flag2 && !flag3) {
userStore.setToken(''); userStore.setToken('');
userStore.setUserInfo({}); userStore.setUserInfo({});
userStore.setCenterInfo({}); userStore.setCenterInfo({});
return message.warn('您没有权限访问大屏，请联系管理员！'); return message.warn('您没有权限访问大屏，请联系管理员！');
} }
//1如果有权限 //1如果有权限 2025-06-16补充判断，如果登陆路由为qLogin 青海登陆，则不走原有逻辑
//1.2若果是有两种权限 //1.2若果是有两种权限
// debugger; // debugger;
if (flag1 && flag2) { if(route.path === PageEnum.Q_SCREEN_LOGIN && flag4) {
goPath = PageEnum.Q_SCREEN;
} else if (flag1 && flag2) {
// 1.2.1 如果是登录地址是西安 // 1.2.1 如果是登录地址是西安
// 1.2.2 如果是登录地址是银川 // 1.2.2 如果是登录地址是银川
if (route.path == PageEnum.BASE_LOGIN_YINCHUAN) { if (route.path == PageEnum.BASE_LOGIN_YINCHUAN) {