loveflow
7 months ago
parent
b2264adab5
commit
5bcc70f3b0
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 485 KiB |
|
After Width: | Height: | Size: 43 KiB |
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
this.option = {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
bottom: "10%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.chartObj.xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位：件",
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#6C8097",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
color: "#5ED0A3",
|
||||
data: this.chartObj.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.chartObj.yData,
|
||||
animationDelay: 500,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let seriesArr = [];
|
||||
|
||||
for (let i = 0; i < this.chartObj.legend.length; i++) {
|
||||
seriesArr.push({
|
||||
name: this.chartObj.legend[i],
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
symbolSize: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: this.chartObj.color[i][0], // 线条颜色
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: this.chartObj.color[i][1] },
|
||||
{ offset: 1, color: this.chartObj.color[i][2] },
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
data: this.chartObj.yData[i],
|
||||
});
|
||||
}
|
||||
|
||||
this.option = {
|
||||
legend: {
|
||||
data: this.chartObj.legend,
|
||||
icon: "rect",
|
||||
right: "5%",
|
||||
top: "2%",
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 8, // 设置高度
|
||||
itemGap: 16, // 设置间距
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
bottom: "10%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.chartObj.xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#6C8097",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: seriesArr,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
this.option = {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
bottom: "10%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.chartObj.xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#6C8097",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "line",
|
||||
smooth: false, //是否平滑曲线显示
|
||||
symbolSize: 8,
|
||||
showSymbol: true,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
shadowColor: "rgba(255,255,255,0.4)",
|
||||
shadowBlur: 6,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.chartObj.color[0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.chartObj.color[3],
|
||||
},
|
||||
]),
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: this.chartObj.color[1] },
|
||||
{ offset: 1, color: this.chartObj.color[2] },
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
data: this.chartObj.yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
this.option = {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
bottom: "10%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.chartObj.xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位：件",
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#6C8097",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#6C8097",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
symbolSize: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: this.chartObj.color[0], // 线条颜色
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: this.chartObj.color[1] },
|
||||
{ offset: 1, color: this.chartObj.color[2] },
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
data: this.chartObj.yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,3 +1,593 @@
|
||||
<template>
|
||||
<div>异常图表</div>
|
||||
<div class="abnormalWrap">
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">风险监测项评分排行</div>
|
||||
</div>
|
||||
<div class="riskTotal">
|
||||
<div>今日企业风险项量</div>
|
||||
<div class="totalText">10000</div>
|
||||
</div>
|
||||
<div class="chartPanel" style="height: calc(100% - 136px)">
|
||||
<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 :chartObj="tlObj"></barOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol rightCol">
|
||||
<div class="riskLine" v-for="(line, index) in dataList" :key="index">
|
||||
<div class="riskItem" v-for="item in line" :key="item.name">
|
||||
<div class="riskItemLeft">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskItemRight">
|
||||
<div class="riskItemName">{{ item.name }}</div>
|
||||
<div class="riskItemValue">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">流动人口管理异常</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineThree :chartObj="tmlObj"></lineThree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">人员背景审核异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineThree :chartObj="tmmObj"></lineThree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">重点岗位资质核查异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineThree :chartObj="tmrObj"></lineThree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">人员涉警(案)情况异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineTwo :chartObj="mtlObj"></lineTwo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">装卸量差异分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineTwo :chartObj="mtmObj"></lineTwo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">运输车辆背景异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineTwo :chartObj="mtrObj"></lineTwo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">运输车辆异常预警</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<barTwo :chartObj="mlObj"></barTwo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">驾驶员押运员资质异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<barTwo :chartObj="mmObj"></barTwo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">单位检查情况异常分析</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<barTwo :chartObj="mrObj"></barTwo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import barOne from "@/loveflow/components/echart/bar/one.vue";
|
||||
import barTwo from "@/loveflow/components/echart/bar/two.vue";
|
||||
import lineTwo from "@/loveflow/components/echart/line/two.vue";
|
||||
import lineThree from "@/loveflow/components/echart/line/three.vue";
|
||||
export default {
|
||||
components: { barOne, barTwo, lineTwo, lineThree },
|
||||
data() {
|
||||
return {
|
||||
curTime: "day",
|
||||
|
||||
dataList: [
|
||||
[
|
||||
{
|
||||
name: "流动人口管理异常",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/11.png"),
|
||||
},
|
||||
{
|
||||
name: "人员背景审核异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/12.png"),
|
||||
},
|
||||
{
|
||||
name: "重点岗位资质核查异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/13.png"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "人员涉警(案)情况异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/21.png"),
|
||||
},
|
||||
{
|
||||
name: "装卸量差异分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/22.png"),
|
||||
},
|
||||
{
|
||||
name: "运输车辆背景异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/23.png"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "运输车辆异常预警",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/31.png"),
|
||||
},
|
||||
{
|
||||
name: "驾驶员押运员资质异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/32.png"),
|
||||
},
|
||||
{
|
||||
name: "单位检查情况异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/33.png"),
|
||||
},
|
||||
],
|
||||
],
|
||||
|
||||
tlObj: {
|
||||
xData: [
|
||||
"人员安全",
|
||||
"危化品运输",
|
||||
"防攻击管理",
|
||||
"消防安全",
|
||||
"列管物品",
|
||||
"道路安全",
|
||||
"内部治安",
|
||||
"网络安全",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12],
|
||||
name: "风险标签排行",
|
||||
},
|
||||
tmlObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "流动人口管理异常",
|
||||
color: [
|
||||
"rgba(20,246,62,0.5)",
|
||||
"rgba(30,147,255,0)",
|
||||
"rgba(30,147,255,0.3)",
|
||||
"#1E93FF",
|
||||
],
|
||||
},
|
||||
tmmObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "人员背景审核异常分析",
|
||||
color: [
|
||||
"rgba(20,246,62,0.5)",
|
||||
"rgba(30,147,255,0)",
|
||||
"rgba(30,147,255,0.3)",
|
||||
"#1E93FF",
|
||||
],
|
||||
},
|
||||
tmrObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "重点岗位资质核查异常分析",
|
||||
color: [
|
||||
"rgba(20,246,62,0.5)",
|
||||
"rgba(30,147,255,0)",
|
||||
"rgba(30,147,255,0.3)",
|
||||
"#1E93FF",
|
||||
],
|
||||
},
|
||||
|
||||
mtlObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "人员涉警(案)情况异常分析",
|
||||
color: [
|
||||
"rgba(255,193,77,0.9)",
|
||||
"rgba(255,61,61,0.8)",
|
||||
"rgba(255,61,61,0)",
|
||||
],
|
||||
},
|
||||
mtmObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "装卸量差异分析",
|
||||
color: [
|
||||
"rgba(255,193,77,0.9)",
|
||||
"rgba(255,61,61,0.8)",
|
||||
"rgba(255,61,61,0)",
|
||||
],
|
||||
},
|
||||
mtrObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "运输车辆背景异常分析",
|
||||
color: [
|
||||
"rgba(255,193,77,0.9)",
|
||||
"rgba(255,61,61,0.8)",
|
||||
"rgba(255,61,61,0)",
|
||||
],
|
||||
},
|
||||
mlObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "运输车辆异常预警",
|
||||
},
|
||||
mmObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "驾驶员押运员资质异常分析",
|
||||
},
|
||||
mrObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
|
||||
name: "单位检查情况异常分析",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeTime(val) {
|
||||
this.curTime = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.abnormalWrap {
|
||||
height: 100%;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.riskRow {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.riskCol {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
height: 456px;
|
||||
flex: 1;
|
||||
background: url("~@/assets/images/screen/line.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.riskName {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
color: #d9e7ff;
|
||||
|
||||
.riskIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("~@/assets/images/screen/riskIcon.png") no-repeat
|
||||
center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.riskTotal {
|
||||
margin-top: 40px;
|
||||
margin-left: 2%;
|
||||
width: 93%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 46px;
|
||||
background: url("~@/assets/images/screen/total.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #d0deee;
|
||||
.totalText {
|
||||
margin-left: 16px;
|
||||
font-size: 26px;
|
||||
color: #ebf9ff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0px 0px 9px #159aff;
|
||||
}
|
||||
}
|
||||
.chartOpt {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
right: 5%;
|
||||
top: 46px;
|
||||
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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartPanel {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
.leftCol {
|
||||
flex: auto;
|
||||
width: calc(33.33% - 18px);
|
||||
}
|
||||
.rightCol {
|
||||
padding: 24px 4px 8px 24px;
|
||||
flex: auto;
|
||||
width: calc(66.66% - 12px);
|
||||
background: url("~@/assets/images/screen/right.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.riskLine {
|
||||
display: flex;
|
||||
.riskItem {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
height: 122px;
|
||||
background: url("~@/assets/images/screen/error.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
.riskItemLeft {
|
||||
margin-right: 10px;
|
||||
.icon {
|
||||
width: 90px;
|
||||
height: 70px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.riskItemRight {
|
||||
flex: 1;
|
||||
.riskItemName {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #c4e5ff;
|
||||
line-height: 25px;
|
||||
}
|
||||
.riskItemValue {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ebf9ff;
|
||||
line-height: 37px;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 0px 9px #159aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curTime: "day",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeTime(val) {
|
||||
this.curTime = val;
|
||||
this.$emit("ok", val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,251 @@
|
||||
<template>
|
||||
<div>综合风险</div>
|
||||
<div class="syntheticalWrap">
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">企业综合风险雷达图</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<radarOne :chartObj="tlObj"></radarOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol midCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">企业综合风险趋势图</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<time-select @ok="tmTime"></time-select>
|
||||
<lineOne :chartObj="tmObj"></lineOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol rightCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">全区企业风险标签增长趋势</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<time-select @ok="trTime"></time-select>
|
||||
</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">
|
||||
<time-select @ok="blTime"></time-select>
|
||||
<barOne :chartObj="blObj"></barOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol midCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">全区企业风险标签数量变化趋势</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<time-select @ok="bmTime"></time-select>
|
||||
<lineOne :chartObj="mmObj"></lineOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol rightCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">全区企业风险标签增长趋势</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import timeSelect from "./components/timeSelect.vue";
|
||||
import barOne from "@/loveflow/components/echart/bar/one.vue";
|
||||
import lineOne from "@/loveflow/components/echart/line/one.vue";
|
||||
import radarOne from "@/loveflow/components/echart/radar/one.vue";
|
||||
export default {
|
||||
components: { barOne, lineOne, timeSelect, radarOne },
|
||||
data() {
|
||||
return {
|
||||
tlObj: {
|
||||
indicator: [
|
||||
{
|
||||
name: "人员安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "道路安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "列管物品",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "消防安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "危化品运输",
|
||||
max: 100,
|
||||
},
|
||||
],
|
||||
yData: [12, 13, 14, 15, 11, 14],
|
||||
name: "风险监测项评分排行",
|
||||
},
|
||||
tmObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [
|
||||
[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
|
||||
[8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
|
||||
[11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
|
||||
],
|
||||
name: "频繁变化风险监测信息近一年变化趋势图",
|
||||
legend: ["违规事故", "重点人员", "流动人员"],
|
||||
color: [
|
||||
["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
|
||||
["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
|
||||
["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
|
||||
],
|
||||
},
|
||||
blObj: {
|
||||
xData: [
|
||||
"人员安全",
|
||||
"危化品运输",
|
||||
"防攻击管理",
|
||||
"消防安全",
|
||||
"列管物品",
|
||||
"道路安全",
|
||||
"内部治安",
|
||||
"网络安全",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12],
|
||||
name: "风险标签排行",
|
||||
},
|
||||
mmObj: {
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [
|
||||
[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
|
||||
[8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
|
||||
[11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
|
||||
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
||||
],
|
||||
name: "风险总量分析变化趋势图",
|
||||
legend: [
|
||||
"企业风险总量",
|
||||
"企业风险标签总量",
|
||||
"企业风险得分",
|
||||
"风险预警提醒总量",
|
||||
],
|
||||
color: [
|
||||
["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
|
||||
["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
|
||||
["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
|
||||
["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tmTime(val) {
|
||||
console.log("tmTime:" + val);
|
||||
},
|
||||
trTime(val) {
|
||||
console.log("trTime:" + val);
|
||||
},
|
||||
blTime(val) {
|
||||
console.log("blTime:" + val);
|
||||
},
|
||||
bmTime(val) {
|
||||
console.log("bmTime:" + val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.syntheticalWrap {
|
||||
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);
|
||||
}
|
||||
}
|
||||
.rightCol {
|
||||
flex: 1;
|
||||
}
|
||||
.midCol {
|
||||
flex: 1.3;
|
||||
margin-right: 18px;
|
||||
}
|
||||
.leftCol {
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.analysisWrap {
|
||||
.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