<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.totalPercentage }}</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.exceptionStatePercentage }}</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.offLinePercentage }}</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 | formatState }} </div> </div> </div> </div> </div> <!--右侧--> <div class="site-main" v-if="showCurrentSiteInfo"> <div id="NFSNo2" v-if="isNFSSite" v-loading="loading2" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <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;" > <template v-for="(item, index) in NFSNowDataTableHead"> <el-table-column :prop="item.field" :label="item.title" :key="index" ></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()" /> <img src="../../../static/img/NFDaoChu.png" alt class="ButtonImg" @click="DaoChu()" /> </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)" > <template v-for="(col, index) in NFSNowDataTableHead"> <el-table-column :prop="col.field" :label="col.title" :key="index" ></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, //左侧站点列表 siteName: "", leftSiteList: [], //列表相关 listTypeInfo: { xmlxList: [ { key: "全部项目", value: "" }, { key: "合同项目", value: "0" }, { key: "临测项目", value: "1" } ] }, //当前项目code currentPlatformCode: "", //当前站点name currentSiteName: "", //当前站点code currentSiteNo: "", //显示当前站点下的信息 showCurrentSiteInfo: false }; }, methods: { // 加载页面分组信息 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; } }); this.HistoryTableData = []; this.NFSNowDataTableData = []; this.NFSNowDataTableHead = []; this.isNFSSite = true; this.loading2 = 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; 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; }, // 根据站点编号查询站点的表头数据 LoadGridTitleData() { this.HistoryTableData = []; this.NFSNowDataTableData = []; this.NFSNowDataTableHead = []; this.$http .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`) .then(response => { // console.log(response.data.data); // 加载表头 this.NFSNowDataTableHead = response.data.data; // 加载实时数据 this.LoadSiteDataNow(); // 加载历史数据 this.loadDataGridData(); }) .catch(response => { message(response); }); }, // 根据站点编号查询站点的实时数据 LoadSiteDataNow() { this.$http .get( this.nozzle.dataSelectSiteSiteManBySerial + "?stCode=" + this.currentSiteNo ) .then(response => { this.NFSNowDataTableData = JSON.parse( JSON.stringify([response.data]) ); // console.log(response.data); // console.log(this.NFSNowDataTableData); // 通过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"; } }) .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.$http .get( this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial + "?dName=" + this.currentSiteNo + "&rows=" + this.HistorySize + "&page=" + this.HistoryPage + "&startTime=" + this.TimeBoxValue[0] + "&endTime=" + this.TimeBoxValue[1] ) .then(response => { // console.log(response.data.rows); this.HistoryTableData = response.data.rows; console.log(1111111, this.HistoryTableData); this.DatagridDataLength = response.data.total; }) .catch(response => { message(response); }); }, //获取站点分配的所有因子 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: "#333" } } }, toolbox: { feature: { magicType: { show: true, type: ["line", "bar"] } } }, legend: { data: [this.SiteYinziZn, this.SiteYinzi2Zn], textStyle: { color: "#ffffff" //字体颜色 } }, xAxis: [ { type: "category", data: this.ChartsX, axisPointer: { type: "shadow" }, axisLabel: { show: true, textStyle: { color: "#999" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#333" // 颜色 } } } ], yAxis: [ { type: "value", name: this.SiteYinziZn, axisLabel: { show: true, textStyle: { color: "#999" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#333" // 颜色 } } }, { type: "value", name: this.SiteYinzi2Zn, axisLabel: { show: true, textStyle: { color: "#999" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#333" // 颜色 } } } ], 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; default: 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(35, 38, 47, 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; 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: 0 10px; margin: 5px 0; 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); } } } } } } .site-main { flex: 1; overflow: hidden; } </style>