lc_garage/web/src/view/parking/parkingInfo.vue

<template>
  <el-row>
    <el-col :span="4">
      <div class="region">
        <div class="regionTitle">
          <div class="regionTitle-text">
            <el-text style="font-weight: 550">{{ $t.value.park }}</el-text>
          </div>
          <div class="regionTitle-icon">
            <el-icon
              size="large"
              color="#008000"
              @click="openRegion('创建区域', '')"
            >
              <Plus />
            </el-icon>
            <el-icon
              style="padding-left: 5px"
              size="large"
              color="#4682b4"
            >
              <Refresh />
            </el-icon>
          </div>
        </div>
        <el-menu
          default-active="0"
          background-color="#f5f5f5"
        >
          <el-menu-item
            v-for="(item,val) in regionList"
            :key="item.ID"
            :index="val.toString()"
            @click="changeRegion(item)"
          >
            <div style="display: flex;justify-content: space-between; align-items: center;width: 100%">
              <span>{{ item.lot_name }}}</span>
              <div>
                <el-icon @click.stop="openRegion('编辑区域', item)">
                  <edit />
                </el-icon>
                <el-icon @click.stop="deleteRegion(item.ID)">
                  <delete />
                </el-icon>
              </div>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col
      :span="19"
      style="margin-left: 40px"
    >
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :label="$t.value.booth"
          name="detail"
        >
          <el-form inline>
            <el-form-item>
              <el-button
                icon="Plus"
                text
                type="success"
                @click="openPosition('岗亭新增','')"
              >
                {{ $t.value.new }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="Refresh"
                text
                type="primary"
                @click="getGuardBoothList"
              >{{ $t.value.reload }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            size="small"
            :data="positionList"
            height="605"
          >
            <el-table-column
              :label="$t.value.coding"
              align="center"
              width="100"
              prop="booth_code"
            />
            <el-table-column
              :label="$t.value.Name"
              align="center"
              width="250"
              prop="booth_name"
            />
            <el-table-column
              :label="$t.value.IpAddress"
              align="center"
              width="250"
              prop="ip_address"
            />
            <el-table-column
              :label="$t.value.Remarks"
              align="center"
              prop="description"
            />
            <el-table-column
              :label="$t.value.Action"
              align="center"
            >
              <template #default="scope">
                <el-button
                  text
                  type="primary"
                  icon="edit"
                  @click="openPosition('岗亭编辑', scope.row)"
                >
                  {{ $t.value.modify }}
                </el-button>
                <el-button
                  text
                  type="primary"
                  icon="delete"
                  @click="delPosition(scope.row.ID)"
                >
                  {{ $t.value.remove }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;display: flex;justify-content: end">
            <el-pagination
              :current-page="searchGuardBooth.page"
              :page-size="searchGuardBooth.page_size"
              :page-sizes="[10, 30, 50, 100]"
              :total="guardTotal"
              layout="total, sizes, prev, pager, next, jumper"
              style="padding-right: 10px"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="$t.value.access"
          name="people"
        >
          <el-form inline>
            <el-form-item>
              <el-button
                icon="Plus"
                text
                type="success"
                @click="openChannel('通道新增','')"
              >{{ $t.value.new }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="Refresh"
                text
                type="primary"
                @click="getChannelList"
              >{{ $t.value.reload }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            size="small"
            :data="channelList"
            height="605"
          >
            <el-table-column
              :label="$t.value.coding"
              align="center"
              width="100"
              prop="channel_code"
            />
            <el-table-column
              :label="$t.value.Name"
              align="center"
              width="250"
              prop="channel_name"
            />
            <el-table-column
              v-slot="scope"
              :label="$t.value.Direction"
              align="center"
              width="150"
            >
              {{ scope.row.direction === 'in' ? '进' : '出' }}
            </el-table-column>
            <el-table-column
              :label="$t.value.Allow"
              align="center"
              width="200"
            >
              <template #default="scope">
                <el-button
                  plain
                  :type="scope.row.allow_temporary ? 'success' : 'danger'"
                >
                  {{ scope.row.allow_temporary ? '允许' : '不允许' }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t.value.booth + 'Id'"
              align="center"
              prop="booth_id"
            />
            <el-table-column
              v-slot="scope"
              :label="$t.value.Action"
              align="center"
            >
              <el-button
                type="primary"
                icon="edit"
                text
                @click="openChannel('通道编辑', scope.row)"
              >{{ $t.value.modify }}
              </el-button>
              <el-button
                type="primary"
                icon="delete"
                text
                @click="removeChannel(scope.row.ID)"
              >{{ $t.value.remove }}
              </el-button>
            </el-table-column>
          </el-table>
          <div style="width: 100%;display: flex;justify-content: end">
            <el-pagination
              :current-page="queryChannelData.page"
              :page-size="queryChannelData.page_size"
              :page-sizes="[10, 30, 50, 100]"
              :total="channelTotal"
              layout="total, sizes, prev, pager, next, jumper"
              style="padding-right: 10px"
              @current-change="handleCurrentChannel"
              @size-change="handleSizeChannel"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="$t.value.device"
          name="department"
        >
          <el-form inline>
            <el-form-item>
              <el-button
                icon="Plus"
                text
                type="success"
                @click="openDevice('新增设备','')"
              >{{ $t.value.new }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="Refresh"
                text
                type="primary"
                @click="getDeviceList"
              >{{ $t.value.reload }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            size="small"
            :data="deviceList"
            height="605"
          >
            <el-table-column
              :label="$t.value.coding"
              align="center"
              width="100"
              prop="device_code"
            />
            <el-table-column
              :label="$t.value.Name"
              align="center"
              width="250"
              prop="device_name"
            />
            <el-table-column
              :label="$t.value.Type"
              align="center"
              width="150"
              prop="connect_type"
            />
            <el-table-column
              :label="$t.value.IpAddress"
              align="center"
              width="200"
              prop="ip_address"
            />
            <el-table-column
              :label="$t.value.Port"
              align="center"
              width="150"
              prop="port"
            />
            <el-table-column
              :label="$t.value.Enable"
              align="center"
              width="150"
            >
              <template #default="scope">
                <el-button
                  :type="scope.row.is_active ? 'success' : 'danger'"
                  plain
                >
                  {{ scope.row.is_active ? '启用' : '不启用' }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t.value.Action"
              align="center"
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  icon="Link"
                  text
                  @click="connectDevice(scope.row)"
                >{{ $t.value.Connect }}
                </el-button>
                <el-button
                  type="primary"
                  icon="edit"
                  text
                  @click="openDevice('编辑设备', scope.row)"
                >{{ $t.value.modify }}
                </el-button>
                <el-button
                  type="primary"
                  icon="delete"
                  text
                  @click="removeDevice(scope.row.ID)"
                >{{ $t.value.remove }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;display: flex;justify-content: end">
            <el-pagination
              :current-page="searchDeviceData.page"
              :page-size="searchDeviceData.page_size"
              :page-sizes="[10, 30, 50, 100]"
              :total="deviceTotal"
              layout="total, sizes, prev, pager, next, jumper"
              style="padding-right: 10px"
              @current-change="handleCurrentDevice"
              @size-change="handleSizeDevice"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-dialog
      v-model="positionShow"
      :title="positionTitle"
      width="600"
    >
      <el-form label-width="120">
        <el-form-item :label="$t.value.park +'：'">
          <el-select
            v-model="positionRegionName"
            placeholder="请选择停车区域"
            @change="changePositionRegion"
          >
            <el-option
              v-for="item in regionList"
              :key="item.ID"
              :value="item.lot_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t.value.BoothCode + '：'">
          <el-input v-model="positionData.booth_code" />
        </el-form-item>
        <el-form-item :label="$t.value.BoothName + '：'">
          <el-input v-model="positionData.booth_name" />
        </el-form-item>
        <el-form-item :label="$t.value.IpAddress +'：'">
          <el-input v-model="positionData.ip_address" />
        </el-form-item>
        <el-form-item :label="$t.value.Remarks + '：'">
          <el-input
            v-model="positionData.description"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="positionShow = false">
            {{ $t.value.Cancel }}
          </el-button>
          <el-button
            type="primary"
            @click="addPosition"
          >
            {{ $t.value.Confirm }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="channelShow"
      :title="channelTitle"
      width="600"
    >
      <el-form>
        <el-form-item :label="$t.value.Passage_Booth + '：'">
          <el-select
            v-model="channelPositionName"
            @change="changeChannelPosition"
          >
            <el-option
              v-for="item in positionList"
              :key="item.ID"
              :value="item.booth_name"
              :label="item.booth_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t.value.Passage_Code + '：'">
          <el-input v-model="channelData.channel_code" />
        </el-form-item>
        <el-form-item :label="$t.value.Passage_Name + '：'">
          <el-input v-model="channelData.channel_name" />
        </el-form-item>
        <el-form-item :label="$t.value.Entry_Exit + '：'">
          <el-radio-group
            v-model="channelData.direction"
            size="large"
            fill="#409eff"
          >
            <el-radio-button
              :label="$t.value.advance"
              value="in"
            />
            <el-radio-button
              :label="$t.value.out"
              value="out"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t.value.Allow + '：'">
          <el-radio-group
            v-model="channelData.allow_temporary"
            size="large"
            fill="#409eff"
          >
            <el-radio-button
              :label="$t.value.yes"
              :value="false"
            />
            <el-radio-button
              :label="$t.value.no"
              :value="true"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t.value.Remarks + '：'">
          <el-input
            v-model="channelData.description"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="channelShow = false">
            {{ $t.value.Cancel }}
          </el-button>
          <el-button
            type="primary"
            @click="channelOperation"
          >
            {{ $t.value.Confirm }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="deviceShow"
      :title="deviceTitle"
      width="600"
    >
      <el-form label-width="150">
        <el-form-item :label="$t.value.Device_Channel + '：'">
          <el-select
            v-model="deviceChannelName"
            @change="changeDeviceChannel"
          >
            <el-option
              v-for="item in channelList"
              :key="item.ID"
              :value="item.channel_name"
              :label="item.channel_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t.value.Device_Name + '：'">
          <el-input v-model="deviceData.device_name" />
        </el-form-item>
        <el-form-item :label="$t.value.Device_Code + '：'">
          <el-input v-model="deviceData.device_code" />
        </el-form-item>
        <el-form-item :label="$t.value.Connection_Mode + '：'">
          <el-select v-model="deviceData.connect_type">
            <el-option
              label="tcp"
              value="tcp"
            />
            <el-option
              label="serial"
              value="serial"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="deviceData.connect_type === 'tcp'"
          :label="$t.value.IpAddress + '：'"
        >
          <el-input v-model="deviceData.ip_address" />
        </el-form-item>
        <el-form-item
          v-show="deviceData.connect_type === 'tcp'"
          :label="$t.value.Port + '：'"
        >
          <el-input
            v-model="deviceData.port"
            type="number"
          />
        </el-form-item>
        <el-form-item
          v-show="deviceData.connect_type === 'serial'"
          label="串口名称："
        >
          <el-input v-model="deviceData.com_port" />
        </el-form-item>
        <el-form-item
          v-show="deviceData.connect_type === 'serial'"
          label="串口波特率："
        >
          <el-input
            v-model="deviceData.baud_rate"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.Enable + '：'">
          <el-radio-group
            v-model="deviceData.is_active"
            size="large"
            fill="#409eff"
          >
            <el-radio-button
              :label="$t.value.no"
              :value="false"
            />
            <el-radio-button
              :label="$t.value.yes"
              :value="true"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t.value.Remarks + '：'">
          <el-input
            v-model="deviceData.description"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceShow = false">{{ $t.value.Cancel }}</el-button>
          <el-button
            type="primary"
            @click="deviceOperation"
          >
            {{ $t.value.Confirm }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="regionShow"
      :title="regionTitle"
      width="500"
    >
      <el-form label-width="90">
        <el-form-item label="区域编码：">
          <el-input v-model="regionData.lot_code" />
        </el-form-item>
        <el-form-item label="区域名称：">
          <el-input v-model="regionData.lot_name" />
        </el-form-item>
        <el-form-item label="区域容量：">
          <el-input
            v-model="regionData.capacity"
            type="number"
          />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            v-model="regionData.description"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="regionShow = false">{{ $t.value.Cancel }}</el-button>
          <el-button
            type="primary"
            @click="regionOperation"
          >
            {{ $t.value.Confirm }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script setup>
// import sign from '@/assets/sign.png'
import { ref, reactive, onMounted } from 'vue'
import {
  addGuardBooth,
  obtainGuardBoothList,
  editGuardBooth,
  deleteGuardBooth,
} from '@/api/guardBooth'
import {
  addChannel,
  editChannel,
  obtainChannelList,
  deleteChannel
} from '@/api/channel'
import { addDevice, obtainDeviceList, editDevice, deleteDevice, joinDevice } from '@/api/device'
import { addPullOver, editPullOver, obtainPullOverList, removePullOver } from '@/api/pullOver'
import { ElMessage, ElMessageBox } from 'element-plus'
import { t } from '@/lang/index.js'

const activeName = ref('detail')
const handleClick = () => {
}
const positionShow = ref(false)

const positionTitle = ref('岗亭新增')
// 岗亭数据.......................................
const positionRegionName = ref('')
const positionData = reactive({
  id: 0,
  booth_code: '',
  booth_name: '',
  ip_address: '',
  description: '',
  parking_lot_id: 0
})
const guardTotal = ref(0)

const positionList = reactive([])
const addPosition = () => {
  if (positionTitle.value === '岗亭新增') {
    if (positionData.parking_lot_id === 0) {
      ElMessage.error('请选择停车区域')
      return
    }
    if (positionData.booth_name === '' || positionData.booth_code === '' || positionData.ip_address === '') {
      ElMessage.error('请将除备注以外的信息填写完整')
      return
    }
    addGuardBooth(positionData).then(res => {
      if (res.code === 0) {
        ElMessage.success('添加成功')
        positionShow.value = false
        getGuardBoothList()
      }
    })
  } else {
    if (positionData.parking_lot_id === 0) {
      ElMessage.error('请选择停车区域')
      return
    }
    if (positionData.booth_name === '' || positionData.booth_code === '' || positionData.ip_address === '') {
      ElMessage.error('请将除备注以外的信息填写完整')
      return
    }
    editGuardBooth(positionData).then(res => {
      if (res.code === 0) {
        ElMessage.success('更新成功')
        positionShow.value = false
        getGuardBoothList()
      }
    })
  }
}

const changePositionRegion = (val) => {
  regionList.forEach(item => {
    if (item.lot_name === val) {
      positionData.parking_lot_id = item.ID
    }
  })
}

const openPosition = (head, data) => {
  positionTitle.value = head
  positionShow.value = true
  if (head === '岗亭编辑') {
    positionData.id = data.ID
    positionData.booth_code = data.booth_code
    positionData.booth_name = data.booth_name
    positionData.ip_address = data.ip_address
    positionData.description = data.description
    positionData.parking_lot_id = data.parking_lot_id
    regionList.forEach(item => {
      if (item.ID === data.parking_lot_id) {
        positionRegionName.value = item.lot_name
      }
    })
  } else {
    positionData.ip_address = ''
    positionData.description = ''
    positionData.booth_code = ''
    positionData.booth_name = ''
    positionData.parking_lot_id = 0
    positionRegionName.value = ''
  }
}
const searchGuardBooth = reactive({
  parking_lot_id: 0,
  booth_code: '',
  booth_name: '',
  page: 1,
  page_size: 10
})
const handleCurrentChange = (val) => {
  searchGuardBooth.page = val
  getGuardBoothList()
}

const handleSizeChange = (val) => {
  searchGuardBooth.page_size = val
  searchGuardBooth.page = 1
  getGuardBoothList()
}
const getGuardBoothList = () => {
  obtainGuardBoothList(searchGuardBooth).then(res => {
    if (res.code === 0) {
      positionList.length = 0
      positionList.push(...res.data.list)
      guardTotal.value = res.data.total
    }
  })
}

const delPosition = (id) => {
  ElMessageBox.confirm(
    '确定要删除该岗亭吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteGuardBooth(id).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getGuardBoothList()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 通道管理...................................................
// 通道数据
const channelShow = ref(false)
const deviceTitle = ref('')
const queryChannelData = reactive({
  parking_lot_id: 0,
  channel_code: '',
  channel_name: '',
  direction: '',
  page: 1,
  page_size: 10,
  allow_temporary: false
})
const channelPositionName = ref('')
const channelData = reactive({
  id: 0,
  channel_code: '',
  channel_name: '',
  direction: 'in',
  allow_temporary: false,
  description: '',
  booth_id: 0,
})

const channelTitle = ref('通道新增')

const channelList = reactive([])

const changeChannelPosition = (val) => {
  positionList.forEach(item => {
    if (item.booth_name === val) {
      channelData.booth_id = item.ID
    }
  })
}
const channelTotal = ref(0)
const openChannel = (head, data) => {
  channelTitle.value = head
  channelShow.value = true
  if (head === '通道编辑') {
    channelData.id = data.ID
    channelData.channel_code = data.channel_code
    channelData.channel_name = data.channel_name
    channelData.allow_temporary = data.allow_temporary
    channelData.direction = data.direction
    channelData.description = data.description
    channelData.booth_id = data.booth_id
    channelList.forEach(item => {
      if (item.ID === data.booth_id) {
        channelPositionName.value = item.booth_name
      }
    })
  } else {
    channelData.channel_code = ''
    channelData.channel_name = ''
    channelData.allow_temporary = false
    channelData.direction = 'in'
    channelData.description = ''
    channelData.booth_id = 0
    channelPositionName.value = ''
  }
}
const channelOperation = () => {
  if (channelTitle.value === '通道新增') {
    if (channelData.booth_id === 0) {
      ElMessage.error('请选择岗亭')
      return
    }
    if (channelData.channel_name === '' || channelData.channel_code === '') {
      ElMessage.error('请将除备注以外的信息填写完整')
      return
    }
    addChannel(channelData).then(res => {
      console.log('添加通道操作', res.data)
      if (res.code === 0) {
        ElMessage.success('添加成功')
        channelShow.value = false
        getChannelList()
      }
    })
  } else {
    if (channelData.booth_id === 0) {
      ElMessage.error('请选择岗亭')
      return
    }
    if (channelData.channel_name === '' || channelData.channel_code === '') {
      ElMessage.error('请将除备注以外的信息填写完整')
      return
    }
    editChannel(channelData).then(res => {
      if (res.code === 0) {
        ElMessage.success('更新成功')
        channelShow.value = false
        getChannelList()
      }
    })
  }
}
const handleCurrentChannel = (val) => {
  queryChannelData.page = val
  getChannelList()
}

const handleSizeChannel = (val) => {
  queryChannelData.page_size = val
  queryChannelData.page = 1
  getChannelList()
}
const getChannelList = () => {
  obtainChannelList(queryChannelData).then(res => {
    if (res.code === 0) {
      console.log(res.data)
      channelList.length = 0
      channelList.push(...res.data.list)
      channelTotal.value = res.data.total
    }
  })
}

const removeChannel = (id) => {
  ElMessageBox.confirm(
    t.value.deletePassageTip,
    t.value.tip,
    {
      confirmButtonText: t.value.Confirm,
      cancelButtonText: t.value.Cancel,
      type: 'warning',
    }
  )
    .then(() => {
      deleteChannel(id).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: t.value.deleteSuccess,
          })
          getChannelList()
        } else {
          ElMessage({
            type: 'error',
            message: t.value.deleteFailed,
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: t.value.cancelDelete,
      })
    })
}

// 设备管理...............................................
const deviceData = reactive({
  id: 0,
  parking_lot_id: 0,
  device_code: '',
  device_name: '',
  baud_rate: 0,
  ip_address: '',
  port: 0,
  com_port: '',
  description: '',
  connect_type: '',
  is_active: false,
  channel_id: 0
})

const deviceChannelName = ref('')

const deviceShow = ref(false)

const openDevice = (head, data) => {
  deviceTitle.value = head
  deviceShow.value = true
  if (head === '编辑设备') {
    deviceData.id = data.ID
    deviceData.device_code = data.device_code
    deviceData.device_name = data.device_name
    deviceData.baud_rate = data.baud_rate
    deviceData.ip_address = data.ip_address
    deviceData.port = data.port
    deviceData.com_port = data.com_port
    deviceData.description = data.description
    deviceData.connect_type = data.connect_type
    deviceData.channel_id = data.channel_id
    deviceData.is_active = data.is_active
    channelList.forEach(item => {
      if (item.ID === data.channel_id) {
        deviceChannelName.value = item.channel_name
      }
    })
  } else {
    deviceData.device_code = ''
    deviceData.device_name = ''
    deviceData.baud_rate = 0
    deviceData.ip_address = ''
    deviceData.port = 0
    deviceData.com_port = ''
    deviceData.description = ''
    deviceData.connect_type = 'tcp'
    deviceData.channel_id = 0
    deviceData.is_active = false
    deviceChannelName.value = ''
  }
}

const deviceOperation = async() => {
  deviceData.baud_rate = Number(deviceData.baud_rate)
  deviceData.port = Number(deviceData.port)
  if (deviceTitle.value === '新增设备') {
    await addDevice(deviceData).then(res => {
      if (res.code === 0) {
        ElMessage.success('添加成功')
        deviceShow.value = false
        getDeviceList()
      } else {
        ElMessage.error(res.data.msg)
      }
    })
  } else {
    await editDevice(deviceData).then(res => {
      if (res.code === 0) {
        ElMessage.success('编辑成功')
        deviceShow.value = false
        getDeviceList()
      } else {
        ElMessage.error('编辑失败')
      }
    })
  }
}

const deviceList = reactive([])

const changeDeviceChannel = (val) => {
  channelList.forEach(item => {
    if (item.channel_name === val) {
      deviceData.channel_id = item.ID
    }
  })
}

const deviceTotal = ref(0)
const handleCurrentDevice = (val) => {
  searchDeviceData.page = val
  getDeviceList()
}

const handleSizeDevice = (val) => {
  searchDeviceData.page_size = val
  searchDeviceData.page = 1
  getDeviceList()
}

const searchDeviceData = reactive({
  parking_lot_id: 0,
  device_code: '',
  device_type: '',
  device_name: '',
  status: '',
  page: 1,
  page_size: 10
})
const getDeviceList = async() => {
  await obtainDeviceList(searchDeviceData).then(res => {
    if (res.code === 0) {
      deviceList.length = 0
      if (res.data.list !== null) {
        deviceList.push(...res.data.list)
        deviceTotal.value = res.data.total
      }
    }
  })
}

const removeDevice = async(id) => {
  ElMessageBox.confirm(
    t.value.deleteDeviceTip,
    t.value.tip,
    {
      confirmButtonText: t.value.Confirm,
      cancelButtonText: t.value.Cancel,
      type: 'warning',
    }
  )
    .then(() => {
      deleteDevice(id).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getDeviceList()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const connectDevice = async(data) => {
  await joinDevice(data.ID).then(res => {
    if (res.code === 0) {
      ElMessage.success('连接成功')
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

// 停车区域....................................
const regionList = reactive([])
// 查询停车区域
const getRegionList = async() => {
  await obtainPullOverList().then(res => {
    if (res.code === 0) {
      regionList.length = 0
      regionList.push(...res.data.list)
    }
  })
}
// 停车区域操作
const regionData = reactive({
  id: 0,
  lot_code: '',
  lot_name: '',
  capacity: 0,
  description: ''
})
const regionShow = ref(false)
const regionTitle = ref('创建区域')
const openRegion = (head, data) => {
  regionTitle.value = head
  regionShow.value = true
  if (head === '编辑区域') {
    regionData.id = data.ID
    regionData.lot_code = data.lot_code
    regionData.lot_name = data.lot_name
    regionData.capacity = data.capacity
    regionData.description = data.description
  } else {
    regionData.lot_code = ''
    regionData.lot_name = ''
    regionData.capacity = 0
    regionData.description = ''
  }
}
const regionOperation = async() => {
  if (regionTitle.value === '创建区域') {
    regionData.capacity = Number(regionData.capacity)
    await addPullOver(regionData).then(res => {
      if (res.code === 0) {
        getRegionList()
        ElMessage.success('创建成功')
        regionShow.value = false
      }
    })
  } else {
    await editPullOver(regionData).then(res => {
      if (res.code === 0) {
        getRegionList()
        ElMessage.success('修改成功')
        regionShow.value = false
      }
    })
  }
}

const deleteRegion = (id) => {
  ElMessageBox.confirm(
    '确定要删除该停车区域吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      removePullOver(id).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getRegionList()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const changeRegion = async(item) => {
  searchGuardBooth.parking_lot_id = item.ID
  queryChannelData.parking_lot_id = item.ID
  searchDeviceData.parking_lot_id = item.ID
  await getGuardBoothList()
  await getChannelList()
  await getDeviceList()
}
onMounted(async() => {
  await getRegionList()
  if (regionList.length !== 0) {
    searchGuardBooth.parking_lot_id = regionList[0].ID
    queryChannelData.parking_lot_id = regionList[0].ID
    searchDeviceData.parking_lot_id = regionList[0].ID
    await getGuardBoothList()
    await getChannelList()
    await getDeviceList()
  }
})
</script>

<style scoped lang="scss">
.region {
  width: 100%;
  height: 800px;
  background-color: #f5f5f5;

  .regionTitle {
    width: 100%;
    height: 40px;
    display: flex;
    border-bottom: 1px solid;
    background-color: #b9b8b8;

    .regionTitle-text {
      width: 70%;
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }

    .regionTitle-icon {
      width: 20%;
      height: 40px;
      display: flex;
      align-items: center;
    }
  }
}

.basicInformation {
  height: 40px;
  background-color: #f8fafd;
  display: flex;
}

.operation {
  width: 100%;
  height: 50px;
  margin-top: 5px;
}
</style>