ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update

Browse Source
master
loveflow 1 year ago
parent 16ff435311
commit a26d6582ee
12 changed files with 462 additions and 52 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/screen/pie.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/screen/zb1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
src/assets/images/screen/zb2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/images/screen/zb3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/images/screen/zh.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 682 B

BIN
src/assets/images/screen/zz.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 B

13
src/loveflow/assets/index.scss
Unescape View File

@ -7,3 +7,16 @@ $designHeight: 1080;
@function vh($px) { @function vh($px) {
@return ($px / $designHeight) * 100vh; @return ($px / $designHeight) * 100vh;
} }
.fontsize14 {
font-size: vh(14);
}
.fontsize16 {
font-size: vh(16);
}
.fontsize22 {
font-size: vh(22);
}
.fontsize24 {
font-size: vh(24);
}

4
src/loveflow/components/echart/bar/one.vue
Unescape View File

@ -28,8 +28,8 @@ export default {
show: false, show: false,
}, },
grid: { grid: {
top: "20%", top: this.chartObj.gridTop || "20%",
bottom: "10%", bottom: this.chartObj.gridBtm || "10%",
left: "6%", left: "6%",
right: "5%", right: "5%",
}, },

4
src/loveflow/components/echart/line/one.vue
Unescape View File

@ -58,7 +58,7 @@ export default {
data: this.chartObj.legend, data: this.chartObj.legend,
icon: "rect", icon: "rect",
right: "5%", right: "5%",
top: "2%", top: this.chartObj.legendTop || "2%",
itemWidth: 8, // 设置宽度 itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度 itemHeight: 8, // 设置高度
itemGap: 16, // 设置间距 itemGap: 16, // 设置间距
@ -69,7 +69,7 @@ export default {
}, },
}, },
grid: { grid: {
top: "20%", top: this.chartObj.gridTop || "20%",
bottom: "10%", bottom: "10%",
left: "6%", left: "6%",
right: "5%", right: "5%",

111
src/loveflow/components/echart/pie/one.vue
Unescape View File

@ -0,0 +1,111 @@
<template>
<div style="height: 100%; width: 100%" id="pieWrap">
<g-chart :echartdata="option"></g-chart>
</div>
</template>
<script>
let bgImg = require("@/assets/images/screen/pie.png");
export default {
props: {
chartObj: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
option: {},
};
},
mounted() {
this.setOption();
},
methods: {
setOption() {
let height = this.getHeight() - 96;
console.log(height);
this.option = {
tooltip: {
show: false,
},
legend: {
orient: "vertical",
top: "center",
left: "60%",
icon: "rect",
itemHeight: 8,
itemWeight: 8,
itemGap: 16,
textStyle: {
color: "#D0DEEE",
align: "left",
verticalAlign: "middle",
},
},
color: this.chartObj.color,
graphic: {
elements: [
{
type: "image",
style: {
image: bgImg,
width: height - 30,
height: height - 30,
zIndex: 1,
top: "center",
},
left: 25,
top: "center",
originX: 100,
originY: 100,
},
],
},
series: [
{
name: this.chartObj.name,
type: "pie",
radius: ["60%", "80%"],
width: height - 30,
height: height - 60,
center: ["50%", "50%"],
clockWise: false,
hoverAnimation: false,
left: 30,
top: "center",
itemStyle: {},
label: {
show: false,
position: "center",
color: "#D0DEEE",
lineHeight: 20,
formatter: function (params) {
if (params.name !== "") {
return `${params.name}\n ${params.value}%`;
} else {
return "";
}
},
},
emphasis: {
label: {
show: true,
},
},
labelLine: {
show: false,
},
data: this.chartObj.data,
},
],
};
},
getHeight() {
let div = document.getElementById("pieWrap");
return div.clientHeight;
},
},
};
</script>

4
src/views/enterpriseRiskIndex/analysis.vue
Unescape View File

@ -199,7 +199,7 @@ export default {
.chartPanel { .chartPanel {
position: relative; position: relative;
height: calc(100% - 50px); height: calc(100% - 40px);
.chartOpt { .chartOpt {
position: absolute; position: absolute;
z-index: 12; z-index: 12;
@ -261,7 +261,7 @@ export default {
font-size: vh(16); font-size: vh(16);
.riskName { .riskName {
height: 40px; height: 30px;
display: flex; display: flex;
margin-top: vh(6); margin-top: vh(6);
color: #d9e7ff; color: #d9e7ff;

378
src/views/enterpriseRiskIndex/synthetical.vue
Unescape View File

@ -15,9 +15,35 @@
<div class="riskIcon"></div> <div class="riskIcon"></div>
<div class="riskNameText">企业综合风险趋势图</div> <div class="riskNameText">企业综合风险趋势图</div>
</div> </div>
<div class="chartPanel"> <div class="totalWrap">
<time-select @ok="tmTime"></time-select> <div class="totalLeft">
<lineOne :chartObj="tmObj"></lineOne> <div class="totalName">综合风险总量</div>
<div class="totalValue">
<div class="item">
<div class="value">
{{ total.toLocaleString() }}
</div>
<div class="label">个</div>
</div>
</div>
</div>
<div class="totalRight">
<div class="totalName">增长趋势</div>
<div class="totalValue">
<div class="item">
<div class="label">同比增长</div>
<div class="value">23%</div>
</div>
<div class="item">
<div class="label">环比增长</div>
<div class="value">23%</div>
</div>
</div>
</div>
</div>
<time-select @ok="tmTime" style="top: 35px"></time-select>
<div class="chartPanel" style="height: calc(100% - 160px)">
<barOne :chartObj="tmObj"></barOne>
</div> </div>
</div> </div>
<div class="riskCol rightCol"> <div class="riskCol rightCol">
@ -27,6 +53,7 @@
</div> </div>
<div class="chartPanel"> <div class="chartPanel">
<time-select @ok="trTime"></time-select> <time-select @ok="trTime"></time-select>
<pieOne :chartObj="trObj"></pieOne>
</div> </div>
</div> </div>
</div> </div>
@ -36,9 +63,17 @@
<div class="riskIcon"></div> <div class="riskIcon"></div>
<div class="riskNameText">全区企业风险预警总量</div> <div class="riskNameText">全区企业风险预警总量</div>
</div> </div>
<div class="chartPanel"> <div class="riskTotal">
<time-select @ok="blTime"></time-select> <div>今日企业风险项量</div>
<barOne :chartObj="blObj"></barOne> <div class="totalText">10000</div>
</div>
<div class="chartPanelBg"></div>
<div
class="chartPanel"
style="height: calc(100% - 136px); width: 88%; margin-left: 2%"
>
<time-select @ok="blTime" style="top: 44px"></time-select>
<pieOne :chartObj="blObj"></pieOne>
</div> </div>
</div> </div>
<div class="riskCol midCol mr18"> <div class="riskCol midCol mr18">
@ -48,7 +83,7 @@
</div> </div>
<div class="chartPanel"> <div class="chartPanel">
<time-select @ok="bmTime"></time-select> <time-select @ok="bmTime"></time-select>
<lineOne :chartObj="mmObj"></lineOne> <lineOne :chartObj="bmObj"></lineOne>
</div> </div>
</div> </div>
<div class="riskCol rightCol"> <div class="riskCol rightCol">
@ -56,6 +91,83 @@
<div class="riskIcon"></div> <div class="riskIcon"></div>
<div class="riskNameText">全区企业风险标签增长趋势</div> <div class="riskNameText">全区企业风险标签增长趋势</div>
</div> </div>
<div class="riskUpWrap">
<div class="totalTop">
<div class="left">
<div class="totalName fontsize16">本年度风险标签总量</div>
<div class="totalValue">
<div class="item">
<div class="value fontsize22">
{{ total.toLocaleString() }}
</div>
</div>
</div>
</div>
<div class="right">
<div class="totalName">增长趋势</div>
<div class="totalValue">
<div class="item">
<div class="label fontsize14">同比增长</div>
<div class="value fontsize22">23%</div>
</div>
<div class="item">
<div class="label fontsize14">环比增长</div>
<div class="value fontsize22">23%</div>
</div>
</div>
</div>
</div>
<div class="totalMid">
<div class="left">
<div class="totalName fontsize16">近三月风险标签总量</div>
<div class="totalValue">
<div class="item">
<div class="value fontsize22">
{{ total.toLocaleString() }}
</div>
</div>
</div>
</div>
<div class="right">
<div class="totalName fontsize16">增长趋势</div>
<div class="totalValue">
<div class="item">
<div class="label fontsize14">同比增长</div>
<div class="value fontsize22">23%</div>
</div>
<div class="item">
<div class="label fontsize14">环比增长</div>
<div class="value fontsize22">23%</div>
</div>
</div>
</div>
</div>
<div class="totalBtm">
<div class="left">
<div class="totalName fontsize16">当月风险标签总量</div>
<div class="totalValue">
<div class="item">
<div class="value fontsize22">
{{ total.toLocaleString() }}
</div>
</div>
</div>
</div>
<div class="right">
<div class="totalName fontsize16">增长趋势</div>
<div class="totalValue">
<div class="item">
<div class="label fontsize14">同比增长</div>
<div class="value fontsize22">23%</div>
</div>
<div class="item">
<div class="label fontsize14">环比增长</div>
<div class="value fontsize22">23%</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -65,10 +177,12 @@ import timeSelect from "./components/timeSelect.vue";
import barOne from "@/loveflow/components/echart/bar/one.vue"; import barOne from "@/loveflow/components/echart/bar/one.vue";
import lineOne from "@/loveflow/components/echart/line/one.vue"; import lineOne from "@/loveflow/components/echart/line/one.vue";
import radarOne from "@/loveflow/components/echart/radar/one.vue"; import radarOne from "@/loveflow/components/echart/radar/one.vue";
import pieOne from "@/loveflow/components/echart/pie/one.vue";
export default { export default {
components: { barOne, lineOne, timeSelect, radarOne }, components: { barOne, lineOne, timeSelect, radarOne, pieOne },
data() { data() {
return { return {
total: 21345,
tlObj: { tlObj: {
indicator: [ indicator: [
{ {
@ -96,34 +210,8 @@ export default {
name: "风险监测项评分排行", name: "风险监测项评分排行",
}, },
tmObj: { tmObj: {
xData: [ gridTop: "15%",
"1月", gridBtm: "15%",
"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: [ xData: [
"人员安全", "人员安全",
"危化品运输", "危化品运输",
@ -135,9 +223,22 @@ export default {
"网络安全", "网络安全",
], ],
yData: [12, 11, 13, 14, 15, 11, 14, 12], yData: [12, 11, 13, 14, 15, 11, 14, 12],
name: "风险标签排行", name: "企业综合风险趋势图",
},
blObj: {
height: 0,
color: ["#2B82F3", "#FFD16A", "#48EEBD", "#FF745A"],
data: [
{ value: 1048, name: "重点人员预警" },
{ value: 735, name: "企业整改预警" },
{ value: 580, name: "流动人员预警" },
{ value: 484, name: "其他" },
],
name: "全区企业风险预警总量",
}, },
mmObj: { bmObj: {
gridTop: "25%",
legendTop: "15%",
xData: [ xData: [
"1月", "1月",
"2月", "2月",
@ -157,23 +258,43 @@ export default {
[8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8], [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
[11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11], [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
[3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
[15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
[25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
], ],
name: "风险总量分析变化趋势图", name: "全区企业风险标签数量变化趋势",
legend: [ legend: [
"企业风险总量", "澥浦镇",
"企业风险标签总量", "九龙湖镇",
"企业风险得分", "照宝山街道",
"风险预警提醒总量", "蛟川街道",
"骆驼街道",
"贵驷街道",
"庄市街道",
], ],
color: [ color: [
["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"], ["#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)"], ["#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)"], ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
["#FF8A5A", "rgba(255,138,90,0.1)", "rgba(255,138,90,0.1)"],
["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"], ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
["#B276FF", "rgba(178,118,255,0.1)", "rgba(178,118,255,0.1)"],
["#FF6AEE", "rgba(255,106,238,0.1)", "rgba(255,106,238,0.1)"],
],
},
trObj: {
color: ["#2B82F3", "#FFD16A", "#48EEBD", "#FF745A"],
data: [
{ value: 1048, name: "重点人员预警" },
{ value: 735, name: "企业整改预警" },
{ value: 580, name: "流动人员预警" },
{ value: 484, name: "其他" },
], ],
name: "全区企业风险预警总量",
}, },
}; };
}, },
mounted() {},
methods: { methods: {
tmTime(val) { tmTime(val) {
console.log("tmTime:" + val); console.log("tmTime:" + val);
@ -202,13 +323,178 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
.riskCol { .riskCol {
position: relative;
background: url("~@/assets/images/screen/line.png") no-repeat center background: url("~@/assets/images/screen/line.png") no-repeat center
center; center;
background-size: 100% 100%; background-size: 100% 100%;
.riskTotal {
margin-top: 46px;
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;
}
}
.chartPanel { .chartPanel {
position: relative; height: calc(100% - 40px);
}
.chartPanelBg {
position: absolute;
width: 60%;
height: 208px;
top: calc(50% - 44px);
left: 30%;
background-color: rgba(108, 128, 151, 0.1);
}
.totalWrap {
display: flex;
margin-top: 38px;
.totalLeft {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
margin-left: 3%;
padding-left: 20px;
flex: 1;
height: 80px;
background: url("~@/assets/images/screen/zh.png") no-repeat center
center;
background-size: 100% 100%;
.totalValue {
.item {
.value {
color: #80d9ff;
}
}
}
}
.totalRight {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
margin-right: 5%;
flex: 2;
height: 80px;
background: url("~@/assets/images/screen/zz.png") no-repeat center
center;
background-size: 100% 100%;
}
.totalName {
font-weight: 500;
color: #d0deee;
}
.totalValue {
display: flex;
.item {
display: flex;
align-items: baseline;
margin-right: 20px;
.label {
margin-right: 8px;
font-weight: 500;
color: #ffffff;
}
.value {
margin-right: 4px;
font-weight: 500;
color: #80fff0;
letter-spacing: 1px;
text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
}
}
}
}
.riskUpWrap {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 2px;
height: calc(100% - 50px); height: calc(100% - 50px);
display: flex;
.left {
width: 190px;
}
.left,
.right {
display: flex;
flex-direction: column;
justify-content: center;
}
.totalTop {
display: flex;
padding-left: 20px;
flex: 1;
background: url("~@/assets/images/screen/zb1.png") no-repeat center
center;
background-size: 100% 100%;
color: #eed0d0;
.value {
color: #ff8080;
}
}
.totalMid {
display: flex;
padding-left: 20px;
flex: 1;
background: url("~@/assets/images/screen/zb2.png") no-repeat center
center;
background-size: 100% 100%;
color: #eee3d0;
.value {
color: #ffba80;
}
}
.totalBtm {
display: flex;
padding-left: 20px;
flex: 1;
background: url("~@/assets/images/screen/zb3.png") no-repeat center
center;
background-size: 100% 100%;
color: #d0e3ee;
.value {
color: #80dbff;
}
}
.totalName {
font-weight: 500;
}
.totalValue {
display: flex;
.item {
display: flex;
align-items: baseline;
margin-right: 20px;
.label {
margin-right: 8px;
font-weight: 500;
color: #ffffff;
}
.value {
margin-right: 4px;
font-weight: 500;
letter-spacing: 1px;
text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
}
}
}
} }
} }
.rightCol { .rightCol {
@ -233,7 +519,7 @@ export default {
font-size: vh(16); font-size: vh(16);
.riskName { .riskName {
height: 40px; height: 30px;
display: flex; display: flex;
margin-top: vh(6); margin-top: vh(6);
color: #d9e7ff; color: #d9e7ff;

Write Preview
Loading…
Cancel
Save