rsmonitoring-manage/src/views/remote/farmland/details.vue

<template>
  <div class="details">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="jbxx">
        <el-descriptions class="margin-top" :column="1">
          <el-descriptions-item
            v-for="(item, i) in jbxx"
            :label="item.name"
            :key="i"
            >{{ infoObj[item.prop] }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="业务研判" name="ywyp">
        <el-tabs v-model="ywyptab">
          <el-tab-pane label="土地利用现状" name="tdxz">
            <el-row>
              <el-col :span="5">
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
              </el-col>
              <el-col :span="19">
                <el-table :data="dkjbxxList">
                  <el-table-column
                    v-for="(item, i) in tdxzTable"
                    :key="i"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                  />
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="国土空间规划" name="gtkj">
            <el-table :data="dkjbxxList">
              <el-table-column
                v-for="(item, i) in gtkjTable"
                :key="i"
                :label="item.label"
                :prop="item.prop"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- v-for="(li, lindex) in ['耕地', '永久基本农田', '生态保护红线']"
            :label="li"
            :key="lindex"
            name="third" -->
          <el-tab-pane label="耕地" name="gd">
            压盖耕地面积共XX平方米，占图斑面积比为23.24%。
            <el-table :data="dkjbxxList">
              <el-table-column
                v-for="(item, i) in gdTable"
                :key="i"
                :label="item.label"
                :prop="item.prop"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="永久基本农田" name="yjjbnt">
            压盖永久基本农田面积共XX平方米，占图斑面积比为23.24%。
            <el-table :data="dkjbxxList">
              <el-table-column
                v-for="(item, i) in yjjbntTable"
                :key="i"
                :label="item.label"
                :prop="item.prop"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="生态保护红线" name="stbhhx">
            压盖生态保护红线面积共XX平方米，占图斑面积比为23.24%。
            <el-table :data="dkjbxxList">
              <el-table-column
                v-for="(item, i) in stbhTable"
                :key="i"
                :label="item.label"
                :prop="item.prop"
                align="center"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="核查信息" name="hcxx"
        >共3次外业核查
        <el-collapse v-model="hcxxtab" @change="handleChange">
          <el-collapse-item v-for="(hcit, hi) in hcxxList" :key="hi" name="1">
            <template #title>
              核查时间：{{ hcit.time }} 核查人员：{{ hcit.name }}
            </template>
            <div>
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </div>
            <div>
              <Hcxx @updateParent="changeData" :jcbh="11"></Hcxx>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="业务记录" name="ywjl">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  <script setup name="details">
import Hcxx from "./hcxx.vue";
import { listDkdb, adddb } from "@/api/rsmonitoring/dataEntry";
import {
  jbxx,
  tdxzTable,
  gtkjTable,
  gdTable,
  yjjbntTable,
  stbhTable,
} from "./config";

const { proxy } = getCurrentInstance();

const router = useRouter();

const data = reactive({
  activeName: "jbxx",
  ywyptab: "tdxz",
  infoObj: { name: "swed" },
  hcxxList: [{}],
  activities: [
    {
      content: "Custom icon",
      timestamp: "2018-04-12 20:46",
      size: "large",
      type: "primary",
    },
    {
      content: "Custom color",
      timestamp: "2018-04-03 20:46",
      color: "#0bbd87",
    },
    {
      content: "Custom size",
      timestamp: "2018-04-03 20:46",
      size: "large",
    },
    {
      content: "Custom hollow",
      timestamp: "2018-04-03 20:46",
      type: "primary",
      hollow: true,
    },
    {
      content: "Default node",
      timestamp: "2018-04-03 20:46",
    },
  ],
});

const { activeName, ywyptab, infoObj, hcxxList, activities } = toRefs(data);
</script>
<style scoped>
.el-button {
  margin: 0px !important;
  margin-bottom: 12px !important;
}
</style>