|  |  | 
 |  |  |             <div class="com_header"> | 
 |  |  |               <div class="title"> | 
 |  |  |                 <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |                 <div>本年累计循环烟箱</div> | 
 |  |  |                 <div>本年安徽中烟累计循环烟箱</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |                 <div class="name">本年累计循环烟箱</div> | 
 |  |  |                 <div><span class="num" style="color: #68cfb2;" v-if="data1.smokeBoxTotal || data1.smokeBoxTotal == 0">{{ | 
 |  |  |                   data1.smokeBoxTotal.toLocaleString() | 
 |  |  |                     }}</span><span>个</span></div> | 
 |  |  |                     }}</span><span>只</span></div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  | 
 |  |  |                     src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                   <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   <span class="val" | 
 |  |  |                     v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ | 
 |  |  |                     v-if="data1.electricityQuantity.sameNum && data1.electricityQuantity.sameNum != 0">{{ | 
 |  |  |                       Math.abs(((data1.electricityQuantity.totalNum - | 
 |  |  |                         data1.electricityQuantity.sameNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) | 
 |  |  |                         data1.electricityQuantity.sameNum) / data1.electricityQuantity.sameNum * 100).toFixed(1)) | 
 |  |  |                     }}%</span> | 
 |  |  |                   <span class="val" v-else style="margin-left: 4px;"> -</span> | 
 |  |  |                   <span class="lab">环比</span> | 
 |  |  | 
 |  |  |                     src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                   <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   <span class="val" | 
 |  |  |                     v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ | 
 |  |  |                     v-if="data1.electricityQuantity.ringNum && data1.electricityQuantity.ringNum != 0">{{ | 
 |  |  |                       Math.abs(((data1.electricityQuantity.totalNum - | 
 |  |  |                         data1.electricityQuantity.ringNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) | 
 |  |  |                         data1.electricityQuantity.ringNum) / data1.electricityQuantity.ringNum * 100).toFixed(1)) | 
 |  |  |                     }}%</span> | 
 |  |  |                   <span class="val" v-else style="margin-left: 4px;"> -</span> | 
 |  |  |                 </div> | 
 |  |  | 
 |  |  |                 </div> | 
 |  |  |                 <div class="static" v-if="data1.gasQuantity"> | 
 |  |  |                   <span class="lab">同比</span> | 
 |  |  |                   <template v-if="data1.gasQuantity.sameNum"> | 
 |  |  |                     <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.sameNum" class="icon" | 
 |  |  |                       src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                     <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   </template> | 
 |  |  |                   <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ | 
 |  |  |                     Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.sameNum) / data1.gasQuantity.totalNum | 
 |  |  |                   <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.sameNum" class="icon" | 
 |  |  |                     src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                   <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   <span class="val" v-if="data1.gasQuantity.sameNum && data1.gasQuantity.sameNum != 0">{{ | 
 |  |  |                     Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.sameNum) / data1.gasQuantity.sameNum | 
 |  |  |                       * 100).toFixed(1)) | 
 |  |  |                   }}%</span> | 
 |  |  |                   <span class="val" v-else style="margin-left: 4px;">-</span> | 
 |  |  |                   <span class="lab">环比</span> | 
 |  |  |                   <template v-if="data1.gasQuantity.sameNum"> | 
 |  |  |                     <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.ringNum" class="icon" | 
 |  |  |                       src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                     <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   </template> | 
 |  |  |                   <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ | 
 |  |  |                     Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.ringNum) / data1.gasQuantity.totalNum | 
 |  |  |                   <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.ringNum" class="icon" | 
 |  |  |                     src="@/assets/images/ic_up.webp" alt="" /> | 
 |  |  |                   <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
 |  |  |                   <span class="val" v-if="data1.gasQuantity.ringNum && data1.gasQuantity.ringNum != 0">{{ | 
 |  |  |                     Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.ringNum) / data1.gasQuantity.ringNum | 
 |  |  |                       * 100).toFixed(1)) | 
 |  |  |                   }}%</span> | 
 |  |  |                   <span class="val" v-else style="margin-left: 4px;">-</span> | 
 |  |  | 
 |  |  |             </template> | 
 |  |  |             <div class="bottom_wrap" v-if="data1.yesterdayElectricity"> | 
 |  |  |               <div class="bottom bottom1" @click="changeacDay(3)"> | 
 |  |  |                 <div :class="{ active: activeDays == 3 }" class="num fs_linear">{{ data1.yesterdayElectricity.total || 0 | 
 |  |  |                 <div :class="{ active: activeDays == 3 }" class="num fs_linear">{{ dataObj6.obj1.total || 0 | 
 |  |  |                   }}</div> | 
 |  |  |                 <div class="name">昨日用电</div> | 
 |  |  |                 <div class="unit">kw·h</div> | 
 |  |  | 
 |  |  |                 <img v-else src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" /> | 
 |  |  |               </div> | 
 |  |  |               <div class="bottom bottom2" @click="changeacDay(1)"> | 
 |  |  |                 <div :class="{ active: activeDays == 1 }" class="num">{{ data1.todayElectricity.total || 0 }}</div> | 
 |  |  |                 <div :class="{ active: activeDays == 1 }" class="num">{{ dataObj6.obj2.total || 0 }}</div> | 
 |  |  |                 <div class="name">今日用电</div> | 
 |  |  |                 <div class="unit">kw·h</div> | 
 |  |  |                 <img v-if="activeDays == 1" src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" /> | 
 |  |  |                 <img v-else src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" /> | 
 |  |  |               </div> | 
 |  |  |               <div class="bottom bottom3" @click="changeacDay(2)"> | 
 |  |  |                 <div :class="{ active: activeDays == 2 }" class="num fs_linear">{{ data1.monthElectricity.total || 0 }} | 
 |  |  |                 <div :class="{ active: activeDays == 2 }" class="num fs_linear">{{ dataObj6.obj3.total || 0 }} | 
 |  |  |                 </div> | 
 |  |  |                 <div class="name">本月用电</div> | 
 |  |  |                 <div class="unit">kw·h</div> | 
 |  |  | 
 |  |  |       }, | 
 |  |  |       data: data5.value.map(i => dayjs(i.timeData).format('M')) | 
 |  |  |     }, | 
 |  |  |     // tooltip: { | 
 |  |  |     //   trigger: 'axis', | 
 |  |  |     //   axisPointer: { | 
 |  |  |     //     type: 'line' | 
 |  |  |     //   }, | 
 |  |  |     // }, | 
 |  |  |     tooltip: { | 
 |  |  |       trigger: 'axis', | 
 |  |  |       axisPointer: { | 
 |  |  |         type: 'line' | 
 |  |  |       }, | 
 |  |  |       formatter: function (params) { | 
 |  |  |         // 遍历悬浮时的所有点,定制化显示内容 | 
 |  |  |         let result = `<div> | 
 |  |  |           <div style="width: 120px">${params[0].name}月</div> | 
 |  |  |           <div style="display: flex;align-items: center;;margin-top: 2px;"> | 
 |  |  |             <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #f6d047;margin-right: 6px;"></div></div> | 
 |  |  |             <div><strong>${params[0].value} L</strong></div> | 
 |  |  |           </div> | 
 |  |  |         </div>` | 
 |  |  |         return result | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     yAxis: { | 
 |  |  |       type: 'value', | 
 |  |  | 
 |  |  | const data1 = ref({}) | 
 |  |  | const getData1 = () => { | 
 |  |  |   zxcenterData().then(res => { | 
 |  |  |     const result = res.data | 
 |  |  |     const result = res.data || {} | 
 |  |  |     data1.value = result | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | const activeDays = ref('1') | 
 |  |  | const data6 = ref({}) | 
 |  |  | const data6 = ref([]) | 
 |  |  | const dataObj6 = ref({ | 
 |  |  |   obj1: { total: 0 }, | 
 |  |  |   obj2: { total: 0 }, | 
 |  |  |   obj3: { total: 0 }, | 
 |  |  | }) | 
 |  |  | const changeacDay = (val) => { | 
 |  |  |   activeDays.value = val | 
 |  |  |   getData6() | 
 |  |  |   if (val == 3) { | 
 |  |  |     data6.value = dataObj6.value.obj1.list | 
 |  |  |   } else if (val == 1) { | 
 |  |  |     data6.value = dataObj6.value.obj2.list | 
 |  |  |   } else { | 
 |  |  |     data6.value = dataObj6.value.obj3.list | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const getData6 = () => { | 
 |  |  |   regionDataRanking({ type: activeDays.value }).then(res => { | 
 |  |  |     const result = res.data | 
 |  |  |     data6.value = result | 
 |  |  |   let obj = { | 
 |  |  |     obj1: { list: [], total: 0 }, | 
 |  |  |     obj2: { list: [], total: 0 }, | 
 |  |  |     obj3: { list: [], total: 0 }, | 
 |  |  |   } | 
 |  |  |   regionDataRanking({ type: 3 }).then(res => { | 
 |  |  |     let arr = res.data || [] | 
 |  |  |     obj.obj1.list = arr | 
 |  |  |     arr.forEach(i => { | 
 |  |  |       obj.obj1.total += Number(i.value) | 
 |  |  |     }) | 
 |  |  |     obj.obj1.total = obj.obj1.total.toFixed(1) | 
 |  |  |     dataObj6.value = obj | 
 |  |  |   }) | 
 |  |  |   regionDataRanking({ type: 1 }).then(res => { | 
 |  |  |     let arr = res.data || [] | 
 |  |  |     obj.obj2.list = arr | 
 |  |  |     arr.forEach(i => { | 
 |  |  |       obj.obj2.total += Number(i.value) | 
 |  |  |     }) | 
 |  |  |     obj.obj2.total = obj.obj2.total.toFixed(1) | 
 |  |  |     dataObj6.value = obj | 
 |  |  |     changeacDay(1) | 
 |  |  |   }) | 
 |  |  |   regionDataRanking({ type: 2 }).then(res => { | 
 |  |  |     let arr = res.data || [] | 
 |  |  |     obj.obj3.list = arr | 
 |  |  |     arr.forEach(i => { | 
 |  |  |       obj.obj3.total += Number(i.value) | 
 |  |  |     }) | 
 |  |  |     obj.obj3.total = obj.obj3.total.toFixed(1) | 
 |  |  |     dataObj6.value = obj | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     tooltip: { | 
 |  |  |       trigger: 'axis', | 
 |  |  |       axisPointer: { | 
 |  |  |         type: 'line' | 
 |  |  |       }, | 
 |  |  |       formatter: function (params) { | 
 |  |  |         // 遍历悬浮时的所有点,定制化显示内容 | 
 |  |  |         let result = `<div> | 
 |  |  |           <div style="width: 120px">${params[0].name}月</div> | 
 |  |  |           <div style="display: flex;align-items: center;;margin-top: 2px;"> | 
 |  |  |             <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #61a1c4;margin-right: 6px;"></div></div> | 
 |  |  |             <div><strong>${params[0].value} </strong></div> | 
 |  |  |           </div> | 
 |  |  |         </div>` | 
 |  |  |         return result | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     xAxis: { | 
 |  |  |       type: 'category', | 
 |  |  | 
 |  |  | const data4 = ref([]) | 
 |  |  | const getData4 = () => { | 
 |  |  |   zxloadCurve().then(res => { | 
 |  |  |     const result = res.data | 
 |  |  |     const result = res.data || [] | 
 |  |  |     data4.value = result | 
 |  |  |     if (data4.value && data4.value.length > 0) { | 
 |  |  |       initLoadReal() | 
 |  |  | 
 |  |  | const data5 = ref([]) | 
 |  |  | const getData5 = () => { | 
 |  |  |   zxenergyDataList({ type: 2 }).then(res => { | 
 |  |  |     const result = res.data | 
 |  |  |     const result = res.data || [] | 
 |  |  |     data5.value = result | 
 |  |  |     initOperation() | 
 |  |  |   }) | 
 |  |  | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       .bottom { | 
 |  |  |         width: 140px; | 
 |  |  |         width: 150px; | 
 |  |  |         height: 194px; | 
 |  |  |         position: absolute; | 
 |  |  |         text-align: center; | 
 |  |  | 
 |  |  |     z-index: -1; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | </style> |