pqs-9100_client/frontend/src/views/plan/autoTest/index.vue

<template>
  <!-- 自动检测页面 -->
  <div class="test">
        <!-- 顶部筛选条件&返回按钮 -->
    <!-- {{ printText }} -->
    <div class="test_top">
      <!-- style="pointer-events: none" -->
      <svg-icon name="wind" spin></svg-icon>
      <el-checkbox
        v-for="(item, index) in detectionOptions"
        v-model="item.selected"
        :key="index"
        :label="item.name"
        ></el-checkbox
      >

      <el-button type="primary" @click="handlePreTest">预检测</el-button>
      <el-button type="primary" @click="handleAutoTest">正式检测</el-button>
      <el-button type="primary" @click="handleBackDeviceList"
        >返回首页</el-button
      >

      <!-- <el-select v-model="currentErrSysID" placeholder="请选择误差体系" autocomplete="off">
        <el-option
                  v-for="plan in testErrSystDataList"
                  :key="plan.id"
                  :label="plan.label"
                  :value="plan.id">
        </el-option>
      </el-select>

      <el-button type="primary" @click="handlePreTest">重新计算</el-button> -->
    </div>
    <div class="test_bot">
      <div class="test_left">
      <Tree ref="treeRef"></Tree>
    </div>
    <div class="test_right">
      <el-descriptions
        style="
          width: 100%;
          border-radius: 6px;
          margin-bottom: 10px;
          background-color: #fff;
          padding: 10px;
        "
        :column="3"
        border
      >
        <template #extra>
          <el-progress
            style="width: 80%"
            :percentage="percentage"
            :color="customColors"
          />
          <div class="test_button">
            <el-button
              type="primary"
              v-if="!isPause"
              :icon="VideoPause"
              @click="handlePauseTest"
              >暂停检测</el-button
            >
            <el-button
              type="warning"
              v-if="isPause"
              :icon="Refresh"
              @click="handlePauseTest"
              >继续检测</el-button
            >
            <el-button type="danger" :icon="Close" @click="handleFinishTest"
              >停止检测</el-button
            >
            <!-- <el-button
              type="danger"
              v-if="!isPause"
              :icon="Close"
              @click="handlePauseTest"
              >暂停检测</el-button
            >
            <el-button
              type="warning"
              v-if="isPause"
              :icon="Refresh"
              @click="handlePauseTest"
              >继续检测</el-button
            >
            <el-button type="primary" :icon="Check" @click="handleFinishTest"
              >完成检测</el-button
            > -->
          </div>
        </template>
        <!-- <el-descriptions-item width="0px" label="上送数据总数">
          {{ num }}
        </el-descriptions-item>
        <el-descriptions-item width="0px" label="已上送数据数">
          {{ num1 }}
        </el-descriptions-item>
        <el-descriptions-item width="0px" label="待上送数据数">
          {{ num2 }}
        </el-descriptions-item> -->
      </el-descriptions>
      <!-- 右侧列表 -->
      <div class="right_table">
        <!-- 模拟列表样式 -->
        <!-- 表头设备 -->
        <div class="table_left" v-if="false">
          <p>测试项目</p>
          <div v-for="(item, index) in deviceTestList" :key="index">
            {{ item.name }}
          </div>
        </div>
        <div class="table_right">
          <div class="right_device_title">
            <p v-for="(item, index) in deviceData" :key="index">
              {{ item.name }}
            </p>
          </div>
          <div class="right_device_status">
            <div v-if="beforeTest"> 
              <span class="empty__div">暂无数据</span>
            </div>
            <div
              class="status_info"
              v-if="!beforeTest"
              v-for="(item, index) in deviceTestList"
              :key="index"
            >
              <!-- <p v-for="(vv, vvs) in item.children" :key="vvs">
                {{ vv.status }}
              </p> -->
              <el-button
                v-for="(vv, vvs) in item.children"
                :key="vvs"
                :type="vv.type"
                text
                @click="handleClick(item,index,vvs)"
              >
                {{ vv.label }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧状态加载 -->
      <div class="right_status" v-if="beforeTest">
         <span class="empty__div">暂无数据</span>
      </div>
      <div class="right_status" ref="statusRef" v-if="!beforeTest">
        <!-- ,fontSize:index%5===0?'16px':'14px' -->
        <p v-for="(item, index) in statusList" :key="index" :style="{color:index%5===0?'#F56C6C':'var(--el-text-color-regular)'}">
          输入：{{ item.remark }} -{{
            item.status == 0 ? "输出完毕" : "输入中，请稍后！"
          }}<br />
          <span v-if="index == statusList.length - 1">...</span>
        </p>
      </div>
    </div>
    </div>

    </div>
    <ShowDataPopup ref='showDataPopup'/>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import Tree from "./components/tree.vue";
import { data } from "@/api/plan/autoTest.json";
import { useTransition } from "@vueuse/core";
import { getPlanList } from "@/api/plan/planList";
import { ElMessage, ElMessageBox } from "element-plus";
import ShowDataPopup from './components/ShowDataPopup.vue'
import {
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  Check,
  Plus,
  Refresh,
  Search,
  Close,
  VideoPause,
} from "@element-plus/icons-vue";
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentErrSysID = ref("2")
const treeRef = ref<any>();
const PopupVisible = ref(false)
const showDataPopup = ref()
const beforeTest = ref(true)
const testModel = ref("")
//定义与预检测配置数组
const detectionOptions = ref([
  {
    id: 0,
    name: "标准源通讯检测",//判断源通讯是否正常
    selected: true,
  },
  {
    id: 1,
    name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
    selected: true,
  },
  {
    id: 2,
    name: "协议校验",//ICD报告触发测试
    selected: true,
  },
  {
    id: 3,
    name: "相序校验",//判断装置的接线是否正确
    selected: true,
  },
  {
    id: 4,
    name: "守时校验",//判断装置24小时内的守时误差是否小于1s
    selected: true,
  },
  {
    id: 5,
    name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
    selected: true,
  },
  // {
  //   id: 6,
  //   name: "实时数据比对",
  // },
  // {
  //   id: 7,
  //   name: "录波数据比对",
  // },
]);

const leftDeviceData = ref<any>([
  // {
  //   id: 0,
  //   name: "设备1-预检测",
  //   status: 0,
  // },
  // {
  //   id: 1,
  //   name: "设备2-预检测",
  //   status: 1,
  // },
  // {
  //   id: 2,
  //   name: "设备3-预检测",
  //   status: 1,
  // },
  // {
  //   id: 3,
  //   name: "设备4-预检测",
  //   status: 0,
  // },
  // {
  //   id: 4,
  //   name: "设备5-预检测",
  //   status: 1,
  // },
  // {
  //   id: 5,
  //   name: "设备6-预检测",
  //   status: 0,
  // },
]);
const initLeftDeviceData = () => {
  leftDeviceData.value.map((item, index) => {
    // handlePrintText(item.name, index);
  });
};

const preTestData = [
        {
            "id": 0,
            "name": "预检测项目",
            "children": [
                {
                  "scriptIdx":1,
                  "isChildNode":true,
                  "pid": "0-2",
                  "id": "0-2-2",
                  "name": "标准源通讯检测"
                },
                {
                  "scriptIdx":2,
                  "isChildNode":true,
                  "pid": "0-3",
                  "id": "0-3-1",
                  "name": "设备通讯检测"
                },
                {
                  "scriptIdx":3,
                  "isChildNode":true,
                  "pid": "0-3",
                  "id": "0-3-1",
                  "name": "协议校验"
                },
                {
                  "scriptIdx":4,
                  "isChildNode":true,
                  "pid": "0-3",
                  "id": "0-3-1",
                  "name": "相序校验"
                },
                {
                  "scriptIdx":5,
                  "isChildNode":true,
                  "pid": "0-3",
                  "id": "0-3-1",
                  "name": "守时校验"
                },
                {
                  "scriptIdx":6,
                  "isChildNode":true,
                  "pid": "0-3",
                  "id": "0-3-1",
                  "name": "通道系数校准"
                }
            ]
        }
      ]
// 弹出数据查询页面
const handleClick = (item,index,vvs) => {
  //const data = "检测脚本为："+item.name+";被检设备为："+item.children.value.devID+";被检通道序号为："+ item.children.monitorIndex;
  console.log(vvs,index,item.name,item.children)
  PopupVisible.value = true
  showDataPopup.value.open()
};
let currentIndex = 0;
let totalNum = 0;

//启动预检测
const handlePreTest = () => {
  ElMessage.success("启动预检测");
  currentIndex = 0;
  percentage.value = 0;
  statusList.value = [];
  deviceTestList.value = [];
  statusId.value = 0;
  testModel.value = "preTest"
  beforeTest.value = false;
  getTreeData(preTestData)
  totalNum = preTestData[0].children.length;
  interValTest();
  
  // let count = 0;
  // if (timer) {
  //   clearInterval(timer);
  //   count = 0;
  //   leftDeviceData.value = [];
  // }
  // if (count == 5) {
  //   count = 0;
  // } 
  // else {
  //   timer = setInterval(async () => {
  //     count++;
  //     if (count > 15) return;
  //     await nextTick(() => {
  //       leftDeviceData.value.push({
  //         id: count,
  //         name: "设备" + count + "预检测",
  //         status: count % 2 == 0 ? 0 : 1,
  //       });
  //     });
  //   }, 2000);
  // }
};
//进入检测流程
const handleAutoTest = () => {
  ElMessage.success("启动正式检测");
  currentIndex = 0;
  percentage.value = 0;
  statusList.value = [];
  deviceTestList.value = [];
  statusId.value = 0;
  testModel.value = "Test"
  beforeTest.value = false;
  getTreeData(data)
  // totalNum = data.length;
  totalNum = 10;

  interValTest();
};
//返回设备列表
const handleBackDeviceList = () => {
  router.push({
    path: "/home/index",
  });
};

const getTreeData = (val) => {
  treeRef.value && treeRef.value.getTreeData(val);
};

const tableList = ref([]);

const percentage = ref(0);

const customColors = [
  // { color: "red", percentage: 0 },
  // { color: "red", percentage: 10 },
  // { color: "red", percentage: 20 },
  // { color: "red", percentage: 30 }, //红
  // { color: "red", percentage: 40 },
  // { color: "#e6a23c", percentage: 50 },
  // { color: "#e6a23c", percentage: 60 },
  // { color: "#e6a23c", percentage: 70 }, //黄
  // { color: "#e6a23c", percentage: 80 }, //1989fa
  // { color: "#e6a23c", percentage: 90 }, //1989fa
  { color: "#5cb87a", percentage: 100 }, //绿
];
//加载进度条
const refreshProgress = () => {

  console.log(currentIndex,totalNum,percentage.value)
  if (percentage.value < 100) {
    percentage.value = Math.trunc(currentIndex/totalNum * 100);

  } else {

    clearInterval(timer.value)
    clearInterval(statusTimer.value)

    let strTemp = ""
    if(testModel.value === "preTest")
      strTemp = "预检测过程全部结束"
    else if(testModel.value === "Test")
      strTemp = "正式检测全部结束"

    statusId.value++;
    statusList.value.push({
    id: statusId.value,
    remark: strTemp,
    status: 0,
  });


    console.log("检测结束")
    if(testModel.value === "preTest")
      ElMessage.success("预检测过程全部结束")
    else if(testModel.value === "Test")
      //ElMessage.success("正式检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作")
ElMessageBox.confirm(
    '检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作',
    '检测完成',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'success',
    }
  )
    .then()
    // percentage.value = 0;
    // statusList.value = [];
    // deviceTestList.value = [];
    // statusId.value = 0;
  }
};

let timer: any = ref("");
const statusTimer: any = ref("");
//检测列表数据
const deviceTestList = ref<any>([]);
//检测结果数据
const deviceList = ref<any>([]);
//前一个页面带过来的设备数据
// const deviceData = ref<any>([]);
const deviceData = ref([
  {
    id: 0,
    name: "设备1通道1",
    status: Math.floor(Math.random() * 4),
    type:"info",
    label:"/",
    devID:"dev1",
    monitorIndex:1,
  },
  {
    id: 1,
    name: "设备1通道2",
    status: Math.floor(Math.random() * 4),
    type:"success",
    label:"√",
    devID:"dev1",
    monitorIndex:2,
  },
  {
    id: 2,
    name: "设备2通道1",
    status: Math.floor(Math.random() * 4),
    type:"danger",
    label:"×",
    devID:"dev2",
    monitorIndex:1,
  },
  {
    id: 3,
    name: "设备3通道1",
    status: Math.floor(Math.random() * 4),
    type:"success",
    label:"√",
    devID:"dev3",
    monitorIndex:1,
  },
]);


const interValTest = () => {
  timer.value = setInterval(() => {
    deviceTestList.value.push({
      id: 0,
      name: `频率 ${statusId.value}Hz`,
      children: deviceData.value,
      // status: Math.floor(Math.random() * 4),
    });
    // console.log(deviceTestList.value,11111);
    currentIndex++;
    treeRef.value && treeRef.value.getCurrentIndex(currentIndex)
    refreshProgress();
  }, 2000);

  statusTimer.value = setInterval(() => {
    getStatusList();
    statusList.value.map((item: any, index: any) => {
      if (index == statusList.value.length - 1) {
        item.status = 1;
      } else {
        item.status = 0;
      }
    });
  }, 2000);
};

//暂停检测
const isPause = ref<boolean>(false);
const handlePauseTest = () => {
  if (!isPause.value) {
    clearInterval(timer.value);
    clearInterval(statusTimer.value);
  } else {
    interValTest();
  }
  isPause.value = !isPause.value;
};
//完成检测
const handleFinishTest = () => {
  ElMessage.success("完成检测");
};

// 表格拖拽排序
const sortTable = ({
  newIndex,
  oldIndex,
}: {
  newIndex?: number;
  oldIndex?: number;
}) => {
  console.log(newIndex, oldIndex);
  ElMessage.success("修改列表排序成功");
};


const statusList: any = ref([]);
let statusId = ref(0);
const statusRef = ref();
const getStatusList = () => {
  statusId.value++;
  statusList.value.push({
    id: statusId.value,
    remark: `频率 ${statusId.value}Hz`,
    status: 0,
  });
  // console.log(statusRef.value.offsetHeight);
  nextTick(() => {
    if (statusRef.value)
      statusRef.value.scrollTop = statusRef.value.scrollHeight;
  });
};

onMounted(() => {

});
</script>
<style lang="scss" scoped>

 
.empty__div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--el-text-color-secondary);
    font-size: var(--el-font-size-base);
}

.test {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  .test_top {
    width: 100%;
    height: 50px;
    display: flex;
    background-color: #fff;
    justify-content: flex-start;
    align-items: center;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    .el-button {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 20px;
    }

    .el-select {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 20px;
    }
  }

  .test_bot {
    flex: 1;
    margin-top: 10px;
    display: flex;
    height: calc(100vh - 240px);
  .test_left {
    max-width: 300px;
    min-width: 200px;
    width: 15%;
    height: 100%;
    overflow: auto;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 6px;
    padding: 5px !important;
    box-sizing: border-box;
  }
  .test_right {
    flex: 1;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .right_table {
      flex: 1;
      // width: 100%;
      // height: calc(100vh - 330px);
      height: 100%;
      flex: 1 !important;
      height: calc(100vh - 560px);
      border-radius: 4px;
      background-color: #fff;
      width: 100% !important;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      .table_left {
        width: 150px;
        height: 100%;
        overflow: auto;
        p {
          line-height: 40px;
          margin: 0;
          width: 100px;
        }
      }
      .table_right {
        flex: 1;
        display: flex;
        overflow: auto;
        flex-direction: column;
        .right_device_title {
          width: 100%;
          display: flex;
          justify-content: center;

          // overflow-x: auto !important;
          p {
            flex: 1;
            // max-width: 150px;
            text-align: center; 
            width: auto;
            padding: 0 10px;
            margin: 0;
            line-height: 40px;
          }
        }
        .right_device_status {
          position: relative;
          width: 100%;
          flex: 1;
          .status_info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .el-button {
              flex: 1;
              // max-width: 150px;
              min-width: auto;
              margin: 0;
              padding: 0 10px;
              text-align: left;
            }
          }
        }
      }
    }
    .right_status {
      position: relative;
      width: 100%;
      height: 150px;
      overflow: auto;
      background-color: #fff;
      border-radius: 4px;
      margin-top: 10px;
      padding: 10px 0 20px 10px;
      box-sizing: border-box;
      p {
        height: 20px;
        font-size: 14px;
        margin: 0 !important;
      }
      :nth-last-child(1) {
        margin-bottom: 40px;
      }
    }
  }
  }
}

::v-deep .header-button-lf {
  clear: both !important;
}

::v-deep .el-descriptions__extra {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .test_button {
    width: auto;
    display: flex;
    align-items: center;
  }
}
</style>