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>
|
||||
<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>
|
||||
<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