@@ -14,7 +14,14 @@
-
+
@@ -36,6 +43,7 @@ export default {
return {
data: [],
total: 1,
+ viewH: 1,
};
},
mounted() {
@@ -44,13 +52,18 @@ export default {
for (let i = 0; i < this.data.length; i++) {
this.total += this.data[i].value;
}
+ let temp = this.getHeight();
+ let height = parseInt(temp / 5);
+ this.viewH = 2 * height;
+ console.log(height);
- this.setOption();
+ setTimeout(() => {
+ this.setOption();
+ //window.addEventListener("resize", this.setOption(), false);
+ }, 500);
},
methods: {
setOption() {
- let optionsData = this.data;
- let hoveredIndex = "";
let chartDom = this.$refs["dpieWrapRef"];
let myChart = echarts.init(chartDom);
const getPie3D = (pieData, internalDiameterRatio) => {
@@ -141,7 +154,7 @@ export default {
show: false,
boxHeight: boxHeight, //圆环的高度
left: 0,
- top: -20, //3d饼图的位置
+ top: -parseInt(this.viewH / 4), //3d饼图的位置
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 24, //角度
@@ -264,6 +277,10 @@ export default {
});
option && myChart.setOption(option);
},
+ getHeight() {
+ let div = document.getElementById("dpieWrap");
+ return div.clientHeight;
+ },
},
watch: {
chartObj: {
@@ -283,7 +300,7 @@ export default {
height: 100%;
.dpieLegend {
position: absolute;
- top: vw(160);
+ bottom: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
@@ -293,8 +310,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-around;
- margin-bottom: vw(16);
- height: vw(30);
+ margin-bottom: vw(6);
width: 70%;
.dpieIcon {
margin-right: 6px;
@@ -319,11 +335,10 @@ export default {
}
}
.dpieWrap {
- width: 220px;
- height: 110px;
+ width: 100%;
+ height: 100%;
}
.dpiebg {
- margin-top: vw(20);
width: 220px;
height: 110px;
background: url("~@/assets/images/screen/dpie.png");
diff --git a/src/views/enterpriseTopic/antiAttack/index.vue b/src/views/enterpriseTopic/antiAttack/index.vue
index a059dec..8880182 100644
--- a/src/views/enterpriseTopic/antiAttack/index.vue
+++ b/src/views/enterpriseTopic/antiAttack/index.vue
@@ -1,12 +1,12 @@
-
+
-
+
-
@@ -39,7 +39,10 @@
+
@@ -109,16 +112,31 @@
-
-
-
-
+
+
+
+
+
+
+
+
-
+
-
@@ -129,7 +147,10 @@
+
@@ -457,9 +478,12 @@ export default {
};
},
methods: {
- gotoPage(path) {
+ gotoPage(path, val) {
this.$router.push({
path: path,
+ query: {
+ type: val,
+ },
});
},
},
@@ -482,7 +506,7 @@ export default {
.screenLeftTop {
display: flex;
flex-direction: column;
- height: vw(200);
+ height: 30%;
.rfsjWrap {
height: 100%;
display: flex;
@@ -559,7 +583,7 @@ export default {
.screenLeftBtm {
display: flex;
flex-direction: column;
- height: calc(100% - 9.8vw);
+ height: 70%;
.wfsjWrap {
height: 100%;
display: flex;
@@ -581,8 +605,7 @@ export default {
justify-content: space-evenly;
.line {
- height: vw(60);
- padding-left: vw(10);
+ padding: vw(4) vw(10);
display: flex;
align-items: center;
background-color: rgba(108, 151, 149, 0.2);
@@ -592,8 +615,8 @@ export default {
align-items: center;
flex: 1;
.icon {
- width: vw(50);
- height: vw(60);
+ width: vw(40);
+ height: vw(48);
margin-right: vw(8);
img {
width: 100%;
@@ -640,7 +663,7 @@ export default {
background: rgba(108, 151, 149, 0.2);
}
.zdryChart {
- height: calc(100% - 30px);
+ height: calc(100% - 20px);
}
}
}
@@ -649,11 +672,6 @@ export default {
display: flex;
flex-direction: column;
}
- .screenRight {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
.screenBLeft {
flex: 1;
diff --git a/src/views/enterpriseTopic/antiAttack/indexDetail.vue b/src/views/enterpriseTopic/antiAttack/indexDetail.vue
index f53b4e0..bf82011 100644
--- a/src/views/enterpriseTopic/antiAttack/indexDetail.vue
+++ b/src/views/enterpriseTopic/antiAttack/indexDetail.vue
@@ -305,7 +305,7 @@ export default {
id: "6",
},
],
- selectArr: ["1", "2", "3", "4", "5"],
+ selectArr: [],
columns: [
{
prop: "name",
@@ -315,6 +315,10 @@ export default {
disableMixinCreated: true,
};
},
+ mounted() {
+ this.selectArr = [];
+ this.selectArr.push(this.$route.query.type);
+ },
created() {
for (let i = 0; i < 20; i++) {
this.dataSource.push({
@@ -542,7 +546,7 @@ export default {
align-items: center;
.label {
color: #d0deee;
- width: vw(90);
+ width: vw(86);
}
.value {
color: #ffffff;
diff --git a/src/views/enterpriseTopic/antiAttack/pie.vue b/src/views/enterpriseTopic/antiAttack/pie.vue
index c9bf789..3b6b2be 100644
--- a/src/views/enterpriseTopic/antiAttack/pie.vue
+++ b/src/views/enterpriseTopic/antiAttack/pie.vue
@@ -92,8 +92,8 @@ export default {
// name: '访问来源2',
type: "pie",
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
- radius: [15, 20],
- center: ["center", 30],
+ radius: [20, 25],
+ center: ["center", 35],
avoidLabelOverlap: true, // 标签重叠时进行调整
data: [
{
diff --git a/src/views/enterpriseTopic/components/pie.vue b/src/views/enterpriseTopic/components/pie.vue
index dfb9c33..92286d6 100644
--- a/src/views/enterpriseTopic/components/pie.vue
+++ b/src/views/enterpriseTopic/components/pie.vue
@@ -23,6 +23,10 @@ export default {
},
methods: {
setOption() {
+ let temp = this.getHeight();
+ let height = parseInt(temp / 4);
+ console.log(height);
+
let point = this.chartObj.point; //环形图的具体 百分比
let total = this.chartObj.total;
@@ -35,15 +39,9 @@ export default {
show: true, // 是否显示
text: this.chartObj.name,
textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
- /* subtextStyle: {
- fontSize: 18,
- fontWeight: 500,
- lineHeight: 10,
- color: "#E3FEFF",
- }, */
textAlign: "center",
left: "47%",
- top: 120,
+ top: 3 * height,
},
color: this.chartObj.color,
graphic: {
@@ -52,12 +50,12 @@ export default {
type: "image",
style: {
image: this.chartObj.icon,
- width: 160,
- height: 160,
+ width: 4 * height,
+ height: 4 * height,
zIndex: 1,
},
left: "center",
- top: -20,
+ top: 8 - height,
},
],
},
@@ -65,8 +63,8 @@ export default {
{
// name: '访问来源1',
type: "pie",
- radius: [30, 40],
- center: ["center", 60],
+ radius: [height - 6, height],
+ center: ["center", height + 8],
data: [
{
value: 100, //对应显示的部分数据即100%
@@ -82,7 +80,7 @@ export default {
position: "center",
formatter: ((100 * point) / total).toFixed(0) + "%",
color: this.chartObj.color[0],
- fontSize: 18,
+ fontSize: 16,
},
labelLine: {
show: false,
@@ -92,9 +90,9 @@ export default {
// name: '访问来源2',
type: "pie",
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
- radius: [30, 40],
+ radius: [height - 6, height],
+ center: ["center", height + 8],
avoidLabelOverlap: true, // 标签重叠时进行调整
- center: ["center", 60],
data: [
{
value: (point / total) * 100,
diff --git a/src/views/enterpriseTopic/dangerTransport/index.vue b/src/views/enterpriseTopic/dangerTransport/index.vue
index 0d366e4..cac3776 100644
--- a/src/views/enterpriseTopic/dangerTransport/index.vue
+++ b/src/views/enterpriseTopic/dangerTransport/index.vue
@@ -38,7 +38,12 @@
-
+
{{ item.car }}
@@ -60,10 +65,10 @@
v-for="info in item.list"
:key="info.name"
>
-
+
+ ![]()
+ ![]()
+
{{ info.name }}
({{ info.total }})
@@ -98,42 +103,42 @@ export default {
leftList: [
{
name: "车辆超载",
- total: 1254,
+ total: 125,
id: "1",
},
{
name: "车辆闯禁",
- total: 1254,
+ total: 125,
id: "2",
},
{
name: "车辆超速",
- total: 1254,
+ total: 125,
id: "3",
},
{
name: "疲劳驾驶",
- total: 1254,
+ total: 125,
id: "4",
},
{
name: "未按车道行驶",
- total: 1254,
+ total: 125,
id: "5",
},
{
name: "车辆异常驻留",
- total: 1254,
+ total: 125,
id: "6",
},
{
name: "GPS离线",
- total: 1254,
+ total: 125,
id: "7",
},
{
name: "交通事故",
- total: 1254,
+ total: 125,
id: "8",
},
],
@@ -145,6 +150,7 @@ export default {
},
],
disableMixinCreated: true,
+ carSelect: "",
};
},
created() {
@@ -152,56 +158,64 @@ export default {
this.dataSource.push({
car: "浙B123" + i,
type: "重型" + i,
- wType: "危化品" + i,
+ wType: "危品" + i,
cmp: "兴达化工有限公司" + i,
list: [
{
name: "车辆超载",
- total: 1254,
+ total: 125,
id: "1",
icon: require("@/assets/images/topic/c1.png"),
+ aicon: require("@/assets/images/topic/c11.png"),
},
{
name: "车辆闯禁",
- total: 1254,
+ total: 125,
id: "2",
icon: require("@/assets/images/topic/c2.png"),
+ aicon: require("@/assets/images/topic/c22.png"),
},
{
name: "车辆超速",
- total: 1254,
+ total: 125,
id: "3",
icon: require("@/assets/images/topic/c3.png"),
+ aicon: require("@/assets/images/topic/c33.png"),
},
{
name: "疲劳驾驶",
- total: 1254,
+ total: 125,
id: "4",
icon: require("@/assets/images/topic/c4.png"),
+ aicon: require("@/assets/images/topic/c44.png"),
},
{
name: "未按车道行驶",
- total: 1254,
+ total: 125,
id: "5",
icon: require("@/assets/images/topic/c5.png"),
+ aicon: require("@/assets/images/topic/c55.png"),
},
{
name: "车辆异常驻留",
- total: 1254,
+ total: 125,
id: "6",
icon: require("@/assets/images/topic/c6.png"),
+ aicon: require("@/assets/images/topic/c66.png"),
},
{
name: "GPS离线",
- total: 1254,
+ total: 125,
id: "7",
icon: require("@/assets/images/topic/c7.png"),
+ aicon: require("@/assets/images/topic/c77.png"),
},
{
name: "交通事故",
- total: 1254,
+ total: 125,
id: "8",
icon: require("@/assets/images/topic/c8.png"),
+ aicon: require("@/assets/images/topic/c88.png"),
},
],
});
@@ -357,6 +371,10 @@ export default {
.carIcon {
width: vw(56);
height: vw(54);
+ img {
+ /* width: 100%;
+ height: 100%; */
+ }
}
.carNameWrap {
display: flex;
@@ -378,9 +396,9 @@ export default {
}
&:hover {
cursor: pointer;
- /* background: url("~@/assets/images/topic/aCol.png") no-repeat center
+ background: url("~@/assets/images/topic/aCol.png") no-repeat center
center;
- background-size: 100% 100%; */
+ background-size: 100% 100%;
.colLeft {
.carNum {
background: url("~@/assets/images/topic/caran.png") no-repeat
diff --git a/src/views/enterpriseTopic/fireSafety/index.vue b/src/views/enterpriseTopic/fireSafety/index.vue
index 9757963..c5b1654 100644
--- a/src/views/enterpriseTopic/fireSafety/index.vue
+++ b/src/views/enterpriseTopic/fireSafety/index.vue
@@ -235,7 +235,7 @@ export default {
height: 100%;
.top {
display: flex;
- flex: 1;
+ height: 60%;
.left {
flex: 1;
display: flex;
@@ -248,7 +248,7 @@ export default {
}
}
.btm {
- height: 240px;
+ height: 40%;
}
}
@@ -299,7 +299,7 @@ export default {
background-size: 100% 100%;
display: flex;
.left {
- flex: 1;
+ flex: 1.1;
}
.right {
flex: 1;
diff --git a/src/views/enterpriseTopic/fireSafety/pie.vue b/src/views/enterpriseTopic/fireSafety/pie.vue
index cf044a7..87eb842 100644
--- a/src/views/enterpriseTopic/fireSafety/pie.vue
+++ b/src/views/enterpriseTopic/fireSafety/pie.vue
@@ -23,6 +23,9 @@ export default {
},
methods: {
setOption() {
+ let temp = this.getHeight();
+ let height = parseInt(temp / 2.5);
+ console.log(height);
let point = this.chartObj.point; //环形图的具体 百分比
let total = this.chartObj.total;
@@ -41,11 +44,11 @@ export default {
type: "image",
style: {
image: this.chartObj.icon,
- width: 80,
- height: 80,
+ width: 2 * height - 12,
+ height: 2 * height - 12,
zIndex: 1,
},
- left: 100,
+ left: 3 * height + 6,
top: "center",
},
],
@@ -54,8 +57,8 @@ export default {
{
// name: '访问来源1',
type: "pie",
- radius: [30, 36],
- center: [140, "center"],
+ radius: [height - 6, height],
+ center: [4 * height, "center"],
data: [
{
value: 100, //对应显示的部分数据即100%
@@ -78,8 +81,8 @@ export default {
// name: '访问来源2',
type: "pie",
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
- radius: [30, 36],
- center: [140, "center"],
+ radius: [height - 6, height],
+ center: [4 * height, "center"],
avoidLabelOverlap: true, // 标签重叠时进行调整
data: [
{
diff --git a/src/views/enterpriseTopic/inSecurity/index.vue b/src/views/enterpriseTopic/inSecurity/index.vue
index 9aafbd6..530a458 100644
--- a/src/views/enterpriseTopic/inSecurity/index.vue
+++ b/src/views/enterpriseTopic/inSecurity/index.vue
@@ -734,9 +734,9 @@ export default {
.line {
display: flex;
align-items: center;
- margin-top: vw(10);
- height: vw(60);
- padding: 0 vw(12);
+ margin-top: vw(8);
+ height: vw(54);
+ padding: 0 vw(8);
background: url("~@/assets/images/topic/strfsj.png") no-repeat
center center;
background-size: 100% 100%;
diff --git a/src/views/enterpriseTopic/netSafety/ballWrap.vue b/src/views/enterpriseTopic/netSafety/ballWrap.vue
index 7747c5f..8500f30 100644
--- a/src/views/enterpriseTopic/netSafety/ballWrap.vue
+++ b/src/views/enterpriseTopic/netSafety/ballWrap.vue
@@ -123,7 +123,9 @@ export default {
label: {
//此处没有生效，本地生效
textStyle: {
- fontSize: 14,
+ padding:[0,2,0,0],
+ fontSize: 12,
+ fontWeight:400,
color: this.chartObj.color[0],
},
formatter: (item) => {
diff --git a/src/views/enterpriseTopic/netSafety/dpie.vue b/src/views/enterpriseTopic/netSafety/dpie.vue
index c55a520..588ec79 100644
--- a/src/views/enterpriseTopic/netSafety/dpie.vue
+++ b/src/views/enterpriseTopic/netSafety/dpie.vue
@@ -1,5 +1,5 @@
-
+
@@ -15,7 +15,14 @@
-
@@ -61,6 +67,7 @@
+
@@ -34,10 +41,18 @@ export default {
},
},
data() {
- return {};
+ return {
+ viewH: 1,
+ };
},
mounted() {
- this.setOption();
+ let temp = this.getHeight();
+ let height = parseInt(temp / 4);
+ this.viewH = 2 * height;
+ console.log(height);
+ setTimeout(() => {
+ this.setOption();
+ }, 500);
},
methods: {
setOption() {
@@ -132,7 +147,7 @@ export default {
show: false,
boxHeight: boxHeight, //圆环的高度
left: 2,
- top: -24, //3d饼图的位置
+ top: -14, //3d饼图的位置
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 24, //角度
@@ -149,11 +164,11 @@ export default {
};
//获取3d丙图的最高扇区的高度
- const getHeight3D = (series, height) => {
+ const getHeight3D = (series, h) => {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
- return (height * 70) / series[0].pieData.value;
+ return (h * 70) / series[0].pieData.value;
};
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
@@ -255,6 +270,10 @@ export default {
});
option && myChart.setOption(option);
},
+ getHeight() {
+ let div = document.getElementById("dpieWrap");
+ return div.clientHeight;
+ },
},
watch: {
chartObj: {
@@ -271,12 +290,12 @@ export default {
.dpiePanel {
position: relative;
flex: 1;
+ height: 100%;
.dpieLegend {
position: absolute;
- top: 10px;
right: vw(50);
width: vw(240);
- height: 120px;
+ height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@@ -309,14 +328,10 @@ export default {
}
}
.dpieWrap {
- width: 240px;
- height: 130px;
+ width: 100%;
+ height: 100%;
}
.dpiebg {
- margin-top: vw(10);
- margin-left: vw(30);
- width: 240px;
- height: 130px;
background: url("~@/assets/images/screen/dpie.png");
background-size: 100% 100%;
display: flex;
diff --git a/src/views/enterpriseTopic/netSafety/index.vue b/src/views/enterpriseTopic/netSafety/index.vue
index a0f1eeb..35bcae9 100644
--- a/src/views/enterpriseTopic/netSafety/index.vue
+++ b/src/views/enterpriseTopic/netSafety/index.vue
@@ -16,7 +16,13 @@
+