<template>
<div id="NewFiberSearch">
<div id="NFSNo1" v-if="!isNFSSite">
<div id="NFSNo1Top">
<el-input
placeholder="请输入内容"
v-model="FZValue"
clearable
@change="loadFZData"
></el-input>
<el-select v-model="SearchType" placeholder="请选择类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
: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(0, 0, 0, 0.8)"
>
<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
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"
/>
<!-- <img src="../../../static/img/NFQingKong.png" alt class="ButtonImg" /> -->
<img
src="../../../static/img/NFFanHui.png"
alt
class="ButtonImg"
@click="FanHui"
/>
<!-- <img
src="../../../static/img/NFUpData.png"
alt
class="ButtonImg"
@click="UpData"
v-show="isAdmin"
/> -->
</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 style="color:white;">时间：</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">
<el-table
:data="HistoryTableData"
style="width: 100%;height:calc(100% - 45px)"
stripe
>
<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">
<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>
<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
};
},
methods: {
// 加载页面分组信息
loadFZData() {
this.loading = true;
this.$http
.get(
this.nozzle.userGroupRelaGetGroups +
"?userId=4858cnf84ngf8e&condition=" +
this.FZValue +
"&pageNo=" +
this.ALLpageNum +
"&type=" +
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) {
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.LoadGridTitleData();
// 讲站点详情页面中做的页面优化进行重置
this.FirstOn = true;
this.YinZiChange = true;
this.DateisChange = false;
this.HistoryBox = "DateGrid";
// } else {
// this.$message({
// showClose: true,
// message: "该分组下无站点数据",
// type: "warning"
// });
// }
})
.catch(response => {
message(response);
});
},
// 返回至分组页面
FanHui() {
this.isNFSSite = false;
},
// 选择站点 站点下拉框点击事件
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.SiteNo)
.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.SiteNo
)
.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.SiteNo +
"&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.SiteNo)
.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.SiteNo +
"&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.SiteNo +
"&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;
}
});
}
},
mounted: function() {
this.loadFZData();
}
};
</script>
<style scoped>
.el-container .el-main {
padding: 30px !important;
}
#NFSNo1 {
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 {
vertical-align: middle;
cursor: pointer;
width: 100px;
height: 36px;
}
/* 站点分组页面样式A */
#NFSNo1Top {
width: 100%;
height: 60px;
line-height: 0px;
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%;
height: calc(100% - 60px);
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;
}
.NFSNo1BotLiStatistics {
/* height: 180px; */
box-sizing: border-box;
border-top: 1px solid rgb(15, 36, 58);
border-bottom: 1px solid rgb(15, 36, 58);
}
.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: rgb(248, 232, 14);
}
.NFSNo1BotLiDetails {
height: 60px;
line-height: 60px;
font-size: 18px;
color: rgb(0, 119, 254);
text-align: right;
padding-right: 20px;
box-sizing: border-box;
}
.NFSNo1BotLiDetailsA {
display: inline-block;
height: 28px;
line-height: 22px;
border: 1px solid rgb(0, 119, 254);
color: rgb(0, 119, 254);
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;
}
/* /deep/ .el-input__inner {
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgb(4, 51, 52);
color: white;
}
/deep/ .el-select-dropdown {
background-color: #3c3939 !important;
border: 1px solid rgb(4, 51, 52) !important;
} */
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: rgb(4, 51, 52);
}
.el-select-dropdown__item {
color: white;
}
#NFSNowData {
height: 140px;
width: 100%;
margin: 20px 0;
background: rgba(102, 102, 102, 0);
}
#NFSHistoryData {
width: 100%;
height: calc(100% - 220px);
}
#TimeBox {
height: 60px;
line-height: 60px;
width: 100%;
display: inline-block;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
}
#TimeBox .el-input__inner {
background-color: rgba(0, 0, 0, 0) !important;
border: 1px solid rgb(4, 51, 52) !important;
color: white !important;
}
#TimeBox .el-radio__label {
color: 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: white;
box-sizing: border-box;
}
/* 因子选择 B*/
#HistoryEchart {
width: 100%;
height: calc(100% - 60px);
}
/* 站点详情页面样式B */
</style>
<style></style>
