|
|
@@ -0,0 +1,796 @@
|
|
|
+<template>
|
|
|
+ <div class="bottom-data">
|
|
|
+ <div class="Box1">
|
|
|
+ <h3 style="margin: 8px 0">风场分析完成率</h3>
|
|
|
+ <el-date-picker
|
|
|
+ size="mini"
|
|
|
+ v-model="value1"
|
|
|
+ type="datetimerange"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="onDateChange"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <div id="main" style="width: 260px; height: 160px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="Box2">
|
|
|
+ <div>
|
|
|
+ <h3 style="margin: 8px 0" >任务统计</h3>
|
|
|
+ <div class="BOXsan">
|
|
|
+ <div class="YC02" @click="getwgl">
|
|
|
+ <strong class="texyellow">
|
|
|
+ {{ onrelevance ? onrelevance : 0 }}</strong
|
|
|
+ >
|
|
|
+ <span>待分析任务</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02" @click="getwfx">
|
|
|
+ <strong class="textred"> {{ abnormal ? abnormal : 0 }}</strong>
|
|
|
+ <span>异常任务</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="YC02" @click="getpd">
|
|
|
+ <strong class="textred">
|
|
|
+ {{ queueNumber ? queueNumber : 0 }}</strong
|
|
|
+ >
|
|
|
+ <span>排队任务</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 style="margin: 8px 0">异常设备概览</h3>
|
|
|
+ <div class="BOX">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="YC02">
|
|
|
+ <strong>
|
|
|
+ {{ equipment?.errCounrt ? equipment.errCounrt : 0 }}</strong
|
|
|
+ >
|
|
|
+ <span>异常总数</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02">
|
|
|
+ <strong>
|
|
|
+ {{
|
|
|
+ equipment?.errCountInCurrentMonth
|
|
|
+ ? equipment.errCountInCurrentMonth
|
|
|
+ : 0
|
|
|
+ }}</strong
|
|
|
+ >
|
|
|
+ <span>本月异常</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02">
|
|
|
+ <strong class="textred">
|
|
|
+ {{
|
|
|
+ equipment?.errCountNotDeal ? equipment.errCountNotDeal : 0
|
|
|
+ }}</strong
|
|
|
+ >
|
|
|
+ <span>未处理异常</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02">
|
|
|
+ <strong class="texyellow">
|
|
|
+ {{
|
|
|
+ equipment?.errDeviceCount ? equipment.errDeviceCount : 0
|
|
|
+ }}</strong
|
|
|
+ >
|
|
|
+ <span>异常设备数</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog title="待分析任务统计表" :visible.sync="glShow" width="45%">
|
|
|
+ <!-- 外部容器设置最大高度和滚动条 -->
|
|
|
+ <div style="max-height: 400px; overflow-y: auto">
|
|
|
+ <el-table :data="glData" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="fieldName"
|
|
|
+ label="风场名称"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="analysisName"
|
|
|
+ label="分析名称"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="创建时间"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click="handleClick(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="异常任务统计表" :visible.sync="YCShow" width="45%">
|
|
|
+ <div style="max-height: 400px; overflow-y: auto">
|
|
|
+ <el-table :data="FXData" style="width: 100%">
|
|
|
+ <el-table-column prop="fieldName" label="风场名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="analysisName" label="分析名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click="YChandleClick(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="排队任务统计表" :visible.sync="PdShow" width="45%">
|
|
|
+ <div style="max-height: 400px; overflow-y: auto">
|
|
|
+ <el-table :data="PdData" style="width: 100%">
|
|
|
+ <el-table-column prop="fieldName" label="风场名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="analysisName" label="分析名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="PDClick(scope.row)" type="text" size="small"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="入库信息"
|
|
|
+ width="70%"
|
|
|
+ :visible.sync="dialogTableVisible"
|
|
|
+ >
|
|
|
+ <el-button size="small" @click="importdata">导入数据</el-button>
|
|
|
+ <el-table :data="gridData" style="max-height: 400px; overflow: auto">
|
|
|
+ <el-table-column
|
|
|
+ property="windFarmName"
|
|
|
+ label="风场名称"
|
|
|
+ show-overflow-tooltip
|
|
|
+ width="150px"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="minuteTimeAreaList"
|
|
|
+ label="SCADA分钟级"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="secondTimeAreaList"
|
|
|
+ label="SCADA秒级"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="faultTimeAreaList"
|
|
|
+ label="故障数据"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="warnTimeAreaList"
|
|
|
+ label="报警数据"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="vibrationTimeAreaList"
|
|
|
+ label="振动数据"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div class="Box3">
|
|
|
+ <div class="BOX" v-hasPermi="['home:offlinedata']">
|
|
|
+ <h3 class="centeredh3" style="margin: 8px 0">
|
|
|
+ 入库数据
|
|
|
+ <span>
|
|
|
+ <span style="cursor: pointer" @click="importdata">导入数据</span>
|
|
|
+ <span style="cursor: pointer" @click="more">更多</span>
|
|
|
+ </span>
|
|
|
+ </h3>
|
|
|
+ <div>
|
|
|
+ <p class="titleYC"><span>风场名称</span><span>入库时间</span></p>
|
|
|
+ <tabrollHD
|
|
|
+ :table-data="RKtableData"
|
|
|
+ :shujuloading="shujuloading"
|
|
|
+ :columns="RKtableColumns"
|
|
|
+ :column-widths="RKcolumnWidths"
|
|
|
+ :max-height="140"
|
|
|
+ ></tabrollHD>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="Box4">
|
|
|
+ <h3 style="margin: 8px 0">性能分析操作记录</h3>
|
|
|
+ <p class="titleJQ">
|
|
|
+ <span>名字</span><span>日期</span><span>操作记录</span>
|
|
|
+ </p>
|
|
|
+ <tabrollHD
|
|
|
+ :table-data="tableData"
|
|
|
+ :shujuloading="shujuloading"
|
|
|
+ :columns="tableColumns"
|
|
|
+ :max-height="140"
|
|
|
+ :column-widths="columnWidths"
|
|
|
+ ></tabrollHD>
|
|
|
+ </div>
|
|
|
+ <div class="Box5">
|
|
|
+ <h3 style="margin: 8px 0">异常数据信息</h3>
|
|
|
+ <p class="titleYC"><span>风场名称</span><span>风机信息</span></p>
|
|
|
+ <tabrollHD
|
|
|
+ :table-data="YCtableData"
|
|
|
+ :shujuloading="shujuloading"
|
|
|
+ :columns="YCtableColumns"
|
|
|
+ :column-widths="YCcolumnWidths"
|
|
|
+ :max-height="140"
|
|
|
+ ></tabrollHD>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ queryStatistics,
|
|
|
+ queryOptionRecords,
|
|
|
+ queryWaitTask,
|
|
|
+ analysisResultList,
|
|
|
+ getWindFieldNames,
|
|
|
+} from "@/api/ledger.js";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import tabrollHD from "../component/tabrollHD.vue";
|
|
|
+import axios from "axios";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ maplistArr: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ defaultdata: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ tabrollHD,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ maplistArr: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (Object.keys(newVal).length > 0) {
|
|
|
+ // 检查maplistArr是否有值
|
|
|
+ console.log("Map list updated:", newVal);
|
|
|
+ this.getStatistics();
|
|
|
+ this.getOptionRecords();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true, // 立即执行一次handler
|
|
|
+ deep: true, // 深度监听对象内部变化
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ YCtableData: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ shujuloading: false,
|
|
|
+ YCtableColumns: [{ prop: "fieldName" }, { prop: "engineName" }],
|
|
|
+ YCcolumnWidths: {
|
|
|
+ fieldName: 120,
|
|
|
+ },
|
|
|
+ // 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
|
|
|
+ tableData: [],
|
|
|
+ tableColumns: [
|
|
|
+ { prop: "optionByName" },
|
|
|
+ { prop: "createTime" },
|
|
|
+ { prop: "optionContent" },
|
|
|
+ ],
|
|
|
+ columnWidths: {
|
|
|
+ optionByName: 60,
|
|
|
+ createTime: 100,
|
|
|
+ },
|
|
|
+ equipment: {
|
|
|
+ analysisedCount: 0,
|
|
|
+ analysisingCount: 0,
|
|
|
+ noAnalysisCount: 0,
|
|
|
+ },
|
|
|
+ value1: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+
|
|
|
+ // 任务统计
|
|
|
+ onrelevance: "",
|
|
|
+ abnormal: "",
|
|
|
+ queueNumber: "",
|
|
|
+ glShow: false,
|
|
|
+ YCShow: false,
|
|
|
+ PdShow: false,
|
|
|
+ glData: [],
|
|
|
+ FXData: [],
|
|
|
+ PdData: [],
|
|
|
+ dialogTableVisible: false,
|
|
|
+ gridData: [],
|
|
|
+ RKtableData: [],
|
|
|
+ RKtableColumns: [{ prop: "windFarmName" }, { prop: "createTime" }],
|
|
|
+ RKcolumnWidths: {
|
|
|
+ windFarmName: 130,
|
|
|
+ createTime: 150,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart();
|
|
|
+ const currentTime = new Date();
|
|
|
+ const halfYearAgo = new Date();
|
|
|
+ halfYearAgo.setMonth(currentTime.getMonth() - 6);
|
|
|
+ this.value1 = [halfYearAgo, currentTime];
|
|
|
+ // 同时更新 startTime 和 endTime
|
|
|
+ this.startTime = this.$formatDate(halfYearAgo);
|
|
|
+ this.endTime = this.$formatDate(currentTime);
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getbacklog();
|
|
|
+ this.ruku();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initChart() {
|
|
|
+ var chartDom = document.getElementById("main");
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
+ this.updateChart();
|
|
|
+ },
|
|
|
+ updateChart() {
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (params) {
|
|
|
+ var percent = params.percent.toFixed(2) + "%";
|
|
|
+ return `${params.name}: ${params.value} (${percent})`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "left",
|
|
|
+ top: "30%",
|
|
|
+ textStyle: {
|
|
|
+ // Add this for white legend text
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "80%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ center: ["60%", "50%"],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this.equipment.analysisedCount,
|
|
|
+ name: "已完成",
|
|
|
+ itemStyle: { color: "#7ECF51" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.equipment.analysisingCount,
|
|
|
+ name: "进行中",
|
|
|
+ itemStyle: { color: "#EECB5F" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.equipment.noAnalysisCount,
|
|
|
+ name: "未开始",
|
|
|
+ itemStyle: { color: "#E16757" },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ getStatistics() {
|
|
|
+ const startTime =
|
|
|
+ this.startTime ||
|
|
|
+ this.$formatDate(
|
|
|
+ new Date(new Date().setMonth(new Date().getMonth() - 6))
|
|
|
+ ); // 半年前的时间
|
|
|
+ const endTime = this.endTime || this.$formatDate(new Date()); // 当前时间
|
|
|
+ // halfYearAgo.setMonth(currentTime.getMonth() - 6)
|
|
|
+
|
|
|
+ let DataObject = {
|
|
|
+ codeNumber: this.maplistArr.codeNumber,
|
|
|
+ codeType: this.maplistArr.codeType,
|
|
|
+ startTime: startTime,
|
|
|
+ endTime: endTime,
|
|
|
+ };
|
|
|
+ queryStatistics(DataObject).then((res) => {
|
|
|
+ this.YCtableData = res.data.errList || [];
|
|
|
+ this.equipment = res.data || {};
|
|
|
+ this.updateChart(); // Update chart after data is received
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getOptionRecords() {
|
|
|
+ let DataObject = {
|
|
|
+ codeNumber: this.maplistArr.codeNumber,
|
|
|
+ codeType: this.maplistArr.codeType,
|
|
|
+ };
|
|
|
+ queryOptionRecords(DataObject).then((res) => {
|
|
|
+ this.tableData = res.data || [];
|
|
|
+ console.log( this.tableData, );
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onDateChange(date) {
|
|
|
+ if (Array.isArray(date)) {
|
|
|
+ this.startTime = this.$formatDate(date[0]);
|
|
|
+ this.endTime = this.$formatDate(date[1]);
|
|
|
+ if (this.endDate < this.startTime) {
|
|
|
+ this.endTime = this.startTime;
|
|
|
+ }
|
|
|
+ this.getStatistics();
|
|
|
+ } else {
|
|
|
+ this.startTime = null;
|
|
|
+ this.endTime = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 。。。。。。。。。。。。。。。。。。。。。。。任务统计
|
|
|
+ getwgl() {
|
|
|
+ const arr = {
|
|
|
+ pageSize: 999,
|
|
|
+ analysisState: "-1",
|
|
|
+ };
|
|
|
+ analysisResultList(arr).then((res) => {
|
|
|
+ this.glData = res.data.list;
|
|
|
+ this.glShow = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getwfx() {
|
|
|
+ const arr = {
|
|
|
+ pageSize: 999,
|
|
|
+ errState: 1,
|
|
|
+ };
|
|
|
+ analysisResultList(arr).then((res) => {
|
|
|
+ this.FXData = res.data.list;
|
|
|
+ this.YCShow = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getpd() {
|
|
|
+ const arr = {
|
|
|
+ pageSize: 999,
|
|
|
+ analysisState: "10",
|
|
|
+ };
|
|
|
+ analysisResultList(arr).then((res) => {
|
|
|
+ this.PdData = res.data.list;
|
|
|
+ this.PdShow = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getbacklog() {
|
|
|
+ queryWaitTask().then((res) => {
|
|
|
+ this.abnormal = res.data.errCount;
|
|
|
+ this.onrelevance = res.data.uncorrelatedCount;
|
|
|
+ this.queueNumber = res.data.queueNumber;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick(row) {
|
|
|
+ const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
|
|
|
+ const analysisState = "-1";
|
|
|
+ // 打开新窗口
|
|
|
+ const newWindow = window.open(
|
|
|
+ "/home/performance/assetssMag?id=195",
|
|
|
+ "_blank"
|
|
|
+ );
|
|
|
+ // 等待窗口加载完成后发送消息
|
|
|
+ newWindow.onload = () => {
|
|
|
+ newWindow.postMessage({ fieldName, analysisState }, "*");
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ YChandleClick(row) {
|
|
|
+ const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
|
|
|
+ const errState = 1;
|
|
|
+ const analysisState = "30";
|
|
|
+ // 打开新窗口
|
|
|
+ const newWindow = window.open(
|
|
|
+ "/home/performance/assetssMag?id=195",
|
|
|
+ "_blank"
|
|
|
+ );
|
|
|
+ // 等待窗口加载完成后发送消息
|
|
|
+ newWindow.onload = () => {
|
|
|
+ newWindow.postMessage({ fieldName, errState, analysisState }, "*");
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 。。。。。。。。。。。。。。。。。。。入库数据
|
|
|
+ importdata() {
|
|
|
+ window.open(this.$router.resolve({ path: "/transition" }).href, "_blank");
|
|
|
+ },
|
|
|
+ more() {
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ axios
|
|
|
+ .post(`/ETLapi/dataTransfer/pltIndexMore`)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.gridData = res.data.datas.map((item) => {
|
|
|
+ // 合并数组中的元素，用 '/' 分隔
|
|
|
+ if (
|
|
|
+ item.secondTimeAreaList &&
|
|
|
+ item.secondTimeAreaList.length > 0
|
|
|
+ ) {
|
|
|
+ item.secondTimeAreaList = [item.secondTimeAreaList.join(" / ")];
|
|
|
+ }
|
|
|
+ if (item.faultTimeAreaList && item.faultTimeAreaList.length > 0) {
|
|
|
+ item.faultTimeAreaList = [item.faultTimeAreaList.join(" / ")];
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ item.minuteTimeAreaList &&
|
|
|
+ item.minuteTimeAreaList.length > 0
|
|
|
+ ) {
|
|
|
+ item.minuteTimeAreaList = [item.minuteTimeAreaList.join(" / ")];
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ item.vibrationTimeAreaList &&
|
|
|
+ item.vibrationTimeAreaList.length > 0
|
|
|
+ ) {
|
|
|
+ item.vibrationTimeAreaList = [
|
|
|
+ item.vibrationTimeAreaList.join(" / "),
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ if (item.warnTimeAreaList && item.warnTimeAreaList.length > 0) {
|
|
|
+ item.warnTimeAreaList = [item.warnTimeAreaList.join(" / ")];
|
|
|
+ }
|
|
|
+
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (res.data.code === 500) {
|
|
|
+ this.$message.error(res.data.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("Error fetching data:", error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ ruku() {
|
|
|
+ axios
|
|
|
+ .post(`/ETLapi/dataTransfer/recentlyImportedSuccessful5Data`)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.RKtableData = res.data.datas;
|
|
|
+ }
|
|
|
+ if (res.data.code === 500) {
|
|
|
+ this.$message.error(res.data.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("Error fetching data:", error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bottom-data {
|
|
|
+ height: 230px;
|
|
|
+ background-color: #1b3b7f;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.Box1,
|
|
|
+.Box2,
|
|
|
+.Box4,
|
|
|
+.Box5 {
|
|
|
+ H3 {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.Box1 {
|
|
|
+}
|
|
|
+.Box2 {
|
|
|
+ .BOX {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ .YC02 {
|
|
|
+ width: 70px;
|
|
|
+ height: 60px;
|
|
|
+ background-image: url("../../../../assets/003.png");
|
|
|
+ background-size: 70px 60px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ margin-right: 15px;
|
|
|
+ margin-top: 0px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+
|
|
|
+ .textred {
|
|
|
+ color: #d9001b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .texyellow {
|
|
|
+ color: #facd91;
|
|
|
+ }
|
|
|
+
|
|
|
+ strong {
|
|
|
+ display: block;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #4bffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .BOXsan {
|
|
|
+ width: 255px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+
|
|
|
+ .YC02 {
|
|
|
+ width: 70px;
|
|
|
+ height: 60px;
|
|
|
+ background-image: url("../../../../assets/003.png");
|
|
|
+ background-size: 70px 60px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .textred {
|
|
|
+ color: #d9001b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .texyellow {
|
|
|
+ color: #facd91;
|
|
|
+ }
|
|
|
+
|
|
|
+ strong {
|
|
|
+ display: block;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #4bffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.Box3 {
|
|
|
+ width: 290px;
|
|
|
+ .BOX {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centeredh3 {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .titleYC {
|
|
|
+ font-size: 14px;
|
|
|
+ background: #51a7e3;
|
|
|
+ padding: 5px 0;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ margin: 0 70px 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.Box4 {
|
|
|
+ width: 260px;
|
|
|
+ .titleJQ {
|
|
|
+ font-size: 14px;
|
|
|
+ background: #51a7e3;
|
|
|
+ padding: 5px 0;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ margin: 0 15px 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:nth-child(2) {
|
|
|
+ margin: 0 45px 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.Box5 {
|
|
|
+ width: 260px;
|
|
|
+ .titleYC {
|
|
|
+ font-size: 14px;
|
|
|
+ background: #51a7e3;
|
|
|
+ padding: 5px 0;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ margin: 0 70px 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.Tabtab {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.el-table__cell {
|
|
|
+ padding: 2px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.el-table .el-table__cell {
|
|
|
+ padding: 2px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.el-table--scrollable-y .el-table__body-wrapper {
|
|
|
+ overflow-y: clip !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.el-date-editor--datetimerange.el-input,
|
|
|
+.el-date-editor--datetimerange.el-input__inner {
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+</style>
|
rui.jiang
