<template>
<div id="NewFiberSearch">
<div id="NFSNo1" v-if="!isNFSSite">
<div id="NFSNo1Top">
<el-input
placeholder="请输入内容"
v-model="FZValue"
clearable
@keyup.native.enter="loadFZData"
></el-input>
<el-select v-model="SearchType" placeholder="请选择项目类型">
<el-option
v-for="item in listTypeInfo.xmlxList"
:key="item.value"
:label="item.key"
:value="item.value"
>
</el-option>
</el-select>
<img
src="../../../static/img/NFShouSuo.png"
alt
class="ButtonImg"
@click="loadFZData"
v-has="'Search'"
/>
</div>
<div
id="NFSNo1Bot"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
>
<ul id="NFSNo1BotUl">
<li
v-for="(item, index) in NFSNo1BotLiData"
:key="index"
class="NFSNo1BotLi"
>
<div class="NFSNo1BotLiTitle">
<!-- 顶部分组名称 -->
{{ item.groupName }}
</div>
<div class="NFSNo1BotLiStatistics">
<!-- 中间站点统计 -->
<div class="NFSNo1BotLiStatisticslist">
<img
src="../../../static/img/XFCX1.png"
alt
class="NFSNo1BotLiStatisticslistImg"
/>
<span class="NFSNo1BotLiStatisticslistTitle">总数</span>
<div class="NFSNo1BotLiStatisticslistAll">
<div
class="NFSNo1BotLiStatisticslistNow"
:style="{ width: item.totalPercentage }"
></div>
</div>
<span class="NFSNo1BotLiStatisticslistValue">{{
item.total
}}</span>
</div>
<div class="NFSNo1BotLiStatisticslist">
<img
src="../../../static/img/XFCX2.png"
alt
class="NFSNo1BotLiStatisticslistImg"
/>
<span class="NFSNo1BotLiStatisticslistTitle">异常</span>
<div class="NFSNo1BotLiStatisticslistAll">
<div
class="NFSNo1BotLiStatisticslistNow"
:style="{ width: item.exceptionStatePercentage }"
></div>
</div>
<span class="NFSNo1BotLiStatisticslistValue">{{
item.exceptionState
}}</span>
</div>
<div class="NFSNo1BotLiStatisticslist">
<img
src="../../../static/img/XFCX4.png"
alt
class="NFSNo1BotLiStatisticslistImg"
/>
<span class="NFSNo1BotLiStatisticslistTitle">离线</span>
<div class="NFSNo1BotLiStatisticslistAll">
<div
class="NFSNo1BotLiStatisticslistNow"
:style="{ width: item.offLinePercentage }"
></div>
</div>
<span class="NFSNo1BotLiStatisticslistValue">{{
item.offLine
}}</span>
</div>
</div>
<!-- 底部查看详情 -->
<div class="NFSNo1BotLiDetails">
<a
href="javascript:void(0)"
class="NFSNo1BotLiDetailsA"
@click="ClickFZ(item.groupNo)"
>查看详情</a
>
</div>
</li>
</ul>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="ALLpageNum"
:page-sizes="[12]"
:page-size="ALLpageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="AllTotal"
>
</el-pagination>
</div>
<div v-if="isNFSSite" class="h-100 flex site-container">
<!--左侧-->
<div class="site-sidebar">
<!--搜索-->
<div class="site-sidebar_form">
<el-input
placeholder="请输入站点名称/站点编号"
v-model="currentSiteName"
@keyup.native.enter="handleChange"
clearable
/>
<div class="btn-group">
<!-- <img
src="../../../static/img/NFFanHui.png"
alt
class="ButtonImg"
@click="FanHui"
/> -->
<el-button type="primary" @click="handleClick('search')"
>搜索</el-button
>
<el-button type="primary" @click="FanHui">返回</el-button>
</div>
</div>
<!--列表-->
<div class="site-sidebar_list">
<div
class="site-sidebar_list-item"
v-for="(site, index) in leftSiteList"
:key="index"
@click="handleClick('detail', site)"
>
<div class="title">
<p>{{ site.stName }}</p>
</div>
<div class="infos"><span>存储时间：</span>{{ site.utTime }}</div>
<div class="infos">
<span>观测时间：</span>
<p>{{ site.ttTime }}</p>
<div
class="state"
:class="[
site.status === 0
? 'online'
: site.status === 1
? 'offline'
: site.status === 3
? 'lowvoltage'
: ''
]"
>
{{ site.status | formatState }}
</div>
</div>
</div>
</div>
</div>
<!--右侧-->
<div class="site-main" v-if="showCurrentSiteInfo">
<div id="NFSNo2" v-if="isNFSSite">
<div id="NFSTop">
<!-- <el-select
v-model="SiteNo"
filterable
placeholder="请选择"
@change="selectV(SiteNo)"
>
<el-option
v-for="item in SiteOptions"
:key="item.stCode"
:label="item.stName"
:value="item.stCode"
></el-option>
</el-select> -->
<!-- <img :src="SiteTypeUrl" alt id="SiteTypeImg" /> -->
<img
src="../../../static/img/NFShuaXin.png"
alt
class="ButtonImg"
@click="LoadGridTitleData"
/>
</div>
<div id="NFSNowData">
<el-table
:data="NFSNowDataTableData"
style="width: 100%;height:140px;"
v-loading="loading2"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
>
<template v-for="(item, index) in NFSNowDataTableHead">
<el-table-column
:prop="item.field"
:label="item.title"
:key="index"
show-overflow-tooltip
:render-header="labelHead"
></el-table-column>
</template>
</el-table>
</div>
<div id="NFSHistoryData">
<div id="TimeBox">
<span class="timeTM">时间：</span>
<el-date-picker
v-model="TimeBoxValue"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
value-format="yyyy-MM-dd"
@change="TimeBoxChange"
></el-date-picker>
<img
src="../../../static/img/NFShouSuo.png"
alt
class="ButtonImg"
@click="Search()"
/>
</div>
<div id="NFSHistoryData2">
<el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
<el-tab-pane label="表格展示" name="DateGrid" class="timeTM">
<el-table
:data="HistoryTableData"
style="width: 100%;height:calc(100% - 45px)"
v-loading="loading3"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
>
<template v-for="(col, index) in NFSNowDataTableHead">
<el-table-column
:prop="col.field"
:label="col.title"
:key="index"
show-overflow-tooltip
:render-header="labelHead"
></el-table-column>
</template>
</el-table>
<el-pagination
@size-change="HistorySizeChange"
@current-change="HistoryCurrentChange"
:current-page="HistoryPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="HistorySize"
layout="total, sizes, prev, pager, next, jumper"
:total="DatagridDataLength"
:hide-on-single-page="HRPageHide"
style="margin-top:10px;"
></el-pagination>
</el-tab-pane>
<el-tab-pane label="图形展示" name="Charts" class="timeTM">
<div id="YinziSelect">
上因子：
<el-select
v-model="SiteYinzi"
placeholder="请选择"
@change="YinZiUp"
>
<el-option
v-for="item in SiteYinziAll"
:key="item.codeAscii"
:label="item.codeProperty"
:value="item.codeAscii"
></el-option> </el-select
> 下因子：
<el-select
v-model="SiteYinzi2"
placeholder="请选择"
@change="YinZiDown"
>
<el-option
v-for="item in SiteYinziAll2"
:key="item.codeAscii"
:label="item.codeProperty"
:value="item.codeAscii"
></el-option>
</el-select>
</div>
<div id="HistoryEchart"></div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</div>
<el-dialog
width="30%"
title="选择文件"
:visible.sync="RoleDialog2"
id="RoleDialog2"
append-to-body
>
<!-- <el-form
:model="ProjectInformationConfig1Dialog3uploadData12"
:rules="rules5"
ref="ruleForm5"
label-width="100px"
enctype="multipart/form-data"
>
<el-form-item label="上传文件" prop="file">
<input
@change="IMGhandleFileChange2($event, 'file')"
type="file"
accept="application/vnd.ms-excel"
/>
</el-form-item>
<el-form-item id="FormButton2">
<el-button
type="primary"
@click="submitForm5('ruleForm5')"
:disabled="isTrueXls"
>提交数据</el-button
>
</el-form-item>
</el-form> -->
</el-dialog>
</div>
</template>
<script>
import { message } from "./../../util/item";
export default {
name: "NewFiberSearch",
data: function() {
return {
isNFSSite: false, //当前页面为分组时为false，为站点详情时为true
FZValue: "", //分组信息模糊查询
NFSNo1BotLiData: [
// {
// inundate: 0, //浸水站点个数
// offLine: 0, //掉线站点个数
// inundatePercentage: "0%", //浸水站点百分比
// groupName: "北京采样仪", //分组名称
// total: 2, //站点总数
// siteOverflow: 0, //溢流站点个数
// exceptionStatePercentage: "0%", //异常站点个数百分比
// siteOverflowPercentage: "0%", //溢流站点百分比
// exceptionState: 0, //异常站点个数
// offLinePercentage: "0%", //掉线站点百分比
// groupNo: 8592, //分组编号
// totalPercentage: "100%" //站点总数百分比
// }
], //渲染分组信息的数据
SiteOptions: [], //渲染站点的下拉框信息
SiteNo: "",
AllTotal: 0, //所有总数
ALLpageNum: 1,
ALLpageSize: 12,
SearchType: "",
// 等待后台返回的站点管理数据的接口
options: [
{
value: "1",
label: "类型1"
},
{
value: "2",
label: "类型2"
}
],
SiteTypeUrl: "../../../static/img/NFLv.png", //站点状态显示不同的图片路径
NFSNowDataTableData: [], //实时数据表格数据
NFSNowDataTableHead: [], //实时数据表格表头数据
TimeBoxValue: [
this.moment()
.subtract("days", 3)
.format("YYYY-MM-DD"),
this.moment().format("YYYY-MM-DD")
], //起止日期
pickerOptions: {
shortcuts: [
{
text: "最近三天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
}
]
}, //时间框的快捷选项
HistoryBox: "DateGrid", //tabs的默认展示未第一个 表格展示
HistoryTableData: [], //历史数据表格数据
HistoryPage: 1, //内页分页默认显示页
DatagridDataLength: 0, //内页分页上显示的数据总条数
HistorySize: 10, //内页分页上显示的每页的条数
HRPageHide: this.DatagridDataLength > 10 ? false : true, //内页分页默认不显示 当页数大于1 的时候在显示
SiteYinzi: "", //上因子
SiteYinzi2: "", //下因子
SiteYinziZn: "", //上因子中文名
SiteYinzi2ZN: "", //下因子中文名
SiteYinziAll: [], //上因子渲染数据
SiteYinziAll2: [], //下因子渲染数据
myChart: {}, //echarts的配置项
ChartsX: "", //X轴数据
ChartsUp: "", //上因子图形数据
ChartsDown: "", //下因子图形数据
//↓↓↓↓↓↓↓↓↓↓页面渲染逻辑以及增加页面流畅的辅助性功能↓↓↓↓↓↓↓↓↓↓
FirstOn: true, //进来页面未点击历史图形的时候为true, 点击历史图形后为false,避免因子与图形接口多次渲染导致页面卡顿。
DateisChange: false, //当时间段的时间进行变换后，切换tab时应该重新请求数据，否则不用数据刷新，默认时间未改动为false。
YinZiChange: true, //判断因子是否改变过，如果改变过则重新请求echarts数据。
// 判断当前用户是否拥有上传功能
isAdmin: true,
RoleDialog2: false,
ProjectInformationConfig1Dialog3uploadData12: {
file: {}
},
rules5: {
file: [
{
required: true,
message: "请选择文件",
trigger: "change"
}
]
},
isTrueXls: true,
loading: false,
loading2: false,
loading3: false,
//左侧站点列表
siteName: "",
leftSiteList: [],
//列表相关
listTypeInfo: {
xmlxList: [
{ key: "全部项目", value: "" },
{ key: "合同项目", value: "0" },
{ key: "临测项目", value: "1" }
]
},
//当前项目code
currentPlatformCode: "",
//当前站点name
currentSiteName: "",
//当前站点code
currentSiteNo: "",
//显示当前站点下的信息
showCurrentSiteInfo: false
};
},
methods: {
labelHead(h, { column, index }) {
let l = column.label.length;
let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
return h("div", { class: "table-head", style: { width: "100%" } }, [
column.label
]);
},
// 加载页面分组信息
loadFZData(event) {
// console.log(event);
this.loading = true;
this.$http
.get(
this.nozzle.userGroupRelaGetGroups +
"?userId=4858cnf84ngf8e&condition=" +
this.FZValue +
"&pageNo=" +
this.ALLpageNum +
"&typeStr=" +
this.SearchType +
"&pageSize=" +
this.ALLpageSize
)
.then(response => {
// console.log(response);
this.loading = false;
if (response.data.total > 0) {
// console.log(response.data);
this.NFSNo1BotLiData = response.data.data;
this.AllTotal = response.data.total;
} else {
this.$message({
showClose: true,
message: "根据该搜索没有搜索到新的信息",
type: "warning"
});
}
})
.catch(response => {
this.loading = false;
this.$message({
showClose: true,
message: "数据请求失败",
type: "warning"
});
});
},
// 点击项目查看该项目下的所有站点
ClickFZ(platformCode, siteName) {
this.currentPlatformCode = platformCode;
this.$http
.get(
this.nozzle.groupsSelectSiteNoByGroupsNo +
`?platformCode=${this.currentPlatformCode}&siteName=${this.currentSiteName}`
)
.then(res => {
if (res.data.data.length) {
this.leftSiteList = res.data.data;
}
})
.catch(response => {
message(response);
});
this.HistoryTableData = [];
this.NFSNowDataTableData = [];
this.NFSNowDataTableHead = [];
this.isNFSSite = true;
// this.$http
// .get(
// this.nozzle.groupsSelectSiteNoByGroupsNo +
// "?platformCode=" +
// platformCode
// )
// .then(response => {
// // console.log(response);
// this.loading2 = false;
// this.SiteOptions = response.data.data;
// // if (this.SiteOptions.length > 0) {
// this.SiteNo = response.data.data[0].stCode;
// // 讲站点详情页面中做的页面优化进行重置
// this.FirstOn = true;
// this.YinZiChange = true;
// this.DateisChange = false;
// this.HistoryBox = "DateGrid";
// // } else {
// // this.$message({
// // showClose: true,
// // message: "该分组下无站点数据",
// // type: "warning"
// // });
// // }
// })
// .catch(response => {
// message(response);
// });
},
//点击事件
handleClick(event, data) {
switch (event) {
case "detail":
this.showCurrentSiteInfo = true;
this.currentSiteNo = data.stCode;
// console.log(this.currentSiteNo);
this.LoadGridTitleData();
break;
case "search":
this.showCurrentSiteInfo = false;
this.ClickFZ(this.currentPlatformCode, this.currentSiteName);
break;
}
},
// 返回至分组页面
FanHui() {
this.isNFSSite = false;
this.showCurrentSiteInfo = false;
this.leftSiteList = [];
this.currentSiteName = "";
},
// 选择站点 站点下拉框点击事件
selectV(SiteNo) {
this.LoadGridTitleData();
// 当前tab为echarts时重新加载echarts
if (this.HistoryBox == "Charts") {
this.loadSiteYinZiData();
}
},
// 时间选择的change
TimeBoxChange() {
// 时间改动了，需要调整其状态
this.DateisChange = true;
},
// 根据站点编号查询站点的实时数据
LoadSiteDataNow() {
this.HistoryTableData = [];
this.NFSNowDataTableData = [];
this.NFSNowDataTableHead = [];
this.loading2 = true;
this.$http
.get(
this.nozzle.dataSelectSiteSiteManBySerial +
"?stCode=" +
this.currentSiteNo
)
.then(response => {
this.loading2 = false;
var tablearr = JSON.parse(JSON.stringify([response.data]));
// 通过state显示图标
if (response.data.state == 1) {
// 异常
this.SiteTypeUrl = "../../../static/img/NFHong.png";
} else if (response.data.state == 2) {
// 溢流
this.SiteTypeUrl = "../../../static/img/NFHuang.png";
} else if (response.data.state == 3) {
// 离线
this.SiteTypeUrl = "../../../static/img/NFHui.png";
} else if (response.data.state == 4) {
// 浸水
this.SiteTypeUrl = "../../../static/img/NFQing.png";
} else {
// 正常
this.SiteTypeUrl = "../../../static/img/NFLv.png";
}
for (var k in tablearr[0]) {
if (tablearr[0][k] == "NaN") {
delete tablearr[0][k];
}
}
this.NFSNowDataTableData = tablearr;
})
.catch(response => {
message(response);
this.loading2 = false;
});
},
// 根据站点编号查询站点的表头数据
LoadGridTitleData() {
// 加载实时数据//在表头前面加载
this.LoadSiteDataNow();
this.$http
.get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
.then(response => {
// 加载表头
var headobj = response.data.data;
// console.log(headobj);
console.log(11111, this.NFSNowDataTableData);
// let arr = [];
this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
for (let k in this.NFSNowDataTableData[0]) {
if (item.field === k) {
return item;
}
}
});
// console.log(8888, arr);
console.log(22222222, this.NFSNowDataTableHead);
// 加载历史数据
this.loadDataGridData();
})
.catch(response => {
message(response);
});
},
//tabs的点击事件
HistoryHandleClick(tab, event) {
if (tab.index == 1) {
// 渲染echarts的因子下拉框
if (this.FirstOn) {
// 仅仅第一次进来历史图形的页面时，需要加载因子列表
this.loadSiteYinZiData();
this.FirstOn = false;
}
if (this.DateisChange) {
// 调用函数渲染数据
this.loadEchartsData();
}
} else {
// 渲染datagrid
if (this.DateisChange) {
// 渲染站点历史数据表格
this.loadDataGridData();
}
}
},
//分页
// 主页分页
handleSizeChange(val) {
// console.log(`当前页: ${val}`);
this.ALLpageSize = val;
this.loadFZData();
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.ALLpageNum = val;
this.loadFZData();
},
HistorySizeChange(val) {
// 内页改变每页的条数
this.HistorySize = val;
this.loadDataGridData();
},
HistoryCurrentChange(val) {
//内页改变页数
this.HistoryPage = val;
this.loadDataGridData();
},
// 历史表格数据请求
loadDataGridData() {
this.loading3 = true;
this.$http
.get(
this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial +
"?dName=" +
this.currentSiteNo +
"&rows=" +
this.HistorySize +
"&page=" +
this.HistoryPage +
"&startTime=" +
this.TimeBoxValue[0] +
"&endTime=" +
this.TimeBoxValue[1]
)
.then(response => {
this.loading3 = false;
// console.log(response.data.rows);
this.HistoryTableData = response.data.rows;
// console.log(1111111, this.HistoryTableData);
this.DatagridDataLength = response.data.total;
})
.catch(response => {
message(response);
this.loading3 = false;
});
},
//获取站点分配的所有因子
loadSiteYinZiData() {
this.$http
.get(
this.nozzle.dataSelectSitePropertyList +
"?siteNo=" +
this.currentSiteNo
)
.then(response => {
var SleVal = response.data;
// 给数据添加一个空值
SleVal.unshift({
codeAscii: "",
codeProperty: "请选择因子"
});
// 初始值清空
this.SiteYinzi = "";
this.SiteYinzi2 = "";
// 根据数据长度来判断是否多于两个因子
if (SleVal.length > 1) {
this.SiteYinziAll = SleVal;
this.SiteYinzi = SleVal[1].codeAscii;
this.SiteYinziAll2 = SleVal;
this.SiteYinzi2 = SleVal[2].codeAscii;
this.SiteYinziZn = SleVal[1].codeProperty;
this.SiteYinzi2Zn = SleVal[2].codeProperty;
this.loadEchartsData();
} else if (SleVal.length == 1) {
this.SiteYinziAll = SleVal;
this.SiteYinzi = SleVal[1].codeAscii;
this.SiteYinziAll2 = SleVal;
this.SiteYinzi2 = SleVal[0].codeAscii;
this.SiteYinziZn = SleVal[1].codeProperty;
this.SiteYinzi2Zn = SleVal[0].codeProperty;
this.loadEchartsData();
} else {
this.SiteYinziAll = SleVal;
this.SiteYinzi = SleVal[0].codeAscii;
this.SiteYinziAll2 = SleVal;
this.SiteYinzi2 = SleVal[0].codeAscii;
this.SiteYinziZn = SleVal[0].codeProperty;
this.SiteYinzi2Zn = SleVal[0].codeProperty;
this.$message({
showClose: true,
message: "该站点下无分配因子",
type: "warning"
});
}
});
},
// 上因子change事件
YinZiUp(SiteYinzi) {
this.YinZiChange = true;
this.SiteYinzi = SiteYinzi;
for (var i = 0; i < this.SiteYinziAll.length; i++) {
if (this.SiteYinziAll[i].codeAscii == this.SiteYinzi) {
this.SiteYinziZn = this.SiteYinziAll[i].codeProperty;
return false;
}
}
},
// 下因子change事件
YinZiDown(SiteYinzi2) {
this.YinZiChange = true;
this.SiteYinzi2 = SiteYinzi2;
for (var i = 0; i < this.SiteYinziAll2.length; i++) {
if (this.SiteYinziAll2[i].codeAscii == this.SiteYinzi2) {
this.SiteYinzi2Zn = this.SiteYinziAll2[i].codeProperty;
return false;
}
}
},
// 获取echarts数据
loadEchartsData() {
if (this.DateisChange || this.YinZiChange) {
this.YinZiChange = false;
this.DateisChange = false;
// 时间改变过或者因子有变化，请求新数据渲染
this.$http
.get(
this.nozzle.dataSiteDataEchat +
"?dName=" +
this.currentSiteNo +
"&up=" +
this.SiteYinzi +
"&down=" +
this.SiteYinzi2 +
"&startTime=" +
this.TimeBoxValue[0] +
"&endTime=" +
this.TimeBoxValue[1]
)
.then(response => {
if (response.data.tt.length > 0) {
this.ChartsX = response.data.tt;
this.ChartsUp = response.data.up;
this.ChartsDown = response.data.down;
this.$nextTick(function() {
this.loadEcharts();
});
} else {
this.$message({
showClose: true,
message: "无数据",
type: "warning"
});
}
})
.catch(response => {
this.$message({
showClose: true,
message: "无数据",
type: "warning"
});
});
} else {
// 时间未改变且因子也没变化，只需要重新绘制
this.$nextTick(function() {
this.loadEcharts();
});
}
},
//渲染echarts
loadEcharts() {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(
document.getElementById("HistoryEchart")
);
// 绘制图表
this.myChart.clear();
this.myChart.setOption({
color: ["#3398DB", "red"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#3398DB"
}
}
},
toolbox: {
feature: {
magicType: { show: true, type: ["line", "bar"] }
}
},
legend: {
data: [this.SiteYinziZn, this.SiteYinzi2Zn],
textStyle: {
color: "#3398DB" //字体颜色
}
},
xAxis: [
{
type: "category",
data: this.ChartsX,
axisPointer: {
type: "shadow"
},
axisLabel: {
show: true,
textStyle: {
color: "#3398DB" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#3398DB" // 颜色
}
}
}
],
yAxis: [
{
type: "value",
name: this.SiteYinziZn,
axisLabel: {
show: true,
textStyle: {
color: "#3398DB" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#3398DB" // 颜色
}
}
},
{
type: "value",
name: this.SiteYinzi2Zn,
axisLabel: {
show: true,
textStyle: {
color: "#3398DB" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#3398DB" // 颜色
}
}
}
],
series: [
{
name: this.SiteYinziZn,
type: "line",
data: this.ChartsUp
},
{
name: this.SiteYinzi2Zn,
type: "line",
yAxisIndex: 1,
data: this.ChartsDown
}
]
});
},
// 点击详情里面历史搜索
Search() {
if (this.HistoryBox == "Charts") {
this.loadEchartsData();
} else {
this.loadDataGridData();
}
},
// 点击导出
DaoChu() {
if (this.HistoryTableData.length == 0) {
return this.$message({
type: "error",
message: "没有历史数据哦，无法导出！"
});
}
window.open(
this.nozzle.dataReportBatchExportHistoryData +
"?st=" +
this.currentSiteNo +
"&startTime=" +
this.TimeBoxValue[0] +
"&endTime=" +
this.TimeBoxValue[1]
);
},
// 导入数据
// UpData() {
// this.RoleDialog2 = true;
// },
// IMGhandleFileChange2(event, Name) {
// console.log();
// if (event.target.files[0].type !== "application/vnd.ms-excel") {
// this.$message.error("请上传.xls文件类型的文件");
// this.isTrueXls = true;
// } else {
// this.isTrueXls = false;
// }
// this.ProjectInformationConfig1Dialog3uploadData12[Name] =
// event.target.files[0];
// },
// 表单提交5
submitForm5(formName) {
// console.log(1, this.$refs[formName]);
this.$refs[formName].validate(valid => {
if (valid) {
// console.log(11111);
this.$http
.post({
url: this.nozzle.surveyDataExporExcelOfSurverData,
method: "post",
headers: {
"Content-Type": "multipart/form-data"
},
data: this.ProjectInformationConfig1Dialog3uploadData12,
transformRequest: [
function(data, headers) {
const formData = new FormData();
for (const key of Object.keys(data)) {
formData.append(key, data[key]);
}
return formData;
}
]
})
.then(response => {
if (response.data.flag === true) {
this.$message({
type: "success",
message: response.data.mgs
});
this.RoleDialog2 = false;
} else {
// message(response);
}
})
.catch(response => {
// message(response);
});
} else {
// console.log("error submit!!");
return false;
}
});
},
handleChange() {
this.showCurrentSiteInfo = false;
this.ClickFZ(this.currentPlatformCode, this.currentSiteName);
}
},
filters: {
//格式化状态
formatState(value) {
let str = "";
switch (value) {
case 0:
str = "在线";
break;
case 1:
str = "离线";
break;
case 2:
str = "异常";
break;
case 3:
str = "低电压";
break;
}
return str;
}
},
mounted: function() {
this.loadFZData();
}
};
</script>
<style lang="scss" scoped>
.el-container .el-main {
padding: 30px !important;
}
#NFSNo1 {
@include fd();
width: 100%;
height: 100%;
-o-user-select: none;
-moz-user-select: none; /*火狐 firefox*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10+*/
-khtml-user-select: none; /*早期的浏览器*/
user-select: none;
}
.ButtonImg {
cursor: pointer;
width: 100px;
height: 36px;
margin-left: 10px;
}
/* 站点分组页面样式A */
#NFSNo1Top {
display: flex;
width: 100%;
margin-left: -10px;
margin-bottom: 10px;
text-align: left;
}
#NFSNo1Top .el-input {
width: 250px;
margin: 0 10px;
}
/* /deep/ .el-input__inner {
background: #232020;
color: white;
border: 1px solid rgb(0, 119, 254);
} */
.el-button--primary.is-plain {
color: rgb(0, 119, 254);
background: rgba(255, 255, 255, 0.42);
border-color: rgb(0, 119, 254);
}
#NFSNo1Bot {
width: 100%;
flex: 1;
overflow: auto;
/* padding: 0 15px; */
}
#NFSNo1BotUl {
width: 100%;
height: auto;
font-size: 0;
overflow: hidden;
}
/* 每个分组卡片的样式A */
.NFSNo1BotLi {
width: 23%;
float: left;
margin: 10px 1%;
/* height: 300px; */
background: rgba(35, 38, 47, 0.42);
box-sizing: border-box;
}
.NFSNo1BotLiTitle {
height: 60px;
line-height: 60px;
font-size: 20px;
color: rgb(0, 119, 254);
text-align: center;
@include textover();
background: var(--tablethead);
}
.NFSNo1BotLiStatistics {
/* height: 180px; */
box-sizing: border-box;
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
background: var(--tablebody);
}
.NFSNo1BotLiStatisticslist {
width: 100%;
height: 35px;
line-height: 35px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 15px;
}
.NFSNo1BotLiStatisticslistImg {
width: 18px;
height: 18px;
float: left;
vertical-align: middle;
margin-top: 9px;
}
.NFSNo1BotLiStatisticslistTitle {
float: left;
font-size: 14px;
color: rgb(0, 119, 254);
vertical-align: middle;
margin: 0 5px;
width: 28px;
}
.NFSNo1BotLiStatisticslistAll {
width: calc(100% - 110px);
float: left;
height: 18px;
background: rgba(12, 37, 67, 0.6);
margin-top: 8px;
position: relative;
}
.NFSNo1BotLiStatisticslistNow {
position: absolute;
left: 0;
top: 0;
background: rgb(0, 120, 255);
width: 25%;
height: 100%;
}
.NFSNo1BotLiStatisticslistValue {
width: 52px;
float: left;
font-size: 14px;
color: var(--preTopDatatxt);
}
.NFSNo1BotLiDetails {
height: 60px;
line-height: 60px;
font-size: 18px;
color: rgb(0, 119, 254);
text-align: right;
padding-right: 20px;
box-sizing: border-box;
background: var(--tablebody);
}
.NFSNo1BotLiDetailsA {
display: inline-block;
height: 28px;
line-height: 22px;
border: 1px solid rgb(0, 119, 254);
color: var(--bluetowhite) !important;
background-color: var(--pretextbg);
padding: 3px 20px;
font-size: 16px;
border-radius: 5px;
box-sizing: border-box;
}
/* 每个分组卡片的样式B */
/* 站点分组页面样式B */
/* 站点详情页面样式A */
#NFSNo2 {
width: 100%;
height: 100%;
}
#NFSTop {
width: 100%;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 15px;
}
#SiteTypeImg {
vertical-align: middle;
margin: 0 20px;
}
#NFSNowData {
height: 140px;
width: 100%;
margin: 20px 0;
background: rgba(102, 102, 102, 0);
}
#NFSHistoryData {
width: 100%;
height: calc(100% - 220px);
}
#TimeBox {
@include fa();
width: 100%;
text-align: left;
padding-left: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
.timeTM {
color: var(--white) !important;
}
#TimeBox .el-input__inner {
background-color: rgba(0, 0, 0, 0) !important;
border: 1px solid rgb(4, 51, 52) !important;
color: var(--white) !important;
}
#TimeBox .el-radio__label {
color: var(--white) !important;
}
#NFSHistoryData2 {
width: 100%;
height: calc(100% - 60px);
display: inline-block;
/* background: rgba(255, 255, 255, 0.1); */
}
/* 因子选择 A*/
#YinziSelect {
width: 100%;
height: 60px;
padding: 10px;
text-align: left;
color: var(--white);
box-sizing: border-box;
}
/* 因子选择 B*/
#HistoryEchart {
width: 100%;
height: calc(100% - 60px);
}
/* 站点详情页面样式B */
/* 左侧样式 */
.site-sidebar {
@include fd();
width: 300px;
margin-right: 10px;
&_form {
@include fd();
margin-bottom: 10px;
.btn-group {
@include fj();
/deep/ .el-button {
width: 49%;
margin-top: 5px;
border-radius: 0;
}
/deep/ .el-button + .el-button {
margin-left: 0;
}
}
}
&_list {
flex: 1;
overflow: hidden;
overflow-y: auto;
background-color: var(--xfcxbgc);
&-item {
color: var(--xfcxcolor);
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
background: var(--xfcxmegbgc);
&:not(:last-child) {
border-bottom: 1px solid var(--xfcxborder);
}
.title {
@include fa();
height: 30px;
font-size: 16px;
padding-left: 31px;
background: url(../../../static/img/state.png) no-repeat 3px center;
background-size: 25px 25px;
p {
@include textover();
}
}
.infos {
@include fa();
height: 30px;
font-size: 14px;
padding: 5px 10px;
font-weight: 100;
span {
width: 70px;
font-weight: 900;
}
p {
flex: 1;
overflow: hidden;
}
.state {
@include wh(50px, 25px);
@include sc(12px, #fff);
text-align: center;
line-height: 25px;
border-radius: 25px;
font-weight: 600;
background-color: rgb(229, 32, 39);
&.offline {
background-color: rgb(241, 156, 51);
}
&.online {
background-color: rgb(37, 104, 243);
}
&.lowvoltage {
background-color: rgb(41, 199, 114);
}
}
}
}
}
}
.site-main {
flex: 1;
overflow: hidden;
}
</style>
