Skip to content

R
rongtong-pc
Commit cde37b70 authored by kaitly205422@163.com's avatar kaitly205422@163.com
Browse files
Options

大屏调整

parent 55c25562
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 201 deletions
package.json
View file @ cde37b70
......@@ -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/views/map/map-index.vue
View file @ cde37b70
......@@ -7,12 +7,13 @@
<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-num">
<div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></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>
......@@ -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
View file @ cde37b70
......@@ -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]: "",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment