Compare commits
44 Commits
v-lijf43
133 changed files with 22646 additions and 5249 deletions
@ -0,0 +1,27 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询运行记录
|
||||
export function reportSysList(data) { |
||||
return request({ |
||||
url: "/reportSys/list", |
||||
method: "post", |
||||
data, |
||||
}); |
||||
} |
||||
// 编辑运行记录
|
||||
export function reportSysEdit(data) { |
||||
return request({ |
||||
url: "/reportSys/edit", |
||||
method: "put", |
||||
data, |
||||
}); |
||||
} |
||||
// 导出
|
||||
export function reportSysExport(data) { |
||||
return request({ |
||||
url: "/reportSys/export", |
||||
method: "post", |
||||
data, |
||||
responseType: 'blob', |
||||
}); |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request"; |
||||
// 历史天气查询
|
||||
export function weatherTempData(query) { |
||||
return request({ |
||||
url: "/device/cs/getWeatherTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 数据分析-月
|
||||
export function queryMonthDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryMonth", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 数据分析-年
|
||||
export function queryYearDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryYear", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,34 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 楼层
|
||||
export function hotBuildList(query) { |
||||
return request({ |
||||
url: "/space/building/hot_list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗环比
|
||||
export function hotEnergySum(query) { |
||||
return request({ |
||||
url: "/hot_energy/energySum", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterTemp(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterLevel(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterLevel", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 水电表读数
|
||||
export function queryDeviceDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/queryDeviceDatas", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 设备状态
|
||||
export function deviceState(query) { |
||||
return request({ |
||||
url: "/device/hotWater/deviceState", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗
|
||||
export function hotEnergyQuery(query) { |
||||
return request({ |
||||
url: "/hot_energy/query", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 1000 B |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 410 KiB |
|
Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,911 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="queryParams.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
clearable |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<!-- <el-col :span="1.5"> |
||||
<div class="success-btn"> |
||||
<el-button |
||||
type="success" |
||||
@click="leadingPrint" |
||||
icon="el-icon-printer" |
||||
size="mini" |
||||
>打印</el-button |
||||
> |
||||
</div> |
||||
</el-col> --> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="postList" stripe> |
||||
<!-- <el-table-column label="主机id" align="center" prop="deviceNum" /> --> |
||||
<el-table-column label="时间" align="center" prop="curTime" /> |
||||
<el-table-column label="蒸发器"> |
||||
<el-table-column |
||||
label="冷冻水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInChillerWater" /> |
||||
<el-table-column |
||||
label="冷冻水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutChillerWater" /> |
||||
<el-table-column label="设计流量(%)" align="center" prop="designFlow" /> |
||||
<el-table-column |
||||
label="蒸发器压力(kpa)" |
||||
align="center" |
||||
prop="pressEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempEvapApproaching" |
||||
/></el-table-column> |
||||
<el-table-column label="冷凝器"> |
||||
<el-table-column |
||||
label="冷却水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器压力(kpa)" |
||||
align="center" |
||||
prop="pressCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserApproaching" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="系统"> |
||||
<el-table-column |
||||
label="冷冻水设定值(℃)" |
||||
align="center" |
||||
prop="setChillerWater" |
||||
/> |
||||
<el-table-column label="冷水机需求(%)" align="center" prop="setLoad" /> |
||||
<el-table-column label="总电流(%)" align="center" prop="currentTotal" /> |
||||
<el-table-column |
||||
label="总输入功率(kw)" |
||||
align="center" |
||||
prop="inputPowerTotal" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机1_压缩比" |
||||
align="center" |
||||
prop="ratioCompOne" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机2_压缩比" |
||||
align="center" |
||||
prop="ratioCompTwo" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机3_压缩比" |
||||
align="center" |
||||
prop="ratioCompThree" |
||||
/> |
||||
<el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" /> |
||||
<el-table-column |
||||
label="运行中的压缩机数量" |
||||
align="center" |
||||
prop="runCompNum" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷冻泵"> |
||||
<el-table-column |
||||
label="冷冻水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyChiller" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutChillerWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInChillerWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却泵"> |
||||
<el-table-column |
||||
label="冷却水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCooling" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInCoolingWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却塔"> |
||||
<el-table-column |
||||
label="冷却塔水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCoolingTower" |
||||
/> |
||||
<el-table-column |
||||
label="冷却塔运行数量" |
||||
align="center" |
||||
prop="runCoolingTower" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" /> |
||||
<el-table-column |
||||
label="室外湿度(%)" |
||||
align="center" |
||||
prop="humidityOutdoor" |
||||
/> |
||||
<el-table-column |
||||
label="恒压补水罐压力(Mpa)" |
||||
align="center" |
||||
prop="pressConstantWaterTank" |
||||
/> |
||||
<el-table-column label="巡查记录人" align="center" prop="recorder" /> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['device:ledger:edit']" |
||||
>修改</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或修改设备台账对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="form.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
disabled |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设计流量(%)" prop="designFlow"> |
||||
<el-input v-model="form.designFlow" placeholder="请输入流量(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater"> |
||||
<el-input |
||||
v-model="form.tempInChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater"> |
||||
<el-input |
||||
v-model="form.tempOutChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation"> |
||||
<el-input |
||||
v-model="form.tempEvapSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching"> |
||||
<el-input |
||||
v-model="form.tempEvapApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation"> |
||||
<el-input |
||||
v-model="form.pressEvapSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器压力(kpa)" |
||||
prop="pressCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.pressCondenserSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempInCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempOutCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器饱和温度(℃)" |
||||
prop="tempCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器趋近温度(℃)" |
||||
prop="tempCondenserApproaching" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水设定值(℃)" prop="setChillerWater"> |
||||
<el-input |
||||
v-model="form.setChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷水机需求(%)" prop="setLoad"> |
||||
<el-input v-model="form.setLoad" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总输入功率(kw)" prop="inputPowerTotal"> |
||||
<el-input |
||||
v-model="form.inputPowerTotal" |
||||
placeholder="请输入功率(kw)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总电流(%)" prop="currentTotal"> |
||||
<el-input v-model="form.currentTotal" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机1_压缩比" prop="ratioCompOne"> |
||||
<el-input |
||||
v-model="form.ratioCompOne" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机2_压缩比" prop="ratioCompTwo"> |
||||
<el-input |
||||
v-model="form.ratioCompTwo" |
||||
placeholder="请输入压缩比" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机3_压缩比" prop="ratioCompThree"> |
||||
<el-input |
||||
v-model="form.ratioCompThree" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="膨胀阀开度(%)" prop="openExv"> |
||||
<el-input v-model="form.openExv" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="运行中的压缩机数量" prop="runCompNum"> |
||||
<el-input |
||||
v-model="form.runCompNum" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller"> |
||||
<el-input v-model="form.openExv" placeholder="请输入频率(hz)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水出水压力(kpa)" |
||||
prop="pressOutChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水进水压力(kpa)" |
||||
prop="pressInChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水出水压力(kpa)" |
||||
prop="pressOutCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水进水压力(kpa)" |
||||
prop="pressInCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling"> |
||||
<el-input |
||||
v-model="form.frequencyCooling" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却塔水泵频率(hz)" |
||||
prop="frequencyCoolingTower" |
||||
> |
||||
<el-input |
||||
v-model="form.frequencyCoolingTower" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却塔运行数量" prop="runCoolingTower"> |
||||
<el-input |
||||
v-model="form.runCoolingTower" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="恒压补水罐压力(Mpa)" |
||||
prop="pressConstantWaterTank" |
||||
> |
||||
<el-input |
||||
v-model="form.pressConstantWaterTank" |
||||
placeholder="请输入压力(Mpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外温度" prop="tempOutdoor"> |
||||
<el-input |
||||
v-model="form.tempOutdoor" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外湿度(%)" prop="humidityOutdoor"> |
||||
<el-input |
||||
v-model="form.humidityOutdoor" |
||||
placeholder="请输入湿度(%)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="巡查记录人" prop="recorder"> |
||||
<el-input |
||||
v-model="form.recorder" |
||||
placeholder="请输入巡查记录人" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input |
||||
v-model="form.remark" |
||||
placeholder="请输入备注" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:visible.sync="dialogPrintVisible" |
||||
title="打印预览" |
||||
class="print-dialog" |
||||
> |
||||
<div id="report" ref="report" class="report"> |
||||
<table |
||||
border="1" |
||||
style=" |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
border: 1px solid #e2e6f0; |
||||
margin-bottom: 35px; |
||||
" |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th> |
||||
</tr> |
||||
<tr> |
||||
<th>主机id</th> |
||||
<th>时间</th> |
||||
<th colspan="6">蒸发器</th> |
||||
<th colspan="5">冷凝器</th> |
||||
<th colspan="7">系统</th> |
||||
<th colspan="3">冷冻泵</th> |
||||
<th colspan="3">冷却泵</th> |
||||
<th colspan="2">冷却塔</th> |
||||
<th>室外温度(℃)</th> |
||||
<th>室外湿度(%)</th> |
||||
<th>恒压补水罐压力(Mpa)</th> |
||||
<th>巡查记录人</th> |
||||
</tr> |
||||
<tr> |
||||
<th></th> |
||||
<th></th> |
||||
<th>冷冻水进水温度(℃)</th> |
||||
<th>冷冻水出水温度(℃)</th> |
||||
<th>设计流量(%)</th> |
||||
<th>蒸发器压力(kpa)</th> |
||||
<th>蒸发器饱和温度(℃)</th> |
||||
<th>蒸发器趋近温度(℃)</th> |
||||
<th>冷却水进水温度(℃)</th> |
||||
<th>冷却水出水温度(℃)</th> |
||||
<th>冷凝器压力(kpa)</th> |
||||
<th>冷凝器饱和温度(℃)</th> |
||||
<th>冷凝器趋近温度(℃)</th> |
||||
<th>冷冻水设定值(℃)</th> |
||||
<th>冷水机需求(%)</th> |
||||
<th>总电流(%)</th> |
||||
<th>总输入功率(kw)</th> |
||||
<th>压缩机1_压缩比</th> |
||||
<th>膨胀阀开度(%)</th> |
||||
<th>运行中的压缩机数量</th> |
||||
<th>冷冻水泵频率(hz)</th> |
||||
<th>冷冻水出水压力(kpa)</th> |
||||
<th>冷冻水进水压力(kpa)</th> |
||||
<th>冷却水泵频率(hz)</th> |
||||
<th>冷却水出水压力(kpa)</th> |
||||
<th>冷却水进水压力(kpa)</th> |
||||
<th>冷却塔水泵频率(hz)</th> |
||||
<th>冷却塔运行数量</th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
</tr> |
||||
</thead> |
||||
<tr v-for="(item, index) in postList" :key="index"> |
||||
<td align="center" v-for="(value, key) in item" :key="key"> |
||||
{{ value }} |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
<div |
||||
class="detail" |
||||
style=" |
||||
display: flex; |
||||
flex-direction: row; |
||||
font-size: 14px; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
width: 40%; |
||||
color: #ffffff; |
||||
" |
||||
> |
||||
<div>操作员: {{ this.userName }}</div> |
||||
<div class="print-date">日期： {{ this.operationDate }}</div> |
||||
</div> |
||||
</div> |
||||
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
||||
<el-col :span="2"> |
||||
<el-button type="info" @click="dialogPrintVisible = false" |
||||
>取消</el-button |
||||
> |
||||
</el-col> |
||||
<el-col :span="2" style="margin-left: 60px"> |
||||
<el-button type="success" @click="surePrint">确认</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
reportSysList, |
||||
reportSysEdit, |
||||
reportSysExport, |
||||
} from "@/api/centerairC/hostRunReport"; |
||||
import { format2, getDay } from "@/utils/datetime"; |
||||
export default { |
||||
name: "ledger", |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
deviceNum: "", |
||||
params: { |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
deviceName: [ |
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
dialogPrintVisible: false, |
||||
userName: "", //操作员 |
||||
operationDate: getDay(0), //操作日期 |
||||
titleDate: "", |
||||
}; |
||||
}, |
||||
created() { |
||||
this.userName = sessionStorage.getItem("userName"); |
||||
this.queryParams.deviceNum = "1"; |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.params.startTime = ""; |
||||
this.queryParams.params.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.params.startTime = this.timeArr[0]; |
||||
this.queryParams.params.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询设备台账列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
reportSysList(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
} else { |
||||
this.postList = []; |
||||
this.total = 0; |
||||
this.loading = false; |
||||
} |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
id: "", |
||||
deviceNum: "", |
||||
curTime: "", |
||||
tempInChillerWater: "", |
||||
tempOutChillerWater: "", |
||||
designFlow: "", |
||||
pressEvapSaturation: "", |
||||
tempEvapSaturation: "", |
||||
tempEvapApproaching: "", |
||||
tempInCoolingWater: "", |
||||
tempOutCoolingWater: "", |
||||
pressCondenserSaturation: "", |
||||
tempCondenserSaturation: "", |
||||
tempCondenserApproaching: "", |
||||
setChillerWater: "", |
||||
setLoad: "", |
||||
currentTotal: "", |
||||
inputPowerTotal: "", |
||||
ratioCompOne: "", |
||||
openExv: "", |
||||
runCompNum: "", |
||||
frequencyChiller: "", |
||||
pressOutChillerWater: "", |
||||
pressInChillerWater: "", |
||||
frequencyCooling: "", |
||||
pressOutCoolingWater: "", |
||||
pressInCoolingWater: "", |
||||
frequencyCoolingTower: "", |
||||
runCoolingTower: "", |
||||
pressConstantWaterTank: "", |
||||
tempOutdoor: "", |
||||
humidityOutdoor: "", |
||||
recorder: "", |
||||
remark: "", |
||||
ratioCompTwo: "", |
||||
ratioCompThree: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form = Object.assign({}, row); |
||||
this.open = true; |
||||
this.title = "修改主机运行记录"; |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
reportSysEdit(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
reportSysExport(this.queryParams).then((res) => { |
||||
console.log("导出返回", res); |
||||
// 请求的结果就是文件 |
||||
// 创建一个blob URL，用于生成下载链接 |
||||
const url = window.URL.createObjectURL(new Blob([res])); |
||||
// 创建一个<a>元素，并设置其href和download属性 |
||||
const link = document.createElement("a"); |
||||
link.href = url; |
||||
link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名 |
||||
// 模拟点击下载链接 |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
document.body.removeChild(link); |
||||
// 释放blob URL资源 |
||||
window.URL.revokeObjectURL(url); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
}, |
||||
// 打印 |
||||
leadingPrint() { |
||||
this.dialogPrintVisible = true; |
||||
}, |
||||
// 打印 |
||||
surePrint() { |
||||
const printHTML = document.querySelector("#report").innerHTML; |
||||
// 将打印的区域赋值，进行打印 |
||||
window.document.body.innerHTML = printHTML; |
||||
window.print(); // 调用window打印方法 |
||||
window.location.reload(); // 打印完成后重新加载页面 |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */ |
||||
@media (max-width: 2000px) { |
||||
::v-deep .el-dialog { |
||||
width: 800px !important; |
||||
} |
||||
::v-deep .print-dialog .el-dialog { |
||||
width: 1200px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item__label { |
||||
width: 150px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
// ::v-deep .el-dialog { |
||||
// width: 8rem !important; |
||||
// } |
||||
|
||||
// ::v-deep .el-dialog .el-form-item__label { |
||||
// width: 1.5rem !important; |
||||
// } |
||||
// ::v-deep .el-dialog .el-form-item { |
||||
// display: flex; |
||||
// flex-direction: row; |
||||
// align-items: center; |
||||
// } |
||||
} |
||||
</style> |
||||
@ -1,431 +0,0 @@
|
||||
<template> |
||||
<div class="app-container" v-loading="loading"> |
||||
<!-- 状态统计 --> |
||||
<div class="status-statistics"> |
||||
<div class="status-card"> |
||||
<div class="status-label">运行设备</div> |
||||
<div class="status-value-running"> |
||||
{{ statistics.running }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">手动模式</div> |
||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">自动模式</div> |
||||
<div class="status-value-maintenance"> |
||||
{{ statistics.auto }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">故障设备</div> |
||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
||||
</div> |
||||
</div> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
<el-tab-pane label="主机" name="host"> </el-tab-pane> |
||||
<el-tab-pane label="冷却塔" name="second"> </el-tab-pane> |
||||
<el-tab-pane label="冷却泵" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷冻泵" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane> |
||||
</el-tabs> |
||||
<!-- 非蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="hostList" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="coolingTowerFanList" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="coolingPump" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="freezingPump" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<!-- 蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="freezingValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="coolingValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="coolingTowerOutValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
||||
import listHeader from "./listHeader.vue"; |
||||
import Vavleheader from "./vavleheader.vue"; |
||||
export default { |
||||
components: { listHeader, Vavleheader }, |
||||
name: "sysMonitor", |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
deviceList: [], //全部 |
||||
hostList: [], //主机 |
||||
coolingTowerFanList: [], //冷却塔风机 |
||||
coolingPump: [], //冷却泵 |
||||
freezingPump: [], //冷冻泵 |
||||
valveList: [], //阀 |
||||
total: null, |
||||
freezingValve: [], //冷冻蝶阀 |
||||
coolingValve: [], //冷却蝶阀 |
||||
coolingTowerOutValve: [], //冷却塔出水阀 |
||||
activeName: "host", //设备管理 |
||||
}; |
||||
}, |
||||
computed: { |
||||
statistics() { |
||||
const deviceManual = this.deviceList.filter( |
||||
(d) => d.automaticText === false |
||||
).length; |
||||
const deviceAuto = this.deviceList.filter( |
||||
(d) => d.automaticText === true |
||||
).length; |
||||
const valveManual = this.valveList.filter( |
||||
(v) => v.automaticText === false |
||||
).length; |
||||
const valveAuto = this.valveList.filter( |
||||
(v) => v.automaticText === true |
||||
).length; |
||||
|
||||
return { |
||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
||||
manual: deviceManual + valveManual, |
||||
auto: deviceAuto + valveAuto, |
||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
||||
}; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getOperationList(); |
||||
}, |
||||
methods: { |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
// 系统控制列表 |
||||
getOperationList() { |
||||
return new Promise((resolve, reject) => { |
||||
operationList({ systemType: 0 }) |
||||
.then((res) => { |
||||
console.log("列表返回res", res); |
||||
if (res.code === 200) { |
||||
let handleList = res.rows; |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
handleList.forEach((element) => { |
||||
if (element.children && element.children.length > 0) { |
||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
||||
let deviceItem = { |
||||
name: element.name, |
||||
}; |
||||
// 初始化一个空对象来存储阀门处理后的结果 |
||||
let valveItem = { |
||||
name: element.name, |
||||
}; |
||||
|
||||
const limitedChildren = element.children; |
||||
let valveClosed = false; |
||||
let valveOpened = false; |
||||
|
||||
limitedChildren.forEach((child) => { |
||||
if (child.name) { |
||||
// 运行状态 |
||||
if ( |
||||
child.paramType === "1" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.runStatus = |
||||
Number(child.value) == 0 ? "不运行" : "运行"; |
||||
} |
||||
// 手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
deviceItem.controlId = child.id; |
||||
} |
||||
// 手自动切换 0自动1手动 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
deviceItem.automaticId = child.id; |
||||
} |
||||
// 故障报警 |
||||
else if ( |
||||
child.paramType === "5" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.warnText = |
||||
Number(child.value) == 0 ? "未故障" : "故障"; |
||||
// 本地远程 |
||||
} else if ( |
||||
child.paramType === "22" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 频率调节 |
||||
else if ( |
||||
child.paramType === "3" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.frequencySet = |
||||
Number(child.value) == 0 ? "0" : child.value; |
||||
deviceItem.frequencyId = child.id; |
||||
} |
||||
// 频率反馈 |
||||
else if (child.paramType === "4") { |
||||
deviceItem.frequency = child.value; |
||||
} |
||||
|
||||
// 阀门的-手自动切换 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
valveItem.automaticId = child.id; |
||||
} |
||||
// 阀门的-手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
valveItem.controlId = child.id; |
||||
} |
||||
|
||||
// 记录阀关到位状态 |
||||
if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveClosed = false; |
||||
} else if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveClosed = true; |
||||
} |
||||
// 记录阀开到位的状态 |
||||
if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveOpened = false; |
||||
} else if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveOpened = true; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
||||
if (valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "开启"; |
||||
valveItem.openStauts = "关闭"; |
||||
} else if (!valveClosed && valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "开启"; |
||||
} else if (!valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "关闭"; |
||||
} |
||||
|
||||
// 将处理后的对象添加到 deviceList 中 |
||||
if (Object.keys(deviceItem).length > 1) { |
||||
this.deviceList.push(deviceItem); |
||||
} |
||||
// 将处理后的对象添加到 valveList 中 |
||||
if (Object.keys(valveItem).length > 1) { |
||||
this.valveList.push(valveItem); |
||||
} |
||||
} |
||||
}); |
||||
this.valveList = this.valveList.filter( |
||||
(item) => item.name && item.name.includes("阀") |
||||
); |
||||
console.log("处理过的this.deviceList", this.deviceList); |
||||
console.log("处理过的this.valveList", this.valveList); |
||||
this.total = this.deviceList.length + this.valveList.length; |
||||
|
||||
// 再分类不同的设备列表 |
||||
this.hostList = []; |
||||
this.coolingTowerFanList = []; |
||||
this.coolingPump = []; |
||||
this.freezingPump = []; |
||||
this.freezingValve = []; |
||||
this.coolingValve = []; |
||||
this.coolingTowerOutValve = []; |
||||
this.deviceList.forEach((list) => { |
||||
if (list.name.includes("机") && !list.name.includes("风")) { |
||||
this.hostList.push(list); |
||||
} |
||||
if (list.name.includes("风机")) { |
||||
this.coolingTowerFanList.push(list); |
||||
} |
||||
if (list.name.includes("冷却泵")) { |
||||
this.coolingPump.push(list); |
||||
} |
||||
if (list.name.includes("冷冻泵")) { |
||||
this.freezingPump.push(list); |
||||
} |
||||
}); |
||||
this.valveList.forEach((list) => { |
||||
if (list.name.includes("冷冻蝶阀")) { |
||||
this.freezingValve.push(list); |
||||
} |
||||
if (list.name.includes("冷却蝶阀")) { |
||||
this.coolingValve.push(list); |
||||
} |
||||
if (list.name.includes("冷却塔出水阀")) { |
||||
this.coolingTowerOutValve.push(list); |
||||
} |
||||
}); |
||||
console.log("处理过后的主机列表", this.hostList); |
||||
} else { |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
this.total = 0; |
||||
} |
||||
// 成功时解析 Promise |
||||
resolve(res); |
||||
}) |
||||
.catch((error) => { |
||||
// 失败时拒绝 Promise |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
// 操作 |
||||
hadleOperationConrol(id, param) { |
||||
let data = { |
||||
id: id, |
||||
param: param, |
||||
}; |
||||
console.log("操作参数", data); |
||||
operationConrol([data]) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("指令下发成功!"); |
||||
// 开启 loading 效果 |
||||
this.loading = true; |
||||
// 更新所有设备状态; |
||||
setTimeout(() => { |
||||
this.getOperationList().finally(() => { |
||||
// 关闭 loading 效果 |
||||
this.loading = false; |
||||
}); |
||||
}, 6000); |
||||
} else { |
||||
// this.$modal.msgError("操作失败"); |
||||
console.log("应该更新状态的"); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log("请求发生错误，更新设备状态", error); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/* 设备控制列表样式 */ |
||||
.device-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
background-color: #142c4e; |
||||
padding: 10px 10px 30px 10px; |
||||
border-radius: 10px; |
||||
margin-bottom: 20px; |
||||
} |
||||
/* 状态统计样式 */ |
||||
.status-statistics { |
||||
margin-bottom: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.status-card { |
||||
background-color: #142c4e; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
width: 24%; |
||||
} |
||||
|
||||
.status-label { |
||||
color: #9ca3af; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.status-value-running { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #22c55e; |
||||
} |
||||
|
||||
.status-value-auto { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #60a5fa; |
||||
} |
||||
|
||||
.status-value-error { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #ef4444; |
||||
} |
||||
|
||||
.status-value-maintenance { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #f59e0b; |
||||
} |
||||
</style> |
||||
@ -1,643 +0,0 @@
|
||||
<template> |
||||
<div class="app-container" v-loading="loading"> |
||||
<!-- 状态统计 --> |
||||
<div class="status-statistics"> |
||||
<div class="status-card"> |
||||
<div class="status-label">运行设备</div> |
||||
<div class="status-value-running"> |
||||
{{ statistics.running }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">手动模式</div> |
||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">自动模式</div> |
||||
<div class="status-value-maintenance"> |
||||
{{ statistics.auto }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">故障设备</div> |
||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 非蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<!-- <div class="device-li"> |
||||
<div class="device-name">设备名称</div> |
||||
<div class="device-name">运行状态</div> |
||||
<div class="device-name">手动控制</div> |
||||
<div class="device-name">手自动切换</div> |
||||
<div class="device-name">本地远程状态</div> |
||||
<div class="device-name">故障报警</div> |
||||
<div class="device-name">频率调节</div> |
||||
<div class="device-name">频率反馈</div> |
||||
</div> --> |
||||
<list-header :deviceList ="deviceList"></list-header> |
||||
<!-- <div class="device-li" v-for="(item, index) in deviceList" :key="index"> |
||||
<div class="device-name">{{ item.name }}</div> |
||||
<div class="device-name"> |
||||
<div |
||||
class="run" |
||||
:class="item.runStatus === '运行' ? 'run' : 'no-run'" |
||||
> |
||||
{{ item.runStatus }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.controlText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleControlText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.automaticText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="自动" |
||||
inactive-text="手动" |
||||
@change="handleAutomaticText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<span |
||||
:class=" |
||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
||||
" |
||||
>{{ item.localRemote }}</span |
||||
> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'"> |
||||
{{ item.warnText }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-input |
||||
v-if="item.frequencySet !== null && item.frequencySet !== undefined" |
||||
v-model="item.frequencySet" |
||||
size="mini" |
||||
@keyup.enter.native="handleEnter(item)" |
||||
@input="handleInput(item)" |
||||
></el-input> |
||||
<div class="device-name" v-else></div> |
||||
</div> |
||||
<div class="device-name" v-if="item.frequency"> |
||||
{{ item.frequency }}Hz |
||||
</div> |
||||
<div class="device-name" v-else></div> |
||||
</div> --> |
||||
</div> |
||||
<!-- 蝶阀控制列表 --> |
||||
<div class="device-container second"> |
||||
<div class="device-li"> |
||||
<div class="device-name">设备名称</div> |
||||
<div class="device-name">手动控制</div> |
||||
<div class="device-name">手自动切换</div> |
||||
<div class="device-name">本地远程状态</div> |
||||
<div class="device-name">阀关反馈</div> |
||||
<div class="device-name">阀开反馈</div> |
||||
</div> |
||||
<div class="device-li" v-for="(item, index) in valveList" :key="index"> |
||||
<div class="device-name">{{ item.name }}</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.controlText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleControlText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.automaticText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="自动" |
||||
inactive-text="手动" |
||||
@change="handleAutomaticText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<span |
||||
:class=" |
||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
||||
" |
||||
>{{ item.localRemote }}</span |
||||
> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div |
||||
:class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'" |
||||
> |
||||
{{ item.openStauts }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div |
||||
:class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'" |
||||
> |
||||
{{ item.closeStatus }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
||||
import listHeader from "./listHeader.vue"; |
||||
export default { |
||||
components: { listHeader }, |
||||
name: "sysMonitor", |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
deviceList: [], //全部 |
||||
hostList: [], //主机 |
||||
coolingTowerFanList: [], //冷却塔风机 |
||||
coolingPump: [], //冷却泵 |
||||
freezingPump: [], //冷冻泵 |
||||
valveList: [], //阀 |
||||
total: null, |
||||
freezingValve: [], //冷冻蝶阀 |
||||
coolingValve: [], //冷却蝶阀 |
||||
coolingTowerOutValve: [], //冷却塔出水阀 |
||||
}; |
||||
}, |
||||
computed: { |
||||
statistics() { |
||||
const deviceManual = this.deviceList.filter( |
||||
(d) => d.automaticText === false |
||||
).length; |
||||
const deviceAuto = this.deviceList.filter( |
||||
(d) => d.automaticText === true |
||||
).length; |
||||
const valveManual = this.valveList.filter( |
||||
(v) => v.automaticText === false |
||||
).length; |
||||
const valveAuto = this.valveList.filter( |
||||
(v) => v.automaticText === true |
||||
).length; |
||||
|
||||
return { |
||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
||||
manual: deviceManual + valveManual, |
||||
auto: deviceAuto + valveAuto, |
||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
||||
}; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getOperationList(); |
||||
}, |
||||
methods: { |
||||
// 系统控制列表 |
||||
getOperationList() { |
||||
return new Promise((resolve, reject) => { |
||||
operationList({ systemType: 0 }) |
||||
.then((res) => { |
||||
console.log("列表返回res", res); |
||||
if (res.code === 200) { |
||||
let handleList = res.rows; |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
handleList.forEach((element) => { |
||||
if (element.children && element.children.length > 0) { |
||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
||||
let deviceItem = { |
||||
name: element.name, |
||||
}; |
||||
// 初始化一个空对象来存储阀门处理后的结果 |
||||
let valveItem = { |
||||
name: element.name, |
||||
}; |
||||
|
||||
const limitedChildren = element.children; |
||||
let valveClosed = false; |
||||
let valveOpened = false; |
||||
|
||||
limitedChildren.forEach((child) => { |
||||
if (child.name) { |
||||
// 运行状态 |
||||
if ( |
||||
child.paramType === "1" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.runStatus = |
||||
Number(child.value) == 0 ? "不运行" : "运行"; |
||||
} |
||||
// 手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
deviceItem.controlId = child.id; |
||||
} |
||||
// 手自动切换 0自动1手动 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
deviceItem.automaticId = child.id; |
||||
} |
||||
// 故障报警 |
||||
else if ( |
||||
child.paramType === "5" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.warnText = |
||||
Number(child.value) == 0 ? "未故障" : "故障"; |
||||
// 本地远程 |
||||
} else if ( |
||||
child.paramType === "22" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 频率调节 |
||||
else if ( |
||||
child.paramType === "3" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.frequencySet = |
||||
Number(child.value) == 0 ? "0" : child.value; |
||||
deviceItem.frequencyId = child.id; |
||||
} |
||||
// 频率反馈 |
||||
else if (child.paramType === "4") { |
||||
deviceItem.frequency = child.value; |
||||
} |
||||
|
||||
// 阀门的-本地远程状态 |
||||
else if ( |
||||
child.paramType === "22" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 阀门的-手自动切换 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
valveItem.automaticId = child.id; |
||||
} |
||||
// 阀门的-手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
valveItem.controlId = child.id; |
||||
} |
||||
|
||||
// 记录阀关到位状态 |
||||
if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveClosed = false; |
||||
} else if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveClosed = true; |
||||
} |
||||
// 记录阀开到位的状态 |
||||
if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveOpened = false; |
||||
} else if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveOpened = true; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
||||
if (valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "开启"; |
||||
valveItem.openStauts = "关闭"; |
||||
} else if (!valveClosed && valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "开启"; |
||||
} |
||||
|
||||
// 将处理后的对象添加到 deviceList 中 |
||||
if (Object.keys(deviceItem).length > 1) { |
||||
this.deviceList.push(deviceItem); |
||||
} |
||||
// 将处理后的对象添加到 valveList 中 |
||||
if (Object.keys(valveItem).length > 1) { |
||||
this.valveList.push(valveItem); |
||||
} |
||||
} |
||||
}); |
||||
console.log("处理过的this.deviceList", this.deviceList); |
||||
console.log("处理过的this.valveList", this.valveList); |
||||
this.total = this.deviceList.length + this.valveList.length; |
||||
|
||||
// 再分类不同的设备列表 |
||||
this.hostList = []; |
||||
this.deviceList.forEach((list) => { |
||||
if (list.name.includes("机") && !list.name.includes("风")) { |
||||
this.hostList.push(list); |
||||
} |
||||
}); |
||||
console.log("处理过后的主机列表", this.hostList); |
||||
} else { |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
this.total = 0; |
||||
} |
||||
// 成功时解析 Promise |
||||
resolve(res); |
||||
}) |
||||
.catch((error) => { |
||||
// 失败时拒绝 Promise |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
// 处理输入事件，过滤非数字字符 |
||||
handleInput(item) { |
||||
console.log("校验"); |
||||
// 实时校验并过滤非数字字符 |
||||
item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, ""); |
||||
}, |
||||
handleEnter(item) { |
||||
console.log("请求后端"); |
||||
this.$confirm( |
||||
`确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
this.hadleOperationConrol(item.frequencyId, item.frequencySet); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，需要更新原来的频率 |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
//手动控制 |
||||
handleControlText(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.controlText ? "开启" : "停止 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
// 这里调用请求函数 |
||||
console.log("请求后台", item.controlText); |
||||
let param = null; |
||||
if (item.controlText) { |
||||
param = 1; |
||||
} else { |
||||
param = 0; |
||||
} |
||||
this.hadleOperationConrol(item.controlId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.controlText = !item.controlText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
// 手自动切换 |
||||
handleAutomaticText(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.automaticText ? "自动" : "手动 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
// 这里调用请求函数 |
||||
console.log("请求后台", item.automaticText); |
||||
let param = null; |
||||
if (item.automaticText) { |
||||
param = 0; |
||||
} else { |
||||
param = 1; |
||||
} |
||||
this.hadleOperationConrol(item.automaticId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.automaticText = !item.automaticText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
hadleOperationConrol(id, param) { |
||||
let data = { |
||||
id: id, |
||||
param: param, |
||||
}; |
||||
console.log("操作参数", data); |
||||
operationConrol([data]) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("操作成功"); |
||||
// 开启 loading 效果 |
||||
this.loading = true; |
||||
// 更新所有设备状态; |
||||
setTimeout(() => { |
||||
this.getOperationList().finally(() => { |
||||
// 关闭 loading 效果 |
||||
this.loading = false; |
||||
}); |
||||
}, 6000); |
||||
} else { |
||||
// this.$modal.msgError("操作失败"); |
||||
console.log("应该更新状态的"); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log("请求发生错误，更新设备状态", error); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/* 设备控制列表样式 */ |
||||
.device-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
background-color: #142c4e; |
||||
padding: 10px 10px 30px 10px; |
||||
border-radius: 10px; |
||||
.device-li { |
||||
flex: 1; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 12px 0; |
||||
color: #abcdfc; |
||||
border-bottom: 1px dashed #0349ac; |
||||
.device-name { |
||||
flex: 1; |
||||
white-space: nowrap; |
||||
.el-switch { |
||||
width: 120px !important; |
||||
} |
||||
.run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(16, 231, 16); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.no-run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.no-run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(180, 180, 180); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.el-input { |
||||
width: 100px; |
||||
} |
||||
.strong-electric { |
||||
background-color: rgba(59, 130, 246, 0.2); |
||||
color: #60a5fa; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.auto-electric { |
||||
background-color: rgba(231, 144, 45, 0.2); |
||||
color: #e47f21; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.good-status { |
||||
color: #4ade80; |
||||
} |
||||
.bad-status { |
||||
color: #f05348; |
||||
} |
||||
} |
||||
} |
||||
.device-li:nth-child(1) { |
||||
color: #9ca3af; |
||||
} |
||||
} |
||||
.second { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
/* 状态统计样式 */ |
||||
.status-statistics { |
||||
margin-bottom: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.status-card { |
||||
background-color: #142c4e; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
width: 24%; |
||||
} |
||||
|
||||
.status-label { |
||||
color: #9ca3af; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.status-value-running { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #22c55e; |
||||
} |
||||
|
||||
.status-value-auto { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #60a5fa; |
||||
} |
||||
|
||||
.status-value-error { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #ef4444; |
||||
} |
||||
|
||||
.status-value-maintenance { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #f59e0b; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,430 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="日期" prop="msgCode"> |
||||
<el-date-picker |
||||
style="width: auto" |
||||
v-model="monthValue" |
||||
type="month" |
||||
placeholder="选择月" |
||||
value-format="yyyy-MM" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column label="日期" align="center" prop="dateAndWeek" /> |
||||
<el-table-column label="最高气温" align="center" prop="maxTemp" /> |
||||
<el-table-column label="最低气温" align="center" prop="minTemp" /> |
||||
<el-table-column label="天气" align="center" prop="weatherConditions" /> |
||||
<el-table-column label="风向" align="center" prop="windDirection" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { weatherTempData } from "@/api/centerairC/temHistory"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
name: "temHistoryQuery", |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
monthValue: "", |
||||
chartInstance: null, |
||||
option: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 获取当前日期 |
||||
const currentDate = new Date(); |
||||
// 获取当前年份 |
||||
const year = currentDate.getFullYear(); |
||||
// 获取当前月份，注意月份是从 0 开始的，所以要加 1 |
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0"); |
||||
// 格式化日期为 yyyy-MM 格式 |
||||
this.monthValue = `${year}-${month}`; |
||||
}, |
||||
mounted() { |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.getChartData(); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// 修改颜色 |
||||
if (columnIndex === 1) { |
||||
return "color: #fd1e00;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 2) { |
||||
return "color: #3390ff;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 4) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
getChartData() { |
||||
this.loading = true; |
||||
this.queryParams.pageNum = 0; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("图表参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
console.log("处理值然后渲染"); |
||||
if (response.rows.length > 0) { |
||||
let data = response.rows; |
||||
let timeValue = []; |
||||
let hightValue = []; |
||||
let lowValue = []; |
||||
data.forEach((element) => { |
||||
timeValue.push(element.weatherDate); |
||||
hightValue.push(element.maxTemp); |
||||
lowValue.push(element.minTemp); |
||||
}); |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: timeValue, |
||||
}, |
||||
yAxis: { |
||||
name: "℃", |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: hightValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(18, 126, 226)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(18, 126, 226)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
{ |
||||
data: lowValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(250, 169, 19)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(250, 169, 19)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
}, |
||||
{ |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
this.getChartData(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.handleQuery(); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.queryParams.pageNum = 1; |
||||
this.queryParams.pageSize = 32; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"dateAndWeek", |
||||
"maxTemp", |
||||
"minTemp", |
||||
"weatherConditions", |
||||
"windDirection", |
||||
]; |
||||
const data = this.formatJson(filterVal, response.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "历史天气报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
this.option = { |
||||
tooltip: { |
||||
// 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发 |
||||
trigger: "axis", |
||||
textStyle: { |
||||
// 设置提示框内文字的大小 |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
// textStyle: { |
||||
// // 设置图例文字的大小 |
||||
// fontSize: 14 |
||||
// } |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, //y轴单位文字大小 |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最高气温", |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最低气温", |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.charts { |
||||
height: 3rem !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,460 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: "", |
||||
chartData2: "", |
||||
allData: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.chartData1 = ""; |
||||
this.chartData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("运行")) { |
||||
this.chartData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("停止")) { |
||||
this.chartData2 = parseInt(item.value); |
||||
} |
||||
// 计算总和 |
||||
this.allData = this.chartData1 + this.chartData2; |
||||
}); |
||||
this.$nextTick(() => { |
||||
// // 销毁现有的 ECharts 实例 |
||||
// if (this.chartInstance) { |
||||
// this.chartInstance.dispose(); |
||||
// } |
||||
// // 重新初始化图表 |
||||
// this.initChart(); |
||||
this.echartsData(); |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.subData); |
||||
if (this.subData) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtext: "运行状态", |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
subtextStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
textAlign: "center", |
||||
x: "49%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "horizontal", // 水平布局 |
||||
bottom: 0, // 位于最底部 |
||||
left: "center", // 水平居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "风柜系统:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#02427f", "#385f5c"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
}, |
||||
// 最里面渐变小圆 |
||||
{ |
||||
// 颜色 |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["0%", "38%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
padding: 20px; |
||||
.charts { |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.sys_content { |
||||
padding: 0.2rem !important; |
||||
.charts { |
||||
width: 100%; |
||||
height: 2.5rem !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,142 @@
|
||||
<template> |
||||
<div class="card-div"> |
||||
<div class="card-li room-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">回水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData1}}℃</div> |
||||
</div> |
||||
<div class="card-li amb-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">供水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData2}}℃</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
temData1: "", |
||||
temData2: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.temData1 = ""; |
||||
this.temData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("回水")) { |
||||
this.temData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("供水")) { |
||||
this.temData2 = parseInt(item.value); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card-div { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.card-li { |
||||
width: 50%; |
||||
padding: 0.2rem 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 0.1rem; |
||||
.card-title { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
.thermometer { |
||||
height: 180px; |
||||
width: 40px; |
||||
background: #3d5581; |
||||
border-radius: 20px; |
||||
margin: 0 auto 0.25rem; |
||||
overflow: hidden; |
||||
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); |
||||
position: relative; |
||||
} |
||||
.temprogress { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
border-top-left-radius: 20px; |
||||
border-top-right-radius:20px; |
||||
background: linear-gradient(to top, #3498db, #2ecc71) !important; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
.card-div { |
||||
.card-li { |
||||
.card-header { |
||||
.card-title { |
||||
font-size: 0.15rem !important; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 0.2rem !important; |
||||
} |
||||
.thermometer { |
||||
height: 1.8rem !important; |
||||
width: 0.4rem !important; |
||||
border-radius: 0.2rem !important; |
||||
} |
||||
.temprogress { |
||||
border-top-left-radius: 0.2rem !important; |
||||
border-top-right-radius:0.2rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,460 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: "", |
||||
chartData2: "", |
||||
allData: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.chartData1 = ""; |
||||
this.chartData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("在线")) { |
||||
this.chartData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("离线")) { |
||||
this.chartData2 = parseInt(item.value); |
||||
} |
||||
// 计算总和 |
||||
this.allData = this.chartData1 + this.chartData2; |
||||
}); |
||||
this.$nextTick(() => { |
||||
// // 销毁现有的 ECharts 实例 |
||||
// if (this.chartInstance) { |
||||
// this.chartInstance.dispose(); |
||||
// } |
||||
// // 重新初始化图表 |
||||
// this.initChart(); |
||||
this.echartsData(); |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.subData); |
||||
if (this.subData) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "温度监测:", |
||||
data: [ |
||||
{ value: this.chartData1, name: "在线数" }, |
||||
{ value: this.chartData2, name: "离线数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.chartData1, name: "在线数" }, |
||||
{ value: this.chartData2, name: "离线数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "温度监测:", |
||||
data: [ |
||||
{ value: 0, name: "在线数" }, |
||||
{ value: 0, name: "离线数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "在线数" }, |
||||
{ value: 0, name: "离线数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtext: "在线状态", |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
subtextStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
textAlign: "center", |
||||
x: "49%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "horizontal", // 水平布局 |
||||
bottom: 0, // 位于最底部 |
||||
left: "center", // 水平居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "温度监测:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#09596b", "#024e7d"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
}, |
||||
// 最里面渐变小圆 |
||||
{ |
||||
// 颜色 |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["0%", "38%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
padding: 20px; |
||||
.charts { |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.sys_content { |
||||
padding: 0.2rem !important; |
||||
.charts { |
||||
width: 100%; |
||||
height: 2.5rem !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,894 @@
|
||||
<!-- 报表查询-用能查询-年数据 --> |
||||
<template> |
||||
<div class="analy-table"> |
||||
<div class="findwatercharts" ref="findwater_ref"></div> |
||||
<!-- 表格 --> |
||||
<el-table |
||||
class="maintable" |
||||
header-align="center" |
||||
:data="tableData" |
||||
style="margin-right: 0.13rem" |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column prop="itemType" label="类别" width="160" fixed="left"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day01" label="1日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day02" label="2日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day03" label="3日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day04" label="4日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day05" label="5日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day06" label="6日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day07" label="7日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day08" label="8日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day09" label="9日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day10" label="10日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day11" label="11日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day12" label="12日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day13" label="13日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day14" label="14日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day15" label="15日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day16" label="16日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day17" label="17日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day18" label="18日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day19" label="19日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day20" label="20日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day21" label="21日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day22" label="22日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day23" label="23日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day24" label="24日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day25" label="25日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day26" label="26日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day27" label="27日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day28" label="28日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day29" label="29日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day30" label="30日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="day31" label="31日" width="100"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
prop="totalValue" |
||||
label="合计" |
||||
fixed="right" |
||||
width="130" |
||||
> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
import { queryMonthDatas } from "@/api/hotWater/dataAnalysis"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
chType: { |
||||
type: Number, |
||||
}, |
||||
chTime: { |
||||
type: String, |
||||
}, |
||||
chBuild: { |
||||
type: String, |
||||
}, |
||||
currentIndex: { |
||||
type: Number, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance1: null, |
||||
option1: { |
||||
series: [], |
||||
}, |
||||
// 给后端日期 |
||||
endTime: "", |
||||
//表格数据 |
||||
tableData: [], |
||||
// 四条折线图 |
||||
data1: [], |
||||
data2: [], |
||||
data3: [], |
||||
data4: [], |
||||
data5: [], |
||||
// 图例 |
||||
data6: [], |
||||
// x轴数据 |
||||
data8: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
currentIndex: { |
||||
immediate: true, |
||||
deep: true, |
||||
handler(newVal, val) { |
||||
// console.log("子组件改变的值", newVal); |
||||
this.$nextTick(function () { |
||||
console.log("子组件接受的type类型", this.chType); |
||||
console.log("子组件这时候有building吗", this.chBuild); |
||||
this.getMothData(); |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
// this.getMothData(); |
||||
this.initChart1(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// console.log("row",row) |
||||
// console.log("column",column) |
||||
// 如果第1列，修改颜色 |
||||
if (columnIndex === 0 || column.label === '合计') { |
||||
return "background-color:rgb(11 ,100, 201) !important;"; |
||||
} |
||||
}, |
||||
// 查询表格数据 |
||||
getMothData() { |
||||
// 本月 本年参数 |
||||
// 选择时间的参数 父传子 |
||||
// 楼栋id 兄弟组件传值 |
||||
// select选择的值 父传子 |
||||
if (this.chTime) { |
||||
this.endTime = this.chTime; |
||||
} else { |
||||
this.endTime = getMonth(0); |
||||
} |
||||
let params = { |
||||
curDate: this.endTime, |
||||
buildingId: this.chBuild, |
||||
type: this.chType, |
||||
}; |
||||
console.log("月参数", params); |
||||
queryMonthDatas(params).then((res) => { |
||||
// console.log("月表格返回", res); |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
var line1 = []; |
||||
var line2 = []; |
||||
var line3 = []; |
||||
var line4 = []; |
||||
this.tableData = res.rows; |
||||
// Object.values 把数组对象 转化为 数组 |
||||
line1 = Object.values(this.tableData[0]).slice(3, 35); |
||||
line2 = Object.values(this.tableData[1]).slice(3, 35); |
||||
line3 = Object.values(this.tableData[2]).slice(3, 35); |
||||
line4 = Object.values(this.tableData[3]).slice(3, 35); |
||||
// 四条折线图 filter里过滤掉空值 |
||||
this.data1 = line1.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
this.data2 = line2.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
// 含百分比的数组数据还需要处理 |
||||
var line5 = line3.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
this.data3 = []; |
||||
this.data4 = []; |
||||
// 遍历去除掉%，拼接后返回新数组 |
||||
line5.forEach((item) => { |
||||
this.data3.push(item.split("%").join("")); |
||||
}); |
||||
var line6 = line4.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
line6.forEach((item) => { |
||||
this.data4.push(item.split("%").join("")); |
||||
}); |
||||
// 折线图x轴 数据 |
||||
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值 |
||||
//定义一个新数组 |
||||
let newObj = {}; |
||||
for (let key in this.tableData[0]) { |
||||
if (this.tableData[0][key]) { |
||||
newObj[key] = this.tableData[0][key]; |
||||
} |
||||
} |
||||
// console.log("不含空的数组对象", newObj); |
||||
// 在返回的新的对象中，取出对象的所有key值返回新数组 |
||||
// Object.setPrototypeOf(this.newObj); |
||||
let data7 = Object.keys(newObj); |
||||
// console.log("不含空的x轴数据", data7); |
||||
// 先返回月的数组 |
||||
let allArr = [ |
||||
"day01", |
||||
"day02", |
||||
"day03", |
||||
"day04", |
||||
"day05", |
||||
"day06", |
||||
"day07", |
||||
"day08", |
||||
"day09", |
||||
"day10", |
||||
"day11", |
||||
"day12", |
||||
"day13", |
||||
"day14", |
||||
"day15", |
||||
"day16", |
||||
"day17", |
||||
"day18", |
||||
"day19", |
||||
"day20", |
||||
"day21", |
||||
"day22", |
||||
"day23", |
||||
"day24", |
||||
"day25", |
||||
"day26", |
||||
"day27", |
||||
"day28", |
||||
"day29", |
||||
"day30", |
||||
"day31", |
||||
]; |
||||
// 非空数组和所有月的数组进行筛选出重复的元素 |
||||
function compare(data7, allArr) { |
||||
return data7.filter((v) => { |
||||
return allArr.includes(v); |
||||
}); |
||||
} |
||||
// console.log("x轴未分割日份", compare(data7, allArr)); |
||||
// 分割data7，返回月份 xx月 |
||||
this.data8 = []; |
||||
compare(data7, allArr).forEach((item) => { |
||||
if (item) { |
||||
this.data8.push(item.split("day").join("") + "日"); |
||||
} |
||||
}); |
||||
// console.log("x轴数据", this.data8); |
||||
// 图例 |
||||
this.data6 = []; |
||||
this.data5 = this.tableData.forEach((item) => { |
||||
return this.data6.push(item.itemType); |
||||
}); |
||||
// console.log("data1数据", this.data1); |
||||
// console.log("data2数据", this.data2); |
||||
// console.log("data3数据", this.data3); |
||||
// console.log("data4数据", this.data4); |
||||
// console.log("图例文字", this.data6); |
||||
// 月数据 |
||||
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)), |
||||
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4), |
||||
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4), |
||||
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4); |
||||
// console.log("Min1", Min1); |
||||
// console.log("Min2", Min2); |
||||
// console.log("Max1", Max1); |
||||
// console.log("Max2", Max2); |
||||
// 处理y轴文字+单位 |
||||
var yAxisUnit = ""; |
||||
if (this.chType === 1) { |
||||
yAxisUnit = "吨"; |
||||
} else if (this.chType === 2) { |
||||
yAxisUnit = "度"; |
||||
} else if (this.chType === 3) { |
||||
yAxisUnit = "度/吨"; |
||||
} |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
const adapterOption = { |
||||
legend: { |
||||
data: this.data6, |
||||
}, |
||||
xAxis: { |
||||
data: this.data8, |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
min: Min1, |
||||
max: Max1, |
||||
splitNumber: 10, |
||||
interval: (Max1 - Min1) / 10, |
||||
name: yAxisUnit, |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
{ |
||||
min: Min2, |
||||
max: Max2, |
||||
splitNumber: 10, |
||||
interval: (Max2 - Min2) / 10, |
||||
name: "%", |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: this.data6[0], |
||||
data: this.data1, |
||||
}, |
||||
{ |
||||
name: this.data6[1], |
||||
data: this.data2, |
||||
}, |
||||
{ |
||||
name: this.data6[2], |
||||
data: this.data3, |
||||
}, |
||||
{ |
||||
name: this.data6[3], |
||||
data: this.data4, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
} else { |
||||
this.tableData = []; |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
const adapterOption = { |
||||
legend: { |
||||
data: [], |
||||
}, |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
min: 0, |
||||
max: 0, |
||||
splitNumber: 10, |
||||
interval: 0, |
||||
}, |
||||
{ |
||||
min: 0, |
||||
max: 0, |
||||
splitNumber: 10, |
||||
interval: 0, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
// 导出数据 |
||||
outTable() { |
||||
// console.log("月数据啦"); |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
const tHeader = [ |
||||
"类别", |
||||
"1日", |
||||
"2日", |
||||
"3日", |
||||
"4日", |
||||
"5日", |
||||
"6日", |
||||
"7日", |
||||
"8日", |
||||
"9日", |
||||
"10日", |
||||
"11日", |
||||
"12日", |
||||
"13日", |
||||
"14日", |
||||
"15日", |
||||
"16日", |
||||
"17日", |
||||
"18日", |
||||
"19日", |
||||
"20日", |
||||
"21日", |
||||
"22日", |
||||
"23日", |
||||
"24日", |
||||
"25日", |
||||
"26日", |
||||
"27日", |
||||
"28日", |
||||
"29日", |
||||
"30日", |
||||
"31日", |
||||
"合计", |
||||
]; // 导出的excel表头名信息 |
||||
const filterVal = [ |
||||
"itemType", |
||||
"day01", |
||||
"day02", |
||||
"day03", |
||||
"day04", |
||||
"day05", |
||||
"day06", |
||||
"day07", |
||||
"day08", |
||||
"day09", |
||||
"day10", |
||||
"day11", |
||||
"day12", |
||||
"day13", |
||||
"day14", |
||||
"day15", |
||||
"day16", |
||||
"day17", |
||||
"day18", |
||||
"day19", |
||||
"day20", |
||||
"day21", |
||||
"day22", |
||||
"day23", |
||||
"day24", |
||||
"day25", |
||||
"day26", |
||||
"day27", |
||||
"day28", |
||||
"day29", |
||||
"day30", |
||||
"day31", |
||||
"totalValue", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
// const list = this.tableData; |
||||
// console.log(list) |
||||
if (this.chTime) { |
||||
this.endTime = this.chTime; |
||||
} else { |
||||
this.endTime = getMonth(0); |
||||
} |
||||
let params = { |
||||
curDate: this.endTime, |
||||
buildingId: this.chBuild, |
||||
type: this.chType, |
||||
}; |
||||
console.log("月参数", params); |
||||
queryMonthDatas(params).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
// console.log(res); |
||||
const data = this.formatJson(filterVal, res.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "月数据报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
//初始化chartInstance1对象 |
||||
// 如果父组件点击了月 x轴数据 1号 2号 3号。。。 |
||||
// 如果父组件点击了年 x轴数据 1月 2月 3月。。。 |
||||
initChart1() { |
||||
this.$emit("initChart1"); |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
this.option1 = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 以下为鼠标hover时的背景颜色 |
||||
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||
axisPointer: { |
||||
type: "shadow", |
||||
shadowStyle: { |
||||
color: "rgba(30, 69, 113, 0.15)", |
||||
width: "1", |
||||
}, |
||||
}, |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
// console.log("打印颜色", params[i].color.colorStops[0].color) |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color.colorStops[0].color + |
||||
'"></span>'; |
||||
// 根据不同的seriesName 返回不同的单位 |
||||
if (seriesName.includes("用水量")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"吨" + |
||||
"</span><br>"; |
||||
} else if (seriesName.includes("用电量")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"度" + |
||||
"</span><br>"; |
||||
} else if (seriesName.includes("单耗")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"度/吨" + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"%" + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
legend: { |
||||
// 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同 |
||||
// icon: "cricle", |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 12, //这里改字体大小 |
||||
}, |
||||
left: "center", |
||||
top: "5%", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
splitNumber: 10, |
||||
}, |
||||
{ |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
splitNumber: 10, |
||||
}, |
||||
], |
||||
|
||||
series: [ |
||||
{ |
||||
type: "bar", |
||||
barWidth: 10, // 柱子宽度 |
||||
// tooltip: { |
||||
// valueFormatter: function (value) { |
||||
// return value + "吨"; |
||||
// }, |
||||
// }, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#0b75d3", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(1, 102, 251, 1)", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(1, 102, 251, 0)", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bar", |
||||
// tooltip: { |
||||
// valueFormatter: function (value) { |
||||
// return value + "吨"; |
||||
// }, |
||||
// }, |
||||
barWidth: 10, // 柱子宽度 |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#0b75d3", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(0, 224, 225, 1)", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(0, 224, 225, 0)", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
tooltip: { |
||||
valueFormatter: function (value) { |
||||
return value + "%"; |
||||
}, |
||||
}, |
||||
// stack: 'Total', |
||||
symbol: "circle", |
||||
// 拐点大小 |
||||
symbolSize: 6, |
||||
yAxisIndex: 1, |
||||
// 开始不显示拐点， 鼠标经过显示 |
||||
showSymbol: false, |
||||
// data: this.data3, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#db9215", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#db9215", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#db9215", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
tooltip: { |
||||
valueFormatter: function (value) { |
||||
return value + "%"; |
||||
}, |
||||
}, |
||||
// stack: 'Total', |
||||
symbol: "circle", |
||||
// 拐点大小 |
||||
symbolSize: 6, |
||||
//第二个y轴 |
||||
yAxisIndex: 1, |
||||
// 开始不显示拐点， 鼠标经过显示 |
||||
showSymbol: false, |
||||
// data: this.data4, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#EE5217", //折线点的颜色 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#EE5217", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#EE5217", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
lineStyle: { |
||||
color: "#EE5217", //折线的颜色 |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance1.setOption(this.option1, true); |
||||
}, |
||||
// 折线图自适应 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = { |
||||
//比如fontSize |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
.findwatercharts { |
||||
margin-bottom: 0.35rem; |
||||
width: 100%; |
||||
height: 4.5rem; |
||||
/* background-color: pink; */ |
||||
} |
||||
.analy-table >>> .el-table th.el-table__cell.is-leaf, |
||||
.analy-table >>> .el-table td.el-table__cell { |
||||
border-bottom: 1px solid #093769 !important; |
||||
border-right: 1px solid #093769 !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,791 @@
|
||||
<!-- 报表查询-用能查询-年数据 --> |
||||
<template> |
||||
<div class="analy-table"> |
||||
<div class="findwatercharts" ref="findwater_ref"></div> |
||||
<!-- 表格 --> |
||||
<el-table |
||||
class="maintable" |
||||
header-align="center" |
||||
:data="tableData" |
||||
style="margin-right: 0.13rem" |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column |
||||
align="center" |
||||
prop="itemType" |
||||
label="类别" |
||||
width="160" |
||||
fixed="left" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month01" label="1月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month02" label="2月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month03" label="3月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month04" label="4月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month05" label="5月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month06" label="6月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month07" label="7月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month08" label="8月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month09" label="9月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month10" label="10月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month11" label="11月"> |
||||
</el-table-column> |
||||
<el-table-column align="center" prop="month12" label="12月"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
prop="totalValue" |
||||
label="合计" |
||||
fixed="right" |
||||
width="100" |
||||
> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getYear } from "@/utils/datetime"; |
||||
import { queryYearDatas } from "@/api/hotWater/dataAnalysis"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
chType: { |
||||
type: Number, |
||||
}, |
||||
chTime: { |
||||
type: String, |
||||
}, |
||||
chBuild: { |
||||
type: String, |
||||
}, |
||||
currentIndex: { |
||||
type: Number, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance1: null, |
||||
option1: { |
||||
series: [], |
||||
}, |
||||
// 给后端日期 |
||||
endTime: "", |
||||
//表格数据 |
||||
tableData: [], |
||||
// 四条折线图 |
||||
data1: [], |
||||
data2: [], |
||||
data3: [], |
||||
data4: [], |
||||
data5: [], |
||||
// 图例 |
||||
data6: [], |
||||
// x轴数据 |
||||
data8: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
currentIndex: { |
||||
immediate: true, |
||||
deep: true, |
||||
handler(newVal, val) { |
||||
// console.log("子组件改变的值", newVal); |
||||
this.$nextTick(function () { |
||||
this.getYearData(); |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
// this.getYearData(); |
||||
this.initChart1(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// 如果第1列，修改颜色 |
||||
if (columnIndex === 0 || column.label === "合计") { |
||||
return "background-color:rgb(11 ,100, 201) !important;"; |
||||
} |
||||
}, |
||||
// 查询表格数据 |
||||
getYearData() { |
||||
// 本月 本年参数 |
||||
// 选择时间的参数 父传子 |
||||
// 楼栋id 兄弟组件传值 |
||||
// select选择的值 父传子 |
||||
if (this.chTime) { |
||||
this.endTime = this.chTime; |
||||
} else { |
||||
this.endTime = getYear(0); |
||||
} |
||||
let params = { |
||||
curDate: this.endTime, |
||||
buildingId: this.chBuild, |
||||
type: this.chType, |
||||
}; |
||||
console.log("年表格参数", params); |
||||
queryYearDatas(params).then((res) => { |
||||
// console.log("年表格返回", res); |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
var line1 = []; |
||||
var line2 = []; |
||||
var line3 = []; |
||||
var line4 = []; |
||||
this.tableData = res.rows; |
||||
// Object.values 把数组对象 转化为 数组 |
||||
line1 = Object.values(this.tableData[0]).slice(3, 15); |
||||
line2 = Object.values(this.tableData[1]).slice(3, 15); |
||||
line3 = Object.values(this.tableData[2]).slice(3, 15); |
||||
line4 = Object.values(this.tableData[3]).slice(3, 15); |
||||
// 四条折线图 filter里过滤掉空值 |
||||
this.data1 = line1.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
this.data2 = line2.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
// 含百分比的数组数据还需要处理 |
||||
var line5 = line3.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
this.data3 = []; |
||||
this.data4 = []; |
||||
// 遍历去除掉%，拼接后返回新数组 |
||||
line5.forEach((item) => { |
||||
this.data3.push(item.split("%").join("")); |
||||
}); |
||||
var line6 = line4.filter(function (s) { |
||||
return s && s.trim(); |
||||
}); |
||||
line6.forEach((item) => { |
||||
this.data4.push(item.split("%").join("")); |
||||
}); |
||||
// 折线图x轴 数据 |
||||
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值 |
||||
//定义一个新数组 |
||||
let newObj = {}; |
||||
for (let key in this.tableData[0]) { |
||||
if (this.tableData[0][key]) { |
||||
newObj[key] = this.tableData[0][key]; |
||||
} |
||||
} |
||||
// console.log("不含空的数组对象", newObj); |
||||
// 在返回的新的对象中，取出对象的所有key值返回新数组 |
||||
// Object.setPrototypeOf(this.newObj); |
||||
let data7 = Object.keys(newObj); |
||||
// console.log("不含空的x轴数据", data7); |
||||
// 先返回月的数组 |
||||
let allArr = [ |
||||
"month01", |
||||
"month02", |
||||
"month03", |
||||
"month04", |
||||
"month05", |
||||
"month06", |
||||
"month07", |
||||
"month08", |
||||
"month09", |
||||
"month10", |
||||
"month11", |
||||
"month12", |
||||
]; |
||||
// 非空数组和所有月的数组进行筛选出重复的元素 |
||||
function compare(data7, allArr) { |
||||
return data7.filter((v) => { |
||||
return allArr.includes(v); |
||||
}); |
||||
} |
||||
// console.log("x轴未分割月份", compare(data7, allArr)); |
||||
// 分割data7，返回月份 xx月 |
||||
this.data8 = []; |
||||
compare(data7, allArr).forEach((item) => { |
||||
if (item) { |
||||
this.data8.push(item.split("month").join("") + "月"); |
||||
} |
||||
}); |
||||
// console.log("x轴数据", this.data8); |
||||
// 图例 |
||||
this.data6 = []; |
||||
this.data5 = this.tableData.forEach((item) => { |
||||
return this.data6.push(item.itemType); |
||||
}); |
||||
// console.log("data1数据", this.data1); |
||||
// console.log("data2数据", this.data2); |
||||
// console.log("data3数据", this.data3); |
||||
// console.log("data4数据", this.data4); |
||||
// console.log("图例文字", this.data6); |
||||
// 月数据 |
||||
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)), |
||||
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4), |
||||
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4), |
||||
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4); |
||||
// console.log("Min1", Min1); |
||||
// console.log("Min2", Min2); |
||||
// console.log("Max1", Max1); |
||||
// console.log("Max2", Max2); |
||||
// 处理y轴文字+单位 |
||||
var yAxisUnit = ""; |
||||
if (this.chType === 1) { |
||||
yAxisUnit = "吨"; |
||||
} else if (this.chType === 2) { |
||||
yAxisUnit = "度"; |
||||
} else if (this.chType === 3) { |
||||
yAxisUnit = "度/吨"; |
||||
} |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
const adapterOption = { |
||||
legend: { |
||||
data: this.data6, |
||||
}, |
||||
xAxis: { |
||||
data: this.data8, |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
min: Min1, |
||||
max: Max1, |
||||
splitNumber: 10, |
||||
interval: (Max1 - Min1) / 10, |
||||
name: yAxisUnit, |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
{ |
||||
min: Min2, |
||||
max: Max2, |
||||
splitNumber: 10, |
||||
interval: (Max2 - Min2) / 10, |
||||
name: "%", |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: this.data6[0], |
||||
data: this.data1, |
||||
}, |
||||
{ |
||||
name: this.data6[1], |
||||
data: this.data2, |
||||
}, |
||||
{ |
||||
name: this.data6[2], |
||||
data: this.data3, |
||||
}, |
||||
{ |
||||
name: this.data6[3], |
||||
data: this.data4, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
} else { |
||||
this.tableData = []; |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
const adapterOption = { |
||||
legend: { |
||||
data: [], |
||||
}, |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
min: 0, |
||||
max: 0, |
||||
splitNumber: 10, |
||||
interval: 0, |
||||
}, |
||||
{ |
||||
min: 0, |
||||
max: 0, |
||||
splitNumber: 10, |
||||
interval: 0, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
{ |
||||
name: "", |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
// 导出数据 |
||||
outTable() { |
||||
// console.log("年数据啦"); |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
const tHeader = [ |
||||
"类别", |
||||
"1月", |
||||
"2月", |
||||
"3月", |
||||
"4月", |
||||
"5月", |
||||
"6月", |
||||
"7月", |
||||
"8月", |
||||
"9月", |
||||
"10月", |
||||
"11月", |
||||
"12月", |
||||
"合计", |
||||
]; // 导出的excel表头名信息 |
||||
const filterVal = [ |
||||
"itemType", |
||||
"month01", |
||||
"month02", |
||||
"month03", |
||||
"month04", |
||||
"month05", |
||||
"month06", |
||||
"month07", |
||||
"month08", |
||||
"month09", |
||||
"month10", |
||||
"month11", |
||||
"month12", |
||||
"totalValue", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
// const list = this.tableData; |
||||
// console.log(list) |
||||
if (this.chTime) { |
||||
this.endTime = this.chTime; |
||||
} else { |
||||
this.endTime = getYear(0); |
||||
} |
||||
let params = { |
||||
curDate: this.endTime, |
||||
buildingId: this.chBuild, |
||||
type: this.chType, |
||||
}; |
||||
console.log("年表格参数", params); |
||||
queryYearDatas(params).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
// console.log(res); |
||||
const data = this.formatJson(filterVal, res.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "年数据报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
//初始化chartInstance1对象 |
||||
// 如果父组件点击了月 x轴数据 1号 2号 3号。。。 |
||||
// 如果父组件点击了年 x轴数据 1月 2月 3月。。。 |
||||
initChart1() { |
||||
this.$emit("initChart1"); |
||||
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||
this.option1 = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 以下为鼠标hover时的背景颜色 |
||||
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||
axisPointer: { |
||||
type: "shadow", |
||||
shadowStyle: { |
||||
color: "rgba(30, 69, 113, 0.15)", |
||||
width: "1", |
||||
}, |
||||
}, |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
// console.log("打印颜色", params[i].color.colorStops[0].color) |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color.colorStops[0].color + |
||||
'"></span>'; |
||||
// 根据不同的seriesName 返回不同的单位 |
||||
if (seriesName.includes("用水量")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"吨" + |
||||
"</span><br>"; |
||||
} else if (seriesName.includes("用电量")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"度" + |
||||
"</span><br>"; |
||||
} else if (seriesName.includes("单耗")) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"度/吨" + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"%" + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
legend: { |
||||
// 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同 |
||||
// icon: "cricle", |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 12, //这里改字体大小 |
||||
}, |
||||
left: "center", |
||||
top: "5%", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: [ |
||||
//两个y轴 |
||||
{ |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
splitNumber: 10, |
||||
}, |
||||
{ |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
splitNumber: 10, |
||||
}, |
||||
], |
||||
|
||||
series: [ |
||||
{ |
||||
type: "bar", |
||||
barWidth: 10, // 柱子宽度 |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#0b75d3", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(1, 102, 251, 1)", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(1, 102, 251, 0)", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bar", |
||||
barWidth: 10, // 柱子宽度 |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#0b75d3", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(0, 224, 225, 1)", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(0, 224, 225, 0)", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
tooltip: { |
||||
valueFormatter: function (value) { |
||||
return value + "%"; |
||||
}, |
||||
}, |
||||
// stack: 'Total', |
||||
symbol: "circle", |
||||
// 拐点大小 |
||||
symbolSize: 6, |
||||
yAxisIndex: 1, |
||||
// 开始不显示拐点， 鼠标经过显示 |
||||
showSymbol: false, |
||||
// data: this.data3, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#db9215", |
||||
// 使用颜色渐变 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#db9215", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#db9215", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
tooltip: { |
||||
valueFormatter: function (value) { |
||||
return value + "%"; |
||||
}, |
||||
}, |
||||
// stack: 'Total', |
||||
symbol: "circle", |
||||
// 拐点大小 |
||||
symbolSize: 6, |
||||
//第二个y轴 |
||||
yAxisIndex: 1, |
||||
// 开始不显示拐点， 鼠标经过显示 |
||||
showSymbol: false, |
||||
// data: this.data4, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#EE5217", //折线点的颜色 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#EE5217", // 起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#EE5217", // 结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
lineStyle: { |
||||
color: "#EE5217", //折线的颜色 |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance1.setOption(this.option1, true); |
||||
}, |
||||
// 折线图自适应 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = { |
||||
//比如fontSize |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
.findwatercharts { |
||||
margin-bottom: 0.35rem; |
||||
width: 100%; |
||||
height: 4.5rem; |
||||
/* background-color: pink; */ |
||||
} |
||||
.analy-table >>> .el-table th.el-table__cell.is-leaf, |
||||
.analy-table >>> .el-table td.el-table__cell { |
||||
border-bottom: 1px solid #093769 !important; |
||||
border-right: 1px solid #093769 !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,321 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="right-monitor"> |
||||
<div class="buildingDiv"> |
||||
<div class="buildingDiv-left"> |
||||
<img |
||||
class="title-bg" |
||||
src="../../../assets/images/title-bg.png" |
||||
alt="" |
||||
/> |
||||
<div class="title-word">位置：{{ currentName }}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 条件 --> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
@change="handleBuildingChange" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="analysisType" |
||||
placeholder="请选择" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in analysisTypes" |
||||
:key="index" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
<div class="choice"> |
||||
<div |
||||
class="mr20" |
||||
v-for="(item, index) in timeData2" |
||||
:key="index" |
||||
@click="handleEnter(index, $event)" |
||||
:class="{ timeStyle: currentIndex == index }" |
||||
> |
||||
{{ item.title }} |
||||
</div> |
||||
</div> |
||||
<el-date-picker |
||||
v-model="monthDate" |
||||
type="month" |
||||
v-if="currentIndex === 0" |
||||
placeholder="选择开始月份" |
||||
value-format="yyyy-MM" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="yearDate" |
||||
v-if="currentIndex === 1" |
||||
type="year" |
||||
placeholder="选择开始年份" |
||||
style="width: 180px" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="exportData">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<analyze-month |
||||
v-if="currentIndex === 0" |
||||
ref="monthRef" |
||||
:currentIndex="currentIndex" |
||||
:chType="analysisType" |
||||
:chTime="monthDate" |
||||
:chBuild="building" |
||||
></analyze-month> |
||||
<analyze-year |
||||
v-if="currentIndex === 1" |
||||
:currentIndex="currentIndex" |
||||
ref="yearRef" |
||||
:chType="analysisType" |
||||
:chTime="yearDate" |
||||
:chBuild="building" |
||||
></analyze-year> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||
import analyzeMonth from "./components/analyzeMonth.vue"; |
||||
import analyzeYear from "./components/analyzeYear.vue"; |
||||
export default { |
||||
components: { analyzeMonth, analyzeYear }, |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
currentName: "", |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
analysisType: 1, |
||||
analysisTypes: [ |
||||
{ |
||||
label: "用水量", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
label: "用电量", |
||||
value: 2, |
||||
}, |
||||
{ |
||||
label: "耗能", |
||||
value: 3, |
||||
}, |
||||
], |
||||
monthDate: "", |
||||
yearDate: "", |
||||
timeData2: [{ title: "月" }, { title: "年" }], |
||||
currentIndex: null, //月 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getBuildList(); |
||||
}, |
||||
methods: { |
||||
handleEnter(index) { |
||||
this.currentIndex = index; |
||||
// this.renderingBroken(); |
||||
console.log("切换日月"); |
||||
}, |
||||
handleBuildingChange(selectedId) { |
||||
// 找到选中项的对象 |
||||
const selectedItem = this.builds.find((item) => item.id === selectedId); |
||||
if (selectedItem) { |
||||
this.currentName = selectedItem.building_name; |
||||
console.log("选中的楼栋 ID:", selectedId); |
||||
console.log("选中的楼栋名称:", this.currentName); |
||||
// 这里可以添加你需要执行的其他操作 |
||||
} |
||||
}, |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
// 过滤掉 building_name 是 "所有" 的第一个对象 |
||||
const filteredRows = res.rows.filter((row, index) => { |
||||
if (index === 0 && row.building_name === "所有") { |
||||
return false; |
||||
} |
||||
return true; |
||||
}); |
||||
|
||||
this.builds = filteredRows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
|
||||
if (this.builds.length > 0) { |
||||
this.building = this.builds[0].id; |
||||
this.currentName = this.builds[0].building_name; |
||||
console.log("选中的第一个楼栋id-传给子组件", this.building); |
||||
this.handleEnter(0); //默认月 |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
if (this.currentIndex == 0) { |
||||
// 调用月的更新表格数据函数 |
||||
this.$refs.monthRef.getMothData(); |
||||
} else { |
||||
//年 |
||||
this.$refs.yearRef.getYearData(); |
||||
} |
||||
}, |
||||
// 导出 |
||||
exportData() { |
||||
if (this.currentIndex == 0) { |
||||
// 月 |
||||
this.$refs.monthRef.outTable(); |
||||
} else { |
||||
//年 |
||||
this.$refs.yearRef.outTable(); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
.app-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
align-items: stretch; |
||||
height: 100%; |
||||
.left-tree { |
||||
width: 256px; |
||||
padding: 15px 10px 10px 10px; |
||||
border: 1px solid #004b8c; |
||||
} |
||||
.right-monitor { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
.buildingDiv { |
||||
padding-left: 54px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 20px; |
||||
position: relative; |
||||
.title-bg { |
||||
width: 208px; |
||||
height: 38px; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: 0; |
||||
} |
||||
.title-word { |
||||
z-index: 10; |
||||
font-family: YouSheBiaoTiHei; |
||||
font-size: 24px; |
||||
color: #ffffff; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.choice { |
||||
margin-left: 0px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.3rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 870px; |
||||
height: 300px; |
||||
} |
||||
.tree-container { |
||||
height: 330px; /* 设置固定高度 */ |
||||
overflow-y: auto; /* 启用垂直滚动条 */ |
||||
} |
||||
// 滚动条 |
||||
:-webkit-scrollbar { |
||||
width: 10px; /* 滚动条宽度 */ |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: transparent !important; /* 滚动条轨道背景色 */ |
||||
} |
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
.tree-left { |
||||
.custom-tree-icon { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 1200px) and (max-width: 1540px) { |
||||
.tem-li { |
||||
width: calc(49% - 20px) !important; |
||||
} |
||||
} |
||||
@media (max-width: 1200px) { |
||||
.tem-li { |
||||
width: calc(100% - 40px) !important; |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
/* 自定义高亮颜色 */ |
||||
.left-tree |
||||
>>> .el-tree--highlight-current |
||||
.el-tree-node.is-current |
||||
> .el-tree-node__content { |
||||
background-color: #285b9e !important; |
||||
/* color: #f56c6c; */ |
||||
color: #25f1f8; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,756 @@
|
||||
<template> |
||||
<div class="big-machine" v-loading="listLoading"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="date" |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="选择日期" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="goExport">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
:data="tableData" |
||||
@row-click="handlerow" |
||||
highlight-current-row |
||||
height="400" |
||||
ref="maintable" |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称"> |
||||
</el-table-column> |
||||
<el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称"> |
||||
</el-table-column> |
||||
<el-table-column label="0点" align="center" prop="temp00" /> |
||||
<el-table-column label="1点" align="center" prop="temp01" /> |
||||
<el-table-column label="2点" align="center" prop="temp02" /> |
||||
<el-table-column label="3点" align="center" prop="temp03" /> |
||||
<el-table-column label="4点" align="center" prop="temp04" /> |
||||
<el-table-column label="5点" align="center" prop="temp05" /> |
||||
<el-table-column label="6点" align="center" prop="temp06" /> |
||||
<el-table-column label="7点" align="center" prop="temp07" /> |
||||
<el-table-column label="8点" align="center" prop="temp08" /> |
||||
<el-table-column label="9点" align="center" prop="temp09" /> |
||||
<el-table-column label="10点" align="center" prop="temp10" /> |
||||
<el-table-column label="11点" align="center" prop="temp11" /> |
||||
<el-table-column label="12点" align="center" prop="temp12" /> |
||||
<el-table-column label="13点" align="center" prop="temp13" /> |
||||
<el-table-column label="14点" align="center" prop="temp14" /> |
||||
<el-table-column label="15点" align="center" prop="temp15" /> |
||||
<el-table-column label="16点" align="center" prop="temp16" /> |
||||
<el-table-column label="17点" align="center" prop="temp17" /> |
||||
<el-table-column label="18点" align="center" prop="temp18" /> |
||||
<el-table-column label="19点" align="center" prop="temp19" /> |
||||
<el-table-column label="20点" align="center" prop="temp20" /> |
||||
<el-table-column label="21点" align="center" prop="temp21" /> |
||||
<el-table-column label="22点" align="center" prop="temp22" /> |
||||
<el-table-column label="23点" align="center" prop="temp23" /> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDay } from "@/utils/datetime"; |
||||
import { hotBuildList, hotWaterTemp } from "@/api/hotWater/energyAnalysis"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
showBuild: true, //控制表格显示楼栋名称还是热泵名称 |
||||
listLoading: false, |
||||
dayDate: [], //日值 |
||||
dialogVisible: false, |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
tableData: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
brokenInstanc: null, |
||||
brokenOption: {}, |
||||
brokenData1: [], |
||||
brokenTime: [], |
||||
}; |
||||
}, |
||||
// 表格第一行高亮 |
||||
watch: { |
||||
// 请求后端才有效果 |
||||
tableData: function () { |
||||
this.$nextTick(function () { |
||||
this.$refs.maintable.setCurrentRow(this.tableData[0]); |
||||
}); |
||||
}, |
||||
}, |
||||
created() { |
||||
// 在组件创建完成后，设置默认值 |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getBuildList(); |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
this.builds = res.rows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
this.building = res.rows[0].id; |
||||
this.getList(); |
||||
} |
||||
}); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
this.dayDate = formatDay(new Date()); // 更新 |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.getList(); |
||||
}, |
||||
/* 加入小手状态 */ |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
if (row) { |
||||
return "cursor:pointer;text-align:center"; |
||||
} |
||||
}, |
||||
//请求数据 |
||||
getList() { |
||||
if (this.building == "所有") { |
||||
this.showBuild = true; |
||||
} else { |
||||
this.showBuild = false; |
||||
} |
||||
let data = { |
||||
buildingId: this.building, |
||||
curDate: this.dayDate, |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
// 请求数据 |
||||
hotWaterTemp(data).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.tableData = res.rows; |
||||
// this.firstRow(); |
||||
this.handlerow(this.tableData[0]); |
||||
} else { |
||||
this.tableData = []; |
||||
} |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
//查询单个热泵状态 点击表格的某一行 |
||||
handlerow(row, event, column) { |
||||
console.log("点击的行数据----", row); |
||||
if (row) { |
||||
const obj = Object.assign({}, row); |
||||
// 先截取掉不需要的对象属性和值 |
||||
delete obj.buildingId; |
||||
delete obj.curDate; |
||||
delete obj.deviceNum; |
||||
delete obj.deviceName; |
||||
delete obj.buildingName; |
||||
//定义一个新数组 |
||||
let newObj = {}; |
||||
for (let key in obj) { |
||||
if (obj[key]) { |
||||
newObj[key] = obj[key]; |
||||
} |
||||
} |
||||
// console.log("不含空的x轴数据", data7); |
||||
const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组 |
||||
this.brokenTime = []; |
||||
keysArr.forEach((item) => { |
||||
if (item) { |
||||
this.brokenTime.push(item.split("temp").join("") + ":00"); |
||||
} |
||||
}); |
||||
const valuesArr = keysArr.map((key) => newObj[key]); // 将属性名对应的值提取出来存入一个新的数组中 |
||||
// console.log("值", valuesArr); |
||||
// console.log("坐标", this.brokenTime); |
||||
this.brokenData1 = valuesArr; |
||||
} else { |
||||
this.brokenTime = []; |
||||
this.brokenData1 = []; |
||||
} |
||||
this.renderingBroken(); |
||||
}, |
||||
//渲染 |
||||
renderingBroken() { |
||||
this.brokenOption.yAxis.name = "℃"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData1; |
||||
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
// 动态设置 tooltip 格式化函数 |
||||
this.brokenOption.tooltip = { |
||||
trigger: "axis", |
||||
formatter: function (params) { |
||||
// 获取当前数据点信息 |
||||
const data = params[0]; |
||||
const month = data.name; |
||||
const value = data.value; |
||||
return `${month}<br/>温度: ${value} ℃`; |
||||
}, |
||||
}; |
||||
this.brokenOption.xAxis.data = this.brokenTime; |
||||
this.brokenInstanc.setOption(this.brokenOption); |
||||
}, |
||||
// 导出 |
||||
goExport() { |
||||
if (this.tableData) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
// 所有楼栋 |
||||
if (this.showBuild) { |
||||
var tHeader = [ |
||||
"楼栋名称", |
||||
"0点", |
||||
"1点", |
||||
"2点", |
||||
"3点", |
||||
"4点", |
||||
"5点", |
||||
"6点", |
||||
"7点", |
||||
"8点", |
||||
"9点", |
||||
"10点", |
||||
"11点", |
||||
"12点", |
||||
"13点", |
||||
"14点", |
||||
"15点", |
||||
"16点", |
||||
"17点", |
||||
"18点", |
||||
"19点", |
||||
"20点", |
||||
"21点", |
||||
"22点", |
||||
"23点", |
||||
]; // 导出的excel表头名信息 |
||||
var filterVal = [ |
||||
"buildingName", |
||||
"temp00", |
||||
"temp01", |
||||
"temp02", |
||||
"temp03", |
||||
"temp04", |
||||
"temp05", |
||||
"temp06", |
||||
"temp07", |
||||
"temp08", |
||||
"temp09", |
||||
"temp10", |
||||
"temp11", |
||||
"temp12", |
||||
"temp13", |
||||
"temp14", |
||||
"temp15", |
||||
"temp16", |
||||
"temp17", |
||||
"temp18", |
||||
"temp19", |
||||
"temp20", |
||||
"temp21", |
||||
"temp22", |
||||
"temp23", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
} else { |
||||
var tHeader = [ |
||||
"热泵名称", |
||||
"0点", |
||||
"1点", |
||||
"2点", |
||||
"3点", |
||||
"4点", |
||||
"5点", |
||||
"6点", |
||||
"7点", |
||||
"8点", |
||||
"9点", |
||||
"10点", |
||||
"11点", |
||||
"12点", |
||||
"13点", |
||||
"14点", |
||||
"15点", |
||||
"16点", |
||||
"17点", |
||||
"18点", |
||||
"19点", |
||||
"20点", |
||||
"21点", |
||||
"22点", |
||||
"23点", |
||||
]; // 导出的excel表头名信息 |
||||
var filterVal = [ |
||||
"deviceName", |
||||
"temp00", |
||||
"temp01", |
||||
"temp02", |
||||
"temp03", |
||||
"temp04", |
||||
"temp05", |
||||
"temp06", |
||||
"temp07", |
||||
"temp08", |
||||
"temp09", |
||||
"temp10", |
||||
"temp11", |
||||
"temp12", |
||||
"temp13", |
||||
"temp14", |
||||
"temp15", |
||||
"temp16", |
||||
"temp17", |
||||
"temp18", |
||||
"temp19", |
||||
"temp20", |
||||
"temp21", |
||||
"temp22", |
||||
"temp23", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
} |
||||
const data = this.formatJson(filterVal, this.tableData); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "温度变化报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.brokenInstanc.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.brokenInstanc.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||
this.brokenOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
selectedMode: false, // 是否允许图例进行点击 |
||||
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 16, //这里改字体大小 |
||||
}, |
||||
// left: "73%", |
||||
left: "66%", |
||||
top: "0", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
|
||||
grid: { |
||||
top: "10%", |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "5%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.brokenTime, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
smooth: true, |
||||
showSymbol: false, |
||||
data: this.brokenData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#d48e17", //折线点的颜色 |
||||
lineStyle: { |
||||
color: "#d48e17", //折线的颜色 |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
//线性渐变 |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [], |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.brokenInstanc.setOption(this.brokenOption, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.data-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 23px; |
||||
.data-li { |
||||
background-color: transparent; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.3rem; |
||||
width: 31%; |
||||
justify-content: space-between; |
||||
margin-bottom: 0.24rem; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.16rem; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.use-icon { |
||||
width: 0.6rem; |
||||
height: 0.6rem; |
||||
} |
||||
.use-text { |
||||
width: 33%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
color: #dbdbdb; |
||||
.data-text { |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
color: #ffffff; |
||||
} |
||||
.downText { |
||||
color: #ff4027; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
.upText { |
||||
color: #2ff016; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom, |
||||
.el-icon-top { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.type-img { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 3.17rem; |
||||
height: 0.52rem; |
||||
z-index: 10; |
||||
} |
||||
.type1 { |
||||
border: 1px solid #e8aa13; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||
} |
||||
.type1::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type2 { |
||||
border: 1px solid #27a0f2; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||
} |
||||
.type2::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type3 { |
||||
border: 1px solid #1ad3ef; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||
} |
||||
.type3::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type4 { |
||||
border: 1px solid #11d47b; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||
} |
||||
.type4::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
.choice { |
||||
margin: 20px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,756 @@
|
||||
<template> |
||||
<div class="big-machine" v-loading="listLoading"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="date" |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="选择日期" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="goExport">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
:data="tableData" |
||||
@row-click="handlerow" |
||||
highlight-current-row |
||||
height="400" |
||||
ref="maintable" |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column prop="buildingName" label="楼栋名称"> </el-table-column> |
||||
<el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称"> |
||||
</el-table-column> |
||||
<el-table-column label="0点" align="center" prop="temp00" /> |
||||
<el-table-column label="1点" align="center" prop="temp01" /> |
||||
<el-table-column label="2点" align="center" prop="temp02" /> |
||||
<el-table-column label="3点" align="center" prop="temp03" /> |
||||
<el-table-column label="4点" align="center" prop="temp04" /> |
||||
<el-table-column label="5点" align="center" prop="temp05" /> |
||||
<el-table-column label="6点" align="center" prop="temp06" /> |
||||
<el-table-column label="7点" align="center" prop="temp07" /> |
||||
<el-table-column label="8点" align="center" prop="temp08" /> |
||||
<el-table-column label="9点" align="center" prop="temp09" /> |
||||
<el-table-column label="10点" align="center" prop="temp10" /> |
||||
<el-table-column label="11点" align="center" prop="temp11" /> |
||||
<el-table-column label="12点" align="center" prop="temp12" /> |
||||
<el-table-column label="13点" align="center" prop="temp13" /> |
||||
<el-table-column label="14点" align="center" prop="temp14" /> |
||||
<el-table-column label="15点" align="center" prop="temp15" /> |
||||
<el-table-column label="16点" align="center" prop="temp16" /> |
||||
<el-table-column label="17点" align="center" prop="temp17" /> |
||||
<el-table-column label="18点" align="center" prop="temp18" /> |
||||
<el-table-column label="19点" align="center" prop="temp19" /> |
||||
<el-table-column label="20点" align="center" prop="temp20" /> |
||||
<el-table-column label="21点" align="center" prop="temp21" /> |
||||
<el-table-column label="22点" align="center" prop="temp22" /> |
||||
<el-table-column label="23点" align="center" prop="temp23" /> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDay } from "@/utils/datetime"; |
||||
import { hotBuildList, hotWaterLevel } from "@/api/hotWater/energyAnalysis"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
showDeviceName: false, //是否显示设备名称 |
||||
listLoading: false, |
||||
dayDate: [], //日值 |
||||
dialogVisible: false, |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
tableData: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
brokenInstanc: null, |
||||
brokenOption: {}, |
||||
brokenData1: [], |
||||
brokenTime: [], |
||||
}; |
||||
}, |
||||
// 表格第一行高亮 |
||||
watch: { |
||||
// 请求后端才有效果 |
||||
tableData: function () { |
||||
this.$nextTick(function () { |
||||
this.$refs.maintable.setCurrentRow(this.tableData[0]); |
||||
}); |
||||
}, |
||||
}, |
||||
created() { |
||||
// 在组件创建完成后，设置默认值 |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getBuildList(); |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
this.builds = res.rows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
this.building = res.rows[0].id; |
||||
this.getList(); |
||||
} |
||||
}); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
this.dayDate = formatDay(new Date()); // 更新 |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.getList(); |
||||
}, |
||||
/* 加入小手状态 */ |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
if (row) { |
||||
return "cursor:pointer;text-align:center"; |
||||
} |
||||
}, |
||||
//请求数据 |
||||
getList() { |
||||
if (this.building == "所有") { |
||||
this.showDeviceName = false; |
||||
} else { |
||||
this.showDeviceName = true; |
||||
} |
||||
let data = { |
||||
buildingId: this.building, |
||||
curDate: this.dayDate, |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
// 请求数据 |
||||
hotWaterLevel(data).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.tableData = res.rows; |
||||
// this.firstRow(); |
||||
this.handlerow(this.tableData[0]); |
||||
} else { |
||||
this.tableData = []; |
||||
} |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
//查询单个热泵状态 点击表格的某一行 |
||||
handlerow(row, event, column) { |
||||
console.log("点击的行数据----", row); |
||||
if (row) { |
||||
const obj = Object.assign({}, row); |
||||
// 先截取掉不需要的对象属性和值 |
||||
delete obj.buildingId; |
||||
delete obj.curDate; |
||||
delete obj.deviceNum; |
||||
delete obj.deviceName; |
||||
delete obj.buildingName; |
||||
//定义一个新数组 |
||||
let newObj = {}; |
||||
for (let key in obj) { |
||||
if (obj[key]) { |
||||
newObj[key] = obj[key]; |
||||
} |
||||
} |
||||
// console.log("不含空的x轴数据", data7); |
||||
const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组 |
||||
this.brokenTime = []; |
||||
keysArr.forEach((item) => { |
||||
if (item) { |
||||
this.brokenTime.push(item.split("temp").join("") + ":00"); |
||||
} |
||||
}); |
||||
const valuesArr = keysArr.map((key) => newObj[key]); // 将属性名对应的值提取出来存入一个新的数组中 |
||||
// console.log("值", valuesArr); |
||||
// console.log("坐标", this.brokenTime); |
||||
this.brokenData1 = valuesArr; |
||||
} else { |
||||
this.brokenTime = []; |
||||
this.brokenData1 = []; |
||||
} |
||||
this.renderingBroken(); |
||||
}, |
||||
//渲染 |
||||
renderingBroken() { |
||||
this.brokenOption.yAxis.name = "%"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData1; |
||||
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
// 动态设置 tooltip 格式化函数 |
||||
this.brokenOption.tooltip = { |
||||
trigger: "axis", |
||||
formatter: function (params) { |
||||
// 获取当前数据点信息 |
||||
const data = params[0]; |
||||
const month = data.name; |
||||
const value = data.value; |
||||
return `${month}<br/>水位: ${value} %`; |
||||
}, |
||||
}; |
||||
this.brokenOption.xAxis.data = this.brokenTime; |
||||
this.brokenInstanc.setOption(this.brokenOption); |
||||
}, |
||||
// 导出 |
||||
goExport() { |
||||
if (this.tableData) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
if (this.showDeviceName) { |
||||
var tHeader = [ |
||||
"楼栋名称", |
||||
"设备名称", |
||||
"0点", |
||||
"1点", |
||||
"2点", |
||||
"3点", |
||||
"4点", |
||||
"5点", |
||||
"6点", |
||||
"7点", |
||||
"8点", |
||||
"9点", |
||||
"10点", |
||||
"11点", |
||||
"12点", |
||||
"13点", |
||||
"14点", |
||||
"15点", |
||||
"16点", |
||||
"17点", |
||||
"18点", |
||||
"19点", |
||||
"20点", |
||||
"21点", |
||||
"22点", |
||||
"23点", |
||||
]; // 导出的excel表头名信息 |
||||
var filterVal = [ |
||||
"buildingName", |
||||
"deviceName", |
||||
"temp00", |
||||
"temp01", |
||||
"temp02", |
||||
"temp03", |
||||
"temp04", |
||||
"temp05", |
||||
"temp06", |
||||
"temp07", |
||||
"temp08", |
||||
"temp09", |
||||
"temp10", |
||||
"temp11", |
||||
"temp12", |
||||
"temp13", |
||||
"temp14", |
||||
"temp15", |
||||
"temp16", |
||||
"temp17", |
||||
"temp18", |
||||
"temp19", |
||||
"temp20", |
||||
"temp21", |
||||
"temp22", |
||||
"temp23", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
} else { |
||||
var tHeader = [ |
||||
"楼栋名称", |
||||
"0点", |
||||
"1点", |
||||
"2点", |
||||
"3点", |
||||
"4点", |
||||
"5点", |
||||
"6点", |
||||
"7点", |
||||
"8点", |
||||
"9点", |
||||
"10点", |
||||
"11点", |
||||
"12点", |
||||
"13点", |
||||
"14点", |
||||
"15点", |
||||
"16点", |
||||
"17点", |
||||
"18点", |
||||
"19点", |
||||
"20点", |
||||
"21点", |
||||
"22点", |
||||
"23点", |
||||
]; // 导出的excel表头名信息 |
||||
var filterVal = [ |
||||
"buildingName", |
||||
"temp00", |
||||
"temp01", |
||||
"temp02", |
||||
"temp03", |
||||
"temp04", |
||||
"temp05", |
||||
"temp06", |
||||
"temp07", |
||||
"temp08", |
||||
"temp09", |
||||
"temp10", |
||||
"temp11", |
||||
"temp12", |
||||
"temp13", |
||||
"temp14", |
||||
"temp15", |
||||
"temp16", |
||||
"temp17", |
||||
"temp18", |
||||
"temp19", |
||||
"temp20", |
||||
"temp21", |
||||
"temp22", |
||||
"temp23", |
||||
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||
} |
||||
const data = this.formatJson(filterVal, this.tableData); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "水位变化报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.brokenInstanc.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.brokenInstanc.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||
this.brokenOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
selectedMode: false, // 是否允许图例进行点击 |
||||
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 16, //这里改字体大小 |
||||
}, |
||||
// left: "73%", |
||||
left: "66%", |
||||
top: "0", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
|
||||
grid: { |
||||
top: "10%", |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "5%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.brokenTime, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
smooth: true, |
||||
showSymbol: false, |
||||
data: this.brokenData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#d48e17", //折线点的颜色 |
||||
lineStyle: { |
||||
color: "#d48e17", //折线的颜色 |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
//线性渐变 |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [], |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.brokenInstanc.setOption(this.brokenOption, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.data-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 23px; |
||||
.data-li { |
||||
background-color: transparent; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.3rem; |
||||
width: 31%; |
||||
justify-content: space-between; |
||||
margin-bottom: 0.24rem; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.16rem; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.use-icon { |
||||
width: 0.6rem; |
||||
height: 0.6rem; |
||||
} |
||||
.use-text { |
||||
width: 33%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
color: #dbdbdb; |
||||
.data-text { |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
color: #ffffff; |
||||
} |
||||
.downText { |
||||
color: #ff4027; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
.upText { |
||||
color: #2ff016; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom, |
||||
.el-icon-top { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.type-img { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 3.17rem; |
||||
height: 0.52rem; |
||||
z-index: 10; |
||||
} |
||||
.type1 { |
||||
border: 1px solid #e8aa13; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||
} |
||||
.type1::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type2 { |
||||
border: 1px solid #27a0f2; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||
} |
||||
.type2::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type3 { |
||||
border: 1px solid #1ad3ef; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||
} |
||||
.type3::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type4 { |
||||
border: 1px solid #11d47b; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||
} |
||||
.type4::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
.choice { |
||||
margin: 20px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,94 @@
|
||||
<template> |
||||
<div class="paramsDetails"> |
||||
<div class="details-content"> |
||||
<div class="details-header"> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
<el-tab-pane label="能耗报表" name="first"> |
||||
<energy-report v-if="activeName === 'first'"></energy-report> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="温度变化表" name="second"> |
||||
<tem-report v-if="activeName === 'second'"></tem-report> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="水位变化表" name="three"> |
||||
<water-report v-if="activeName === 'three'"></water-report> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import EnergyReport from "./components/energyReport.vue"; |
||||
import TemReport from "./components/temReport.vue"; |
||||
import WaterReport from "./components/waterReport.vue"; |
||||
|
||||
export default { |
||||
components: { EnergyReport, TemReport, WaterReport }, |
||||
data() { |
||||
return { |
||||
activeName: "first", //能耗报表 |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
|
||||
//当在子页面中点击按钮时，会触发switch-tab事件， |
||||
// 然后在父组件中监听到这个事件，并将activeName设置为'second'，从而让第二个tab成为当前选中的tab。 |
||||
switchToEquitesMess() { |
||||
this.activeName = "second"; |
||||
}, |
||||
switchToPatrolTem() { |
||||
// this.activeName = 'fourth'; |
||||
}, |
||||
// 记得请求冷水机组数据时，默认选中第一个冷水机组 |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.paramsDetails { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: stretch; |
||||
justify-content: space-between; |
||||
|
||||
.details-content { |
||||
width: 100%; |
||||
// height: 0.42rem; |
||||
position: relative; |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
.none-div { |
||||
padding-top: 0.31rem; |
||||
} |
||||
|
||||
.none-div >>> .el-tree { |
||||
background: transparent; |
||||
color: #789d9f; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node:focus > .el-tree-node__content { |
||||
background-color: #00be97; |
||||
color: #fff; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__content:hover, |
||||
.none-div >>> .el-upload-list__item:hover { |
||||
background-color: #00be97; |
||||
color: #fff; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__content { |
||||
height: 0.48rem; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__expand-icon.is-leaf { |
||||
display: none !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,483 @@
|
||||
<template> |
||||
<div class="big-machine" v-loading="listLoading"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="daterange" |
||||
range-separator="至" |
||||
value-format="yyyy-MM-dd" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="exportData">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
highlight-current-row |
||||
height="500" |
||||
> |
||||
<el-table-column |
||||
type="index" |
||||
:index="indexAdd" |
||||
prop="number" |
||||
label="序号" |
||||
width="90" |
||||
></el-table-column> |
||||
<el-table-column label="所属楼栋" align="center" prop="buildingName" /> |
||||
<el-table-column label="设备编号" align="center" prop="deviceNum" /> |
||||
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||
<el-table-column label="抄表时间" align="center" prop="curTime" /> |
||||
<el-table-column label="采集读数" align="center" prop="curValue" /> |
||||
<el-table-column label="用量(度)" align="center" prop="usedValue" /> |
||||
<el-table-column label="倍率" align="center" prop="ratio" /> |
||||
<el-table-column label="计算量(度)" align="center" prop="calcValue" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDay } from "@/utils/datetime"; |
||||
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||
import { queryDeviceDatas } from "@/api/hotWater/energyQuery"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dayDate: [], //日值 |
||||
dialogVisible: false, |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 在组件创建完成后，设置默认值 |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getBuildList(); |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeform.time1); |
||||
if (!this.dayDate) { |
||||
this.$nextTick(() => { |
||||
this.dayDate = []; |
||||
}); |
||||
} |
||||
}, |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
this.builds = res.rows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
this.building = res.rows[0].id; |
||||
this.getList(); |
||||
} |
||||
}); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
let date = new Date(); //获取新的时间 |
||||
//获取当前年份,并且转为字符串 |
||||
let year = date.getFullYear().toString(); |
||||
//获取当前月份，因为月份是要从0开始，此处要加1， |
||||
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
||||
let month = |
||||
date.getMonth() + 1 < 10 |
||||
? "0" + (date.getMonth() + 1).toString() |
||||
: (date.getMonth() + 1).toString(); |
||||
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
||||
let day = |
||||
date.getDate() < 10 |
||||
? "0" + date.getDate().toString() |
||||
: date.getDate().toString(); |
||||
//字符串拼接，将开始时间和结束时间进行拼接 |
||||
let start1 = year + "-" + month + "-01"; //当月第一天 |
||||
let end1 = year + "-" + month + "-" + day; //当天 |
||||
this.dayDate = [start1, end1]; // 更新 |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
// 序号 |
||||
indexAdd(index) { |
||||
return ( |
||||
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize |
||||
); |
||||
}, |
||||
//请求数据 |
||||
getList() { |
||||
if (this.dayDate.length == 0) { |
||||
this.initializeTimeDate(); |
||||
} |
||||
let data = { |
||||
pageNum: this.queryParams.pageNum, |
||||
pageSize: this.queryParams.pageSize, |
||||
startDate: this.dayDate[0], |
||||
endDate: this.dayDate[1], |
||||
buildingId: this.building, |
||||
deviceType: "16", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
queryDeviceDatas(data).then((res) => { |
||||
console.log("返回", res); |
||||
if (res.code == 200) { |
||||
this.postList = res.rows; |
||||
this.total = res.total; |
||||
} else { |
||||
this.postList = []; |
||||
this.total = 0; |
||||
} |
||||
}); |
||||
// 请求数据 |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
// 导出 |
||||
exportData() { |
||||
if (this.dayDate.length == 0) { |
||||
this.initializeTimeDate(); |
||||
} |
||||
let data = { |
||||
pageNum: this.queryParams.pageNum, |
||||
pageSize: this.total, |
||||
startDate: this.dayDate[0], |
||||
endDate: this.dayDate[1], |
||||
buildingId: this.building, |
||||
deviceType: "16", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
queryDeviceDatas(data).then((res) => { |
||||
console.log("返回", res); |
||||
if (res.code == 200) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
var tHeader = [ |
||||
"所属楼栋", |
||||
"设备编号", |
||||
"设备名称", |
||||
"抄表时间", |
||||
"采集读数", |
||||
"用量(度)", |
||||
"倍率", |
||||
"计算量(度)", |
||||
]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"buildingName", |
||||
"deviceNum", |
||||
"deviceName", |
||||
"curTime", |
||||
"curValue", |
||||
"usedValue", |
||||
"ratio", |
||||
"calcValue", |
||||
]; |
||||
const data = this.formatJson(filterVal, res.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "电表读数报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
if (columnIndex === 6 || columnIndex === 8) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.data-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 23px; |
||||
.data-li { |
||||
background-color: transparent; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.3rem; |
||||
width: 31%; |
||||
justify-content: space-between; |
||||
margin-bottom: 0.24rem; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.16rem; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.use-icon { |
||||
width: 0.6rem; |
||||
height: 0.6rem; |
||||
} |
||||
.use-text { |
||||
width: 33%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
color: #dbdbdb; |
||||
.data-text { |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
color: #ffffff; |
||||
} |
||||
.downText { |
||||
color: #ff4027; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
.upText { |
||||
color: #2ff016; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom, |
||||
.el-icon-top { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.type-img { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 3.17rem; |
||||
height: 0.52rem; |
||||
z-index: 10; |
||||
} |
||||
.type1 { |
||||
border: 1px solid #e8aa13; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||
} |
||||
.type1::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type2 { |
||||
border: 1px solid #27a0f2; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||
} |
||||
.type2::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type3 { |
||||
border: 1px solid #1ad3ef; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||
} |
||||
.type3::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type4 { |
||||
border: 1px solid #11d47b; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||
} |
||||
.type4::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
.choice { |
||||
margin: 20px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,578 @@
|
||||
<template> |
||||
<div class="big-machine" v-loading="listLoading"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="date" |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="选择日期" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="choice"> |
||||
<div |
||||
class="mr20" |
||||
v-for="(item, index) in timeData2" |
||||
:key="index" |
||||
@click="handleEnter(index, $event)" |
||||
:class="{ timeStyle: currentIndex == index }" |
||||
> |
||||
{{ item.title }} |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDay } from "@/utils/datetime"; |
||||
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||
import { hotEnergyQuery } from "@/api/hotWater/overview"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dayDate: [], //日值 |
||||
dialogVisible: false, |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
timeData2: [{ title: "用水量" }, { title: "用电量" }], |
||||
currentIndex: 0, |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
brokenInstanc: null, |
||||
brokenOption: {}, |
||||
brokenData1: [], |
||||
brokenTime: [], |
||||
}; |
||||
}, |
||||
created() { |
||||
// 在组件创建完成后，设置默认值 |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getBuildList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
this.builds = res.rows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
this.building = res.rows[0].id; |
||||
this.getList(); |
||||
} |
||||
}); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
this.dayDate = formatDay(new Date()); // 更新 |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.getList(); |
||||
}, |
||||
//请求数据 |
||||
getList() { |
||||
let data = { |
||||
type: 0, |
||||
page: 1, |
||||
limit: 31, |
||||
// curDate:this.dayDate, |
||||
startDate: this.dayDate, |
||||
endDate: this.dayDate, |
||||
buildingId: this.building, |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
// 请求数据 |
||||
hotEnergyQuery(data).then((res) => { |
||||
console.log("图表返回的数据", res); |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenTime = []; |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.exportData = res.rows; |
||||
res.rows.forEach((item) => { |
||||
this.brokenData1.push(item.useHotWater); |
||||
this.brokenData2.push(item.electValue); |
||||
if (item.curDate.includes(" ")) { |
||||
var oneStr = item.curDate.split(" "); |
||||
this.brokenTime.push(oneStr[oneStr.length - 1] + ":00"); |
||||
} |
||||
}); |
||||
// 对数组进行反转操作 |
||||
this.brokenData1.reverse(); |
||||
this.brokenData2.reverse(); |
||||
this.brokenTime.reverse(); |
||||
} else { |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenTime = []; |
||||
} |
||||
|
||||
this.getChartData(); |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
// |
||||
getChartData() { |
||||
if (this.currentIndex === 0) { |
||||
this.brokenOption.yAxis.name = "吨"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData1; |
||||
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} else if (this.currentIndex === 1) { |
||||
this.brokenOption.yAxis.name = "度"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData2; |
||||
this.brokenOption.series[0].itemStyle.color = "#1ab395"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(26, 179, 149, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(26, 179, 149,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} |
||||
// 保存当前索引用于闭包 |
||||
const currentIndex = this.currentIndex; |
||||
// 动态设置 tooltip 格式化函数 |
||||
this.brokenOption.tooltip = { |
||||
trigger: "axis", |
||||
formatter: function (params) { |
||||
// 获取当前数据点信息 |
||||
const data = params[0]; |
||||
const month = data.name; |
||||
const value = data.value; |
||||
|
||||
// 根据索引返回不同内容 |
||||
if (currentIndex === 0) { |
||||
return `${month}<br/>用水量: ${value} 吨`; |
||||
} else if (currentIndex === 1) { |
||||
return `${month}<br/>用电量: ${value} 度`; |
||||
} |
||||
}, |
||||
}; |
||||
this.brokenOption.xAxis.data = this.brokenTime; |
||||
this.brokenInstanc.setOption(this.brokenOption); |
||||
}, |
||||
handleEnter(index) { |
||||
this.currentIndex = index; |
||||
this.getChartData(); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.brokenInstanc.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.brokenInstanc.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||
this.brokenOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
selectedMode: false, // 是否允许图例进行点击 |
||||
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 16, //这里改字体大小 |
||||
}, |
||||
// left: "73%", |
||||
left: "66%", |
||||
top: "0", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
|
||||
grid: { |
||||
top: "4%", |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "5%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.brokenTime, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
smooth: true, |
||||
showSymbol: false, |
||||
data: this.brokenData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#d48e17", //折线点的颜色 |
||||
lineStyle: { |
||||
color: "#d48e17", //折线的颜色 |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
//线性渐变 |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [], |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.brokenInstanc.setOption(this.brokenOption, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.data-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 23px; |
||||
.data-li { |
||||
background-color: transparent; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.3rem; |
||||
width: 31%; |
||||
justify-content: space-between; |
||||
margin-bottom: 0.24rem; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.16rem; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.use-icon { |
||||
width: 0.6rem; |
||||
height: 0.6rem; |
||||
} |
||||
.use-text { |
||||
width: 33%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
color: #dbdbdb; |
||||
.data-text { |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
color: #ffffff; |
||||
} |
||||
.downText { |
||||
color: #ff4027; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
.upText { |
||||
color: #2ff016; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom, |
||||
.el-icon-top { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.type-img { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 3.17rem; |
||||
height: 0.52rem; |
||||
z-index: 10; |
||||
} |
||||
.type1 { |
||||
border: 1px solid #e8aa13; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||
} |
||||
.type1::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type2 { |
||||
border: 1px solid #27a0f2; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||
} |
||||
.type2::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type3 { |
||||
border: 1px solid #1ad3ef; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||
} |
||||
.type3::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type4 { |
||||
border: 1px solid #11d47b; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||
} |
||||
.type4::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
.choice { |
||||
margin: 20px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 700px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,483 @@
|
||||
<template> |
||||
<div class="big-machine" v-loading="listLoading"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<el-select |
||||
style="margin-right: 0.1rem" |
||||
v-model="building" |
||||
placeholder="请选择楼栋" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in builds" |
||||
:key="index" |
||||
:label="item.building_name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="daterange" |
||||
range-separator="至" |
||||
value-format="yyyy-MM-dd" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<div class="success-btn" style="margin: 0 0.12rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="exportData">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
highlight-current-row |
||||
height="500" |
||||
> |
||||
<el-table-column |
||||
type="index" |
||||
:index="indexAdd" |
||||
prop="number" |
||||
label="序号" |
||||
width="90" |
||||
></el-table-column> |
||||
<el-table-column label="所属楼栋" align="center" prop="buildingName" /> |
||||
<el-table-column label="设备编号" align="center" prop="deviceNum" /> |
||||
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||
<el-table-column label="抄表时间" align="center" prop="curTime" /> |
||||
<el-table-column label="采集读数" align="center" prop="curValue" /> |
||||
<el-table-column label="用量(吨)" align="center" prop="usedValue" /> |
||||
<el-table-column label="倍率" align="center" prop="ratio" /> |
||||
<el-table-column label="计算量(吨)" align="center" prop="calcValue" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDay } from "@/utils/datetime"; |
||||
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||
import { queryDeviceDatas } from "@/api/hotWater/energyQuery"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dayDate: [], //日值 |
||||
dialogVisible: false, |
||||
building: "", //选中的楼栋 |
||||
builds: [], //楼栋列表 |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 在组件创建完成后，设置默认值 |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getBuildList(); |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeform.time1); |
||||
if (!this.dayDate) { |
||||
this.$nextTick(() => { |
||||
this.dayDate = []; |
||||
}); |
||||
} |
||||
}, |
||||
/** 查询楼栋 */ |
||||
getBuildList() { |
||||
let data = { |
||||
systemType: "1", |
||||
}; |
||||
hotBuildList(data).then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
this.builds = res.rows; |
||||
// console.log("筛选后的新结果", this.builds); |
||||
this.building = res.rows[0].id; |
||||
this.getList(); |
||||
} |
||||
}); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
let date = new Date(); //获取新的时间 |
||||
//获取当前年份,并且转为字符串 |
||||
let year = date.getFullYear().toString(); |
||||
//获取当前月份，因为月份是要从0开始，此处要加1， |
||||
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
||||
let month = |
||||
date.getMonth() + 1 < 10 |
||||
? "0" + (date.getMonth() + 1).toString() |
||||
: (date.getMonth() + 1).toString(); |
||||
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
||||
let day = |
||||
date.getDate() < 10 |
||||
? "0" + date.getDate().toString() |
||||
: date.getDate().toString(); |
||||
//字符串拼接，将开始时间和结束时间进行拼接 |
||||
let start1 = year + "-" + month + "-01"; //当月第一天 |
||||
let end1 = year + "-" + month + "-" + day; //当天 |
||||
this.dayDate = [start1, end1]; // 更新 |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
// 序号 |
||||
indexAdd(index) { |
||||
return ( |
||||
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize |
||||
); |
||||
}, |
||||
//请求数据 |
||||
getList() { |
||||
if (this.dayDate.length == 0) { |
||||
this.initializeTimeDate(); |
||||
} |
||||
let data = { |
||||
pageNum: this.queryParams.pageNum, |
||||
pageSize: this.queryParams.pageSize, |
||||
startDate: this.dayDate[0], |
||||
endDate: this.dayDate[1], |
||||
buildingId: this.building, |
||||
deviceType: "18", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
queryDeviceDatas(data).then((res) => { |
||||
console.log("返回", res); |
||||
if (res.code == 200) { |
||||
this.postList = res.rows; |
||||
this.total = res.total; |
||||
} else { |
||||
this.postList = []; |
||||
this.total = 0; |
||||
} |
||||
}); |
||||
// 请求数据 |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
// 导出 |
||||
exportData() { |
||||
if (this.dayDate.length == 0) { |
||||
this.initializeTimeDate(); |
||||
} |
||||
let data = { |
||||
pageNum: this.queryParams.pageNum, |
||||
pageSize: this.total, |
||||
startDate: this.dayDate[0], |
||||
endDate: this.dayDate[1], |
||||
buildingId: this.building, |
||||
deviceType: "18", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
queryDeviceDatas(data).then((res) => { |
||||
console.log("返回", res); |
||||
if (res.code == 200) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
var tHeader = [ |
||||
"所属楼栋", |
||||
"设备编号", |
||||
"设备名称", |
||||
"抄表时间", |
||||
"采集读数", |
||||
"用量(吨)", |
||||
"倍率", |
||||
"计算量(吨)", |
||||
]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"buildingName", |
||||
"deviceNum", |
||||
"deviceName", |
||||
"curTime", |
||||
"curValue", |
||||
"usedValue", |
||||
"ratio", |
||||
"calcValue", |
||||
]; |
||||
const data = this.formatJson(filterVal, res.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "水表读数报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
if (columnIndex === 6 || columnIndex === 8) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.data-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 23px; |
||||
.data-li { |
||||
background-color: transparent; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.3rem; |
||||
width: 31%; |
||||
justify-content: space-between; |
||||
margin-bottom: 0.24rem; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.16rem; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.use-icon { |
||||
width: 0.6rem; |
||||
height: 0.6rem; |
||||
} |
||||
.use-text { |
||||
width: 33%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
color: #dbdbdb; |
||||
.data-text { |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
color: #ffffff; |
||||
} |
||||
.downText { |
||||
color: #ff4027; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
.upText { |
||||
color: #2ff016; |
||||
z-index: 11 !important; |
||||
font-family: DIN-Bold; |
||||
font-size: 0.24rem; |
||||
margin-top: 0.05rem; |
||||
.el-icon-bottom, |
||||
.el-icon-top { |
||||
margin-right: 0.08rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.type-img { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 3.17rem; |
||||
height: 0.52rem; |
||||
z-index: 10; |
||||
} |
||||
.type1 { |
||||
border: 1px solid #e8aa13; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||
} |
||||
.type1::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type2 { |
||||
border: 1px solid #27a0f2; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||
} |
||||
.type2::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type3 { |
||||
border: 1px solid #1ad3ef; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||
} |
||||
.type3::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
.type4 { |
||||
border: 1px solid #11d47b; |
||||
border-radius: 10px; |
||||
/* 设置渐变背景 */ |
||||
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||
} |
||||
.type4::after { |
||||
content: ""; |
||||
width: 100%; |
||||
height: 90%; |
||||
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: absolute; |
||||
bottom: -100% !important; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
.choice { |
||||
margin: 20px; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue