lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1.主机参数启动停止颜色分别用绿色和蓝色； 

2.历史天气查询导出excel；
3.热水系统→数据分析纵坐标添加单位；
4.风柜系统手机界面优化进行控制（重点）；
meizhou
selia-zx 3 months ago
parent
54929bc638
commit
a41b7e1cf8
10 changed files with 4418 additions and 1795 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/assets/styles/index.scss
  2. 29
      src/store/modules/permission.js
  3. 2110
      src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
  4. 1840
      src/views/aircAndWindc/awSysMonitor/index copy.vue
  5. 1676
      src/views/aircAndWindc/awSysMonitor/index.vue
  6. 77
      src/views/centerairC/sysMonitor/hostDetails.vue
  7. 4
      src/views/centerairC/sysMonitor/monitorCenter.vue
  8. 78
      src/views/centerairC/temHistoryQuery/index.vue
  9. 174
      src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
  10. 218
      src/views/hotWater/dataAnalysis/components/analyzeYear.vue

7
src/assets/styles/index.scss
Unescape View File

@ -775,3 +775,10 @@ table th {
}
}
}
/* 手机端样式 */
@media (min-width: 0px) and (max-width: 990px) {
.app-main {
height: 100% !important;
overflow-y: hidden !important;
}
}

29
src/store/modules/permission.js
Unescape View File

@ -90,6 +90,35 @@ const permission = {
// console.log("不满足条件");
}
// 风柜
const result2 = sidebarRoutes.find(
(item) => item.name === "AircAndWindc"
);
if (result2) {
// 定义要添加的多个路由对象数组
const additionalRoutes2 = [
{
path: "/asSysMonitorDetails",
name: "asSysMonitorDetails",
hidden: true,
component: () =>
import(
"@/views/aircAndWindc/awSysMonitor/asSysMonitorDetails"
),
meta: { title: "系统监控", icon: "screen" },
},
// 可以继续添加更多路由对象
];
// 循环添加额外的路由对象到各路由数组
additionalRoutes2.forEach((route) => {
sidebarRoutes.push(route);
rewriteRoutes.push(route);
asyncRoutes.push(route);
});
} else {
// console.log("不满足条件");
}
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);

2110
src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
View File

File diff suppressed because it is too large Load Diff

1840
src/views/aircAndWindc/awSysMonitor/index copy.vue
View File

File diff suppressed because it is too large Load Diff

1676
src/views/aircAndWindc/awSysMonitor/index.vue
View File

File diff suppressed because it is too large Load Diff

77
src/views/centerairC/sysMonitor/hostDetails.vue
Unescape View File

@ -155,7 +155,14 @@
<div class="rightDot">
<div class="leftDot">
<span>{{ item.otherName }}:</span>
<span class="dotData">{{ item.curValue }}</span>
<span
:class="{
dotData: !isSpecialValue(item.curValue),
goodData: isSpecialValue(item.curValue),
badData: item.curValue === '故障',
}"
>{{ item.curValue }}</span
>
<span>{{ item.unit }}</span>
</div>
</div>
@ -179,7 +186,14 @@
<div class="rightDot">
<div class="leftDot">
<span>{{ subItem.otherName }}:</span>
<span class="dotData">{{ subItem.curValue }}</span>
<span
:class="{
dotData: !isSpecialValue(subItem.curValue),
goodData: isSpecialValue(subItem.curValue),
badData: subItem.curValue === '故障',
}"
>{{ subItem.curValue }}</span
>
<span>{{ subItem.unit }}</span>
</div>
</div>
@ -639,6 +653,11 @@ export default {
this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
// 判断 curValue 是否为特定值
isSpecialValue(value) {
const specialValues = ["运行", "启动", "正常"];
return specialValues.includes(value);
},
},
};
</script>
@ -868,33 +887,6 @@ export default {
white-space: nowrap;
}
}
.dotData {
font-weight: bold;
margin: 0 0.06rem;
color: #3b80ff;
display: flex;
align-items: center;
}
.goodData {
font-weight: bold;
margin: 0 0.06rem;
color: #3df574;
}
.badData {
font-weight: bold;
margin: 0 0.06rem;
color: #cf3607;
}
.automaticData {
font-weight: bold;
margin: 0 0.06rem;
color: #da7b10;
}
.timeData {
font-weight: bold;
margin: 0 0.06rem;
color: #1df3e8;
}
}
.water-flow3 {
z-index: 10;
@ -1210,4 +1202,31 @@ export default {
.timeStyle {
color: #ffffff !important;
}
.dotData {
font-weight: bold;
margin: 0 0.06rem;
color: #3b80ff;
display: flex;
align-items: center;
}
.goodData {
font-weight: bold;
margin: 0 0.06rem;
color: #3df574;
}
.badData {
font-weight: bold;
margin: 0 0.06rem;
color: #cf3607;
}
.automaticData {
font-weight: bold;
margin: 0 0.06rem;
color: #da7b10;
}
.timeData {
font-weight: bold;
margin: 0 0.06rem;
color: #1df3e8;
}
</style>

4
src/views/centerairC/sysMonitor/monitorCenter.vue
Unescape View File

@ -145,10 +145,10 @@
<img class="step" src="../../../assets/images/step.png" alt="" />
<div class="tips-text">{{ startOrStopStatus }}</div>
</div>
<div class="funtion-menu1" @click="goPerformance">
<!-- <div class="funtion-menu1" @click="goPerformance">
<div class="menu-title"><div>冷机性能统计</div></div>
<img class="ditu" src="../../../assets/images/di.png" />
</div>
</div> -->
<div class="funtion-menu1 menu2" @click="goControl">
<div class="menu-title"><div>系统控制</div></div>
<img class="ditu" src="../../../assets/images/di.png" />

78
src/views/centerairC/temHistoryQuery/index.vue
Unescape View File

@ -28,6 +28,15 @@
>搜索</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"
@ -39,20 +48,6 @@
</div>
</div>
</div>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<div class="warning-btn" v-hasPermi="['system:post:export']">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</div>
</el-col> -->
</el-row>
<div class="charts" ref="chart_ref"></div>
<el-table
v-loading="loading"
@ -239,12 +234,49 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download(
"device/gateway/export",
{
...this.queryParams,
},
`post_${new Date().getTime()}.xlsx`
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];
}
})
);
},
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
@ -294,7 +326,7 @@ export default {
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255, 255, 255, 1)",
fontSize: titleFontSize, //x轴文字大小
fontSize: titleFontSize, //x轴文字大小
},
axisTick: {
show: false, // 不显示坐标轴刻度线
@ -319,14 +351,14 @@ export default {
// 设置 name 的样式
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12, //y轴单位文字大小
fontSize: 12, //y轴单位文字大小
},
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255, 255, 255, 1)",
fontSize: titleFontSize, //x轴文字大小
fontSize: titleFontSize, //x轴文字大小
},
// 显示y坐标轴
axisLine: {

174
src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
Unescape View File

@ -153,8 +153,10 @@ export default {
},
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// console.log("row",row)
// console.log("column",column)
// 如果第1列，修改颜色
if (columnIndex === 0) {
if (columnIndex === 0 || column.label === '合计') {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
@ -293,6 +295,15 @@ export default {
// 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: {
@ -308,12 +319,24 @@ export default {
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: [
@ -522,6 +545,62 @@ export default {
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，图例就可以根据不同的类型不同
@ -531,7 +610,7 @@ export default {
color: "#ffff",
fontSize: 12, //这里改字体大小
},
left: "56%",
left: "center",
top: "5%",
//图例距离饼图的距离
itemGap: 5,
@ -638,10 +717,27 @@ export default {
// },
//折线颜色
itemStyle: {
color: "#db9215",
lineStyle: {
color: "#db9215", //折线的颜色
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], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@ -654,10 +750,27 @@ export default {
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
color: "#1ab395",
lineStyle: {
color: "#1ab395", //折线的颜色
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],
},
},
{
@ -677,10 +790,27 @@ export default {
// data: this.data3,
//折线颜色
itemStyle: {
color: "#e23131",
lineStyle: {
color: "#e23131", //折线的颜色
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], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@ -701,9 +831,27 @@ export default {
// data: this.data4,
//折线颜色
itemStyle: {
color: "#4a98ff",
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: "#4a98ff", //折线的颜色
color: "#EE5217", //折线的颜色
},
},
},

218
src/views/hotWater/dataAnalysis/components/analyzeYear.vue
Unescape View File

@ -120,7 +120,7 @@ export default {
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 如果第1列，修改颜色
if (columnIndex === 0) {
if (columnIndex === 0 || column.label === "合计") {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
@ -240,6 +240,15 @@ export default {
// 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: {
@ -255,12 +264,24 @@ export default {
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: [
@ -431,6 +452,62 @@ export default {
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，图例就可以根据不同的类型不同
@ -440,7 +517,7 @@ export default {
color: "#ffff",
fontSize: 12, //这里改字体大小
},
left: "56%",
left: "center",
top: "5%",
//图例距离饼图的距离
itemGap: 5,
@ -542,67 +619,55 @@ export default {
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
color: "#db9215",
lineStyle: {
color: "#db9215", //折线的颜色
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 + "吨";
// },
// },
tooltip: {
trigger: "axis",
formatter: function (params) {
//数据单位格式化
var relVal = params[0].name; //x轴名称
if (params[0].seriesName == "2022年用水量") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 吨";
} else if (params[0].seriesName == "用电量") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 度";
} else if (params[0].seriesName == "耗能") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 度/吨";
} else {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 次";
}
return relVal;
},
},
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
color: "#1ab395",
lineStyle: {
color: "#1ab395", //折线的颜色
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],
},
},
{
@ -622,10 +687,27 @@ export default {
// data: this.data3,
//折线颜色
itemStyle: {
color: "#e23131",
lineStyle: {
color: "#e23131", //折线的颜色
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], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@ -646,9 +728,27 @@ export default {
// data: this.data4,
//折线颜色
itemStyle: {
color: "#4a98ff",
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: "#4a98ff", //折线的颜色
color: "#EE5217", //折线的颜色
},
},
},

Write Preview
Loading…
Cancel
Save