loveflow
1 year ago
parent
d6cbeefb1c
commit
b2264adab5
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
lineObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
this.option = {
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
bottom: "10%",
|
||||||
|
left: "6%",
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: this.lineObj.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 12,
|
||||||
|
//interval: 0,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#6C8097",
|
||||||
|
fontSize: 12,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.lineObj.name,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
color: "#5ED0A3",
|
||||||
|
data: this.lineObj.yData,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#66E1DF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: " rgba(0,89,84,0)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "外圆",
|
||||||
|
type: "scatter",
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
symbol: "roundRect",
|
||||||
|
symbolSize: [26, 4], // 进度条白点
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
barBorderRadius: [10, 10, 10, 10],
|
||||||
|
color: "#FFF",
|
||||||
|
shadowColor: "rgba(255, 255, 255, 1)",
|
||||||
|
shadowBlur: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
z: 2,
|
||||||
|
data: this.lineObj.yData,
|
||||||
|
animationDelay: 500,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,3 +1,207 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>风险分析</div>
|
<div class="riskWrap">
|
||||||
|
<div class="riskRow mb18">
|
||||||
|
<div class="riskCol leftCol mr18">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">风险监测项评分排行</div>
|
||||||
|
</div>
|
||||||
|
<div class="chartPanel">
|
||||||
|
<div class="chartOpt">
|
||||||
|
<div
|
||||||
|
@click="changeTime('day')"
|
||||||
|
:class="{ active: curTime == 'day' }"
|
||||||
|
>
|
||||||
|
当日
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click="changeTime('month')"
|
||||||
|
:class="{ active: curTime == 'month' }"
|
||||||
|
>
|
||||||
|
近三月
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click="changeTime('year')"
|
||||||
|
:class="{ active: curTime == 'year' }"
|
||||||
|
>
|
||||||
|
本年度
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<barOne :lineObj="tlObj"></barOne>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="riskCol midCol mr18">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">频繁变化风险监测信息近一年变化趋势图</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="riskCol rightCol">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">异常风险项得分占比</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="riskRow">
|
||||||
|
<div class="riskCol leftCol mr18">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">风险标签排行</div>
|
||||||
|
</div>
|
||||||
|
<div class="chartPanel">
|
||||||
|
<barOne :lineObj="blObj"></barOne>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="riskCol midCol mr18">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">风险总量分析变化趋势图</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="riskCol rightCol">
|
||||||
|
<div class="riskName">
|
||||||
|
<div class="riskIcon"></div>
|
||||||
|
<div class="riskNameText">风险标签排行</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import barOne from "@/loveflow/components/echart/bar/one.vue";
|
||||||
|
export default {
|
||||||
|
components: { barOne },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
curTime: "day",
|
||||||
|
tlObj: {
|
||||||
|
xData: [
|
||||||
|
"流动人员",
|
||||||
|
"重点人员",
|
||||||
|
"违章事故",
|
||||||
|
"源头检查",
|
||||||
|
"企业整改",
|
||||||
|
"危险化学品",
|
||||||
|
"民爆物品",
|
||||||
|
],
|
||||||
|
yData: [12, 13, 14, 15, 11, 14],
|
||||||
|
name: "风险监测项评分排行",
|
||||||
|
},
|
||||||
|
blObj: {
|
||||||
|
xData: [
|
||||||
|
"人员安全",
|
||||||
|
"危化品运输",
|
||||||
|
"防攻击管理",
|
||||||
|
"消防安全",
|
||||||
|
"列管物品",
|
||||||
|
"道路安全",
|
||||||
|
"内部治安",
|
||||||
|
"网络安全",
|
||||||
|
],
|
||||||
|
yData: [12, 11, 13, 14, 15, 11, 14, 12],
|
||||||
|
name: "风险标签排行",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTime(val) {
|
||||||
|
this.curTime = val;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.riskWrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.riskRow {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
.riskCol {
|
||||||
|
background: url("~@/assets/images/screen/line.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.chartPanel {
|
||||||
|
position: relative;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.chartOpt {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 12;
|
||||||
|
right: 5%;
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 68px;
|
||||||
|
height: 30px;
|
||||||
|
color: #8fabbf;
|
||||||
|
font-size: 14px;
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(122, 163, 204, 0.3) 0%,
|
||||||
|
rgba(122, 163, 204, 0) 100%
|
||||||
|
);
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
#3cc7b0 0%,
|
||||||
|
rgba(51, 204, 204, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
color: #ffffff;
|
||||||
|
border-bottom: solid 2px #33cccc;
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(60, 199, 176, 0.3) 0%,
|
||||||
|
rgba(51, 204, 204, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rightCol {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.midCol {
|
||||||
|
flex: 1.4;
|
||||||
|
margin-right: 18px;
|
||||||
|
}
|
||||||
|
.leftCol {
|
||||||
|
flex: 1.2;
|
||||||
|
margin-right: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.riskCol {
|
||||||
|
padding-left: vw(8);
|
||||||
|
font-size: vh(16);
|
||||||
|
|
||||||
|
.riskName {
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: vh(6);
|
||||||
|
color: #d9e7ff;
|
||||||
|
|
||||||
|
.riskIcon {
|
||||||
|
width: vw(24);
|
||||||
|
height: vh(24);
|
||||||
|
background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue