loveflow
7 months ago
parent
90cdd2ff63
commit
09908abf96
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 693 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 636 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,54 @@
|
||||
.gPagination {
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/.el-pagination {
|
||||
.el-pagination__total {
|
||||
color: #ffffff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.el-pagination__sizes {
|
||||
.el-input__inner {
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: solid 1px #28847e;
|
||||
}
|
||||
}
|
||||
.btn-prev {
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: solid 1px #28847e;
|
||||
}
|
||||
.btn-next {
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: solid 1px #28847e;
|
||||
}
|
||||
.el-pager {
|
||||
.number {
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: solid 1px #28847e;
|
||||
&.active {
|
||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-pagination__jump {
|
||||
color: #fff;
|
||||
.el-input__inner {
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: solid 1px #28847e;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="barThreeId">
|
||||
<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 data = this.chartObj.data;
|
||||
let total = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
}
|
||||
|
||||
total = total || 1;
|
||||
|
||||
// 将数据根据从小到大排序
|
||||
this.sortObject(data);
|
||||
// 图例数据
|
||||
let lengthData = [];
|
||||
// 返回数据
|
||||
let resultData = data.map((item, index) => {
|
||||
lengthData.push({
|
||||
type: "group",
|
||||
top: index * 55,
|
||||
scale: [1, 1],
|
||||
children: [
|
||||
/* {
|
||||
type: "circle",
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 7,
|
||||
r: 5,
|
||||
},
|
||||
style: {
|
||||
fill:
|
||||
index === 0 ? "#07a9ab" : index === 1 ? "#008CD2" : "#0847e7",
|
||||
},
|
||||
}, */
|
||||
{
|
||||
type: "text",
|
||||
style: {
|
||||
text: item.name,
|
||||
fill: "#D0DEEE",
|
||||
fontSize: 14,
|
||||
x: 20,
|
||||
y: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: item.name,
|
||||
style: {
|
||||
text: parseInt((100 * item.value) / total) + "%",
|
||||
fill: "#fff",
|
||||
fontSize: 17,
|
||||
x: 100,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
style: {
|
||||
text: "( " + item.value + "分 )",
|
||||
fill: "#fff",
|
||||
fontSize: 14,
|
||||
x: 150,
|
||||
y: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
if (index === 0) {
|
||||
return {
|
||||
style: {
|
||||
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(255,255,255,0.8)" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0.4)" },
|
||||
]),
|
||||
},
|
||||
...item,
|
||||
};
|
||||
} else if (index === 1) {
|
||||
return {
|
||||
style: {
|
||||
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(244,225,71,0.8)" },
|
||||
{ offset: 1, color: "rgba(244,225,71,0.4)" },
|
||||
]),
|
||||
},
|
||||
...item,
|
||||
};
|
||||
} else if (index === 2) {
|
||||
return {
|
||||
style: {
|
||||
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(71,244,197,0.8)" },
|
||||
{ offset: 1, color: "rgba(71,244,197,0.4)" },
|
||||
]),
|
||||
},
|
||||
...item,
|
||||
};
|
||||
} else if (index === 3) {
|
||||
return {
|
||||
style: {
|
||||
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(72,165,244,0.8)" },
|
||||
{ offset: 1, color: "rgba(72,165,244,0.4)" },
|
||||
]),
|
||||
},
|
||||
...item,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 获取计算的数据
|
||||
let getData = this.pyramidChart(
|
||||
resultData,
|
||||
document.getElementById("barThreeId")
|
||||
);
|
||||
|
||||
this.option = {
|
||||
graphic: [
|
||||
{
|
||||
type: "group",
|
||||
left: "5%",
|
||||
top: "center",
|
||||
scale: [1, 1],
|
||||
onclick: function (params) {},
|
||||
children: getData,
|
||||
},
|
||||
{
|
||||
type: "group",
|
||||
left: "55%",
|
||||
top: "center",
|
||||
scale: [1, 1],
|
||||
onclick: function (params) {},
|
||||
children: lengthData,
|
||||
},
|
||||
],
|
||||
series: [],
|
||||
};
|
||||
},
|
||||
pyramidChart(data = [], dom, option = {}) {
|
||||
let domHeight = dom ? dom.clientHeight : 0;
|
||||
let domWidth = dom ? dom.clientWidth : 0;
|
||||
// 默认获取一个正方形空间
|
||||
let maxDistance = domHeight > domWidth / 2 ? domWidth / 2 : domHeight;
|
||||
// 合并设置
|
||||
let resultOption = Object.assign(
|
||||
{
|
||||
slanted: 4, // 每层底部的倾斜度
|
||||
maxWidth: maxDistance - 30, // 金字塔最大宽度
|
||||
maxHeight: maxDistance, // 金字塔最大高度
|
||||
offset: 30, //偏差
|
||||
},
|
||||
option
|
||||
);
|
||||
if (data.length === 1) {
|
||||
resultOption.slanted = 50;
|
||||
}
|
||||
if (data.length === 2) {
|
||||
resultOption.slanted = 25;
|
||||
}
|
||||
if (data.length === 3) {
|
||||
resultOption.slanted = 10;
|
||||
}
|
||||
// 减去多余的误差边距
|
||||
resultOption.maxHeight = resultOption.maxHeight - resultOption.offset;
|
||||
// 一半最大宽度,用于计算左右边距
|
||||
let halfMaxWidth = resultOption.maxWidth / 2;
|
||||
// 数据最终
|
||||
let resultData = [];
|
||||
// 数据值 数组
|
||||
let dataNums = data.map((item) => item.value || 0);
|
||||
// 计算数据总和
|
||||
let dataNumSum =
|
||||
dataNums.length > 0 &&
|
||||
dataNums.reduce(function (prev, curr) {
|
||||
return Number(prev || 0) + Number(curr || 0);
|
||||
});
|
||||
// 中间数据点坐标数组 根据长度比值算出
|
||||
let midlinePoint = [];
|
||||
let multipleLayer = [0.6];
|
||||
// 计算倍数等基础数据
|
||||
dataNums.forEach((item, index, arr) => {
|
||||
let itemNext = arr[index + 1];
|
||||
if (itemNext) {
|
||||
multipleLayer.push(itemNext / dataNums[0]); // 计算倍数
|
||||
}
|
||||
// 计算点坐标 长度
|
||||
let point =
|
||||
Math.round((item / dataNumSum) * resultOption.maxHeight * 1000) /
|
||||
1000;
|
||||
midlinePoint.push(point);
|
||||
});
|
||||
// 三角形的高度
|
||||
let triangleHeight = 0;
|
||||
let triangleHeightLayer = [];
|
||||
// 三角形tan角度
|
||||
let triangleRatio = halfMaxWidth / resultOption.maxHeight;
|
||||
midlinePoint.forEach((item) => {
|
||||
triangleHeight = triangleHeight + item;
|
||||
triangleHeightLayer.push(triangleHeight);
|
||||
});
|
||||
// 中间数据点 最后的数据长度
|
||||
let midlinePointFinally =
|
||||
triangleHeightLayer[triangleHeightLayer.length - 1] || 0;
|
||||
// 开始拼接数据
|
||||
data.forEach((item, index) => {
|
||||
let arrObj = [];
|
||||
let triangleHeightLayerOne = triangleHeightLayer[index];
|
||||
let triangleHeightLayerOneLast = triangleHeightLayer[index - 1] || 0;
|
||||
let multipleLayerOne = multipleLayer[index];
|
||||
let multipleLayerOneLast = multipleLayer[index - 1] || 0;
|
||||
// 第一层数据单独处理
|
||||
if (index === 0) {
|
||||
arrObj.push(
|
||||
[0, 0],
|
||||
[
|
||||
-triangleRatio *
|
||||
(triangleHeightLayerOne -
|
||||
resultOption.slanted * multipleLayerOne),
|
||||
triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
|
||||
],
|
||||
[0, triangleHeightLayerOne],
|
||||
[
|
||||
triangleRatio *
|
||||
(triangleHeightLayerOne -
|
||||
resultOption.slanted * multipleLayerOne),
|
||||
triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
|
||||
]
|
||||
);
|
||||
} else {
|
||||
arrObj.push(
|
||||
[0, triangleHeightLayerOneLast],
|
||||
[
|
||||
-triangleRatio *
|
||||
(triangleHeightLayerOneLast -
|
||||
resultOption.slanted * multipleLayerOneLast),
|
||||
triangleHeightLayerOneLast -
|
||||
resultOption.slanted * multipleLayerOneLast,
|
||||
],
|
||||
[
|
||||
-triangleRatio *
|
||||
(triangleHeightLayerOne -
|
||||
resultOption.slanted * multipleLayerOne),
|
||||
triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
|
||||
],
|
||||
[0, triangleHeightLayerOne],
|
||||
[
|
||||
triangleRatio *
|
||||
(triangleHeightLayerOne -
|
||||
resultOption.slanted * multipleLayerOne),
|
||||
triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
|
||||
],
|
||||
[
|
||||
triangleRatio *
|
||||
(triangleHeightLayerOneLast -
|
||||
resultOption.slanted * multipleLayerOneLast),
|
||||
triangleHeightLayerOneLast -
|
||||
resultOption.slanted * multipleLayerOneLast,
|
||||
]
|
||||
);
|
||||
}
|
||||
resultData.push({
|
||||
type: "polygon",
|
||||
z: 1,
|
||||
shape: {
|
||||
points: arrObj,
|
||||
},
|
||||
name: item.name,
|
||||
style: item.style,
|
||||
});
|
||||
});
|
||||
// 添加线
|
||||
resultData.push({
|
||||
type: "polyline",
|
||||
shape: {
|
||||
points: [
|
||||
[0, 0],
|
||||
[0, midlinePointFinally],
|
||||
],
|
||||
},
|
||||
style: {
|
||||
stroke: "rgba(255,255,255,0.41)",
|
||||
lineWidth: 1,
|
||||
},
|
||||
z: 2,
|
||||
});
|
||||
// 返回
|
||||
return resultData;
|
||||
},
|
||||
sortObject(arr) {
|
||||
return arr.sort(function (a, b) {
|
||||
return a["value"] - b["value"];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="dpieWrap">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import "echarts-gl";
|
||||
let bgImg = require("@/assets/images/screen/dpie.png");
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
//let height = this.getHeight();
|
||||
this.option = this.getPie3D(
|
||||
[
|
||||
{
|
||||
name: "危险化学品",
|
||||
value: 134,
|
||||
itemStyle: {
|
||||
color: "rgba(55,141,255,0.9)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "重点人员",
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
color: "rgba(72,238,189,0.9)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "民爆物品",
|
||||
value: 127,
|
||||
itemStyle: {
|
||||
color: "rgba(255,209,106,0.9)",
|
||||
},
|
||||
},
|
||||
],
|
||||
0.5
|
||||
);
|
||||
},
|
||||
|
||||
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
isSelected = false;
|
||||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||||
let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u) * h * 0.1;
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name:
|
||||
typeof pieData[i].name === "undefined"
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: 1 / 10,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle != "undefined") {
|
||||
let itemStyle = {};
|
||||
typeof pieData[i].itemStyle.color != "undefined"
|
||||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||||
: null;
|
||||
typeof pieData[i].itemStyle.opacity != "undefined"
|
||||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||||
: null;
|
||||
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
|
||||
let height = this.getHeight();
|
||||
console.log(height);
|
||||
|
||||
let obj = {
|
||||
legend: {
|
||||
top: "10%",
|
||||
itemGap: 20,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: "#D0DEEE",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: legendData,
|
||||
formatter: (params) => {
|
||||
return params;
|
||||
},
|
||||
},
|
||||
|
||||
xAxis3D: {},
|
||||
yAxis3D: {},
|
||||
zAxis3D: {},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
autoRotate: false,
|
||||
},
|
||||
left: "center",
|
||||
width: "150%",
|
||||
show: false,
|
||||
boxHeight: 20,
|
||||
zIndex: 2,
|
||||
},
|
||||
series: series,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: bgImg,
|
||||
width: height,
|
||||
height: parseInt(height / 2),
|
||||
zIndex: 1,
|
||||
top: "center",
|
||||
},
|
||||
left: "20%",
|
||||
top: "30%",
|
||||
//originX: 100,
|
||||
//originY: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
return obj;
|
||||
},
|
||||
getHeight() {
|
||||
let div = document.getElementById("dpieWrap");
|
||||
return div.clientHeight;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="flex-center" style="height: 100%; width: 100%" id="pieWrap">
|
||||
<div class="bgPie flex-center">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</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();
|
||||
console.log(height);
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
top: "3%",
|
||||
right: "5%",
|
||||
icon: "rect",
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: "#D0DEEE",
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
color: this.chartObj.color,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: bgImg,
|
||||
width: 370,
|
||||
height: 370,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: "3%",
|
||||
top: 16,
|
||||
//originX: 100,
|
||||
//originY: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "pie",
|
||||
radius: ["60%", "80%"],
|
||||
width: 280,
|
||||
height: 280,
|
||||
center: ["24%", "55%"],
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
left: 134,
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bgPie {
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="estimateWrap">
|
||||
<div class="riskTrim tlIcon"></div>
|
||||
<div class="riskTrim trIcon"></div>
|
||||
<div class="riskTrim blIcon"></div>
|
||||
<div class="riskTrim brIcon"></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.estimateWrap {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/screen/estimate.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
.riskTrim {
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.tlIcon {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/tl.png") no-repeat center center;
|
||||
}
|
||||
.trIcon {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/tr.png") no-repeat center center;
|
||||
}
|
||||
.blIcon {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/bl.png") no-repeat center center;
|
||||
}
|
||||
.brIcon {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/br.png") no-repeat center center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,94 @@
|
||||
<template>
|
||||
<div>专题评估</div>
|
||||
<div class="estimatePanel">
|
||||
<topicMain>
|
||||
<div class="estimateTableWrap">
|
||||
<div class="estimateTable">
|
||||
<div class="mb20" v-for="item in dataSource" :key="item.id">
|
||||
<tableCard @checkDetail="checkDetail" :dataObj="item"></tableCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<gMainTable
|
||||
ref="gMainTable"
|
||||
:tableData="dataSource"
|
||||
:columns="columns"
|
||||
rowKey="id"
|
||||
:pagination="ipagination"
|
||||
@pageSizeChange="handlePageSizeChange"
|
||||
@currentPageChange="handleCurrentPageChange"
|
||||
>
|
||||
</gMainTable>
|
||||
</topicMain>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import topicMain from "./components/topicMain.vue";
|
||||
import tableCard from "./components/tableCard.vue";
|
||||
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||
|
||||
export default {
|
||||
components: { topicMain, tableCard },
|
||||
mixins: [tableListMixins],
|
||||
data() {
|
||||
return {
|
||||
disableMixinCreated: true,
|
||||
columns: [
|
||||
{
|
||||
prop: "id",
|
||||
label: "序号",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.dataSource.push({
|
||||
id: i,
|
||||
title: "[20240213]平安企业风险评估报告" + i,
|
||||
creator: "创建人",
|
||||
model: "通用模板",
|
||||
createTime: "2024-2-24 12:12:58",
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkDetail(item) {
|
||||
console.log(item);
|
||||
this.$router.push({
|
||||
path: "/riskIndex/estimateDetail",
|
||||
query: item,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.estimatePanel {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
.estimateTableWrap {
|
||||
padding: 20px;
|
||||
height: calc(100% - 84px);
|
||||
.estimateTable {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.estimatePanel {
|
||||
height: vh(932);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,658 @@
|
||||
<template>
|
||||
<div class="estimateDetailPanel">
|
||||
<topicMain>
|
||||
<div class="estimateDetailWrap">
|
||||
<div class="estimateInfo mb18">
|
||||
<tableCard :back="true" :dataObj="info" @goBack="goBack"></tableCard>
|
||||
</div>
|
||||
<div class="estimateScreen">
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">企业风险标签增长趋势</div>
|
||||
</div>
|
||||
<div class="riskUpWrap">
|
||||
<div class="riskUpTotal 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">2%</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label fontsize14">环比增长</div>
|
||||
<div class="value fontsize22">3%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskUpTotal totalMid">
|
||||
<div class="left">
|
||||
<div class="totalName fontsize16">近三月风险标签总量</div>
|
||||
<div class="totalValue">
|
||||
<div class="item">
|
||||
<div class="value fontsize22">
|
||||
{{ total1.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">3%</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label fontsize14">环比增长</div>
|
||||
<div class="value fontsize22">2%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskUpTotal totalBtm">
|
||||
<div class="left">
|
||||
<div class="totalName fontsize16">当月风险标签总量</div>
|
||||
<div class="totalValue">
|
||||
<div class="item">
|
||||
<div class="value fontsize22">
|
||||
{{ total2.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">1%</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label fontsize14">环比增长</div>
|
||||
<div class="value fontsize22">2%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">企业综合风险雷达图</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<radarOne :chartObj="tmObj"></radarOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol leftCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">异常风险项得分占比</div>
|
||||
</div>
|
||||
<div class="chartPanel flex-center" v-if="show">
|
||||
<dPie v-lazy :chartObj="trObj"></dPie>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskRow mb18">
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">异常风险得分对比</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<barThree :chartObj="mlObj"></barThree>
|
||||
</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">
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">全区企业风险预警总量</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<pieTwo :chartObj="blObj"></pieTwo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol leftCol mr18">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">全区企业风险标签数量趋势</div>
|
||||
</div>
|
||||
<div class="chartPanel">
|
||||
<lineOne :chartObj="bmObj"></lineOne>
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskCol leftCol">
|
||||
<div class="riskName">
|
||||
<div class="riskIcon"></div>
|
||||
<div class="riskNameText">企业综合风险趋势图</div>
|
||||
</div>
|
||||
<div class="totalWrap">
|
||||
<left-card :dataObj="leftData"></left-card>
|
||||
<right-card :dataObj="rightData"></right-card>
|
||||
</div>
|
||||
<div class="chartPanel" style="height: calc(100% - 120px)">
|
||||
<barOne :chartObj="brObj"></barOne>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</topicMain>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableCard from "./components/tableCard.vue";
|
||||
import topicMain from "./components/topicMain.vue";
|
||||
import barOne from "@/loveflow/components/echart/bar/one.vue";
|
||||
import radarOne from "@/loveflow/components/echart/radar/one.vue";
|
||||
import pieTwo from "@/loveflow/components/echart/pie/two.vue";
|
||||
import lineOne from "@/loveflow/components/echart/line/one.vue";
|
||||
import leftCard from "./components/leftCard.vue";
|
||||
import rightCard from "./components/rightCard.vue";
|
||||
import dPie from "@/loveflow/components/echart/pie/dPie.vue";
|
||||
import barThree from "@/loveflow/components/echart/bar/three.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableCard,
|
||||
topicMain,
|
||||
barOne,
|
||||
radarOne,
|
||||
pieTwo,
|
||||
lineOne,
|
||||
leftCard,
|
||||
rightCard,
|
||||
dPie,
|
||||
barThree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 21345,
|
||||
total1: 545,
|
||||
total2: 115,
|
||||
info: {},
|
||||
leftData: {
|
||||
name: "综合风险总量",
|
||||
value: "23135",
|
||||
},
|
||||
rightData: {
|
||||
tb: 2,
|
||||
hb: 3,
|
||||
},
|
||||
dataList: [
|
||||
[
|
||||
{
|
||||
name: "流动人口管理异常",
|
||||
value: 13211,
|
||||
icon: require("@/assets/images/screen/11.png"),
|
||||
},
|
||||
{
|
||||
name: "人员背景审核异常分析",
|
||||
value: 2321,
|
||||
icon: require("@/assets/images/screen/12.png"),
|
||||
},
|
||||
{
|
||||
name: "重点岗位资质核查异常分析",
|
||||
value: 3321,
|
||||
icon: require("@/assets/images/screen/13.png"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "人员涉警(案)情况异常分析",
|
||||
value: 1321,
|
||||
icon: require("@/assets/images/screen/21.png"),
|
||||
},
|
||||
{
|
||||
name: "装卸量差异分析",
|
||||
value: 1329,
|
||||
icon: require("@/assets/images/screen/22.png"),
|
||||
},
|
||||
{
|
||||
name: "运输车辆背景异常分析",
|
||||
value: 2341,
|
||||
icon: require("@/assets/images/screen/23.png"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "运输车辆异常预警",
|
||||
value: 12431,
|
||||
icon: require("@/assets/images/screen/31.png"),
|
||||
},
|
||||
{
|
||||
name: "驾驶员押运员资质异常分析",
|
||||
value: 2134,
|
||||
icon: require("@/assets/images/screen/32.png"),
|
||||
},
|
||||
{
|
||||
name: "单位检查情况异常分析",
|
||||
value: 879,
|
||||
icon: require("@/assets/images/screen/33.png"),
|
||||
},
|
||||
],
|
||||
],
|
||||
tmObj: {
|
||||
indicator: [
|
||||
{
|
||||
name: "人员安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "防攻击管理",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "道路安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "列管物品",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "消防安全",
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
name: "危化品运输",
|
||||
max: 100,
|
||||
},
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14],
|
||||
name: "风险监测项评分排行",
|
||||
},
|
||||
trObj: {},
|
||||
mlObj: {
|
||||
data: [
|
||||
{
|
||||
name: "危险化学品",
|
||||
value: 134,
|
||||
},
|
||||
{
|
||||
name: "民爆物品",
|
||||
value: 334,
|
||||
},
|
||||
{
|
||||
name: "重点人员",
|
||||
value: 234,
|
||||
},
|
||||
{
|
||||
name: "流动人员",
|
||||
value: 84,
|
||||
},
|
||||
],
|
||||
name: "异常风险得分对比",
|
||||
},
|
||||
blObj: {
|
||||
height: 0,
|
||||
color: ["#2B82F3", "#FFD16A", "#48EEBD", "#FF745A"],
|
||||
data: [
|
||||
{ value: 1048, name: "重点人员预警" },
|
||||
{ value: 735, name: "企业整改预警" },
|
||||
{ value: 580, name: "流动人员预警" },
|
||||
{ value: 484, name: "其他" },
|
||||
],
|
||||
name: "全区企业风险预警总量",
|
||||
},
|
||||
bmObj: {
|
||||
gridTop: "15%",
|
||||
legendTop: "2%",
|
||||
xData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
yData: [
|
||||
[618, 711, 678, 811, 671, 812, 734, 597, 638, 712, 812, 768],
|
||||
[698, 811, 671, 768, 812, 712, 638, 597, 711, 734, 878, 638],
|
||||
[811, 671, 618, 734, 597, 812, 761, 768, 638, 597, 812, 712],
|
||||
[671, 734, 811, 711, 618, 768, 671, 712, 768, 690, 638, 798],
|
||||
[812, 671, 711, 812, 679, 638, 763, 768, 597, 871, 711, 567],
|
||||
[734, 812, 618, 811, 638, 671, 712, 597, 812, 638, 638, 654],
|
||||
[812, 811, 597, 711, 811, 618, 734, 638, 812, 712, 897, 638],
|
||||
],
|
||||
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)"],
|
||||
["#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)"],
|
||||
["#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)"],
|
||||
],
|
||||
},
|
||||
brObj: {
|
||||
gridTop: "10%",
|
||||
gridBtm: "15%",
|
||||
xData: [
|
||||
"人员安全",
|
||||
"危化品运输",
|
||||
"防攻击管理",
|
||||
"消防安全",
|
||||
"列管物品",
|
||||
"道路安全",
|
||||
"内部治安",
|
||||
"网络安全",
|
||||
],
|
||||
yData: [12, 11, 13, 14, 15, 11, 14, 12],
|
||||
name: "企业综合风险趋势图",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route);
|
||||
this.info = this.$route.query;
|
||||
this.show = true;
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$router.push("/riskIndex/estimate");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.estimateDetailPanel {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
.estimateDetailWrap {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
.estimateScreen {
|
||||
height: calc(100% - 140px);
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.riskRow {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.riskCol {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
height: 422px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.chartPanel {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.riskUpWrap {
|
||||
padding: 0 10px;
|
||||
.left {
|
||||
width: 190px;
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.totalTop {
|
||||
background: url("~@/assets/images/screen/zb1.png") no-repeat center
|
||||
center;
|
||||
color: #eed0d0;
|
||||
.value {
|
||||
color: #ff8080;
|
||||
}
|
||||
}
|
||||
.totalMid {
|
||||
background: url("~@/assets/images/screen/zb2.png") no-repeat center
|
||||
center;
|
||||
color: #eee3d0;
|
||||
.value {
|
||||
color: #ffba80;
|
||||
}
|
||||
}
|
||||
.totalBtm {
|
||||
background: url("~@/assets/images/screen/zb3.png") no-repeat center
|
||||
center;
|
||||
color: #d0e3ee;
|
||||
.value {
|
||||
color: #80dbff;
|
||||
}
|
||||
}
|
||||
.riskUpTotal {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
height: 120px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.totalName {
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.totalWrap {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
.leftCol {
|
||||
flex: auto;
|
||||
width: calc(33.33% - 18px);
|
||||
}
|
||||
.rightCol {
|
||||
padding: 4px 4px 4px 24px;
|
||||
flex: auto;
|
||||
width: calc(66.66% - 12px);
|
||||
background: url("~@/assets/images/screen/09091.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.riskLine {
|
||||
display: flex;
|
||||
.riskItem {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
height: 114px;
|
||||
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;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
.riskItemName {
|
||||
font-size: 18px;
|
||||
color: #c4e5ff;
|
||||
line-height: 25px;
|
||||
}
|
||||
.riskItemValue {
|
||||
font-size: 28px;
|
||||
color: #ebf9ff;
|
||||
line-height: 37px;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 0px 9px #159aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue