JG-CLIENT-TEMP/src/views/pro-steps/components/zhiyin.vue

<template>
  <div class="body1" id="body1" :key="pageKey">
    <div class="left">
      <div style="margin-bottom: 20px">
        <el-button type="info" @click="reset"> 重置页面 </el-button>
      </div>

      <el-table
        :data="tableData1"
        style="margin-bottom: 20px"
        class="tableView1"
        border
      >
        <el-table-column prop="a" label="序号" align="center" />
        <el-table-column prop="b" label="起始端" align="center" />
        <el-table-column prop="c" label="连接端" align="center" />
        <el-table-column prop="d" label="标识" align="center" />
        <el-table-column prop="e" label="定义" align="center" />
        <el-table-column prop="f" label="线号" align="center" />
        <el-table-column prop="g" label="线色" align="center" />
        <el-table-column
          label="连接状态"
          width="120"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="success"
              @click="scope.row.status = true"
              :disabled="scope.row.status"
            >
              完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData2"
        style="width: 100%"
        v-if="status1"
        border
        class="tableView1"
      >
        <el-table-column prop="a" label="序号" align="center" />
        <el-table-column prop="b" label="起始端" align="center" />
        <el-table-column prop="c" label="连接端" align="center" />
        <el-table-column prop="d" label="标识" align="center" />
        <el-table-column prop="e" label="定义" align="center" />
        <el-table-column prop="f" label="线号" align="center" />
        <el-table-column prop="g" label="线色" align="center" />
        <el-table-column
          label="连接状态"
          width="120"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="success"
              @click="scope.row.status = true"
              :disabled="scope.row.status"
            >
              完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <el-image
        :src="url"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcList"
        :initial-index="initialIndex"
        fit="contain"
      />
    </div>
  </div>
</template>

<script setup>
const pageKey = ref(false);
const reset = () => {
  tableData1.value[0].status = false;
  tableData1.value[1].status = false;
  tableData2.value[0].status = false;
  tableData2.value[1].status = false;
  tableData2.value[2].status = false;
  status1.value = false;
  status2.value = false;
  setTimeout(() => {
    url.value = "/images/bz1.png";
    initialIndex.value = 0;
  }, 0);
};
const status1 = ref(false);
const status2 = ref(false);
const initialIndex = ref(0);
const tableData1 = ref([
  {
    a: "1",
    b: "X2-5",
    c: "X7-1",
    d: "-",
    e: "-",
    f: "L05",
    g: "蓝",
    status: false,
  },
  {
    a: "2",
    b: "X2-15",
    c: "X7-2",
    d: "-",
    e: "-",
    f: "L15",
    g: "蓝",
    status: false,
  },
]);
const tableData2 = ref([
  {
    a: "3",
    b: "X2-1",
    c: "X4-6",
    d: "-",
    e: "-",
    f: "L01",
    g: "黑",
    status: false,
  },
  {
    a: "4",
    b: "X2-9",
    c: "X4-7",
    d: "-",
    e: "-",
    f: "L09",
    g: "黑",
    status: false,
  },
  {
    a: "5",
    b: "X2-10",
    c: "X4-8",
    d: "-",
    e: "-",
    f: "L10",
    g: "黑",
    status: false,
  },
]);
const url = ref("/images/bz1.png");
const srcList = ref([
  "/images/bz1.png",
  "/images/bz2.png",
  "/images/bz3.png",
  "/images/bz4.png",
]);

watch(
  tableData1.value,
  () => {
    if (
      tableData1.value[0].status == true &&
      tableData1.value[1].status == true
    ) {
      status1.value = true;
    }
    if (status1.value == false) {
      url.value = "/images/bz1.png";
      initialIndex.value = 0;
    } else {
      url.value = "/images/bz3.png";
      initialIndex.value = 2;
    }
  },
  { deep: true }
);
watch(
  tableData2.value,
  () => {
    if (
      tableData2.value[0].status == true &&
      tableData2.value[1].status == true &&
      tableData2.value[2].status == true
    ) {
      status2.value = true;
    }
    if (status2.value == false) {
      url.value = "/images/bz3.png";
      initialIndex.value = 2;
    } else {
      url.value = "/images/bz4.png";
      initialIndex.value = 3;
    }
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.body1 {
  width: calc(100vw - 340px);
  height: calc(100vh - 261px);
  display: flex;
  .left {
    padding-right: 20px;
    flex-shrink: 0;
    width: 50%;
    .tableView1 {
      border-radius: 16px;
    }
  }
  .right {
    width: 50%;
    flex-shrink: 0;
  }
}
</style>