大屏调整 (cde37b70) · Commits · 融通安全管理系统 / rongtong-pc · GitLab

package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -42,6 +42,7 @@
		"axios": "0.24.0",
		"clipboard": "2.0.8",
		"core-js": "3.25.3",
		"d3": "^7.8.5",
		"echarts": "5.4.0",
		"echarts-gl": "^2.0.9",
		"element-ui": "2.15.13",

src/assets/map/content-assess-bottom.jpg

0 → 100644

+15.8 KiB

Loading image diff...

src/views/map/map-index.vue

+207 −199

Original line number	Diff line number	Diff line
		@@ -7,13 +7,14 @@
		<div :class="{ 'active': accessType == 0 }" @click="accessType = 0">评估</div>
		<div :class="{ 'active': accessType == 1 }" @click="accessType = 1">巡查</div>
		</div>
		<div v-for="(item, index) in accessData" :key="item" style="width: 30%; display: inline-block"
		class="content-assess-item">
		<div class="content-assess-title">{{ item.name }}</div>
		<div :id="'leftTop' + index" style="height: 95px;" class="content-assess-echarts"></div>
		<div class="content-assess-group">
		<div v-for="(item, index) in accessData" :key="item" class="content-assess-item">
		<span class="snow" v-for="item in 20" :key="item" :style="random()"></span>
		<div class="content-assess-num">
		<div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></div>
		</div>
		<div class="content-assess-title"><span>{{ item.name }}</span></div>
		</div>
		</div>
		</map-item-container>
		<map-item-container title="总体风险指数排名">
		@@ -56,16 +57,9 @@
		<highcharts :options="levelStaticOptions" :updateArgs="[false, true]" class="level-static">
		</highcharts>
		</map-item-container>
		<map-item-container title="事故类型统计">
		<div class="echarts-accident" id="circleEchart">
		<div v-for="(item, index) in accidentEchartsList" :data-group="item.g" :key="item.typeName" :style="[{
		'--width': item.w + 'px',
		'--left': item.l + 'px',
		'--top': item.t + 'px',
		'--bg-color': getColors(index % 5)
		}]">
		<span>{{ item.typeName }}</span>
		</div>
		<map-item-container title="事故类型统计" id="accident">
		<div class="echarts-accident">
		<div id="circleEchart"></div>
		</div>
		</map-item-container>
		<map-item-container title="项目风险级别排名">
		@@ -97,6 +91,7 @@ import axios from "axios";
		import { mapTable, mapItemContainer, echartMap } from "./components/index";
		import Highcharts from 'highcharts'
		import { leftEvaluation, centerStatistic, leftRiskSort, leftAnnualSort, rightlevelStatic, rightAccessLevel, rightAccidentType, centerMap } from '@/api/map'
		import * as d3 from 'd3';
		export default {
		name: "echarts",
		components: {
		@@ -119,7 +114,7 @@ export default {
		return {
		accessType: 0,
		assessLevelType: 0,
		assessLevelColors: [[227, 101, 88], [215, 162, 92], [108, 203, 137], [68, 150, 245], [139, 61, 241]],
		assessLevelColors: [[215, 162, 92], [108, 203, 137]],
		assessEchartsOptions: {
		series: [
		{
		@@ -343,61 +338,6 @@ export default {
		},
		],
		},
		// annualOptions: {
		// // 直角坐标系内绘图网格,设置组件距离容器的距离
		// grid: {
		// left: 50,
		// top: 50,
		// right: 50,
		// bottom: 50
		// },
		// // 设置鼠标移入的提示，默认显示
		// tooltip: {},
		// // 设置图例
		// legend: {
		// textStyle: {
		// color: '#999'
		// }
		// },
		// // 设置x轴
		// xAxis: {
		// data: [],
		// // 显示x轴
		// axisLine: {
		// show: true
		// },
		// // 设置x轴的颜色和偏移量
		// axisLabel: {
		// color: '#999',
		// rotate: 0
		// },
		// // 不显示x轴刻度
		// axisTick: {
		// show: false
		// }
		// },
		// // 设置y轴
		// yAxis: {
		// // 显示y轴
		// axisLine: {
		// show: true
		// },
		// // 设置y轴的颜色
		// axisLabel: {
		// color: '#999',
		// },
		// // 不显示y轴刻度
		// axisTick: {
		// show: false
		// },
		// // 不显示分隔线
		// splitLine: {
		// show: false
		// }
		// },
		// 表示不同系列的列表
		// series: []
		// },
		areaName: "",
		colums: [
		{
		@@ -443,6 +383,20 @@ export default {
		}
		},
		methods: {
		random() {
		const x = Math.random() * 100 + 10;
		const y = Math.random() * 30 + 20;
		const size = Math.random() * 3 + 1;
		const opacity = Math.random();
		const duration = Math.random() * 5 + 5;
		return {
		'--snow-x': x + 'px',
		'--snow-y': y + 'px',
		'--snow-s': size + 'px',
		'--snow-o': opacity,
		"--snow-d": duration + 's'
		}
		},
		getMapData(id, name) {
		centerMap({
		level: this.level,
		@@ -454,10 +408,10 @@ export default {
		})
		},
		getColors(index) {
		return this.assessLevelColors[index]?.join(',') \|\| '227, 101, 88'
		return this.assessLevelColors[index % 2]?.join(',') \|\| '227, 101, 88'
		},
		getColors1(index) {
		return this.assessLevelColors[index].map((x, index) => index == 1 ? x : x + 50).join(',') \|\| '227, 101, 88'
		return this.assessLevelColors[index % 2].map((x, index) => index == 1 ? x : x + 50).join(',') \|\| '227, 101, 88'
		},
		initAll() {
		this.getAssess()
		@@ -495,8 +449,8 @@ export default {
		layout: "vertical",
		floating: true,
		align: 'right',
		verticalAlign: 'top',
		itemMarginTop: 10,
		verticalAlign: 'middle',
		itemMarginBottom: 10,
		itemMarginLeft: 20,
		itemStyle: {
		color: "#fff"
		@@ -516,7 +470,8 @@ export default {
		showInLegend: true,
		dataLabels: {
		enabled: false
		}
		},
		center: ['35%', '50%']
		}
		},
		series: [{
		@@ -531,7 +486,7 @@ export default {
		this.accessData.forEach(val => {
		val.count = res.data[val.key + 'Num']
		})
		this.assessEcharts();
		// this.assessEcharts();
		})
		},
		assessEcharts() {
		@@ -552,25 +507,97 @@ export default {

		accidentType() {
		rightAccidentType({ areaName: this.areaName, type: '' }).then(res => {
		this.accidentEchartsList = res.data.slice(0, 11);
		const maxNum = res.data[0].typeNum;
		const max = 80, min = 40;
		let group = 0, groupW = 0, groupH = 0;
		const groupList = [[]];
		this.accidentEchartsList.forEach(val => {
		val.g = group;
		val.l = group == 0 ? 140 : groupW;
		val.w = Math.max(max * val.typeNum / maxNum, min);
		val.t = groupH;
		groupW += (val.w + (Math.random() * 10))
		groupList[group].push(val)
		if (groupW > 300 \|\| group == 0) {
		group++;
		groupW = (3 - group) * 20
		groupH = group == 0 ? val.w : Math.max.apply(null, groupList[group - 1].map(x => x.t + x.w))
		groupList[group] = []
		const max = 60, min = 20;
		// 使用D3.js库中的circlePack布局
		const ele = document.querySelector('#accident')
		console.log(ele.offsetWidth);
		const containerWidth = ele.offsetWidth, containerHeight = ele.offsetHeight + 40;
		const circles = res.data.map(x => {
		return {
		radius: Math.max(max * x.typeNum / maxNum, min),
		name: x.typeName,
		num: x.typeNum
		}
		});

		const pack = d3.pack()
		.size([containerWidth, containerHeight])
		.padding(10); // 可选项，设置圆之间的间距

		const root = d3.hierarchy({ children: circles })
		.sum(d => d.radius * 2); // 根据圆的直径来计算面积

		pack(root);
		// 渲染结果
		const svg = d3.select("#circleEchart")
		.append("svg")
		.attr("width", containerWidth)
		.attr("height", containerHeight);

		const groupElements = svg.selectAll("g")
		.data(root.descendants().slice(1))
		.enter()
		.append("g")
		.attr('class', (d, i) => {
		return 'g'
		})
		.attr("transform", d => `translate(${d.x}, ${d.y})`)

		const d3Color = ['#5e63be', '#3779b3', '#5d3437', '#646f43', '#310b6a', '#8d6b46', '#061097', '#5f8c5d'];
		groupElements.append("circle")
		.attr("r", d => d.r)
		.attr("fill-opacity", 0.8)
		.attr("fill", (d, index) => d3Color[index % d3Color.length])

		// // // 添加文本元素
		const text = groupElements.append("text")
		.style("text-anchor", "middle")
		.style("dominant-baseline", "middle")
		.style("fill", "white") // 设置文本颜色
		.style('font-size', '12px')

		// tspan
		text.append("tspan")
		.attr("x", 0)
		.attr("y", '-0.3em')
		.text(d => d.data.name);
		text.append("tspan")
		.attr("x", 0)
		.attr("y", '1em')
		.text(d => d.data.num);
		// var textLabels = groupElements.append("text")
		// .attr("x", function (d) { return d.x; })
		// .attr("y", function (d) { return d.y; })
		// .style("text-anchor", "middle")
		// .style("dominant-baseline", "middle")
		// .style("font-size", "12px")
		// .style("fill", "white")
		// .text(function (d) {
		// return [d.data.name, d.data.num].map(function (line, index) {
		// return "<tspan x='0' dy='" + (index ? "1.2em" : "0") + "'>" + 111222 + "</tspan>";
		// }).join("");
		// });


		let run = () => {
		groupElements.transition()
		.duration(() => {
		return Math.floor(Math.random() * 3 + 2) * 100
		})
		.ease(d3.easeLinear)
		.style("transform", (d, i) => `translate(${d.x}px, ${d.y + 3}px)`)
		.transition()
		.duration(300)
		.ease(d3.easeLinear)
		.style("transform", (d, i) => `translate(${d.x}px, ${d.y - 3}px)`)
		.transition()
		.on('end', (d) => {
		groupElements.style("transform", (d, i) => `translate(${d.x}px, ${d.y - 3}px)`)
		run()
		})
		}
		run()
		})
		},

		@@ -592,86 +619,6 @@ export default {
		bar.setOption(this.annualOptions)
		})
		},
		initDta(xData, yData) {
		// 设置顶部和底部的值
		let symbolData = [], newShadowHight = []
		let heights = 0
		yData.forEach(item => {
		symbolData.push(1)
		heights += item
		})
		newShadowHight = yData.map(item => heights)
		options.xAxis.data = xData
		options.series = [
		// 底部
		{
		z: 2,
		type: 'pictorialBar',
		symbol: 'diamond',
		symbolOffset: ['0%', '50%'],
		symbolSize: [30, 12],
		toolltip: {
		show: false
		},
		itemStyle: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
		},
		data: symbolData, // [1,1,1,1,1]
		},
		// 内容区域
		{
		z: 1,
		type: 'bar',
		barWidth: 30,
		data: yData
		},
		// 内容的顶部
		{
		z: 3,
		type: 'pictorialBar',
		symbol: 'diamond',
		symbolPosition: 'end',
		symbolOffset: ['0%', '-50%'],
		symbolSize: [30, 12],
		toolltip: {
		show: false
		},
		itemStyle: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
		},
		data: yData,
		},
		// 阴影区域
		{
		z: 0,
		type: 'bar',
		barWidth: 30,
		data: newShadowHight, // [400, 400, 400, 400, 400]
		itemStyle: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#9cc1ff' }, { offset: 1, color: '#ecf5ff' }])
		}
		}
		, // 阴影的顶部
		{
		z: 3,
		type: 'pictorialBar',
		symbol: 'diamond',
		symbolPosition: 'end',
		symbolOffset: ['0%', '-50%'],
		symbolSize: [30, 12],
		toolltip: {
		show: false
		},
		itemStyle: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
		},
		data: newShadowHight,
		}
		]

		// 设置配置项
		bar.setOption(options)
		},
		assessLevel() {
		rightAccessLevel({ areaName: this.areaName, level: this.assessLevelType, type: '' }).then(res => {
		this.terminalList = res.data
		@@ -1237,11 +1184,30 @@ export default {
		&-left-wrap {
		margin-left: 20px;
		height: 100%;

		.map-content-item:first-child,
		.map-content-item:last-child {
		width: 110%;
		}

		.map-content-item:first-child {
		height: 25%;
		}

		.map-content-item:nth-of-type(2) {
		height: 40%;
		}
		}

		&-right-wrap {
		margin-right: 40px;
		height: 100%;

		.map-content-item:first-child,
		.map-content-item:last-child {
		width: 110%;
		transform: translateX(-10%);
		}
		}
		}

		@@ -1328,6 +1294,18 @@ export default {
		animation: circleAnimation 1.2s infinite;
		}

		@keyframes snow {
		0% {
		opacity: var(--snow-o);
		top: var(--snow-y);
		}

		100% {
		opacity: 0;
		top: 80%;
		}
		}

		@keyframes circleAnimation {
		0% {
		transform: translateY(0);
		@@ -1349,38 +1327,64 @@ export default {
		// 评估数据
		.content-assess-item {
		display: inline-block;
		width: 40%;
		text-align: center;
		width: 30%;
		height: 100%;
		background: url("../../assets/map/content-assess-bottom.jpg") center center no-repeat;
		background-size: 85%;
		position: relative;
		overflow: hidden;

		.snow {
		display: flex;
		width: var(--snow-s);
		height: var(--snow-s);
		background: #fff;
		position: absolute;
		animation: snow var(--snow-d) ease-in infinite;
		top: var(--snow-y);
		left: var(--snow-x);
		opacity: var(--snow-o);
		border-radius: 50%;
		}


		.content-assess-title {
		height: 60px;
		width: 100%;
		background: url("../../assets/map/content-assess-title.png") center center;
		background-size: 100% 100%;
		text-align: center;
		line-height: 60px;
		color: #fff;
		font-weight: bold;
		font-size: 12px;
		font-size: 13px;
		color: #48aefb;

		span {
		background-image: -webkit-linear-gradient(bottom, #fff 20%, #aaa 60%, #fff 20%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		}
		}

		.content-assess-echarts {}

		.content-assess-num {
		width: 100%;
		height: 30px;
		margin: 0 auto;
		background: url("../../assets/map/content-assess-bottom.png") center bottom;
		background-size: 100% 100%;
		font-size: 22px;
		color: #48aefb;
		font-size: 21px;
		position: relative;
		margin-top: 15%;

		&-txt {
		font-weight: bolder;
		background-image: -webkit-linear-gradient(bottom, #eee, #eee, #8dc4ff, #eee, #eee);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
		transform: translateY(-20px);
		}
		}

		}

		.content-assess-group {
		height: 100%;
		display: flex;
		justify-content: space-around;
		}

		.content-assess-tab {
		@@ -1422,6 +1426,10 @@ export default {
		position: relative;
		text-align: center;

		#circleEchart {
		transform: translate(-2%, -15%);
		}

		>div {
		width: var(--width);
		height: var(--width);
		@@ -1439,16 +1447,16 @@ export default {
		// animation: pathAnimation 0.3s infinite;
		}

		>div:nth-of-type(2n) {
		animation: pathAnimation 0.6s infinite;
		}
		// >div:nth-of-type(2n) {
		// animation: pathAnimation 0.6s infinite;
		// }

		>div:nth-of-type(2n+1) {
		animation: pathAnimation 0.4s infinite;
		}
		// >div:nth-of-type(2n+1) {
		// animation: pathAnimation 0.4s infinite;
		// }

		>div:nth-of-type(3n) {
		animation: pathAnimation 0.3s ease-in-out infinite;
		}
		// >div:nth-of-type(3n) {
		// animation: pathAnimation 0.3s ease-in-out infinite;
		// }
		}
		</style>

vue.config.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -37,10 +37,10 @@ module.exports = {
		// detail: https://cli.vuejs.org/config/#devserver-proxy
		[process.env.VUE_APP_BASE_API]: {
		// target: "http://192.168.10.137:8080/",
		// target: `http://192.168.4.232:8080`, //服务器地址
		target: `http://192.168.4.232:8080`, //服务器地址
		// target: `http://192.168.15.230:8081`, //晓晋本地地址
		// target: `http://192.168.15.152:8081`, //鲍德本地地址
		target: `http://127.0.0.1:8080`, //本地地址
		// target: `http://127.0.0.1:8080`, //本地地址
		changeOrigin: true,
		pathRewrite: {
		["^" + process.env.VUE_APP_BASE_API]: "",