Преглед изворни кода

fix: 地图区块颜色区分

TwoKe945 пре 1 година
родитељ
комит
2093a638fa

+ 63 - 5
app/src/assets/css/main.css

@@ -85,20 +85,20 @@ html,body {
   background-color: rgba(0,213,255, 0.3) !important;
 }
 
-.el-time-range-picker {
-  background-color: #4167a0;
+.el-time-range-picker,.el-date-range-picker{
+  background-color: rgba(0, 25, 55, 0.8);
   color: #fff;
 }
 
-.el-time-spinner__item.active:not(.disabled) {
-  color: #2f7df2;
+.el-time-spinner__item.active:not(.disabled),.el-time-panel__btn.confirm  {
+  color: rgba(0, 213, 255, 0.8);
 }
 
 .el-time-spinner__item  {
   color: #fff;
 }
 .el-time-spinner__item:hover:not(.disabled):not(.active) {
-  background:  #2f7df2;
+  background:  rgba(0, 213, 255, 0.19);
 }
 .el-time-panel__btn {
   color: #fff;
@@ -109,3 +109,61 @@ html,body {
 .el-date-editor .el-range-separator {
   margin-bottom: 5px;
 }
+.el-time-range-picker.el-picker-panel.el-popper,.el-time-range-picker__body {
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-time-range-picker .el-time-panel__footer {
+  border-top: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-time-range-picker__body.el-time-panel__content::after, .el-time-panel__content.el-time-panel__content::before {
+  border-top: 0px solid rgba(0, 213, 255, 0.6) !important;
+  border-bottom: 0px solid rgba(0, 213, 255, 0.6) !important;
+}
+/* 日期下拉框 */
+
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-picker-panel {
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-picker-panel__content .el-picker-panel__icon-btn  {
+  color: rgba(0, 213, 255, 0.6);
+}
+.el-date-table th  {
+  border-bottom: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+
+/* 全局滚动条样式设置 */
+/** 滚动条 */
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 4px;
+  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+  background: rgba(0, 213, 255, 0.73);
+  opacity: 0.7;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+  border-radius: 3px;
+  background: rgba(0, 213, 255, 0.3);
+  opacity: 0.7;
+}

+ 1 - 1
app/src/views/FireCondition/components/FireDistribution.vue

@@ -99,7 +99,7 @@ export default {
       if (tq === 0) {
         return "—";
       }
-      return `${parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100)}%`;
+      return `${Math.ceil((Math.abs(bn - tq) / tq).toFixed(4) * 100)}%`;
     },
     getIcon(bn, tq) {
       if (tq === 0) {

+ 9 - 9
app/src/views/FireCondition/components/FireIndex/index.vue

@@ -257,10 +257,10 @@ export default {
             srstb: tempData.srstb,
             zzjjsstb: tempData.zzjjsstb,
             hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+            wrsp: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
+            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
+            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb)) }%`,
+            hzqsp: `${Math.ceil(Math.abs(tempData.hzqstb))}%`
           }
         } else {
           this.monthTbData = {
@@ -289,10 +289,10 @@ export default {
             srstb: tempData.srstb,
             zzjjsstb: tempData.zzjjsstb,
             hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+            wrsp: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
+            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
+            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb))}%`,
+            hzqsp: `${Math.ceil(Math.abs(tempData.hzqstb))}%`
           }
         } else {
           this.yearTbData = {
@@ -375,7 +375,7 @@ export default {
 		}
 
 		.num {
-			font-size: 16px;
+			font-size: 15px;
 		}
 
 		.num.up {

+ 1 - 1
app/src/views/FireCondition/components/hzfxCont.vue

@@ -491,4 +491,4 @@
 		width: 10px;
 		margin-right: 3px;
 	}
-</style>
+</style>

+ 0 - 31
app/src/views/Home/components/AlarmingSituationDynamics/AlaemList.vue

@@ -327,34 +327,3 @@
 		//下拉框
 	}
 </style>
-
-
-<style>
-	.el-select-dropdown.el-popper {
-		background-color: #4167a0;
-	}
-
-	.el-popper[x-placement^=bottom] .popper__arrow::after {
-		border-bottom-color: #4167a0 !important;
-	}
-
-	.el-select-dropdown.el-popper {
-		border: 1px solid rgba(0, 213, 255, 0.6) !important;
-	}
-
-	.el-select-dropdown.el-popper li.el-select-dropdown__item span {
-		color: #fff;
-	}
-
-	.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
-		color: #2f7df2;
-	}
-
-	.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
-		background-color: #2f7df2;
-	}
-
-	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
-		color: #fff !important;
-	}
-</style>

+ 9 - 9
app/src/views/Home/components/FireIndex/index.vue

@@ -260,10 +260,10 @@ export default {
             srstb: tempData.srstb,
             zzjjsstb: tempData.zzjjsstb,
             hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+            wrsp: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
+            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
+            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb))}%`,
+            hzqsp: `${Math.ceil(Math.abs(tempData.hzqstb))}%`
           }
         } else {
           this.monthTbData = {
@@ -292,10 +292,10 @@ export default {
             srstb: tempData.srstb,
             zzjjsstb: tempData.zzjjsstb,
             hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+            wrsp: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
+            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
+            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb))}%`,
+            hzqsp: `${ Math.ceil(Math.abs(tempData.hzqstb))}%`
           }
         } else {
           this.yearTbData = {
@@ -380,7 +380,7 @@ export default {
     font-size: 20px;
   }
   .num {
-    font-size: 16px;
+    font-size: 15px;
   }
   .num.up {
     color: #fb3636;

+ 6 - 6
app/src/views/Home/components/MapCharts.vue

@@ -249,13 +249,13 @@ export default {
               // max: this.calcMaxData(val),
               pieces: (() => {
                 const maxData = this.calcMaxData(val)
-                const intData = toInt(Math.ceil(maxData / 5))
+                const intData = toInt(Math.ceil(maxData / 4))
                 return [
-                  {min: intData*4, max: intData * 5},
                   {min: intData*3, max: intData * 4},
                   {min: intData*2, max: intData * 3},
-                  {min: intData, max: intData * 2},
-                  {min: 0, max: intData},
+                  {min: intData , max: intData * 2},
+                  {min: 1, max: intData},
+                  {min: 0, max: 0},
                 ]
               })()
             }
@@ -436,8 +436,8 @@ export default {
               {min: intData*4, max: intData * 5},
               {min: intData*3, max: intData * 4},
               {min: intData*2, max: intData * 3},
-              {min: intData, max: intData * 2},
-              {min: 0, max: intData},
+              {min: 1, max: intData * 2},
+              {min: 0, max: 0 },
             ]
           })()
         },

+ 8 - 3
app/src/views/Home/index.vue

@@ -171,9 +171,14 @@ export default {
         },
         () => {
           const item = params.data.meta
-          let res = `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起 <br />`;
-          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人 <br />`;
-          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元`;
+          let res = `${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名 <br />`;
+          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元<br/>`;
+          res += `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人<br />`;
+          res += `重大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.重大风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `较大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.较大风险 || 0}</span>栋<br/>`;
+          res += `一般风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.一般风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `低风险风数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.低风险 || 0}</span>栋<br/>`;
           return res;
         }
       );

+ 8 - 3
app/src/views/Risk/index.vue

@@ -128,9 +128,14 @@ export default {
         { title: params.name },
         () => {
           const item = params.data.meta
-          let res = `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起 <br />`;
-          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人 <br />`;
-          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元`;
+          let res = `${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名 <br />`;
+          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元<br/>`;
+          res += `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人<br />`;
+          res += `重大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.重大风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `较大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.较大风险 || 0}</span>栋<br/>`;
+          res += `一般风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.一般风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
+          res += `低风险风数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.低风险 || 0}</span>栋<br/>`;
           return res;
         }
       );