update
1.青海大屏
This commit is contained in:
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/screen.svg"/>
|
||||
|
||||
+2
-1
@@ -19,6 +19,8 @@
|
||||
"autoprefixer": "^10.4.16",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
@@ -42,7 +44,6 @@
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"ant-design-vue": "^3.2.20",
|
||||
"echarts": "^5.4.3",
|
||||
"eslint": "^8.51.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint-define-config": "^1.24.1",
|
||||
|
||||
@@ -6,8 +6,10 @@ export enum PageEnum {
|
||||
BASE_LOGIN_YINCHUAN = '/screenLogin',
|
||||
// centralScreenLogin
|
||||
CENTRAL_SCREEN_LOGIN = '/centralScreenLogin',
|
||||
Q_SCREEN_LOGIN = '/qLogin',
|
||||
YINCHUAN_HOME = '/yinChuanHome',
|
||||
CENTRAL_SCREEN = '/centralScreen',
|
||||
Q_SCREEN = '/qScreen',
|
||||
}
|
||||
|
||||
export function setBaseLogin(baseLogin) {
|
||||
|
||||
@@ -99,6 +99,24 @@ const routes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
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({
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@ export const useUserStore = defineStore({
|
||||
flag1: '', //银川权限标识
|
||||
flag2: '', //西安权限标识
|
||||
flag3: '', //新版大屏标识
|
||||
flag4: '', //青海大屏标识
|
||||
centerId: '', //中心点id
|
||||
centerInfo: null, //应急中心信息
|
||||
count: 0,
|
||||
@@ -45,6 +46,9 @@ export const useUserStore = defineStore({
|
||||
getFlag3(): string {
|
||||
return this.flag3 || getAuthCache('flag3');
|
||||
},
|
||||
getFlag4(): string {
|
||||
return this.flag4 || getAuthCache('flag4');
|
||||
},
|
||||
getCenterId(): string {
|
||||
return this.centerId || getAuthCache('centerId');
|
||||
},
|
||||
@@ -83,6 +87,10 @@ export const useUserStore = defineStore({
|
||||
this.flag3 = info ? info : '';
|
||||
setAuthCache('flag3', info);
|
||||
},
|
||||
setFlag4(info: string | undefined) {
|
||||
this.flag4 = info ? info : '';
|
||||
setAuthCache('flag4', info);
|
||||
},
|
||||
setCenterId(info: string | undefined) {
|
||||
this.centerId = info ? info : '';
|
||||
setAuthCache('centerId', info);
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
};
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -191,11 +191,13 @@
|
||||
try {
|
||||
let { code, result, message: msg } = await getAuth();
|
||||
let centerInfo = {};
|
||||
if(route.path !== PageEnum.Q_SCREEN_LOGIN) {
|
||||
try {
|
||||
let { result } = await getEmergencyCenterApi();
|
||||
centerInfo = result;
|
||||
userStore.setCenterInfo(centerInfo);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
let goPath = PageEnum.BASE_HOME;
|
||||
if (code == 200) {
|
||||
@@ -204,19 +206,23 @@
|
||||
let flag3 =
|
||||
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;
|
||||
let flag4 = result?.codeList?.find((item: any) => ['emergency:screen:show:qinghai'].includes(item));
|
||||
userStore.setFlag1(flag1 || '');
|
||||
userStore.setFlag2(flag2 || '');
|
||||
userStore.setFlag3(flag3 || '');
|
||||
userStore.setFlag4(flag4 || '');
|
||||
if (!flag1 && !flag2 && !flag3) {
|
||||
userStore.setToken('');
|
||||
userStore.setUserInfo({});
|
||||
userStore.setCenterInfo({});
|
||||
return message.warn('您没有权限访问大屏，请联系管理员！');
|
||||
}
|
||||
//1如果有权限
|
||||
//1如果有权限 2025-06-16补充判断，如果登陆路由为qLogin 青海登陆，则不走原有逻辑
|
||||
//1.2若果是有两种权限
|
||||
// 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.2 如果是登录地址是银川
|
||||
if (route.path == PageEnum.BASE_LOGIN_YINCHUAN) {
|
||||
|
||||
Reference in New Issue
Block a user