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>
          <!-- <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="startNow">立即检测</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 imgs from "../jscom/img";
export default {
  setup(props, { emit }) {
    let { startNow } = toRefs(props);
    let imgBack = ref(require("@/assets/image/card_blue.png"));
    let router = useRouter();
    let sizeNum = ref(1);
    function scdLink() {
      router.push("/home/scdMap");
    }
    function getStart() {
      sizeNum.value = 1;
      emit("hmBack", sizeNum.value);
    }
    function goNetStructPicture() {
      router.push({
        path: "/home/netStructPicture",
        query: {
          id: 4000002,
          name: 'UnitTest_检测任务',
        },
      });
    }
    return {
      imgBack,
      scdLink,
      startNow: getStart,
      sizeNum,
      goNetStructPicture,
    };
  },
};
</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%;
  /* border: 1px solid brown; */
  /* background-image: url(../../../assets/image/card_blue.png); */
}

.intBoxOne {
  padding-top: 5px;
}

.intOne span:nth-child(2) {
  margin-left: 100px;
  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>