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

<template>
  <div>
    <div class="bigBox">
      <!-- 点击开始检测盒子 -->
      <div class="startBox">
        <p class="nowIn">{{ nowRunList.name ? nowRunList.name : "暂无待检测任务" }}</p>
        <p class="createDate">创建日期:{{ nowRunList.ct ? nowRunList.ct : "暂无时间" }}</p>
        <img src="../../../assets/image/start_btn.png" alt="" style="cursor: pointer;" @click="startNow(nowRunList)" />
        <p class="nowModel">
          当前模型:<em class="nowEm">{{ nowRunList.voltage_name ? nowRunList.voltage_name + '线路保护' : "暂无数据" }}<img
              v-if="nowRunList.voltage_name" src="../../../assets/icon/pencil.png" alt="" /></em>
        </p>
      </div>
      <!-- 待检测任务 -->
      <div class="noReportBox">
        <div>
          <p class="norep">待检测任务</p>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;">
          <div :class="setImg(nowRunList)" v-if="nowRunList.name">
            <div class="intBoxOne">
              <p class="intOne">
                <span style="font-size: 18px;color: white;">{{ nowRunList.name }}</span>
                <span style="font-size: 12px;" @click="editItem(nowRunList)">编辑</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_flash.png" alt="" />
                <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.station_name }}</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_clock.png" alt="" />
                <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.ct }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span style="font-size: 16px;color:white" class="setnowspan" @click="startNow(nowRunList)">检测中<em
                  v-loading="emLoading"></em></span>
            </div>
          </div>
          <div class="intBox" v-for="(item, index) in misList" :style="setImg(item, index)">
            <div class="intBoxOne">
              <p class="intOne">
                <span style="font-size: 18px;color: #1A2447;">{{ item.name }}</span>
                <span style="font-size: 12px;cursor: pointer;" @click="editItem(item, index)">编辑</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/flash_darkBlue.png" alt="" />
                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/clock_darkBlue.png" alt="" />
                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.ut }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span style="font-size: 16px;color:blue" class="setnowspan" @click="startNow(item, index)">立即检测</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 已完成 -->
      <div class="noReportBox">
        <div>
          <p class="norep">最近检测任务-已完成</p>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;">
          <div class="intBox" v-for="(item, index) in passList">
            <div class="intBoxOne">
              <p class="intOne">
                <span>{{ item.name }}</span>
                <span>详情→</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/flash_darkBlue.png" alt="" />
                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p>
                <img style="width: 15px;height: 15px;" src="../../../assets/icon/clock_darkBlue.png" alt="" />
                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.ct }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span style="color: #255CE7;" class="setnowspan" @click="goNetStructPicture(item)">scd可视化</span>
              <span style="margin: 0 10px;color: #7484AB;" class="setnowspan">|</span>
              <span style="color: #255CE7;" class="setnowspan">检测结果</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed, toRefs } 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 {
  setup(props, { emit }) {
    let imgBack = ref("@/assets/image/card_blue.png");
    let router = useRouter();
    let sizeNum = ref(1);
    let misList = ref([])//待检测任务列表
    let nowRunList = ref({})//正在检测任务列表
    let passList = ref([])//已完成检测任务列表
    let emLoading = ref(true)
    function scdLink() {
      router.push("/home/scdMap");
    }
    function startNow(row, num) {
      if (row.name == null || row.name == '' || row.name == undefined) {
        ElMessage({
          message: "暂无检测任务",
          type: "info"
        })
      } else {
        sizeNum.value = 1;
        emit("hmBack", sizeNum.value, row);
      }
    }
    function goNetStructPicture(row) {
      console.log(row, 'push');
      router.push({
        path: "/home/netStructPicture",
        query: {
          id: row.scd_id,
          name: row.name,
          station:row.station_id,
        },
      });
    }
    function getList() {
      const loading = ElLoading.service({
        lock: true,
        text: '正在查询数据',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // 0为待检测
      task.getTask({ pageno: 1, pagesize: 10, state: 0 }).then(res => {
        if (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 = sortedList;
          emit("haveBack", misList.value);
          loading.close()
        }
      })
      // 2为完成检测
      task.getTask({ pageno: 1, pagesize: 10, state: 2 }).then(res => {
        if (res.data == null) {
          passList.value = []
          return
        } else {
          passList.value = res.data
        }
      })
      // 1为正在检测
      task.getTask({ pageno: 1, pagesize: 10, state: 1 }).then(res => {
        if (res.data == null) {
          nowRunList.value = {}
          return
        } else {
          nowRunList.value = res.data[0]
        }
      })
    }
    function editItem(row) {
      emit("haveInCreate", 1, row, 2)
    }
    function setImg(row, num) {
      if (row.state == "1") {
        return "intBoxCopy"
      } else {
        return "intBox"
      }
    }
    onMounted(() => {
      getList()
    })
    return {
      imgBack,
      scdLink,
      startNow,
      sizeNum,
      goNetStructPicture,
      getList,
      misList,//待检测任务列表
      editItem,
      nowRunList,//正在检测任务列表
      setImg,
      passList,//已完成列表
      emLoading,
    };
  },
  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: 320px;
  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;
  /* line-height: 22px; */
}

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

.nowEm {
  font-style: normal;
  font-size: 18px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #255ce7;
  line-height: 24px;
  border-bottom: 1px solid #255ce7;
}

.noReportBox {
  width: 99%;
  height: 100%;
  margin-left: 8px;
  /* 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;
  /* border: 1px solid #255ce7; */
  background-color: #F6F9FF;
  border-radius: 5px;
  box-shadow: inset 0px -3px 3px 0px #C8D4EC;
  /* border: 1px solid brown; */
  /* background-image: url(../../../assets/image/card_blue.png); */
}

.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;
}

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

.setnowspan {
  font-size: 17px;
  cursor: pointer;
}

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

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