| | |
| | | </div> |
| | | </div> |
| | | </el-card> --> |
| | | <el-row type="flex" class="data-indicator-overview"> |
| | | <el-col class="home-body-left"> |
| | | <el-card class="body-left-title" :bordered="false"> |
| | | <el-card |
| | | class="body-left-title" |
| | | :bordered="false" |
| | | style="margin-bottom: 12px;" |
| | | > |
| | | <div slot="header" class="clearfix"> |
| | | <span>当日双控数据指标总览</span> |
| | | </div> |
| | | <el-row class="double-data-show-content"> |
| | | <el-col :span="4" class="total"> |
| | | <el-col :span="5" class="total"> |
| | | <img alt="" src="~@/assets/home/zonghe.svg" /> |
| | | <div class="left-title-style"> |
| | | <div> |
| | |
| | | class="co2" |
| | | v-for="(item, index) in energyStatistic" |
| | | :key="index" |
| | | style="border-left: 1px solid #e9e9e9;" |
| | | style="border-left: 1px solid #999;" |
| | | > |
| | | <img |
| | | v-if="item.item.includes('电')" |
| | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col |
| | | :span="5" |
| | | class="total" |
| | | style="border-left: 1px solid #e9e9e9;" |
| | | > |
| | | <el-col :span="5" class="total" style="border-left: 1px solid #999;"> |
| | | <img alt="" src="~@/assets/home/wen.png" /> |
| | | <div class="left-title-style"> |
| | | <div> |
| | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col |
| | | :span="5" |
| | | class="total" |
| | | style="border-left: 1px solid #e9e9e9;" |
| | | > |
| | | <el-col :span="5" class="total" style="border-left: 1px solid #999;"> |
| | | <img alt="" src="~@/assets/home/shi.png" /> |
| | | <div class="left-title-style"> |
| | | <div> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | <el-row type="flex" class="data-indicator-overview"> |
| | | <el-col class="home-body-left"> |
| | | <el-card :bordered="false" class="body-left-title"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>能源实时监测</span> |
| | |
| | | }}</span> |
| | | <BarChart class="line-content" :chartData="chartDataObj" /> |
| | | </div> |
| | | <div class="chart-wrapper" style="border-top: 1px solid #e9e9e9"> |
| | | <div class="chart-wrapper" style="border-top: 1px solid #999"> |
| | | <span class="chart-left-unit">{{ |
| | | `水/单位${monitoringWaterUnit}` |
| | | }}</span> |
| | |
| | | class="second-chat" |
| | | :chartData="secondPieData" |
| | | pieTitle="能耗设备占比" |
| | | height="280px" |
| | | /> |
| | | </el-card> |
| | | </el-col> |
| | |
| | | getHomeOutdoorTemperature |
| | | } from "@/api/home/home"; |
| | | import mixins from "@/layout/mixin/getHeight"; |
| | | import moment from "moment"; |
| | | import PieChart from "./dashboard/PieChart"; |
| | | import LineChart from "./dashboard/LineChart"; |
| | | import BarChart from "./dashboard/BarChart"; |
| | |
| | | clearInterval(this.timer); |
| | | clearInterval(this.timer30); |
| | | this.getHomeOutdoorTemperatureData(); |
| | | this.timer = setInterval(() => { |
| | | this.getHomeOutdoorTemperatureData(); |
| | | }, 12000); |
| | | // this.timer = setInterval(() => { |
| | | // this.getHomeOutdoorTemperatureData(); |
| | | // }, 12000); |
| | | this.timer30 = setInterval(() => { |
| | | // this.getEnergyType(); |
| | | this.getSummationData(); |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .home-show { |
| | | background: #f0f2f5; |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | height: calc(100vh - 90px); |
| | | // height: calc(100vh - 88px); |
| | | .home-head { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .home-select-label { |
| | | margin-right: 10px; |
| | | color: #000; |
| | | color: #fff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | |
| | | margin: 0 8px; |
| | | } |
| | | } |
| | | |
| | | .chart-wrapper { |
| | | padding: 10px 24px; |
| | | position: relative; |
| | | .chart-left-unit { |
| | | position: absolute; |
| | | top: 16px; |
| | | left: 24px; |
| | | color: #333; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .line-content { |
| | | margin: 4px 0 0 0; |
| | | height: 300px; |
| | | } |
| | | } |
| | | |
| | | .data-indicator-overview { |
| | | ::v-deep .el-card__body { |
| | | padding: 0 !important; |
| | | } |
| | | |
| | | .home-body-left { |
| | | width: 66.3%; |
| | | height: 100%; |
| | | |
| | | .body-left-title { |
| | | margin: 0 16px 0px 0; |
| | | } |
| | | |
| | | .double-data-show-content { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | |
| | | .unit { |
| | | font-size: 22px; |
| | | color: #000000; |
| | | color: #fff; |
| | | margin-top: 4px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .chart-wrapper { |
| | | padding: 10px 24px; |
| | | position: relative; |
| | | .chart-left-unit { |
| | | position: absolute; |
| | | top: 16px; |
| | | left: 24px; |
| | | color: #fff; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .line-content { |
| | | margin: 4px 0 0 0; |
| | | height: 300px; |
| | | } |
| | | } |
| | | |
| | | .data-indicator-overview { |
| | | ::v-deep .el-card__body { |
| | | padding: 0 !important; |
| | | } |
| | | |
| | | .home-body-left { |
| | | width: 66.3%; |
| | | height: 100%; |
| | | |
| | | .body-left-title { |
| | | margin: 0 16px 0px 0; |
| | | } |
| | | |
| | | .left-line-style { |
| | | padding: 24px; |
| | | color: #000000; |
| | | color: #fff; |
| | | |
| | | .radio-list { |
| | | width: 122px; |
| | |
| | | position: absolute; |
| | | top: 16px; |
| | | left: 0; |
| | | color: #333; |
| | | color: #fff; |
| | | } |
| | | |
| | | .line-content { |
| | |
| | | |
| | | .number { |
| | | font-size: 24px; |
| | | color: #000000; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .first-chat { |
| | | margin: 10px 0 0 0; |
| | | height: 340px; |
| | | height: 300px; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .second-chat { |
| | | margin: 10px 0 0 0; |
| | | height: 340px; |
| | | height: 290px; |
| | | } |
| | | |
| | | .bottom-description-list { |
| | |
| | | |
| | | .energy-cost-sum { |
| | | font-size: 24px; |
| | | color: #000000; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |