lilei 4 vuotta sitten
vanhempi
commit
56df0e1f93
2 muutettua tiedostoa jossa 188 lisäystä ja 119 poistoa
  1. BIN
      src/assets/headBg.png
  2. 188 119
      src/views/dataView/borard.vue

BIN
src/assets/headBg.png


+ 188 - 119
src/views/dataView/borard.vue

@@ -1,71 +1,92 @@
 <template>
   <div class="dataView-content">
     <div class="data-header">
-      <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
-        智享亿家投递大数据
-      </dv-border-box-5>
-      <dv-decoration-3 style="width:25%;height:30px;" />
-      <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
-        <div>区域</div>
-        <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
-          <option value="">省</option>
-          <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
-        </select> -->
-        <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
-          <option value="">全部市</option>
-          <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
-        </select>
-        <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
-          <option value="">全部区/县</option>
-          <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
-        </select>
-        <a-icon
-          @click="isFullscreenMap"
-          :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
-          :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
-      </dv-border-box-5>
-    </div>
-    <div class="data-body">
-      <div class="b-left">
+      <div class="total-block">
         <div>
-          <dv-border-box-13>
-            <div id="con1" style="width: 100%;height: 100%;"></div>
-          </dv-border-box-13>
+          <div class="total-label"><i class="cor1" v-for="item in 3" :key="item">|</i>用户总数</div>
+          <div class="total-value cor1">{{ userTotal }}</div>
         </div>
         <div>
-          <dv-border-box-13>
-            <div id="con2" style="width: 100%;height: 100%;"></div>
-          </dv-border-box-13>
+          <div class="total-label"><i class="cor2" v-for="item in 3" :key="item">|</i>试点单位数</div>
+          <div class="total-value cor2">{{ dwTotal }}</div>
         </div>
         <div>
-          <dv-border-box-13>
-            <div id="con4" style="width: 100%;height: 100%;"></div>
-          </dv-border-box-13>
+          <div class="total-label"><i class="cor3" v-for="item in 3" :key="item">|</i>设备总数</div>
+          <div class="total-value cor3">{{ devTotal }}</div>
         </div>
       </div>
+      <div class="page-title">
+        <!-- 智享亿家投递大数据 -->
+      </div>
+      <div>
+        <div class="border-box-content">
+          <div>区域</div>
+          <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
+          <option value="">省</option>
+          <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
+        </select> -->
+          <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
+            <option value="">全部</option>
+            <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
+          </select>
+          <!-- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
+          <option value="">全部区/县</option>
+          <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
+        </select> -->
+          <a-icon
+            @click="isFullscreenMap"
+            :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
+            :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
+        </div>
+      </div>
+    </div>
+    <div class="data-body">
       <div class="b-middle">
         <div>
           <dv-border-box-8 style="padding: 10px;">
-            <div id="map" :style="{height: '100%'}"></div>
-          </dv-border-box-8>
-        </div>
-        <div>
-          <dv-border-box-12>
-            <div class="total-block">
-              <div>
-                <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
-                <div class="total-label">用户总数</div>
+            <div class="lajiliang">
+              <div class="laji-title">垃圾产生量</div>
+              <div class="laji-item">
+                <div class="cor1">可回收垃圾</div>
+                <div>1000 吨</div>
+              </div>
+              <div class="laji-item">
+                <div class="cor2">其它垃圾</div>
+                <div>1000 吨</div>
               </div>
-              <div>
-                <dv-digital-flop :config="dwTotal" style="width:100%;height:50px;" />
-                <div class="total-label">试点单位数</div>
+              <div class="laji-item">
+                <div class="cor3">厨余垃圾</div>
+                <div>1000 吨</div>
               </div>
-              <div>
-                <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
-                <div class="total-label">设备总数</div>
+              <div class="laji-item">
+                <div class="cor4">建筑垃圾</div>
+                <div>1000 吨</div>
               </div>
+              <div class="laji-item">
+                <div class="cor5">有害垃圾</div>
+                <div>1000 吨</div>
+              </div>
+              <div class="laji-total">共计<span>5000</span>吨</div>
             </div>
-          </dv-border-box-12>
+            <div id="map" :style="{height: '100%'}"></div>
+          </dv-border-box-8>
+        </div>
+        <div>
+          <div>
+            <dv-border-box-13>
+              <div id="con1" style="width: 100%;height: 100%;"></div>
+            </dv-border-box-13>
+          </div>
+          <div>
+            <dv-border-box-13>
+              <div id="con2" style="width: 100%;height: 100%;"></div>
+            </dv-border-box-13>
+          </div>
+          <div>
+            <dv-border-box-13>
+              <div id="con4" style="width: 100%;height: 100%;"></div>
+            </dv-border-box-13>
+          </div>
         </div>
       </div>
       <div class="b-right">
@@ -150,21 +171,9 @@ export default {
       chart2: null,
       chart3: null,
       chart4: null,
-      userTotal: {
-        number: [],
-        content: '{nt}',
-        formatter: this.formatter
-      },
-      devTotal: {
-        number: [],
-        content: '{nt}',
-        formatter: this.formatter
-      },
-      dwTotal: {
-        number: [],
-        content: '{nt}',
-        formatter: this.formatter
-      },
+      userTotal: 0,
+      devTotal: 0,
+      dwTotal: 0,
       isMapFull: false,
       map: null, // 地图对象
       markerLayer: null, // 地图点标记对象
@@ -278,13 +287,7 @@ export default {
         'districtCode': this.queryParam.districtCode
       }).then(res => {
         const data = res.data || 0
-        const arr = []
-        arr.push(data)
-        this.userTotal = {
-          number: arr,
-          content: '{nt}',
-          formatter: this.formatter
-        }
+        this.userTotal = data
       })
     },
     // 获取设备总数
@@ -295,13 +298,7 @@ export default {
         'districtCode': this.queryParam.districtCode
       }).then(res => {
         const data = res.data || 0
-        const arr = []
-        arr.push(data)
-        this.devTotal = {
-          number: arr,
-          content: '{nt}',
-          formatter: this.formatter
-        }
+        this.devTotal = data
       })
     },
     // 获取新用户注册量
@@ -849,25 +846,60 @@ export default {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-
+      background-image: url(../../assets/headBg.png);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: auto 80%;
+      padding: 10px 0 0;
+      .total-block {
+        width: 35%;
+      	display: flex;
+      	align-items: center;
+      	justify-content: center;
+      	>div {
+      		width: 30%;
+          padding-right: 10px;
+      	}
+      	.total-label {
+      		color: #fff;
+      		text-align: left;
+          display: flex;
+          i{
+            transform: rotate(330deg);
+            display: inline-block;
+            font-size: 12px;
+            margin: 0 1px;
+            &:last-child{
+              margin-right: 10px;
+            }
+          }
+      	}
+        .total-value{
+          font-size: 22px;
+          font-weight: bold;
+        }
+        .cor1{
+          color: #00ff84;
+        }
+        .cor2{
+          color: #d7ff00;
+        }
+        .cor3{
+          color: #00c0ff;
+        }
+      }
+      .page-title{
+        width: 50%;
+        flex-grow: 1;
+        color: #00aaff;
+        font-size: 32px;
+        text-align: center;
+      }
 			>div {
-				height: 80px;
-				line-height: 80px;
-
-				&:first-child {
-					width: 40%;
-					color: #b3dcf5;
-          padding-right: 10%;
-					.border-box-content {
-						font-size: 30px;
-						text-align: center;
-					}
-				}
-
+        padding: 15px;
 				&:last-child {
-					width: 35%;
+					width: 25%;
 					color: #0ed3ff;
-
 					.border-box-content {
 						font-size: 18px;
 						text-align: center;
@@ -879,11 +911,11 @@ export default {
 						select {
 							background: #021931;
 							border: 1px solid #3e566d;
-							min-width: 20%;
-							padding: 2px 10px;
+							min-width: 30%;
+							padding: 2px 20px;
 							margin: 0 10px;
 							box-shadow: inset 0 0 2px #69b2ff;
-							border-radius: 6px;
+							border-radius: 60px;
 						}
 					}
 				}
@@ -893,8 +925,7 @@ export default {
 		.data-body {
 			flex-grow: 1;
 			display: flex;
-
-			.b-left,
+      padding: 0 15px 15px;
 			.b-right {
 				width: 25%;
 				display: flex;
@@ -902,37 +933,75 @@ export default {
 				flex-direction: column;
         justify-content: space-around;
         > div{
-          height: 33.3%;
+          height: 33%;
         }
 			}
 
 			.b-middle {
-				width: 50%;
+				width: 75%;
 				padding: 5px;
 				display: flex;
 				flex-direction: column;
+        justify-content: space-around;
 
 				>div {
 					&:first-child {
-						height: 80%;
+						height: 66%;
+            .lajiliang{
+              width: 23%;
+              position: absolute;
+              padding: 15px;
+              background: rgba(255,255,255,0.3);
+              border-radius: 6px;
+              left: 20px;
+              top: 20px;
+              z-index: 1000;
+              color: #fff;
+              .laji-title{
+                text-align: center;
+                padding: 0 0 10px;
+              }
+              .laji-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 15px 0;
+                > div{
+                  &:first-child{
+                    border-radius: 30px;
+                    padding: 2px 10px;
+                    font-size: 12px;
+                    width: 50%;
+                    text-align: center;
+                  }
+                }
+                .cor1{
+                  background-color: #c2523f;
+                }
+                .cor2{
+                  background-color: #c59b16;
+                }
+                .cor3{
+                  background-color: #7561af;
+                }
+                .cor4{
+                  background-color: #418ec6;
+                }
+                .cor5{
+                  background-color: #20ce7a;
+                }
+              }
+            }
 					}
 
 					&:last-child {
-						height: 20%;
-
-						.total-block {
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							height: 100%;
-							>div {
-								width: 30%;
-							}
-							.total-label {
-								color: #fff;
-								text-align: center;
-							}
-						}
+						height: 33%;
+            display: flex;
+            > div{
+              width: 33.3%;
+              justify-content: space-around;
+              align-items: center;
+            }
 					}
 				}
 			}