齿轮箱故障诊断

src/views/MalfunctionWarning/diagnose.vue

@@ -12,13 +12,11 @@
 					</div>
 				</div>
 				<div class="query-item">
-					<div class="lable">风机型号：</div>
-					<div class="search-input">
-						<el-select v-model="model" multiple collapse-tags clearable placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in fjxh" :key="item.value" :value="item.value" :label="item.label">
-							</el-option>
-						</el-select>
+					<div class="lable">日期：</div>
+					<div class="search-input" style="min-width:460px ;">
+						<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
+							end-placeholder="结束日期">
+						</el-date-picker>
 					</div>
 				</div>
 				<div class="query-item">
@@ -31,7 +29,7 @@
 					</div>
 				</div>
 				<div class="query-actions">
-					<button class="btn" @click="query">查询</button>
+					<button class="btn green" @click="query(0)">查询</button>
 				</div>
 			</div>
 		</div>
@@ -39,70 +37,122 @@
 			<el-col :span="12">
 				<el-row type="flex">
 					<el-col :span="12">
-						<div style="height: 60vh; overflow-y: auto; margin-top: 30px">
-						    <div class="body" v-for="(item, index) in ccS" :key="index" @click="chooses(index)" >
-						      <div class="left">
-						        <div :class="index === current ? 'round_on' : 'round'"></div>
-						        <div class="line"></div>
-						      </div>
-						      <div class="right">
-						        <div>{{ item.showTime }}</div>
-						        <div class="content">
-						          <div class="names">
-						            {{ item.showName || item.ducumentName }}
-						          </div>
-						          <button class="btn" @click="deleteDate(item.name)">
-						            删除
-						          </button>
-						        </div>
-						      </div>
-						    </div>
-						</div>
+						<panel title="残差 【模型记录】" :showLine="false">
+							<div style="height: 60vh; overflow-y: auto; margin-top: 30px">
+								<div class="body" v-for="(item, index) in ccS" :key="index">
+									<div class="left">
+										<div :class="index === current ? 'round_on' : 'round'"></div>
+										<div class="line"></div>
+									</div>
+									<div class="right">
+										<div>{{ item.showTime }}</div>
+										<div class="content">
+											<div class="names">
+												{{ item.showName || item.ducumentName }}
+											</div>
+											<button class="btn" @click="deleteDate(item.name)">
+												删除
+											</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</panel>
 					</el-col>
 					<el-col :span="12">
-						
+
 					</el-col>
 				</el-row>
-				
-				
+
+			</el-col>
+			<el-col :span="12">
+				<panel title="残差 【预测记录】" :showLine="false">
+					<double-line-chart height="35vh" />
+					<div class="green text">
+						依据月份的模型，油温误差大于0.1,预计在[时间]，齿轮箱会发生油温故障
+					</div>
+				</panel>
+				<panel title="油温 【预测记录】" :showLine="false">
+					<double-line-chart height="35vh" :list='ywChart' />
+					<div class="green text">
+						预计未来10分钟的油温走势，当前油温: {{ywChartHtml[0]}} ℃,未来10分钟油温：{{ywChartHtml[1]}} ℃ 。
+					</div>
+				</panel>
 			</el-col>
 		</el-row>
 	</div>
 </template>
 <script>
+	import Panel from "@/components/coms/panel/panel.vue";
+	import DoubleLineChart from "@/components/chart/line/double-line-chart.vue";
+	import axios from "axios";
 	export default {
 		components: {
-
-		},
-		created() {
-			this.startAjax();
+			Panel,
+			DoubleLineChart
 		},
 		data() {
 			return {
 				stations: [],
 				station: '',
 				model: [],
-				fjxh: [],
-				fjxhArr: [],
 				fjArr: [], //风机
-				fj: ''
+				fj: '',
+				ywChart: [{
+					title: "实时油温",
+					smooth: true,
+					value: []
+				}, {
+					title: "未来10分钟油温",
+					smooth: true,
+					value: []
+				}],
+				ywChartHtml:[],
+				startTs: '',
+				endTs: '',
+				date: [],
+				uniformCodes: ['YWCH', 'CI0671', 'LLYW', 'AI041'],
+				interval: null,
+				flag:1
 			};
 		},
+		created() {
+			let end = new Date().valueOf();
+			this.startTs = new Date(new Date().getTime() - (3600 * 1000 * 24 * 7)).valueOf();
+			this.endTs = end;
+			this.date = [this.startTs, this.endTs];
+			this.startAjax();
+		},
 		methods: {
-			stationChange() {
-				let fjxh = [];
-				this.fjxhArr.forEach(ele => {
-					if (ele.id == this.station) {
-						ele.value.forEach(ele2 => {
-							fjxh.push({
-								label: ele2,
-								value: ele2
-							})
-						})
-						this.model = ele.value;
-					}
+			async history(thingId, uniformCode) {
+				let that = this;
+				let items = [];
+				const {data} = await axios.get(`http://192.168.10.18:8011/ts/history/snap?thingType=windturbine&uniformCode=${uniformCode}&thingId=${thingId}&startTs=${that.startTs}&endTs=${that.endTs}&interval=60`);
+				data.forEach(ele => {
+					items.push({
+						text: new Date(ele.ts).formatDate("yyyy-MM-dd hh:ss"),
+						value: ele.value.toFixed(2)
+					})
+				})
+				if (uniformCode === 'AI041') {
+					that.ywChart[0].value = items
+				}
+				if (uniformCode === 'CI0671') {
+					that.ywChart[1].value = items
+				}
+			},
+			async list(thingId) {
+				let that = this;
+				const {data} = await axios.get(`http://192.168.10.18:8011/ts/latest?thingType=windturbine&uniformCodes=YWCH,CI0671,LLYW,AI041&thingId=${thingId}`);
+				that.ywChart[0].value.push({
+					text: new Date(data.AI041.ts).formatDate("yyyy-MM-dd hh:ss"),
+					value: data.AI041.value.toFixed(2)
+				})
+				that.ywChart[1].value.push({
+					text: new Date(data.CI0671.ts).formatDate("yyyy-MM-dd hh:ss"),
+					value: data.CI0671.value.toFixed(2)
 				})
-				this.fjxh = fjxh;
+				that.ywChartHtml = [data.AI041.value.toFixed(2),data.CI0671.value.toFixed(2)];
 			},
 			async startAjax() {
 				var that = this;
@@ -113,31 +163,58 @@
 					success(res) {
 						that.stations = res.data;
 						that.station = res.data[1].id;
-						let fjxhArr = [];
-						let model = [],
-							fjxh = [];
-						res.data.forEach(ele => {
-							fjxhArr.push({
-								id: ele.id,
-								value: ele.model.split("/")
-							})
-							if (ele.id == "NSS_FDC") {
-								model = ["UP82"];
-								fjxh.push({
-									label: "UP82",
-									value: "UP82"
-								})
-							}
-						})
-						that.fjxhArr = fjxhArr;
-						that.model = model;
-						that.fjxh = fjxh;
 					},
 				});
-				// that.list()
 			},
+			deleteDate(val) {
+				// let that = this;
+				// this.API.requestData({
+				//   method: "GET",
+				//   baseURL: "http://192.168.10.18:8080/",
+				//   subUrl: "api/coordinate/history/remove/",
+				//   data: {
+				//     names: val,
+				//   },
+				//   success(res) {
+				//     if (res) {
+				//       that.showResultList = [];
+				//       that.barList = [];
+				//       that.recordList = [];
+				//       that.current = 0
+				//       if (!that.supervisedFlag) {
+				//         that.getRecords();
+				//         that.getScatter();
+				//       } else {
+				//         that.getSupervisedRecord();
+				//       }
+				//     }
+				//   },
+				// });
+			},
+			query() {
+				this.ywChart[0].value = [];
+				this.ywChart[1].value = [];
+				this.uniformCodes.forEach(ele => {
+					this.history(this.fj, ele);
+				})
+				
+				this.list(this.fj);
+				clearInterval(this.interval);
+				this.interval = null;
+				this.interval = setInterval(() => {
+					this.list(this.fj)
+				}, 60000);
+			}
+		},
+		unmounted() {
+			clearInterval(this.interval);
+			this.interval = null;
 		},
 		watch: {
+			// YWCH 油温残差
+			// LLYW 理论油温
+			// CI0671 未来10分钟油温
+			// AI041 实时油温
 			station(e) {
 				let that = this;
 				that.API.requestData({
@@ -150,62 +227,95 @@
 					success(res) {
 						that.fjArr = res.data;
 						that.fj = res.data[0].id;
+						if(that.flag === 1){
+							that.query();
+						}
+						that.flag = 2;
 					},
 				});
+			},
+			// fj(e){
+			// 	this.list(e);
+			// },
+			date(e) {
+				this.startTs = e[0].valueOf();
+				this.endTs = e[1].valueOf();
 			}
 		}
 	};
 </script>
 <style lang="less" scoped>
-.body {
-  display: flex;
-  flex-direction: row;
-  height: 75px;
-  width: 100%;
+	.body {
+		display: flex;
+		flex-direction: row;
+		height: 75px;
+		width: 100%;
 
-  .left {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 30px;
-    margin-left: 30px;
+		.left {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			width: 30px;
+			margin-left: 30px;
 
-    .round_on {
-      width: 20px;
-      height: 27px;
-      border-radius: 50%;
-      background-color: rgb(30, 209, 45);
-    }
-    .round {
-      width: 20px;
-      height: 27px;
-      border-radius: 50%;
-      background-color: crimson;
-    }
+			.round_on {
+				width: 20px;
+				height: 27px;
+				border-radius: 50%;
+				background-color: rgb(30, 209, 45);
+			}
 
-    .line {
-      width: 2px;
-      height: 100%;
-      background-color: #ffffff;
-    }
-  }
+			.round {
+				width: 20px;
+				height: 27px;
+				border-radius: 50%;
+				background-color: crimson;
+			}
 
-  .right {
-    width: 100%;
-    margin-left: 20px;
+			.line {
+				width: 2px;
+				height: 100%;
+				background-color: #ffffff;
+			}
+		}
+
+		.right {
+			width: 100%;
+			margin-left: 20px;
+
+			.content {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 10px;
+
+				.btn {
+					margin-right: 20px;
+				}
+			}
+		}
+	}
 
-    .content {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 10px;
+	.text {
+		font-size: 2vh;
+		margin: 1vh 0;
+	}
+</style>
+<style lang="less">
+	.el-date-editor--daterange {
+		border: 1px solid rgba(96, 103, 105, 0.2);
+		height: 33px;
+		width: 100% !important;
 
-      .btn {
-        margin-right: 20px;
-      }
-    }
-  }
-}
+		input {
+			background-color: transparent;
+			color: white;
+		}
+
+		.el-range-separator {
+			color: white;
+		}
+	}
 </style>

src/views/totalPowerRank/index.vue

@@ -1,318 +1,277 @@
 <template>
-  <div class="draught-fan-list">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">类型：</div>
-          <div class="search-input">
-            <el-select
-              v-model="wpIps"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-              @change="renderWprray"
-            >
-              <el-option
-                v-for="item in typeArray"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="wpId"
-              clearable
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in wpArray"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="beginDate"
-              type="month"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="endDate"
-              type="month"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions">
-        <button class="btn green" @click="search()">搜索</button>
-      </div>
-    </div>
-    <div class="df-table">
-      <ComTable height="100vh" :data="tableData"></ComTable>
-    </div>
-  </div>
+	<div class="draught-fan-list">
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">类型：</div>
+					<div class="search-input">
+						<el-select v-model="wpIps" clearable placeholder="请选择" popper-class="select"
+							@change="renderWprray">
+							<el-option v-for="item in typeArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">场站：</div>
+					<div class="search-input">
+						<el-select v-model="wpId" clearable multiple collapse-tags placeholder="请选择"
+							popper-class="select">
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">开始日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="beginDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+						</el-date-picker>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">结束日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="endDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
+							popper-class="date-select">
+						</el-date-picker>
+					</div>
+				</div>
+			</div>
+			<div class="query-actions">
+				<button class="btn green" @click="search()">搜索</button>
+			</div>
+		</div>
+		<div class="df-table">
+			<ComTable height="100vh" :data="tableData"></ComTable>
+		</div>
+	</div>
 </template>
 
 <script>
-import ComTable from "@com/coms/table/table.vue";
-export default {
-  // 名称
-  name: "cutAnalyse",
+	import ComTable from "@com/coms/table/table.vue";
+	export default {
+		// 名称
+		name: "cutAnalyse",
 
-  // 使用组件
-  components: {
-    ComTable,
-  },
+		// 使用组件
+		components: {
+			ComTable,
+		},
 
-  // 数据
-  data() {
-    return {
-      isAsc: "asc",
-      typeArray: [],
-      wpIps: "",
-      wpArray: [],
-      wpId: [],
-      beginDate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
-        "yyyy-MM"
-      ),
-      endDate: new Date().formatDate("yyyy-MM"),
-      dialogShow: false,
-      tableData: {
-        column: [
-          {
-            name: "风场",
-            field: "windfarm",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-          {
-            name: "风机",
-            field: "windturbine",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-          {
-            name: "起始日期",
-            field: "beginDate",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-          {
-            name: "截止日期",
-            field: "endDate",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-          {
-            name: "平均风速",
-            field: "speed",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-          {
-            name: "发电量(万kwh)",
-            field: "generatingCapacity",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-          },
-        ],
-        data: [],
-      },
-    };
-  },
+		// 数据
+		data() {
+			return {
+				isAsc: "asc",
+				typeArray: [],
+				wpIps: "",
+				wpArray: [],
+				wpId: [],
+				beginDate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate("yyyy-MM-dd"),
+				endDate: new Date().formatDate("yyyy-MM-dd"),
+				dialogShow: false,
+				tableData: {
+					column: [{
+							name: "风场",
+							field: "windfarm",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "风机",
+							field: "windturbine",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "起始日期",
+							field: "beginDate",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "截止日期",
+							field: "endDate",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "平均风速",
+							field: "speed",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "发电量(万kwh)",
+							field: "generatingCapacity",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+					],
+					data: [],
+				},
+			};
+		},
 
-  // 函数
-  methods: {
-    // 请求服务
-    requestData() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAllAjax",
-        data: {
-          type: that.typeId,
-        },
-        success(res) {
-          that.allWpArray = res.data;
-          let fdc = [];
-          let gf = [];
+		// 函数
+		methods: {
+			// 请求服务
+			requestData() {
+				let that = this;
+				that.API.requestData({
+					method: "GET",
+					subUrl: "powercompare/windfarmAllAjax",
+					data: {
+						type: that.typeId,
+					},
+					success(res) {
+						that.allWpArray = res.data;
+						let fdc = [];
+						let gf = [];
 
-          res.data.forEach((ele) => {
-            if (ele.id.indexOf("FDC") !== -1) {
-              fdc.push(ele.id);
-            } else {
-              gf.push(ele.id);
-            }
-          });
-          that.typeArray = [
-            {
-              id: [].concat(fdc, gf).toString(),
-              name: "全部",
-            },
-            {
-              id: fdc.toString(),
-              name: "风场",
-            },
-            {
-              id: gf.toString(),
-              name: "光伏电站",
-            },
-          ];
-          that.wpIps = [].concat(fdc, gf).toString();
-          that.renderWprray();
-        },
-      });
-    },
+						res.data.forEach((ele) => {
+							if (ele.id.indexOf("FDC") !== -1) {
+								fdc.push(ele.id);
+							} else {
+								gf.push(ele.id);
+							}
+						});
+						that.typeArray = [{
+								id: [].concat(fdc, gf).toString(),
+								name: "全部",
+							},
+							{
+								id: fdc.toString(),
+								name: "风场",
+							},
+							{
+								id: gf.toString(),
+								name: "光伏电站",
+							},
+						];
+						that.wpIps = [].concat(fdc, gf).toString();
+						that.renderWprray();
+					},
+				});
+			},
 
-    renderWprray() {
-      let wpArray = [];
-      if (!this.wpIps) {
-        this.wpIps = []
-          .concat(
-            this.typeArray[1].id.split(","),
-            this.typeArray[2].id.split(",")
-          )
-          .toString();
-      }
-      this.allWpArray.forEach((ele) => {
-        if (this.wpIps.indexOf("FDC") !== -1) {
-          if (ele.id.indexOf("FDC") !== -1) {
-            wpArray.push(ele);
-          }
-        } else if (this.wpIps.indexOf("GDC")) {
-          if (ele.id.indexOf("GDC") !== -1) {
-            wpArray.push(ele);
-          }
-        } else {
-          wpArray.push(ele);
-        }
-      });
-      this.wpId = this.wpIps ? this.wpIps.split(",") : [];
-      this.wpArray = wpArray;
-      this.getOutputSpeedList();
-    },
+			renderWprray() {
+				let wpArray = [];
+				if (!this.wpIps) {
+					this.wpIps = []
+						.concat(
+							this.typeArray[1].id.split(","),
+							this.typeArray[2].id.split(",")
+						)
+						.toString();
+				}
+				this.allWpArray.forEach((ele) => {
+					if (this.wpIps.indexOf("FDC") !== -1) {
+						if (ele.id.indexOf("FDC") !== -1) {
+							wpArray.push(ele);
+						}
+					} else if (this.wpIps.indexOf("GDC")) {
+						if (ele.id.indexOf("GDC") !== -1) {
+							wpArray.push(ele);
+						}
+					} else {
+						wpArray.push(ele);
+					}
+				});
+				this.wpId = this.wpIps ? this.wpIps.split(",") : [];
+				this.wpArray = wpArray;
+				this.getOutputSpeedList();
+			},
 
-    getOutputSpeedList() {
-      let that = this;
-      if (!that.beginDate || !that.endDate) {
-        that.BASE.showMsg({
-          msg: "日期不可为空",
-        });
-      } else {
-        that.API.requestData({
-          method: "GET",
-          subUrl: "leaderboard/totalPowerCapacityTopList",
-		  showLoading: true,
-          data: {
-            wpIps: that.wpId.length ? that.wpId.toString() : that.wpIps,
-            isAsc: that.isAsc,
-            beginDate: that.beginDate + "-01",
-            endDate:
-              that.endDate +
-              "-" +
-              (new Date().getDate() < 10
-                ? "0" + new Date().getDate()
-                : new Date().getDate()),
-            orderByColumn: "",
-          },
-          success(res) {
-            res.data.forEach((ele) => {
-              ele.beginDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
-              ele.endDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
-			  ele.speed = ele.speed.toFixed(2);
-            });
-            res.data.sort((a, b) => {
-              return b.power - a.power;
-            });
-            that.tableData.data = res.data;
-          },
-        });
-      }
-    },
+			getOutputSpeedList() {
+				let that = this;
+				if (!that.beginDate || !that.endDate) {
+					that.BASE.showMsg({
+						msg: "日期不可为空",
+					});
+				} else {
+					that.API.requestData({
+						method: "GET",
+						subUrl: "leaderboard/totalPowerCapacityTopList",
+						showLoading: true,
+						data: {
+							wpIps: that.wpId.length ? that.wpId.toString() : that.wpIps,
+							isAsc: that.isAsc,
+							beginDate: that.beginDate,
+							endDate: that.endDate,
+							orderByColumn: "",
+						},
+						success(res) {
+							res.data.forEach((ele) => {
+								ele.beginDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
+								ele.endDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
+								ele.speed = ele.speed.toFixed(2);
+							});
+							res.data.sort((a, b) => {
+								return b.power - a.power;
+							});
+							that.tableData.data = res.data;
+						},
+					});
+				}
+			},
 
-    search() {
-      this.getOutputSpeedList();
-    },
-  },
+			search() {
+				this.getOutputSpeedList();
+			},
+		},
 
-  created() {
-    this.requestData();
-  },
+		created() {
+			this.requestData();
+		},
 
-  mounted() {},
+		mounted() {},
 
-  unmounted() {},
-};
+		unmounted() {},
+	};
 </script>
 
 <style lang="less" scoped>
-.draught-fan-list {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+	.draught-fan-list {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
+		.btn-group-tabs {
+			display: flex;
+			flex-direction: row;
 
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
+			.photovoltaic {
+				margin-left: 1.481vh;
+			}
+		}
 
-  .df-table {
-    border: 0.093vh solid fade(@darkgray, 50%);
-    position: relative;
-    overflow: hidden;
-    flex-grow: 1;
-    margin-top: 1.481vh;
-    height: 80vh;
+		.df-table {
+			border: 0.093vh solid fade(@darkgray, 50%);
+			position: relative;
+			overflow: hidden;
+			flex-grow: 1;
+			margin-top: 1.481vh;
+			height: 80vh;
 
-    &:before {
-      content: "";
-      width: 0.37vh;
-      height: 0.37vh;
-      background: @write;
-      position: absolute;
-      left: 0.278vh;
-      top: 0.278vh;
-    }
+			&:before {
+				content: "";
+				width: 0.37vh;
+				height: 0.37vh;
+				background: @write;
+				position: absolute;
+				left: 0.278vh;
+				top: 0.278vh;
+			}
 
-    tbody {
-      height: calc(100vh - 166px);
-    }
-  }
-}
+			tbody {
+				height: calc(100vh - 166px);
+			}
+		}
+	}
 </style>