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

<template>
  <div>
    <div class="bigBox">
      <!-- 点击开始检测盒子 -->
      <div class="startBox">
        <p class="nowIn">正在检测的任务名称</p>
        <p class="createDate">创建日期:2000-00-00</p>
        <img src="../../../assets/image/start_btn.png" alt="" />
        <p class="nowModel">
          当前模型:<em class="nowEm">110kv线路保护<img 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;">
          <!-- <template> -->
          <div class="intBox" v-for="(item,index) in misList" :style="{ 'background-image': `url(${imgBack})` }">
            <div class="intBoxOne">
              <p class="intOne">
                <span>{{ item.name }}</span>
                <span>详情→</span>
              </p>
              <p>
                <img src="../../../assets/icon/white_flash.png" alt="" />
                <span class="commonSpan">{{ item.station_name }}</span>
              </p>
              <p>
                <img src="../../../assets/icon//white_clock.png" alt="" />
                <span class="commonSpan">{{ item.ut }}</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span class="setnowspan" @click="startNow(item,index)">立即检测</span>
            </div>
          </div>
          <!-- </template> -->
        </div>
      </div>
      <!-- 已完成 -->
      <div class="noReportBox">
        <div>
          <p class="norep">最近检测任务-已完成</p>
        </div>
        <div>
          <!-- <template> -->
          <div class="intBox" :style="{ 'background-image': `url(${imgBack})` }">
            <div class="intBoxOne">
              <p class="intOne">
                <span>检测任务名称</span>
                <span>详情→</span>
              </p>
              <p>
                <img src="../../../assets/icon/white_flash.png" alt="" />
                <span class="commonSpan">某个变电站</span>
              </p>
              <p>
                <img src="../../../assets/icon//white_clock.png" alt="" />
                <span class="commonSpan">2000-00-00</span>
              </p>
            </div>
            <!-- 点击检测 -->
            <div class="setNow">
              <span class="setnowspan" @click="goNetStructPicture">scd可视化</span>
              <span class="setnowspan">|</span>
              <span class="setnowspan">检测结果</span>
            </div>
          </div>
          <!-- </template> -->
        </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";
export default {
  setup(props, { emit }) {
    let imgBack = ref(require("@/assets/image/card_blue.png"));
    let router = useRouter();
    let sizeNum = ref(1);
    let misList = ref([])//任务列表
    function scdLink() {
      router.push("/home/scdMap");
    }
    function startNow(row,num) {
      sizeNum.value = 1;
      emit("hmBack", sizeNum.value,row);
    }
    function goNetStructPicture() {
      router.push({
        path: "/home/netStructPicture",
        query: {
          id: 4000002,
          name: 'UnitTest_检测任务',
        },
      });
    }
    function getList(){
      // 0为待检测
      task.getTask({pageno:1,pagesize:10,state:0}).then(res=>{
        misList.value = res.data
        emit("haveBack",misList.value)
      })
      // 2为完成检测
      task.getTask({pageno:1,pagesize:10,state:2}).then(res=>{
        // misList.value = res.data
        console.log(res,'完成');
      })
      // 1为正在检测
      task.getTask({pageno:1,pagesize:10,state:1}).then(res=>{
        // misList.value = res.data
        console.log(res,'正在');
      })
    }
    onMounted(()=>{
      getList()
    })
    return {
      imgBack,
      scdLink,
      startNow,
      sizeNum,
      goNetStructPicture,
      getList,
      misList,
    };
  },
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

.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-right: 5px;
  /* border: 1px solid brown; */
  /* background-image: url(../../../assets/image/card_blue.png); */
}

.intBoxOne {
  padding-top: 5px;
}

.intOne span:nth-child(2) {
  margin-left: 70px;
  font-size: 14px;
  color: white;
}

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

.commonSpan {
  font-size: 14px;
  color: white;
}

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

.setnowspan {
  color: white;
  font-size: 17px;
  cursor: pointer;
}
</style>