ly.fan
/
oldcac
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化首页数据

Browse Source
cq1.0
fanluyan 1 year ago
parent 346372544e
commit d6c0fd6843
5 changed files with 686 additions and 245 deletions
Show Stats Download Patch File Download Diff File

331
src/api/home/home.js
Unescape Escape View File

@ -1,151 +1,213 @@
import request from '@/utils/request';
import { UPMS_SREVICE } from '@/api/module/urls'
import request from "@/utils/request";
import { UPMS_SREVICE } from "@/api/module/urls";
/**
* 获取lxId
* 获取lxId
*/
export function getLxId(jgid,mtid) {
return request({
url: '/EquipController/queryLx/' + jgid + '/' + mtid,
method: 'get'
})
export function getLxId(jgid, mtid) {
return request({
url: "/EquipController/queryLx/" + jgid + "/" + mtid,
method: "get",
});
}
/**
* 获取EqmId
* 获取EqmId
*/
export function getEqmId(jgid,lxid,mtid) {
return request({
url: '/EquipController/queryEqmId/' + jgid + '/' + lxid + '/' + mtid,
method: 'get'
})
export function getEqmId(jgid, lxid, mtid) {
return request({
url: "/EquipController/queryEqmId/" + jgid + "/" + lxid + "/" + mtid,
method: "get",
});
}
/**
* 油色谱
* 油色谱
*/
// 表格数据
export function oilChromaControllerTable(eqmid) {
return request({
url: '/oilChromaController/queryTableData/' + eqmid,
method: 'get'
})
return request({
url: "/oilChromaController/queryTableData/" + eqmid,
method: "get",
});
}
// 趋势图数据
export function oilChromaControllerLine(eqmid) {
return request({
url: '/oilChromaController/queryLineData/' + eqmid,
method: 'get'
})
return request({
url: "/oilChromaController/queryLineData/" + eqmid,
method: "get",
});
}
/**
* 铁芯/夹件
* 铁芯/夹件
*/
// 表格数据
export function ironCoreJoinClampControllerTable({ ...idGather }) {
return request({
url: '/ironCoreJoinClampController/queryTableData/' + idGather.ironCoreId + '/' + idGather.clampId,
method: 'get'
})
return request({
url:
"/ironCoreJoinClampController/queryTableData/" +
idGather.ironCoreId +
"/" +
idGather.clampId,
method: "get",
});
}
// 趋势图数据
export function ironCoreJoinClampControllerLine({ ...idGather }) {
return request({
url: '/ironCoreJoinClampController/queryLineData/' + idGather.ironCoreId + '/' + idGather.clampId,
method: 'get'
})
return request({
url:
"/ironCoreJoinClampController/queryLineData/" +
idGather.ironCoreId +
"/" +
idGather.clampId,
method: "get",
});
}
/**
* 电缆环流
*/
* 电缆环流
*/
// 表格数据
export function cableCircleControllerTable(arr) {
return request({
url: '/cableCircleController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5],
method: 'get'
})
return request({
url:
"/cableCircleController/queryTableData/" +
arr[0] +
"/" +
arr[1] +
"/" +
arr[2] +
"/" +
arr[3] +
"/" +
arr[4] +
"/" +
arr[5],
method: "get",
});
}
// 趋势图数据
export function cableCircleControllerLine(arr) {
return request({
url: '/cableCircleController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5],
method: 'get'
})
return request({
url:
"/cableCircleController/queryLineData/" +
arr[0] +
"/" +
arr[1] +
"/" +
arr[2] +
"/" +
arr[3] +
"/" +
arr[4] +
"/" +
arr[5],
method: "get",
});
}
/**
* 红外
*/
* 红外
*/
// 表格数据
export function InfraredThermographyControllerTable(arr) {
return request({
url: '/InfraredThermographyController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
method: 'get'
})
return request({
url:
"/InfraredThermographyController/queryTableData/" +
arr[0] +
"/" +
arr[1] +
"/" +
arr[2],
method: "get",
});
}
// 趋势图数据
export function InfraredThermographyControllerLine(arr) {
return request({
url: '/InfraredThermographyController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
method: 'get'
})
return request({
url:
"/InfraredThermographyController/queryLineData/" +
arr[0] +
"/" +
arr[1] +
"/" +
arr[2],
method: "get",
});
}
/**
* 局放
*/
* 局放
*/
// 表格数据
export function CablePartialDischargeControllerTable(arr) {
return request({
url: '/cablePartialDischargeController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
method: 'get'
})
return request({
url:
"/cablePartialDischargeController/queryTableData/" +
arr[0] +
"/" +
arr[1] +
"/" +
arr[2],
method: "get",
});
}
// 趋势图数据
export function CablePartialDischargeControllerLine(arr) {
return request({
url: '/cablePartialDischargeController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
method: 'get'
})
// export function CablePartialDischargeControllerLine(arr) {
// return request({
// url:
// "/cablePartialDischargeController/queryLineData/" +
// arr[0] +
// "/" +
// arr[1] +
// "/" +
// arr[2],
// method: "get",
// });
// }
export function CablePartialDischargeControllerLine(eqmid) {
return request({
url: "/cablePartialDischargeController/queryJfLineData/" + eqmid,
method: "get",
});
}
/**
* 监测装置
*/
* 监测装置
*/
/**
* GIS
*/
* GIS
*/
// 表格数据
export function SF6ControllerTable(eqmid) {
return request({
url: '/SF6Controller/queryTableData/' + eqmid,
method: 'get'
})
return request({
url: "/SF6Controller/queryTableData/" + eqmid,
method: "get",
});
}
// 趋势图数据
export function SF6ControllerLine(eqmid) {
return request({
url: '/SF6Controller/queryLineData/' + eqmid,
method: 'get'
})
return request({
url: "/SF6EnvController/queryLineData/" + eqmid,
method: "get",
});
}
/**
* 避雷器
*/
* 避雷器
*/
// 表格数据
export function BlackBlqControllerTable(eqmid) {
return request({
url: '/BlqController/queryTableData/' + eqmid,
method: 'get'
})
return request({
url: "/BlqController/queryTableData/" + eqmid,
method: "get",
});
}
// 趋势图数据
export function BlackBlqControllerLine(eqmid) {
return request({
url: '/BlqController/queryLineData/' + eqmid,
method: 'get'
})
return request({
url: "/BlqController/queryLineData/" + eqmid,
method: "get",
});
}
/**
@ -153,10 +215,10 @@ export function BlackBlqControllerLine(eqmid) {
*/
// 设备总数
export function getEquNum() {
return request({
url: '/EquipController/queryEquipNum',
method: 'get'
})
return request({
url: "/EquipController/queryEquipNum",
method: "get",
});
}
/**
@ -164,51 +226,78 @@ export function getEquNum() {
*/
// 变电设备类型
export function getJgType() {
return request({
url: '/EquipController/queryJg',
method: 'get'
})
return request({
url: "/EquipController/queryJg",
method: "get",
});
}
// 设备小类
export function getLxType(jgid) {
return request({
url: '/EquipController/getLxType/' + jgid,
method: 'get'
})
return request({
url: "/EquipController/getLxType/" + jgid,
method: "get",
});
}
// 监测设备类型
export function getEqType(jgid,lxid) {
return request({
url: '/EquipController/getEqType/' + jgid +'/'+ lxid,
method: 'get'
})
export function getEqType(jgid, lxid) {
return request({
url: "/EquipController/getEqType/" + jgid + "/" + lxid,
method: "get",
});
}
// 告警列表
export function queryAlarm(params) {
return request({
url: '/cableCirculationController/page',
method: 'post',
data: params
})
}
return request({
url: "/cableCirculationController/page",
method: "post",
data: params,
});
}
// 告警详情列表
export function queryAlarmDetail(params) {
return request({
url: '/cableCirculationController/secondPage',
method: 'post',
data: params
})
}
return request({
url: "/cableCirculationController/secondPage",
method: "post",
data: params,
});
}
// 告警处理
export function dealwarning(params) {
return request({
url: '/cableCirculationController/deal',
method: 'post',
data: params
})
}
return request({
url: "/cableCirculationController/deal",
method: "post",
data: params,
});
}
//获取SF6环境
export function getSf6Api() {
return request({
url: "/EquipController/getSf6",
method: "get",
});
}
//获取避雷器
export function getblqApi() {
return request({
url: "/EquipController/getblq",
method: "get",
});
}
//获取局放
export function getjfApi() {
return request({
url: "/EquipController/getjf",
method: "get",
});
}

135
src/view/home/arrester/index.vue
Unescape Escape View File

@ -17,9 +17,9 @@
:style="'background-image:url(' + arrester + ');'"
v-show="cardShow"
>
<div class="tendencyChartText" @click="tendencyChartChange('5')">
<!-- <div class="tendencyChartText" @click="tendencyChartChange('5')">
趋势图
</div>
</div> -->
<div class="cardTitle">
<div>
<span>避雷器 - </span>
@ -56,12 +56,26 @@
</div>
</div>
<div class="cardContent">
<Tablemodule
<el-table
class="blqTable"
:data="blqtableData"
highlight-current-row
border
style="width: 100%"
size="mini"
height="7vw"
@row-click="handleRowClick"
>
<el-table-column prop="id" label="id" width="50"> </el-table-column>
<el-table-column prop="jmc" label="区间"> </el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
</el-table>
<!-- <Tablemodule
:table-loading="loading"
:option="tableData.column"
:data="tableData.data"
></Tablemodule>
<div class="cardDate">采样时间 {{ samplingDate }}</div>
<div class="cardDate">采样时间 {{ samplingDate }}</div> -->
</div>
</div>
</div>
@ -73,6 +87,7 @@ import {
getLxId,
BlackBlqControllerTable,
BlackBlqControllerLine,
getblqApi,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
@ -126,6 +141,9 @@ export default {
xAxisData: [],
seriesData: [],
selectIdList: [],
//新接口数据
blqtableData: [],
blqName: "",
};
},
created() {
@ -136,6 +154,15 @@ export default {
},
methods: {
init() {
getblqApi().then((response) => {
const { code, data, msg } = response;
if (code === 200) {
console.log("bileiqi", data);
this.blqtableData = data;
} else {
this.msgError(msg);
}
});
getLxId(3, 4)
.then((response) => {
const { code, data, msg } = response;
@ -166,6 +193,13 @@ export default {
this.msgError(err.msg);
});
},
//点击当前行
handleRowClick(row, column, event) {
console.log(row); // 这里会打印出被点击的行的数据
this.blqName = row.name;
this.tableDataFun(row.id);
this.echartDataFun(row.id, "1");
},
tableDataFun(data) {
this.loading = true;
BlackBlqControllerTable(data).then((response) => {
@ -212,16 +246,17 @@ export default {
}
this.seriesData = arr;
this.xAxisData = data[0].dtimes;
if (type === '2') {
this.tendencyChartChange();
}
this.tendencyChartChange("5");
// if (type === "2") {
// this.tendencyChartChange();
// }
} else {
this.msgError(msg);
}
});
},
// 点击开关
changeStatus: function ($event) {
changeStatus: function($event) {
if (!$event) {
this.cardShow = false;
this.hideSwitchShow = true;
@ -234,17 +269,20 @@ export default {
},
dropdownClick(command) {
this.tableDataFun(this.selectIdList[command]);
this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载
this.echartDataFun(this.selectIdList[command], "2"); //后面的2，是为了区分首次加载还是选择加载
},
tendencyChartChange(type) {
console.log(type);
console.log(this.legendData);
console.log(this.xAxisData);
console.log(this.seriesData);
console.log(this.blqName);
this.$emit(
"dataDispose",
this.legendData,
this.xAxisData,
this.seriesData,
this.dropdownData.length !== 0
? "避雷器 -" + this.dropdownData[0].name
: "避雷器 "
this.blqName
);
},
},
@ -283,4 +321,75 @@ export default {
padding: 40px 0 !important;
box-sizing: border-box;
}
</style>
.cardContent {
.blqTable {
/deep/ thead {
color: #03bcff;
}
/deep/ th.el-table__cell {
background-color: transparent !important;
}
/deep/tr {
background-color: transparent !important;
}
color: #03bcff;
background-color: transparent !important;
/deep/ .el-table__cell {
padding: 0.18vw 0;
text-align: center;
}
}
/deep/.el-table--border {
border: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-right: 1px solid #03bcff;
}
/deep/.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
background-color: #296479;
cursor: pointer;
}
/deep/.el-table::before {
height: 0;
}
/deep/.el-table__body tr.current-row > td.el-table__cell {
background-color: #296479;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
//background-color: #ccc;
/* 关键代码 */
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
//background-color: #f0f0f0;
border-radius: 32px;
}
}
</style>

141
src/view/home/breaker/index.vue
Unescape Escape View File

@ -3,7 +3,8 @@
<!-- 1#主变 油色谱 -->
<!-- 标题和内容 -->
<div class="pageCardTitle" v-show="hideSwitchShow">
{{ dropdownData.length !== 0 ? "SF6 -" + dropdownData[0].name : "SF6 " }}
<!-- {{ dropdownData.length !== 0 ? "SF6 -" + dropdownData[0].name : "SF6 " }} -->
SF6环境
<div class="iconSvg closeSvg" @click="changeStatus(true)">
<svg-icon slot="prefix" icon-class="close" className="svg" />
</div>
@ -13,14 +14,14 @@
:style="'background-image:url(' + breaker + ');'"
v-show="cardShow"
>
<div class="tendencyChartText" @click="tendencyChartChange('5')">
<!-- <div class="tendencyChartText" @click="tendencyChartChange('5')">
趋势图
</div>
</div> -->
<div class="cardTitle">
<div>
<span>SF6 - </span>
<span>SF6环境</span>
<!-- 下拉框有数据 -->
<el-dropdown
<!-- <el-dropdown
v-if="dropdownData.length !== 0"
@command="dropdownClick"
>
@ -36,28 +37,42 @@
>{{ item.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
<!-- 无下拉数据 -->
<el-dropdown v-else class="cursor" trigger="click">
<!-- <el-dropdown v-else class="cursor" trigger="click">
<span class="el-dropdown-link">
SF6<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>暂无数据 </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
</div>
<div class="iconSvg" @click="changeStatus(false)">
<svg-icon slot="prefix" icon-class="open" className="svg" />
</div>
</div>
<div class="cardContent">
<Tablemodule
<el-table
class="sf6Table"
:data="sf6tableData"
highlight-current-row
border
style="width: 100%"
size="mini"
height="8vw"
@row-click="handleRowClick"
>
<el-table-column prop="id" label="id" width="50"> </el-table-column>
<el-table-column prop="jmc" label="区间"> </el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
</el-table>
<!-- <Tablemodule
:table-loading="loading"
:option="tableData.column"
:data="tableData.data"
></Tablemodule>
<div class="cardDate">采样时间 {{ samplingDate }}</div>
<div class="cardDate">采样时间 {{ samplingDate }}</div> -->
</div>
</div>
</div>
@ -69,6 +84,7 @@ import {
SF6ControllerLine,
getLxId,
getEqmId,
getSf6Api,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
@ -121,6 +137,8 @@ export default {
xAxisData: [],
seriesData: [],
selectIdList: [],
//新接口数据
sf6tableData: [],
};
},
created() {
@ -131,6 +149,15 @@ export default {
},
methods: {
init() {
getSf6Api().then((response) => {
const { code, data, msg } = response;
if (code === 200) {
console.log("sf6", data);
this.sf6tableData = data;
} else {
this.msgError(msg);
}
});
getLxId(2, 8)
.then((response) => {
const { code, data, msg } = response;
@ -161,6 +188,16 @@ export default {
this.msgError(err.msg);
});
},
//点击当前行
handleRowClick(row, column, event) {
console.log(row); // 这里会打印出被点击的行的数据
this.tableDataFun(row.id);
this.echartDataFun(row.id, "1");
// this.$nextTick(() => {
// this.echartDataFun(row.id, "1");
// this.tendencyChartChange("5");
// });
},
tableDataFun(data) {
this.loading = true;
SF6ControllerTable(data).then((response) => {
@ -207,16 +244,17 @@ export default {
}
this.seriesData = arr;
this.xAxisData = data[0].dtimes;
if (type === '2') {
this.tendencyChartChange();
}
this.tendencyChartChange();
// if (type === "2") {
// this.tendencyChartChange();
// }
} else {
this.msgError(msg);
}
});
},
// 点击开关
changeStatus: function ($event) {
changeStatus: function($event) {
if (!$event) {
this.cardShow = false;
this.hideSwitchShow = true;
@ -229,7 +267,7 @@ export default {
},
dropdownClick(command) {
this.tableDataFun(this.selectIdList[command]);
this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载
this.echartDataFun(this.selectIdList[command], "2"); //后面的2，是为了区分首次加载还是选择加载
},
tendencyChartChange(type) {
// 通知home页图标数据处理
@ -265,4 +303,75 @@ export default {
padding: 20px 0 !important;
box-sizing: border-box;
}
</style>
.cardContent {
.sf6Table {
/deep/ thead {
color: #03bcff;
}
/deep/ th.el-table__cell {
background-color: transparent !important;
}
/deep/tr {
background-color: transparent !important;
}
color: #03bcff;
background-color: transparent !important;
/deep/ .el-table__cell {
padding: 0.18vw 0;
text-align: center;
}
}
/deep/.el-table--border {
border: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-right: 1px solid #03bcff;
}
/deep/.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
background-color: #296479;
cursor: pointer;
}
/deep/.el-table::before {
height: 0;
}
/deep/.el-table__body tr.current-row > td.el-table__cell {
background-color: #296479;
}
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
//background-color: #ccc;
/* 关键代码 */
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
//background-color: #f0f0f0;
border-radius: 32px;
}
}
</style>

95
src/view/home/monitoringDevice/index.vue
Unescape Escape View File

@ -3,7 +3,10 @@
<!-- 1#主变 油色谱 -->
<!-- 标题和内容 -->
<div class="pageCardTitle" v-show="hideSwitchShow">
<div><span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span></div>
<div>
<span>监测装置总数</span><span> | </span
><span>{{ devNumberTotal }}</span>
</div>
<div class="iconSvg closeSvg" @click="changeStatus(true)">
<svg-icon slot="prefix" icon-class="close" className="svg" />
</div>
@ -15,18 +18,31 @@
>
<div class="cardTitle">
<div>
<span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span>
<span>监测装置总数</span><span> | </span
><span>{{ devNumberTotal }}</span>
</div>
<div class="iconSvg" @click="changeStatus(false)">
<svg-icon slot="prefix" icon-class="open" className="svg" />
</div>
</div>
<div class="cardContent">
<Tablemodule
<div class="devTotalNum">
<ul>
<li class="devLi">
<span>主设备类型</span>
<span>装置数量（个）</span>
</li>
<li class="devLi" v-for="(item, index) in devListNum">
<span>{{ item.name }}</span>
<span>{{ item.num }}</span>
</li>
</ul>
</div>
<!-- <Tablemodule
:table-loading="loading"
:option="tableData.column"
:data="tableData.data"
></Tablemodule>
></Tablemodule> -->
</div>
</div>
</div>
@ -70,38 +86,41 @@ export default {
data: [
{
type: "变压器",
num: '0',
num: "0",
prop: "byqNum",
},
{
type: "GIS",
num: '0',
num: "0",
prop: "gisNum",
},
{
type: "避雷器",
num: '0',
num: "0",
prop: "blqNum",
},
{
type: "开关柜",
num: '0',
num: "0",
prop: "cwNum",
},
{
type: "电缆",
num: '0',
num: "0",
prop: "dlNum",
},
{
type: "发电机",
num: '0',
num: "0",
prop: "otherNum",
},
],
},
samplingDate: "2021-10-11 15:15:30",
number: {},
//新接口数据
devListNum: [],
devNumberTotal: "",
};
},
created() {
@ -109,7 +128,7 @@ export default {
},
methods: {
// 点击开关
changeStatus: function ($event) {
changeStatus: function($event) {
if (!$event) {
this.cardShow = false;
this.hideSwitchShow = true;
@ -131,20 +150,26 @@ export default {
},
// 获取数量
getEquNum() {
this.loading=true
this.loading = true;
getEquNum().then((response) => {
const { code, data, msg } = response;
if (code === 200) {
this.number = data;
const arr = this.tableData.data;
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
for (const key in data) {
if (element.prop === key) {
arr[index].num = data[key].toString();
}
}
}
this.devListNum = data.list;
this.devNumberTotal = data.totalNum;
console.log("aaaaaaaa", this.number);
// const arr = this.tableData.data;
// console.log("aaaaaaaaaa", arr);
// for (let index = 0; index < arr.length; index++) {
// const element = arr[index];
// console.log(element);
// for (const key in data) {
// console.log(key);
// if (element.prop === key) {
// console.log(data[key]);
// arr[index].num = data[key].toString();
// }
// }
// }
} else {
this.msgError(msg);
}
@ -172,5 +197,29 @@ export default {
.pageCard .cardContent {
padding: 30px !important;
box-sizing: border-box;
.devTotalNum {
border: 1px solid #03bcff;
font-size: 0.625vw;
color: #03bcff !important;
border-bottom: none;
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: flex;
//align-items: center;
justify-content: space-around;
span {
padding: 0.2vw 0;
flex: 1;
border-bottom: 1px solid #03bcff;
&:first-child {
border-right: 1px solid #03bcff;
}
}
}
}
}
}
</style>
</style>

229
src/view/home/pageMidSecond/index.vue
Unescape Escape View File

@ -14,13 +14,13 @@
v-show="cardShow"
>
<!-- tendencyChart文字标题 -->
<div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
<!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
<div class="cardTitle">
<div class="tabDropdown">
<el-scrollbar style="height: 100%">
局放 - {{ jfName }}
<!-- <el-scrollbar style="height: 100%">
<div class="tabDropdownBox">
<div class="tabDropdownSelect">
<!-- 第一级 -->
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ dropdownFirstNmae
@ -37,7 +37,6 @@
</el-dropdown>
</div>
<div class="tabDropdownSelect">
<!-- 第二级 -->
<el-dropdown @command="handleCommandSecond">
<span class="el-dropdown-link">
{{ dropdownSecondNmae
@ -54,7 +53,7 @@
</el-dropdown>
</div>
</div>
</el-scrollbar>
</el-scrollbar> -->
</div>
<div class="iconSvg" @click="changeStatus(false)">
<svg-icon slot="prefix" icon-class="open" className="svg" />
@ -62,26 +61,41 @@
</div>
<div class="cardContent">
<!-- 电缆环流 -->
<Tablemodule
<!-- <Tablemodule
v-if="selectType === 'hl'"
:table-loading="loading"
:option="hlTableData.column"
:data="hlTableData.data"
></Tablemodule>
></Tablemodule> -->
<!-- 红外 -->
<Tablemodule
<!-- <Tablemodule
v-else-if="selectType === 'hw'"
:table-loading="loading"
:option="hwTableData.column"
:data="hwTableData.data"
></Tablemodule>
></Tablemodule> -->
<!-- 局放 -->
<Tablemodule
v-else-if="selectType === 'jf'"
<el-table
v-if="selectType === 'jf'"
class="jfTable"
:data="jftableData"
highlight-current-row
border
style="width: 100%"
size="mini"
height="7vw"
@row-click="handleRowClick"
>
<el-table-column prop="id" label="id" width="50"> </el-table-column>
<el-table-column prop="jmc" label="区间"> </el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
</el-table>
<!-- <Tablemodule
v-if="selectType === 'jf'"
:table-loading="loading"
:option="jfTableData.column"
:data="jfTableData.data"
></Tablemodule>
></Tablemodule> -->
<!-- 电缆沟 -->
<!-- <Tablemodule
vv-else-if="selectType === 'jf'"
@ -104,6 +118,7 @@ import {
CablePartialDischargeControllerLine,
getLxType,
getEqType,
getjfApi,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
@ -134,13 +149,13 @@ export default {
},
],
dropdownFirstNmae: "",
dropdownSecondNmae: "环流",
dropdownSecondNmae: "局放",
dropdownSecondData: [
{
name: "环流",
type: "hl",
id: [],
},
// {
// name: "环流",
// type: "hl",
// id: [],
// },
// {
// name: "电缆沟",
// type: "dlg",
@ -151,11 +166,11 @@ export default {
type: "jf",
id: [],
},
{
name: "红外",
type: "hw",
id: [],
},
// {
// name: "红外",
// type: "hw",
// id: [],
// },
],
hlTableData: {
column: [
@ -236,7 +251,10 @@ export default {
legendData: [],
xAxisData: [],
seriesData: [],
selectType: "hl",
selectType: "jf",
//新接口数据
jftableData: [],
jfName: "",
};
},
created() {
@ -247,6 +265,15 @@ export default {
},
methods: {
init() {
getjfApi().then((response) => {
const { code, data, msg } = response;
if (code === 200) {
console.log("bileiqi", data);
this.jftableData = data;
} else {
this.msgError(msg);
}
});
getLxType(5)
.then((response) => {
const { code, data, msg } = response;
@ -270,6 +297,13 @@ export default {
this.msgError(err.msg);
});
},
//点击当前行
handleRowClick(row, column, event) {
console.log(row); // 这里会打印出被点击的行的数据
this.jfName = row.name;
this.tableTataFun(row.id, "jf");
this.echartDataFun(row.id, "jf", "2"); //后面的2，是为了区分首次加载还是选择加载
},
// 第二个下拉框id数据
selectIdFun(id, type) {
this.dropdownSecondData.forEach((element) => {
@ -283,10 +317,10 @@ export default {
const element = data[index];
if (element.name.indexOf("环流") != -1) {
this.dropdownSecondData[0].id.push(parseInt(element.id));
}
}
// else if (element.name.indexOf("电缆沟") != -1) {
// this.dropdownSecondData[1].id.push(parseInt(element.id));
// }
// }
else if (element.name.indexOf("局放") != -1) {
this.dropdownSecondData[1].id.push(parseInt(element.id));
} else if (element.name.indexOf("红外") != -1) {
@ -414,49 +448,28 @@ export default {
}
},
echartDataFun(idArr, type, way) {
if (way === "2") {
this.tendencyChartChange();
}
let url = cableCircleControllerLine;
if (type === "hl") {
url = cableCircleControllerLine;
} else if (type === "hw") {
url = InfraredThermographyControllerLine;
} else if (type === "jf") {
url = CablePartialDischargeControllerLine;
}
if (idArr.length !== 0) {
url(idArr).then((response) => {
const { code, data, msg } = response;
const arr = [];
let disposeData = [];
if (code === 200 && data.length !== 0) {
if (type === "hl") {
disposeData = data;
} else {
disposeData = this.echartDataClearup(data, type);
}
for (let index = 0; index < disposeData.length; index++) {
const element = disposeData[index];
this.legendData.push(element.equipment);
arr.push({
name: element.equipment,
data: element.currentVals
? echartData(element.currentVals)
: [],
});
}
this.seriesData = arr;
this.xAxisData = disposeData[0].dtimes;
} else {
this.msgError(msg);
CablePartialDischargeControllerLine(idArr).then((response) => {
const { code, data, msg } = response;
const arr = [];
if (code === 200 && data.length !== 0) {
for (let index = 0; index < data.length; index++) {
const element = data[index];
this.legendData.push(element.equipment);
arr.push({
name: element.equipment,
data: echartData(element.currentVals),
});
}
});
} else {
this.legendData = [];
this.xAxisData = [];
this.seriesData = [];
}
this.seriesData = arr;
this.xAxisData = data[0].dtimes;
this.tendencyChartChange("5");
// if (type === "2") {
// this.tendencyChartChange();
// }
} else {
this.msgError(msg);
}
});
},
// 红外、局方echart数据
echartDataClearup(arr, type) {
@ -583,8 +596,9 @@ export default {
// }
},
// 点击开关
changeStatus: function ($event) {
this.pageCardTitle=this.dropdownFirstNmae +'-'+ this.dropdownSecondNmae
changeStatus: function($event) {
this.pageCardTitle =
this.dropdownFirstNmae + "-" + this.dropdownSecondNmae;
if (!$event) {
this.cardShow = false;
this.hideSwitchShow = true;
@ -601,7 +615,7 @@ export default {
this.legendData,
this.xAxisData,
this.seriesData,
this.dropdownFirstNmae + this.dropdownSecondNmae
this.jfName
);
},
},
@ -644,4 +658,75 @@ export default {
padding: 20px 0 !important;
box-sizing: border-box;
}
</style>
.cardContent {
.jfTable {
/deep/ thead {
color: #03bcff;
}
/deep/ th.el-table__cell {
background-color: transparent !important;
}
/deep/tr {
background-color: transparent !important;
}
color: #03bcff;
background-color: transparent !important;
/deep/ .el-table__cell {
padding: 0.18vw 0;
text-align: center;
}
}
/deep/.el-table--border {
border: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-bottom: 1px solid #03bcff;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-right: 1px solid #03bcff;
}
/deep/.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
background-color: #296479;
cursor: pointer;
}
/deep/.el-table::before {
height: 0;
}
/deep/.el-table__body tr.current-row > td.el-table__cell {
background-color: #296479;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
//background-color: #ccc;
/* 关键代码 */
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
//background-color: #f0f0f0;
border-radius: 32px;
}
}
</style>

Write Preview
Loading…
Cancel
Save