FOD/src/views/index.vue

<template>
  <div class="app-container">
    <div class="top">
      <div class="title">探测系统</div>
      <div class="items">
        <div @click="setItemsId(1)" :class="{click:itemsId === 1}" class="item">
          <span>
            主界面
          </span>
        </div>
        <div @click="setItemsId(2)" :class="{click:itemsId === 2}" class="item"><span>
          区域标定
        </span></div>
        <div @click="setItemsId(3)" :class="{click:itemsId === 3}" class="item"><span>
          软件设置
        </span></div>
        <div @click="setItemsId(4)" :class="{click:itemsId === 4}" class="item"><span>
          历史记录
        </span></div>
        <!--        <div class="item">视频接口</div>-->
      </div>
    </div>
    <div class="left">
      <Ruler/>
    </div>
    <div class="right">
      <div v-if="itemsId === 1" class="tabsItem">
        <el-card shadow="always">
          <el-form :inline="true" :model="form1" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form1.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form1.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">固定目标</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <div
              style="width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #01CE69;height: 44px;display: inline-block;padding:0 20px;margin-right: 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>

            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <SuccessFilled color="#fff"/>
            </el-icon>
          </div>
          <div
              style="width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #E8370D;height: 44px;display: inline-block;padding:0 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>

            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <WarningFilled color="#fff"/>
            </el-icon>
          </div>
          <div
              style="margin-top: 12px;width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #01CE69;height: 44px;display: inline-block;padding:0 20px;margin-right: 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>

            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <SuccessFilled color="#fff"/>
            </el-icon>
          </div>
          <div
              style="margin-top: 12px;width:calc( 50% - 50px);position: relative;border-radius: 5px;background-color: #01CE69;height: 44px;display: inline-block;padding:0 20px;">
            <span
                style="position:absolute;top: 50%;transform: translateY(-50%);left:20%;color: #fff;letter-spacing: 2px">雷达通讯状态</span>

            <el-icon size="20px" style="position:absolute;top: 50%;transform: translateY(-50%);right: 40px">
              <SuccessFilled color="#fff"/>
            </el-icon>
          </div>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form2" class="demo-form-inline">
            <el-form-item>
              <el-date-picker
                  v-model="form2.date"
                  type="date"
                  placeholder="选择时间"
                  clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit">停止检测</el-button>
              <el-button type="primary" @click="onSubmit">批量操作</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="tableData1" style="width: 100%">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="coordinate" label="目标坐标" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate v-model="scope.row.rate" disabled/>
              </template>
            </el-table-column>
            <el-table-column
                label="处理状态"
                show-overflow-tooltip>
              <template #default="scope">
                <el-button type="primary" link>已处理</el-button>
                <el-button type="primary" link>不处理</el-button>
                <el-button type="primary" link>未发现</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="coordinate" label="目标坐标" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate v-model="scope.row.rate" disabled/>
              </template>
            </el-table-column>
            <el-table-column
                label="处理状态"
                show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.type === 1">已处理</span>
                <span v-if="scope.row.type === 2">不处理</span>
                <span v-if="scope.row.type === 3">未发现</span>
              </template>
            </el-table-column>
            <el-table-column label="其他操作" width="160">
              <template #default="scope">
                <el-input v-model="scope.row.notes" placeholder="详细信息填写"/>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div v-if="itemsId === 2" class="tabsItem">
        <el-card shadow="always">
          <el-form :inline="true" :model="form5" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="form5.region" style="width: 200px" placeholder="请输入机场名称"/>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form5.region1" style="width: 200px" placeholder="请输入区域名称"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form6" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form6.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form6.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <div v-for="i in list" style="margin-bottom: 12px;">
            <el-input disabled v-model="i.value1" style="width: 200px"/>
            <el-input disabled v-model="i.value2" style="width: 200px;margin-left: 20px;"/>
            <el-button type="primary" @click="onSubmit" style=" margin-left: 20px;">获取</el-button>
          </div>
        </el-card>
        <div style="text-align: center;margin-top: 12px;">
          <el-button type="primary" @click="onSubmit" style=" margin-left: 20px;">提交</el-button>
        </div>
      </div>
      <div v-if="itemsId === 3" class="tabsItem">
      </div>
      <div v-if="itemsId === 4" class="tabsItem">
        <el-card shadow="always">
          <el-date-picker
              style="width: calc(100% - 20px)"
              v-model="date1"
              type="datetimerange"
              range-separator="到"
              start-placeholder="选择开始时间"
              end-placeholder="选择结束时间"
          />
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form3" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form3.region"
                  placeholder="请选择机场名称"
                  style="width: 170px"
                  clearable
              >
                <el-option label="机场1" value="shanghai"/>
                <el-option label="机场2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form3.region1"
                  placeholder="请选择区域名称"
                  style="width: 170px"
                  clearable
              >
                <el-option label="区域1" value="shanghai"/>
                <el-option label="区域2" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="form3.region2"
                  placeholder="请选择固定目标"
                  style="width: 170px"
                  clearable
              >
                <el-option label="目标1" value="shanghai"/>
                <el-option label="目标2" value="beijing"/>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-form :inline="true" :model="form4" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="form4.input1" style="width: 170px" placeholder="请输入检测序号"/>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                  v-model="form4.date1"
                  type="date"
                  style="width: 170px"
                  placeholder="选择检测时间"
                  clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input v-model="form4.input2" style="width: 170px" placeholder="请输入检测人员"/>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 12px;">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column property="coordinate" label="目标坐标" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate v-model="scope.row.rate" disabled/>
              </template>
            </el-table-column>
            <el-table-column
                label="处理状态"
                show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.type === 1">已处理</span>
                <span v-if="scope.row.type === 2">不处理</span>
                <span v-if="scope.row.type === 3">未发现</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div v-if="itemsId === 5" class="tabsItem">
      </div>
    </div>
  </div>
</template>
<script setup>
import Ruler from "@/components/ruler.vue";
import {ref} from "vue";

const list = ref([
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
  {
    value1: '点位1',
    value2: '经纬度：(528,11)'
  },
])
const itemsId = ref(1)
const form1 = ref({})
const form2 = ref({})
const form3 = ref({})
const form4 = ref({})
const form5 = ref({})
const form6 = ref({})
const tableData1 = ref([
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
  {
    coordinate: '528,11',
    rate: 2
  },
])
const tableData2 = ref([
  {
    coordinate: '528,11',
    rate: 2,
    type: 1
  },
])
const date1 = ref([])
const setItemsId = (e) => {
  itemsId.value = e
}
</script>
<style>
.app-container {
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  border: 1px solid #888888;
}

.top {
  width: 100%;
  height: 80px;
  font-size: 24px;
  background-color: #202227;
  position: relative;
}

.items {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 120px;
  height: 100%;
  color: #8C9A9C;
  line-height: 56px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
}

.item span {
  display: inline-block;
  height: 100%;
}

.item.click span, .item:hover span {
  color: #0D52BF;
  border-bottom: 2px solid #0D52BF;
}

.title {
  line-height: 80px;
  color: #fff;
  margin-left: 20px;
  display: inline-block;
  text-align: left;
}

.left {
  display: inline-block;
  height: 1840px;
  width: 380px;
  vertical-align: top;
}

.right {
  display: inline-block;
  height: 1800px;
  width: 660px;
  padding: 20px;
  background-color: #F6F7FB;
}
</style>