scd_tools_ui/src/pages/mission/components/HaveMis.vue

<template>
  <div>
    <div class="bigBox">
      <!-- 点击开始检测盒子 -->
      <div class="startBox">
        <p class="nowIn">{{ lookingTask.name ? lookingTask.name : "请选择一个待检测任务" }}</p>
        <p v-if="lookingTask.name" class="createDate">创建日期:{{ lookingTask.ct ? lookingTask.ct : "暂无时间" }}</p>
        <img src="../../../assets/image/start_btn.png" alt="" style="cursor: pointer;" @click="startNow(lookingTask)" />
        <p class="nowModel" v-if="lookingTask.name">
          <span style="margin-right: 15px;">检测模型:</span>
          <el-select v-model="currEditTaskModels" @change="relison">
            <el-option v-for="(item, index) in taskModels" :title="item.model_name" :key="index"
              :label="item.model_name" :value="item.model_id" />
          </el-select>
          <span style="margin: 10px;cursor: pointer;"><img src="../../../assets/icon/pencil.png" alt="编辑所选模型"
              @click="editTaskModel" /></span>
        </p>
      </div>
      <!-- 待检测任务 -->
      <div class="noReportBox">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <p class="norep">待检测任务</p>
          <p style="display: flex;justify-content: flex-start;align-items: center;margin-left: 10px;cursor: pointer;">
            <span style="display: block;color: #5090F1;" @click="moreMis">更多</span>
            <svg style="width: 14px;height: 14px;display: block;" t="1706067807079" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4220" width="48" height="48">
              <path
                d="M160.117 212.026v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L173.448 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.338-11.93L487.814 512 165.456 223.957a16 16 0 0 1-5.339-11.931z m272.057 0v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L445.505 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.339-11.93L759.87 512 437.514 223.957a16 16 0 0 1-5.34-11.931z"
                fill="#5090F1" p-id="4221"></path>
            </svg>
          </p>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;"
          v-if="nowRunList.length > 0 || misList.length > 0">
          <div :class="setImg(item)" v-if="nowRunList.length > 0" v-for="(item, index) in nowRunList">
            <div class="intBoxOne">
              <p class="intOne">
                <span style="font-size: 18px;color: white;">{{ item.name }}</span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  src="../../../assets/icon/white_flash.png" alt="" />
                <span style="font-size: 12px;color:white" class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  src="../../../assets/icon/white_clock.png" alt="" />
                <span style="font-size: 12px;color:white" class="commonSpan">{{ item.ct }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span style="font-size: 16px;color:white" class="setnowspan" @click="startBefore(item, index)">检测中<em
                  v-loading="emLoading"></em></span>
            </div>
          </div>
          <div class="intBox" v-for="(item, index) in misList" :style="setImg(item, index)" @mouseover="intOver(index)"
            @mouseout="intOut(index)">
            <div class="intBoxOne">
              <p class="intOne">
                <span style="font-size: 18px;">{{ item.name }}</span>
                <span style="font-size: 12px;cursor: pointer;" @click="editItem(item, index)">编辑</span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  :src="isImg && isIndex == index ? require('../../../assets/icon/white_flash.png') : require('../../../assets/icon/flash_darkBlue.png')"
                  alt="" />
                <span style="font-size: 12px;" class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  :src="isImg && isIndex == index ? require('../../../assets/icon/white_clock.png') : require('../../../assets/icon/clock_darkBlue.png')"
                  alt="" />
                <span style="font-size: 12px;" class="commonSpan">{{ item.ut }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span style="font-size: 16px;" class="setnowspan" @click="startBefore(item, index)">立即检测</span>
            </div>
          </div>
        </div>
        <div
          style="width: 100%;height: calc(100vh - 800px);margin: 0 auto;text-align: center;line-height: calc(100vh - 800px);"
          v-else>
          <p style="display: flex;justify-content: center;align-items: center;">
            <el-icon style="font-size: 16px;display: block;color: #7484AB;">
              <Warning />
            </el-icon>
            <span style="display: block;color: #7484AB;">暂无待检测任务，请新建</span>
          </p>
        </div>
      </div>

      <!-- 已完成 -->
      <div class="noReportBox">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <p class="norep">最近检测任务-已完成</p>
          <p style="display: flex;justify-content: flex-start;align-items: center;margin-left: 10px;cursor: pointer;">
            <span style="display: block;color: #5090F1;" @click="moreMis">更多</span>
            <svg style="width: 14px;height: 14px;display: block;" t="1706067807079" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4220" width="48" height="48">
              <path
                d="M160.117 212.026v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L173.448 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.338-11.93L487.814 512 165.456 223.957a16 16 0 0 1-5.339-11.931z m272.057 0v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L445.505 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.339-11.93L759.87 512 437.514 223.957a16 16 0 0 1-5.34-11.931z"
                fill="#5090F1" p-id="4221"></path>
            </svg>
          </p>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <div class="intBox" v-for="(item, index) in passList" @mouseover="intOvers(index)" @mouseout="intOuts(index)">
            <div class="intBoxOne">
              <p class="intOne" @click="editItem(item, index)">
                <span>{{ item.name }}</span>
                <span style="cursor: pointer;" @click="editItem(item, index)">详情<el-icon>
                    <Right />
                  </el-icon></span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  :src="isImgs && isIndexs == index ? require('../../../assets/icon/white_flash.png') : require('../../../assets/icon/flash_darkBlue.png')"
                  alt="" />
                <span style="font-size: 12px;" class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p style="margin-left: 8px;">
                <img style="width: 15px;height: 15px;float: left;padding-top:2px"
                  :src="isImgs && isIndexs == index ? require('../../../assets/icon/white_clock.png') : require('../../../assets/icon/clock_darkBlue.png')"
                  alt="" />
                <span style="font-size: 12px;" class="commonSpan">{{ item.start_time }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span class="setnowspan" @click="goNetStructPicture(item)">scd可视化</span>
              <span style="margin: 0 10px;" class="setnowspan">|</span>
              <span class="setnowspan" @click="outcome(item, index)">检测结果</span>
              <span style="margin: 0 10px;" class="setnowspan">|</span>
              <!-- <span class="setnowspan" @click="startBefore(item, index)">重新检测</span> -->
              <span class="setnowspan" @click="restart(item, index)">重新检测</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import task from "@/api/task"
import imgs from "../jscom/img";
import { ElLoading, ElMessage } from "element-plus";
export default {
  props: {
    numType: {
      type: Boolean,
      required: true,
    },//startmission组件返回刷新状态
  },
  setup(props, { emit }) {
    let imgBack = ref("@/assets/image/card_blue.png");
    let router = useRouter();
    let sizeNum = ref(1);
    let lookingTask = ref({}) //当前点击查看的任务对象
    let taskModels = ref([]) //任务模型列表
    let misList = ref([])//待检测任务列表
    let nowRunList = ref([])//正在检测任务列表
    let passList = ref([])//已完成检测任务列表
    let currEditTaskModels = ref('')
    let emLoading = ref(true)
    let isImg = ref(false)
    let isImgs = ref(false)
    let isIndex = ref(999999)
    let isIndexs = ref(999999)
    let isType = ref(false)//本组件刷新状态
    function scdLink() {
      router.push("/home/scdMap");
    }
    function startBefore(row, num) {
      lookingTask.value = row
      taskModels.value = []
      task.getTaskById({ id: row.id }).then(res => {
        if (res == null) return
        if (res.code != 0) {
          ElMessage({
            message: res.msg,
            type: "error"
          })
          return
        }
        let models = res.data.models
        if (models === null || models.length === 0) return
        taskModels.value = models
      })
    }
    function startNow(row, num) {
      if (row.name == null || row.name == '' || row.name == undefined || currEditTaskModels.value == '') {
        ElMessage({
          message: "暂无检测任务或未选择模型",
          type: "info"
        })
      } else {
        sizeNum.value = 1;
        emit("hmBack", sizeNum.value, row);
      }
    }

    function editTaskModel() {
      // 跳转到内置模型编辑组件
      let m1 = taskModels.value.filter(item => item.model_id == currEditTaskModels.value)
      if (m1.length === 0) return
      router.push({
        path: "/home/setting",
        query: {
          modelid: currEditTaskModels.value,
          modelname: m1[0].model_name,
          isNow: 1,
        },
      });
    }

    function goNetStructPicture(row) {
      router.push({
        path: "/home/netStructPicture",
        query: {
          id: row.scd_id,
          name: row.name,
          parentData: JSON.stringify(row),
          stationId: row.station_id,
          stationName: row.scd_name,
        },
      });
    }
    // 生成报告和跳转页面
    function outcome(row, num) {
      console.log(row, 'rou');
      router.push({
        path: "/home/report/details",
        query: {
          reportId: row.id,
          scdId: row.scd_id,
          stationName: row.station_name,
          names: row.name
        }
      })
    }
    function getList() {
      const loading = ElLoading.service({
        lock: true,
        text: '正在查询数据',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // 0为待检测
      task.getTask({ pageno: 1, pagesize: 6, state: 0 }).then(res => {
        if (res == null || res.data == null) {
          loading.close()
          misList.value = []
          return
        } else {
          const sortedList = res.data.sort((a, b) => {
            // 将 state 为 0 的对象排在前面
            if (a.state === 1 && b.state !== 1) {
              return -1; // a排在b前面
            } else if (a.state !== 1 && b.state === 1) {
              return 1; // b排在a前面
            } else {
              return 0; // 不需要交换位置
            }
          });
          misList.value = res.data;
          emit("haveBack", misList.value);
          loading.close()
        }
      })
      // 2为完成检测
      task.getTask({ pageno: 1, pagesize: 6, state: 2 }).then(res => {
        if (res == null || res.data == null) {
          passList.value = []
          return
        } else {
          console.log(res.data, 'asdkjk');
          passList.value = res.data.sort((a, b) => {
            // 将日期字符串转换为 Date 对象进行比较
            const dateA = new Date(a.start_time);
            const dateB = new Date(b.start_time);
            // 返回结果以实现降序排列
            return dateB - dateA;
          });
        }
      })
      // 1为正在检测
      task.getTask({ pageno: 1, pagesize: 10, state: 1 }).then(res => {
        if (res == null || res.data == null) {
          nowRunList.value = []
          lookingTask.value = []
          return
        } else {
          nowRunList.value = res.data
          lookingTask.value = res.data //默认查看该任务信息
        }
      })
    }
    function restart(row, num) {
      task.reladyTask({
        id: row.id
      }).then(res => {
        if (res != null && res.code == 0) {
          ElMessage({
            message: "任务已重置",
            type: "success"
          })
          getList()
        } else {
          ElMessage({
            message: res.msg,
            type: "error"
          })
        }
      })
    }
    function editItem(row) {
      emit("haveInCreate", 1, row, 2)
    }
    function setImg(row, num) {
      if (row.state == "1") {
        return "intBoxCopy"
      } else {
        return "intBox"
      }
    }
    function moreMis() {
      emit("moreBack", 2)
    }
    function relison(e) {
      currEditTaskModels.value = e
    }
    function intOver(num) {
      isIndex.value = num
      isImg.value = true
    }
    function intOut(num) {
      isIndex.value = num
      isImg.value = false
    }
    function intOvers(num) {
      isIndexs.value = num
      isImgs.value = true
    }
    function intOuts(num) {
      isIndexs.value = num
      isImgs.value = false
    }
    onMounted(() => {
      getList()
    })
    return {
      imgBack,
      scdLink,
      startNow,
      startBefore,
      editTaskModel,
      currEditTaskModels,
      sizeNum,
      goNetStructPicture,
      getList,
      misList,//待检测任务列表
      editItem,
      nowRunList,//正在检测任务列表
      lookingTask,
      taskModels,
      setImg,
      passList,//已完成列表
      emLoading,
      isImg,
      isImgs,
      intOver,
      intOut,
      intOvers,
      intOuts,
      isIndex,
      isIndexs,
      relison,//开始检测后选择模型change事件
      outcome,//生成报告和跳转yemian
      moreMis,
      isType,//本组件刷新状态
      restart,
    };
  },
  components: {
  }
};
</script>

<style scoped>
@import url('https://fonts.font.im/css?family=Montserrat');

p {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.bigBox {
  width: 99%;
  height: 100%;
  /* border: 1px solid saddlebrown; */
}

.startBox {
  width: 100%;
  height: 335px;
  margin: 0 auto;
  /* border: 1px solid black; */
  text-align: center;
  line-height: 25px;
}

.nowIn {
  /* width: 180px;
    height: 28px; */
  font-size: 20px;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #1a2447;
  /* line-height: 28px; */
}

.createDate {
  /* width: 168px;
    height: 22px; */
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #7484ab;
  margin: 10px 0;
  /* line-height: 22px; */
}

.nowModel {
  font-size: 18px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #1a2447;
  margin: 10px 0;
}

.nowEm {
  font-style: normal;
  font-size: 16px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #255ce7;
  line-height: 24px;
  margin: 0 10px;
  width: 100px;
  border-bottom: 1px solid #255ce7;
  float: left;
}

.noReportBox {
  width: 99%;
  height: 100%;
  margin-left: 15px;
  float: left;
  min-height: 50px;
  overflow-y: auto;
  /* border: 1px solid salmon; */
}

.norep {
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #7484ab;
}

.intBox {
  width: 269px;
  height: 116px;
  line-height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 15px 15px;
  background-color: #F6F9FF;
  border-radius: 5px;
  box-shadow: inset 0px -3px 3px 0px #C8D4EC;
}

.intBox:hover {
  background-color: #8BA6F0;
  color: white;
}

.intBox>div>p>span:hover {
  color: white;
}

.intBoxCopy {
  width: 269px;
  height: 116px;
  line-height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 15px 15px;
  background-color: #F6F9FF;
  border-radius: 5px;
  box-shadow: inset 0px -3px 3px 0px #C8D4EC;
  background-image: url(../../../assets/image/card_blue.png);
}

.intBoxOne {
  padding-top: 5px;
}

.intOne {
  position: relative;
}

.intOne span:nth-child(2) {
  /* margin-left: 70px; */
  font-size: 14px;
  position: absolute;
  top: 0px;
  right: 10px;
}

.intOne span:nth-child(1) {
  margin-left: 5px;
  font-size: 18px;
}

.commonSpan {
  font-size: 14px;
  color: #7484AB;
}

.intBox:hover .commonSpan .setnowspan,
.intBox:hover span {
  color: white;
}

.setNow {
  text-align: center;
  margin-top: 10px;
}

.setnowspan {
  font-size: 14px;
  cursor: pointer;
  color: blue;
}

.needColor {
  color: #7484AB;
}

:deep(.el-loading-spinner .circular) {
  width: 16px;
}

:deep(.el-loading-spinner .path) {
  stroke: #ffffff;
}
</style>