| | |
| | | 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; |