From b1aae6175bc74fbd87b0831e7e32cb05f1302843 Mon Sep 17 00:00:00 2001
From: zhangzhuliang <577851561@qq.com>
Date: Thu, 11 Aug 2022 14:22:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E5=AE=A4=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/activiti/RoomExamineAdmin.vue     |  330 +++++
 .../views/modules/myAgent/ConferenceRoom.vue  |  381 ++++++
 front/src/api/home.js                         |   33 +
 front/src/assets/home/jingao.png              |  Bin 0 -> 705 bytes
 front/src/views/home/DetailsPageconetent.vue  |   12 +-
 front/src/views/home/infrastructurePage.vue   | 1209 ++++++++++++++---
 6 files changed, 1772 insertions(+), 193 deletions(-)
 create mode 100644 back/src/views/modules/activiti/RoomExamineAdmin.vue
 create mode 100644 back/src/views/modules/myAgent/ConferenceRoom.vue
 create mode 100644 front/src/assets/home/jingao.png

diff --git a/back/src/views/modules/activiti/RoomExamineAdmin.vue b/back/src/views/modules/activiti/RoomExamineAdmin.vue
new file mode 100644
index 00000000..ac6de099
--- /dev/null
+++ b/back/src/views/modules/activiti/RoomExamineAdmin.vue
@@ -0,0 +1,330 @@
+<template>
+  <el-card shadow="never" class="roomBox">
+    <div class="roomExamineSearch">
+      <el-input
+        v-model="roomName"
+        style="width: 160px"
+        placeholder="请输入会议室名称"
+      ></el-input>
+      <el-select
+        v-model="value"
+        style="width: 160px"
+        clearable
+        placeholder="请选择审核状态"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-button type="primary" @click="searchData">查询</el-button>
+    </div>
+    <div>
+      <el-table border style="width: 100%" :data="tableData">
+        <el-table-column
+          label="申请人"
+          prop="name"
+          header-align="center"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="申请部门"
+          prop="dept"
+          header-align="center"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="申请会议室"
+          prop="roomName"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="申请时段"
+          prop="bookDate"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="申请状态"
+          prop="state"
+          header-align="center"
+          align="center"
+          :formatter="formatter"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="taskDetails(scope.row, scope.row.state)"
+              >{{ scope.row.state == '1' ? '处理' : '详情' }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 50]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <el-dialog
+      :title="lookData.roomName"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <div class="modalResult" style="margin-bottom: 20px">处理结果</div>
+      <div
+        style="
+          width: 100%;
+          height: 0.01rem;
+          border-top: 1px solid #ccc;
+          transform: scaleY(0.5);
+        "
+      ></div>
+      <div
+        class="modalExamine"
+        style="display: flex; flex-direction: column; margin-top: 20px"
+      >
+        <span style="margin-bottom: 20px">
+          审核结果：{{ lookData.state === '2' ? '通过' : '不通过' }}
+        </span>
+        <span style="width: 90%; margin-bottom: 20px">
+          审核意见：{{ lookData.auditViem }}
+        </span>
+      </div>
+      <div class="modalYuyue" style="margin-bottom: 20px">预约信息</div>
+      <div
+        style="
+          width: 100%;
+          height: 0.01rem;
+          border-top: 1px solid #ccc;
+          transform: scaleY(0.5);
+        "
+      ></div>
+      <div class="modalTime" style="margin-bottom: 20px">
+        <div style="margin: 20px 0 20px 0">
+          预约日期：{{ lookData.bookDate }}
+        </div>
+        <div>预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</div>
+        <div
+          class="modalContent"
+          style="
+            width: 85%;
+            display: flex;
+            justify-content: space-between;
+            margin: 15px 0 15px 0;
+          "
+        >
+          <span>预约人：{{ lookData.name }}</span>
+          <span>联系方式：{{ lookData.phone }}</span>
+          <span>预约部门：{{ lookData.dept }}</span>
+        </div>
+        <div style="width: 800px; margin-bottom: 30px">
+          使用事项：{{ lookData.matter }}
+        </div>
+      </div>
+      <div>
+        <div style="display: flex; align-items: center">
+          <span>附件：</span>
+          <el-button
+            v-show="file != ''"
+            size="mini"
+            @click="downloadTemplate(file)"
+            >下载</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="lookData.roomName"
+      :visible.sync="dialogVisibleChuli"
+      width="50%"
+    >
+      <div class="modalResult" style="margin-bottom: 10px">预约信息</div>
+      <div
+        style="
+          width: 100%;
+          height: 0.01rem;
+          border-top: 1px solid #ccc;
+          transform: scaleY(0.5);
+        "
+      ></div>
+      <el-row style="display: flex; margin-top: 20px">
+        <el-col :span="8">预约日期：{{ lookData.bookDate }}</el-col>
+        <el-col :span="8"
+          >预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</el-col
+        >
+      </el-row>
+      <div class="modalTime">
+        <el-row class="modalContent" style="margin: 15px 0 15px 0">
+          <el-col :span="8">申请人：{{ lookData.name }}</el-col>
+          <el-col :span="8">联系方式：{{ lookData.phone }}</el-col>
+          <el-col :span="8">申请部门：{{ lookData.dept }}</el-col>
+        </el-row>
+        <el-row style="margin-bottom: 30px">
+          <el-col :span="24"> 使用事项：{{ lookData.matter }} </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="2">审核结果：</el-col>
+          <el-col :span="8" style="display: flex">
+            <el-radio v-model="radio" label="2">通过</el-radio>
+            <el-radio v-model="radio" label="3">不通过</el-radio>
+          </el-col>
+        </el-row>
+        <el-row style="display: flex; margin-top: 20px">
+          <el-col :span="2">审核意见：</el-col>
+          <el-col :span="16">
+            <el-input type="textarea" v-model="desc"></el-input>
+          </el-col>
+        </el-row>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="No">取 消</el-button>
+          <el-button type="primary" @click="ok">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </el-card>
+</template>
+<script>
+import Cookies from 'js-cookie'
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: '1',
+          label: '待审核',
+        },
+        {
+          value: '0',
+          label: '审核完成',
+        },
+      ],
+      value: '',
+      limit: 10,
+      page: 1,
+      total: 0,
+      roomName: '',
+      tableData: [],
+      dialogVisible: false,
+      dialogVisibleChuli: false,
+      lookData: {},
+      radio: '2',
+      desc: '',
+      id: '',
+      num: '',
+      file: '',
+    }
+  },
+  mounted() {
+    this.getSerach()
+  },
+  methods: {
+    getSerach() {
+      this.$http
+        .get(
+          `/bookMeeting/auditPage?page=${this.page}&limit=${this.limit}&roomName=${this.roomName}&state=${this.value}`
+        )
+        .then(({ data: res }) => {
+          console.log(res, 7777777)
+          this.tableData = res.data.list
+          this.total = res.data.total
+        })
+    },
+    downloadTemplate(file) {
+      // window.SITE_CONFIG.apiURL +
+      window.open(`${file}?token=` + Cookies.get('ucsToken'))
+    },
+    handleSizeChange(val) {
+      this.limit = val
+      this.getSerach()
+    },
+    handleCurrentChange(val) {
+      this.page = val
+      this.getSerach()
+    },
+    searchData() {
+      this.getSerach()
+    },
+    taskDetails(item, num) {
+      if (num == '1') {
+        this.dialogVisibleChuli = true
+        this.id = item.id
+      } else {
+        this.dialogVisible = true
+        this.$http.get(`bookMeeting/${item.id}`).then(({ data: res }) => {
+          console.log(55555555)
+          this.file = res.data.file
+        })
+      }
+      this.lookData = item
+    },
+
+    ok() {
+      let query = {
+        auditViem: this.desc,
+        state: this.radio,
+        id: this.id,
+      }
+      this.$http.put('/bookMeeting', query).then(({ data: res }) => {
+        this.dialogVisibleChuli = false
+        this.radio = '2'
+        this.desc = ''
+        this.getSerach()
+      })
+    },
+    No() {
+      this.radio = '2'
+      this.desc = ''
+      this.dialogVisibleChuli = false
+    },
+    formatter(row, column) {
+      return row.state == '1' ? '待审核' : '审核完成'
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.roomBox {
+  min-height: calc(calc(100vh - 50px - 38px - 30px));
+  .roomHeadSpan {
+    font-weight: 600;
+  }
+  .roomExamineSearch {
+    display: flex;
+    width: 410px;
+    margin-bottom: 20px;
+    justify-content: space-between;
+  }
+}
+.dialog-footer {
+  text-align: center;
+  margin-top: 40px;
+}
+// ::v-deep .el-input {
+//   margin-right: 15px;
+//   display: inline-block;
+// }
+// ::v-deep .el-select {
+//   margin-right: 20px;
+//   display: inline-block;
+// }
+</style>
diff --git a/back/src/views/modules/myAgent/ConferenceRoom.vue b/back/src/views/modules/myAgent/ConferenceRoom.vue
new file mode 100644
index 00000000..547c02ea
--- /dev/null
+++ b/back/src/views/modules/myAgent/ConferenceRoom.vue
@@ -0,0 +1,381 @@
+<template>
+  <el-card shadow="never" class="roomBox">
+    <div>
+      <div slot="header" class="roomHeadSpan">
+        <span>会议室管理</span>
+        <el-button
+          style="float: right; padding: 5px 5px"
+          type="primary"
+          icon="el-icon-circle-plus-outline"
+          @click="addRooom"
+          >新增</el-button
+        >
+      </div>
+      <el-table border style="width: 100%" :data="tableData">
+        <el-table-column
+          label="会议室名称"
+          prop="name"
+          header-align="center"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="房间号"
+          prop="num"
+          header-align="center"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="面积（m²）"
+          prop="area"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="可容纳人数（人）"
+          prop="capacity"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="taskDetails(scope.row)"
+              >详情</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="taskUpdate(scope.row)"
+              >{{ $t('update') }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="taskDelete(scope.row)"
+              >{{ $t('delete') }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog
+        @close="outDialog"
+        :title="
+          flge === 'add'
+            ? '会议室新增'
+            : flge === 'look'
+            ? '会议室详情'
+            : '会议室修改'
+        "
+        :visible.sync="dialogFormVisible"
+      >
+        <el-form
+          :model="ruleForm"
+          :label-position="labelPosition"
+          size="small"
+          :rules="rules"
+          ref="ruleForm"
+          :disabled="flge === 'look' ? true : flge === 'edit' ? false : false"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="会议室名称"
+                prop="name"
+                :label-width="formLabelWidth"
+              >
+                <el-input v-model="ruleForm.name" style="width: 90%"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="房间号"
+                prop="num"
+                :label-width="formLabelWidth"
+              >
+                <el-input v-model="ruleForm.num" style="width: 90%"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="会议室面积"
+                prop="area"
+                :label-width="formLabelWidth"
+              >
+                <el-input v-model="ruleForm.area" style="width: 90%"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="可容纳人数"
+                prop="capacity"
+                :label-width="formLabelWidth"
+              >
+                <el-input
+                  v-model="ruleForm.capacity"
+                  style="width: 90%"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item
+                label="描述"
+                prop="description"
+                :label-width="formLabelWidth"
+              >
+                <el-input
+                  type="textarea"
+                  v-model="ruleForm.description"
+                  style="width: 96%"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item
+                label="会议室图片"
+                prop="pic"
+                :label-width="formLabelWidth"
+              >
+                <div v-if="flge != 'look'">
+                  <span slot="tip" class="el-upload__tip">
+                    支持图片类型，且不超过500kb
+                  </span>
+                </div>
+                <!-- :file-list="fileList" -->
+                <el-upload
+                  v-if="flge != 'look'"
+                  class="upload-demo"
+                  accept=".jpg, .jpeg, .png"
+                  :action="apiURL"
+                  :on-preview="handlePictureCardPreview"
+                  :on-success="onSuccess"
+                  :on-remove="onRemove"
+                  :file-list="fileList"
+                  list-type="picture-card"
+                  :limit="1"
+                >
+                  <i class="el-icon-plus"></i>
+                </el-upload>
+                <el-dialog :visible.sync="dialogVisible">
+                  <img width="100%" :src="picImg" alt="" />
+                </el-dialog>
+                <div
+                  class="block"
+                  style="width: 15rem; height: 10rem"
+                  v-if="flge == 'look' && picImg != ''"
+                >
+                  <el-image :src="picImg"></el-image>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
+          <el-button
+            type="primary"
+            v-if="flge != 'look'"
+            @click="submitForm('ruleForm', flge)"
+            >保 存</el-button
+          >
+        </div>
+      </el-dialog>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+<script>
+import Cookies from 'js-cookie'
+export default {
+  data() {
+    // let validatorImg = (rule, value, callback) => {
+    //   console.log(value, 11111111)
+    //   //验证器
+    //   if (!this.checkImgSuccess) {
+    //     //为true代表图片在  false报错
+    //     callback(new Error('请上传图片'))
+    //   } else {
+    //     callback()
+    //   }
+    // }
+    return {
+      apiURL:
+        window.SITE_CONFIG.apiURL + '/upload?token=' + Cookies.get('ucsToken'),
+      labelPosition: 'left',
+      dialogFormVisible: false,
+      //   dialogImageUrl: '',
+      ruleForm: {
+        name: '',
+        num: '',
+        area: '',
+        capacity: '',
+        pic: '',
+        id: '',
+      },
+      limit: 10,
+      page: 1,
+      total: 0,
+      picImg: '',
+      tableData: [],
+      fileList: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入会议室名称', trigger: 'blur' },
+          { min: 1, trigger: 'blur' },
+        ],
+        area: [
+          { required: true, message: '请输入会议室面积', trigger: 'blur' },
+          { min: 1, trigger: 'blur' },
+        ],
+        description: [
+          { required: true, message: '请填写描述内容', trigger: 'blur' },
+        ],
+      },
+      formLabelWidth: '100px',
+      checkImgSuccess: true,
+      dialogVisible: false,
+      flge: '',
+    }
+  },
+  mounted() {
+    this.queryData()
+  },
+  methods: {
+    // 页面查询接口
+    queryData() {
+      this.$http
+        .get(`/meeting/page?limit=${this.limit}&page=${this.page}`)
+        .then(({ data: res }) => {
+          this.total = res.data.total
+          this.tableData = res.data.list
+        })
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.limit = val
+      this.queryData()
+    },
+    handleCurrentChange(val) {
+      this.page = val
+      this.queryData()
+    },
+    // 新增
+    addRooom() {
+      this.dialogFormVisible = true
+      this.flge = 'add'
+      this.ruleForm = {}
+      this.fileList = []
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    //图片上传成功时钩子
+    onSuccess(response, file, fileList) {
+      this.ruleForm.pic = response.data
+      //   this.$refs.ruleForm.clearValidate() //上传成功清除校验
+      this.checkImgSuccess = true
+    },
+    //图片删除时钩子
+    onRemove(file, fileList) {
+      this.$nextTick(() => {
+        if (fileList.length == 0) {
+          this.checkImgSuccess = false //检查图片是否加载成功
+          //   this.$refs.ruleForm.validate() //删除图片,重新触发校验
+        }
+      })
+    },
+    // 保存
+    submitForm(formName, i) {
+      console.log(i, 9999999)
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (i === 'add') {
+            this.dialogFormVisible = false
+            this.$http.post('/meeting', this.ruleForm).then(({ data: res }) => {
+              this.queryData()
+            })
+          } else if (i === 'edit') {
+            this.dialogFormVisible = false
+            this.$http.put(`/meeting`, this.ruleForm).then(({ data: res }) => {
+              this.ruleForm = res.data
+              let imgUrl = { name: res.data.name, url: res.data.pic }
+              this.fileList.push(imgUrl)
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 详情
+    taskDetails(row) {
+      this.ruleForm = {}
+      this.fileList = []
+      this.flge = 'look'
+      this.$http.get(`/meeting/${row.id}`).then(({ data: res }) => {
+        this.dialogFormVisible = true
+        this.ruleForm = res.data
+        if (res.data.pic != null) {
+          //   let imgUrl = { name: res.data.name, url: res.data.pic }
+          //   this.fileList.push(imgUrl)
+          this.picImg = res.data.pic
+        } else {
+          this.picImg = ''
+        }
+      })
+    },
+    //修改
+    taskUpdate(row) {
+      this.dialogFormVisible = true
+      this.fileList = []
+      this.flge = 'edit'
+      this.ruleForm = row
+      if (row.pic != null) {
+        let imgUrl = { name: row.name, url: row.pic }
+        this.fileList.push(imgUrl)
+      } else {
+        this.fileList = []
+      }
+    },
+    //删除图片
+    taskDelete(row) {
+      console.log(row, '点击了删除')
+      this.$http
+        .put(`/meeting`, { delFlag: 1, id: row.id })
+        .then(({ data: res }) => {
+          this.queryData()
+        })
+    },
+    //监听关闭按钮时间
+    outDialog() {},
+  },
+}
+</script>
+<style scoped lang="scss">
+.roomBox {
+  min-height: calc(calc(100vh - 50px - 38px - 30px));
+  .roomHeadSpan {
+    font-weight: 600;
+  }
+}
+::v-deep .el-dialog__footer {
+  text-align: center;
+}
+</style>
diff --git a/front/src/api/home.js b/front/src/api/home.js
index ca2b548a..fdf6774b 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -370,6 +370,39 @@ export function getDevelopDocTree(params) {
     params,
   })
 }
+
+//会议室查询接口
+export function getRoomSearch(params) {
+  return request({
+    url: '/bookMeeting/list',
+    method: 'get',
+    params,
+  })
+}
+//预约弹框选择日期接口
+export function getDate(params) {
+  return request({
+    url: '/bookMeeting/availableDate',
+    method: 'get',
+    params,
+  })
+}
+//预约提交
+export function setSubmit(data) {
+  return request({
+    url: '/bookMeeting',
+    method: 'post',
+    data,
+  })
+}
+//预约结果查询按钮
+export function getYuyue(params) {
+  return request({
+    url: '/bookMeeting/page',
+    method: 'get',
+    params,
+  })
+}
 // 能力广场 应用资源
 export function selectAppList(params) {
   return request({
diff --git a/front/src/assets/home/jingao.png b/front/src/assets/home/jingao.png
new file mode 100644
index 0000000000000000000000000000000000000000..965bae32b3e21e736446396b0fd50ca42bcdd911
GIT binary patch
literal 705
zcmV;y0zUnTP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00004b3#c}2nYxW
zd<bNS0007bNkl<ZI8VitOK1~O6o${ak0|Y4+f0U<MQk1@h(#3K6j4Dz6x1RvMDam4
zLUAF2y4B*=jSo-}p`sS5P;ezaK&b^cnxsWAbS9}?D?VoK-0O)nFq2M_f)r;naL?g8
z|9K*;(1$C;h5rYB0U)dtY}SU`lpPv_Rb5ll1pu#Iwrv#`ExwmAyh(sA0)C*sA@s(2
z0MuqUTMZtyg2#f(YatB@d4-I>Oki#WHTAxsa2h~%TVj9$97p6m#`n(VzCxurKs?x%
z4>bhuemMI20DvE-%20_)Hao?D5B59$Q36H$mVnDiz7IJ&@Xhg0hoMDFj*!Yk-c_UF
zKr^<y6M%l6cY?9-dj$LmAi-@>2^0(!=GE)4V==||2!Pe=-C#TdPKxcC;{)yZnQ%iR
z;F2Y_0fT2*NA)(RR_uj7!$B5Y_#6gPNhGPB)!-k?JMgMui-5}(KM2T%v#!6Rxvs^O
zIL{30&Q`t4&9<^FCbTw>^VQ&fOE5BahMKW+3D{0tLIYhn*SpYcE7@Wkw3*0NgL|>y
zq6J%#iKkSGB&DJvHEsc}Pe<97Gs2h?8CSiG1ur&l0S)f%cm1j5fEWAnL^vv)0r(vY
zu0K+p4*_Sp=I8w3!H{YKoTJMkbFR7?ofdf;jebLAxZ85v8isl^jMkI6s=m?g9+Yf;
z1c46)j(52EcEoO8sR!0EDMvNHPo$OpUQ<(zWvP$XY)Wp@pik0DuK~{+$u7W`Wvz7G
z>F<16e81uB8cl;XU_O!xiiI1<D3R%lYAzUSb>%wV<4J&3eZ8;+8Bdcl3dD-%s<;1i
nHrv&=ldYrTPJmYS6$AeP8t(fSMaSsI00000NkvXXu0mjf6-zuD

literal 0
HcmV?d00001

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index a43b2eaf..9b7ec2b5 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -6,7 +6,7 @@
       <detailsPageconetentTree />
     </div>
     <div class="details-pageconetent-left" v-else>
-      <detailsPageInfrastructureTree />
+      <detailsPageInfrastructureTree v-show="flag != '6'" />
     </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
@@ -178,7 +178,7 @@
         </div>
       </div>
       <div class="top-content-father">
-        <infrastructurePage />
+        <infrastructurePage @add="handleAdd" />
       </div>
     </div>
     <div class="top" v-else>
@@ -742,6 +742,12 @@
 
   export default defineComponent({
     setup() {
+      //会议室传的标识6
+      const flag = ref('')
+
+      const handleAdd = (value) => {
+        flag.value = value
+      }
       const titleName = ref(titleNameArray)
 
       const openMonitor = () => {
@@ -1446,6 +1452,8 @@
         getShoppingCartList,
         whoShow1,
         applyAll,
+        handleAdd,
+        flag,
         abilitySquare,
         visibleAbilitySquare,
         showAbilitySquare,
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 99519f49..f0b4b50a 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -27,201 +27,537 @@
         </span>
       </div>
     </div>
-    <!-- 地图 -->
-    <div class="map-contain" v-if="showMap">
-      <video-surveillance></video-surveillance>
-    </div>
-    <!-- 功能行 -->
-    <div class="infrastructrue-content" v-if="!wrjFlag">
-      <!-- 表格数据统计 -->
-      <div class="contentNum">
-        <p>
-          备选
-          <span>{{ pagination.total }}</span>
-          个
-        </p>
-        <!-- <i class="boundary"></i> -->
-        <p>
-          已选
-          <span>{{ selectedRowKeys.length }}</span>
-          个
-        </p>
+
+    <div v-if="!room" class="roomBox">
+      <div class="leftMake">
+        <div
+          class="leftTop"
+          @click="roomResults"
+          :class="roomYuyue ? 'roomBackground' : 'nullBackground'"
+        >
+          会议室预约
+        </div>
+        <div
+          class="leftBottom"
+          @click="result"
+          :class="roomResult ? 'roomBackground' : 'nullBackground'"
+        >
+          预约结果
+        </div>
       </div>
-      <!-- 右侧 -->
-      <div class="contentRight">
-        <!-- 搜索@search="onSearch" -->
+      <div class="roomSearch">
+        <span>会议室搜索</span>
         <div class="searchInput">
           <a-input-search
-            v-model:value="mapSearchParam.cameraName"
+            v-model:value="roomInput"
             placeholder="请输入关键词"
             enter-button="搜索"
             size="large"
-            @change="getCamera"
+            @search="onSearch"
           />
           <a-button
-            type="primary"
             style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
-            @click="clean"
+            @click="reSetSearch"
           >
             重置
           </a-button>
         </div>
-        <i class="boundary"></i>
-        <!-- 批量预览 -->
-        <a-button type="primary" @click="batchPreview" class="buttonAdd">
-          批量预览
-        </a-button>
-        <!-- 添加至申购车 -->
-        <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
-          添加至申购车
-        </a-button>
-        <!-- 一键申请 -->
-        <a-button type="primary" @click="apply" class="buttonAdd">
-          一键申请
-        </a-button>
       </div>
-    </div>
-    <!-- 表格 -->
-    <div class="infrastructrue-table" v-if="!wrjFlag">
-      <a-table
-        class="ant-table-striped"
-        :dataSource="dataSource"
-        :columns="columns"
-        :scroll="{ y: tableHeight }"
-        rowKey="channelId"
-        :rowClassName="
-          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
-        "
-        :pagination="pagination"
-        @change="handleTableChange"
-        :row-selection="{
-          selectedRowKeys: selectedRowKeys,
-          // onChange: onSelectChange,
-          onSelect: onSelectChange,
-          onSelectAll: onSelectAll,
-        }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'operation'">
-            <a
-              @click="
-                openVideo(
-                  record.channelCode ||
-                    record.channelId ||
-                    record.channelCode.channelId
-                )
+      <div v-if="roomYuyue">
+        <div class="roomTableList">
+          <span>会议室列表</span>
+          <div class="roomTime">
+            <span>可用时间查询</span>
+            <a-space direction="vertical" class="roomSpace">
+              <a-date-picker
+                v-model:value="roomCerateDate"
+                placeholder="开始日期"
+                value-format="YYYY-MM-DD"
+              />
+              <a-time-picker
+                v-model:value="roomCreateTime"
+                placeholder="开始时间"
+                value-format="HH:mm:ss"
+              />
+              <a-time-picker
+                v-model:value="roomEndTime"
+                placeholder="结束时间"
+                value-format="HH:mm:ss"
+              />
+            </a-space>
+          </div>
+        </div>
+        <div class="roomItem" v-for="(item, index) in roomList">
+          <div class="leftImg">
+            <img
+              :src="
+                item.pic == null
+                  ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fimages01%2F20201221%2F00885cf666cc4c2ab80c7b4e59259e85.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662707222&t=13d3246428ee80cc7519702d5eb6eb7d'
+                  : `${item.pic}`
               "
-            >
-              预览
-            </a>
-          </template>
-        </template>
-      </a-table>
-    </div>
-    <div class="infrastructrue-table" v-else-if="isXiHaiAn && wrjFlag">
-      <a-table
-        class="ant-table-striped"
-        :dataSource="dataSource2"
-        :columns="columns2"
-        :scroll="{ y: tableHeight }"
-        rowKey="channelId"
-        :rowClassName="
-          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
-        "
-        :pagination="dataSource2.length"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'operation'">
-            <a
-              @click="goToWrj(record)"
-              style="margin-right: 10px"
-              v-if="record.type !== '单兵设备'"
-            >
-              控制台
-            </a>
-            <a @click="goToApply(record)" style="margin-right: 10px" v-else>
-              申请
-            </a>
-            <a @click="showWrj(record)">详情</a>
-          </template>
-        </template>
-      </a-table>
-    </div>
-    <!-- 单个预览弹窗 -->
-    <a-modal
-      wrapClassName="single-preview-modal"
-      v-model:visible="visible"
-      title="视频预览"
-      :width="960"
-      destroyOnClose
-    >
-      <template #footer></template>
-      <div style="width: 100%; display: flex; justify-content: center">
-        <div style="width: 100%; height: 100%">
-          <vue3VideoPlay v-bind="options" />
-        </div>
-      </div>
-    </a-modal>
-    <!-- 批量预览弹窗 -->
-    <a-modal
-      wrapClassName="batch-preview-modal"
-      v-model:visible="batchVisible"
-      title="视频批量预览"
-      :width="1060"
-      destroyOnClose
-      @cancel="videoClean"
-    >
-      <template #footer></template>
-      <div class="batch-video">
-        <div
-          v-for="item in videoList"
-          :key="item.id"
-          style="width: 100%; height: 100%"
-        >
-          <p></p>
-          <vue3VideoPlay v-bind="item.options" />
-        </div>
-      </div>
-      <a-pagination
-        v-model:current="current"
-        :total="videoTotal"
-        defaultPageSize="4"
-        :showSizeChanger="false"
-        @change="batchPreview"
-        show-less-items
-      />
-    </a-modal>
-    <a-modal
-      wrapClassName="wrj"
-      v-model:visible="wrjVisible"
-      :width="1000"
-      :title="wrjName + '详情'"
-      @ok="wrjVisible = false"
-    >
-      <template v-if="dataSource2[0].type !== '单兵设备'">
-        <div v-for="wrj in wrjData" :key="wrj.name">
-          <div
+              alt=""
+            />
+          </div>
+          <div class="rightContent">
+            <div class="topContent">{{ item.name }}</div>
+            <div class="centerContent">
+              <span>房间号：{{ item.num }}</span>
+              <span>可容纳人数：{{ item.capacity }}</span>
+              <span>面积：{{ item.area }}</span>
+            </div>
+            <div class="bottonmContent">
+              {{ item.description }}
+            </div>
+          </div>
+          <a-button
             style="
-              font-size: 20px;
-              font-weight: 600;
-              margin: 10px 0;
-              text-align: center;
+              margin-left: 0.8rem;
+              background: #e1edfa;
+              color: #0087ff;
+              border: none;
+              border-radius: 0.06rem;
+            "
+            @click="appointment(item)"
+          >
+            预约
+          </a-button>
+        </div>
+        <a-pagination
+          v-model:current="roomPage"
+          v-model:pageSize="roomLimit"
+          show-quick-jumper
+          :total="roomTotal"
+          :page-size-options="pageSizeOptions"
+          @change="onRoomChange"
+          @showSizeChange="onShowSizeChange"
+          show-size-changer
+        />
+      </div>
+      <div v-if="roomResult" style="display: grid">
+        <a-table
+          :columns="columnsRomm"
+          :data-source="dataRoom"
+          :filterMultiple="false"
+          :align="center"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'bookDate'">
+              <span>
+                {{ record.bookDate }} {{ record.startTime }}-{{
+                  record.endTime
+                }}
+              </span>
+            </template>
+            <template v-if="column.key === 'state'">
+              <span>
+                {{
+                  record.state == 2
+                    ? '通过'
+                    : record.state == 1
+                    ? '审核中'
+                    : '不通过'
+                }}
+              </span>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a @click="look(record)">查看详情</a>
+            </template>
+          </template>
+        </a-table>
+        <a-pagination
+          v-model:current="roomPage"
+          v-model:pageSize="roomLimit"
+          show-quick-jumper
+          :total="roomTotal"
+          :page-size-options="pageSizeOptionsChengguo"
+          @change="onRoomChangeChengguo"
+          @showSizeChange="onShowSizeChangeChengguo"
+          show-size-changer
+        />
+      </div>
+      <a-modal
+        v-model:visible="visibleRoom"
+        width="10rem"
+        title="预约详情"
+        :body-style="bodystyle"
+        class="modalClass"
+        :footer="null"
+      >
+        <div class="modalResult" style="margin-bottom: 0.05rem">预约结果</div>
+        <div
+          style="
+            width: 100%;
+            height: 0.01rem;
+            border-top: 1px solid #ccc;
+            transform: scaleY(0.5);
+          "
+        ></div>
+        <div
+          class="modalExamine"
+          style="display: flex; flex-direction: column; margin-top: 0.2rem"
+        >
+          <span style="margin-bottom: 0.2rem">
+            审核结果：{{ lookData.state === '2' ? '通过' : '不通过' }}
+          </span>
+          <span style="width: 8rem; margin-bottom: 0.3rem">
+            审核意见：{{ lookData.auditViem }}
+          </span>
+        </div>
+        <div class="modalYuyue" style="margin-bottom: 0.05rem">预约信息</div>
+        <div
+          style="
+            width: 100%;
+            height: 0.01rem;
+            border-top: 1px solid #ccc;
+            transform: scaleY(0.5);
+          "
+        ></div>
+        <div class="modalTime" style="margin-top: 0.2rem">
+          <div>
+            预约时段：{{ lookData.bookDate }} {{ lookData.startTime }}-{{
+              lookData.endTime
+            }}
+          </div>
+          <div
+            class="modalContent"
+            style="
+              width: 7.5rem;
+              display: flex;
+              justify-content: space-between;
+              margin: 0.15rem 0 0.15rem 0;
             "
           >
-            {{ wrj.name }}
-          </div>
-          <div
-            style="padding: 0 30px"
-            v-for="(value, key) in wrj.attribute"
-            :key="value"
-          >
-            {{ key + '：' + value }}
+            <span>预约人：{{ lookData.name }}</span>
+            <span>联系方式：{{ lookData.phone }}</span>
+            <span>预约部门：{{ lookData.dept }}</span>
           </div>
         </div>
-      </template>
-      <template v-else>
-        <div v-for="(db, key) in wrjData" :key="key">
-          <template v-if="typeof db == 'object'">
+        <div style="width: 8rem; margin-bottom: 0.3rem">
+          使用事项：{{ lookData.matter }}
+        </div>
+      </a-modal>
+      <a-modal
+        v-model:visible="appointmentRoom"
+        title="会议室预约"
+        width="10rem"
+        @ok="handleOk"
+        :body-style="bodystyle"
+        class="appModal"
+        :footer="null"
+      >
+        <a-form
+          :model="formState"
+          name="basic"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 16 }"
+          autocomplete="off"
+          @finish="onFinish"
+          @finishFailed="onFinishFailed"
+          :labelAlign="labelPosition"
+        >
+          <a-row>
+            <a-col :span="8">
+              <a-form-item
+                name="bookDate"
+                label="预约日期"
+                v-bind="validateInfos.bookDate"
+                @blur="validate('create', { trigger: 'blur' }).catch(() => {})"
+              >
+                <a-date-picker
+                  style="width: 72%"
+                  v-model:value="formState.bookDate"
+                  value-format="YYYY-MM-DD"
+                  @change="handleChange"
+                />
+              </a-form-item>
+              <div
+                :class="roomDateList[0] != null ? 'jinggaoD' : 'jinggaoNull'"
+              >
+                <div class="imgJinggao"></div>
+                <span style="color: #da2a13; font-size: 0.12rem">
+                  当日会议室可用时段：{{ roomDateList[0] }}
+                </span>
+              </div>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item
+                name="startTime"
+                label="预约时段"
+                v-bind="validateInfos.startTime"
+                style="display: flex"
+              >
+                <a-time-picker
+                  v-model:value="formState.startTime"
+                  placeholder="开始时间"
+                  value-format="HH:mm:ss"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-time-picker
+                v-model:value="formState.endTime"
+                placeholder="结束时间"
+                value-format="HH:mm:ss"
+              />
+            </a-col>
+          </a-row>
+          <a-row style="margin-top: 0.4rem">
+            <a-col :span="8">
+              <a-form-item
+                name="name"
+                label="预约人"
+                v-bind="validateInfos.name"
+              >
+                <a-input v-model:value="formState.name" style="width: 72%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item
+                name="phone"
+                label="联系电话"
+                v-bind="validateInfos.phone"
+              >
+                <a-input v-model:value="formState.phone" style="width: 72%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item
+                name="dept"
+                label="预约部门"
+                v-bind="validateInfos.dept"
+              >
+                <a-input v-model:value="formState.dept" style="width: 72%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row style="margin-top: 0.4rem">
+            <a-col :span="24">
+              <a-form-item
+                name="matter"
+                v-bind="validateInfos.matter"
+                label="使用事项"
+                class="introduction"
+              >
+                <a-textarea v-model:value="formState.matter" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row style="margin-top: 0.4rem">
+            <a-col :span="24">
+              <a-form-item
+                name="uploadRoom"
+                label="附件上传"
+                class="introduction"
+              >
+                <a-upload
+                  :max-count="1"
+                  accept=".doc,.docx,pdf"
+                  v-model:file-list="fileList"
+                  :action="`${apiURL}/upload`"
+                  @remove="handleRemove"
+                  @change="roomUpload"
+                >
+                  <a-button>
+                    <upload-outlined>选择上传附件</upload-outlined>
+                  </a-button>
+                  <span>
+                    支持doc、docx、PDF等格式支撑材料上传，文件大小不超过100M
+                  </span>
+                </a-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item
+            :wrapper-col="{ span: 14, offset: 4 }"
+            style="text-align: center; margin-top: 0.4rem"
+          >
+            <a-button @click="resetFields" type="primary" danger>取消</a-button>
+            <a-button
+              style="margin-left: 10px"
+              type="primary"
+              @click="onSubmit"
+            >
+              提交
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+    <div v-if="room">
+      <!-- 地图 -->
+      <div class="map-contain" v-if="showMap">
+        <video-surveillance></video-surveillance>
+      </div>
+      <!-- 功能行 -->
+      <div class="infrastructrue-content" v-if="!wrjFlag">
+        <!-- 表格数据统计 -->
+        <div class="contentNum">
+          <p>
+            备选
+            <span>{{ pagination.total }}</span>
+            个
+          </p>
+          <!-- <i class="boundary"></i> -->
+          <p>
+            已选
+            <span>{{ selectedRowKeys.length }}</span>
+            个
+          </p>
+        </div>
+        <!-- 右侧 -->
+        <div class="contentRight">
+          <!-- 搜索@search="onSearch" -->
+          <div class="searchInput">
+            <a-input-search
+              v-model:value="mapSearchParam.cameraName"
+              placeholder="请输入关键词"
+              enter-button="搜索"
+              size="large"
+              @change="getCamera"
+            />
+            <a-button
+              type="primary"
+              style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
+              @click="clean"
+            >
+              重置
+            </a-button>
+          </div>
+          <i class="boundary"></i>
+          <!-- 批量预览 -->
+          <a-button type="primary" @click="batchPreview" class="buttonAdd">
+            批量预览
+          </a-button>
+          <!-- 添加至申购车 -->
+          <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
+            添加至申购车
+          </a-button>
+          <!-- 一键申请 -->
+          <a-button type="primary" @click="apply" class="buttonAdd">
+            一键申请
+          </a-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="infrastructrue-table" v-if="!wrjFlag">
+        <a-table
+          class="ant-table-striped"
+          :dataSource="dataSource"
+          :columns="columns"
+          :scroll="{ y: tableHeight }"
+          rowKey="channelId"
+          :rowClassName="
+            (record, index) => (index % 2 === 1 ? 'table-striped' : null)
+          "
+          :pagination="pagination"
+          @change="handleTableChange"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            // onChange: onSelectChange,
+            onSelect: onSelectChange,
+            onSelectAll: onSelectAll,
+          }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'operation'">
+              <a
+                @click="
+                  openVideo(
+                    record.channelCode ||
+                      record.channelId ||
+                      record.channelCode.channelId
+                  )
+                "
+              >
+                预览
+              </a>
+            </template>
+          </template>
+        </a-table>
+      </div>
+      <div class="infrastructrue-table" v-else-if="isXiHaiAn && wrjFlag">
+        <a-table
+          class="ant-table-striped"
+          :dataSource="dataSource2"
+          :columns="columns2"
+          :scroll="{ y: tableHeight }"
+          rowKey="channelId"
+          :rowClassName="
+            (record, index) => (index % 2 === 1 ? 'table-striped' : null)
+          "
+          :pagination="dataSource2.length"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'operation'">
+              <a
+                @click="goToWrj(record)"
+                style="margin-right: 10px"
+                v-if="record.type !== '单兵设备'"
+              >
+                控制台
+              </a>
+              <a @click="goToApply(record)" style="margin-right: 10px" v-else>
+                申请
+              </a>
+              <a @click="showWrj(record)">详情</a>
+            </template>
+          </template>
+        </a-table>
+      </div>
+      <!-- 单个预览弹窗 -->
+      <a-modal
+        wrapClassName="single-preview-modal"
+        v-model:visible="visible"
+        title="视频预览"
+        :width="960"
+        destroyOnClose
+      >
+        <template #footer></template>
+        <div style="width: 100%; display: flex; justify-content: center">
+          <div style="width: 100%; height: 100%">
+            <vue3VideoPlay v-bind="options" />
+          </div>
+        </div>
+      </a-modal>
+      <!-- 批量预览弹窗 -->
+      <a-modal
+        wrapClassName="batch-preview-modal"
+        v-model:visible="batchVisible"
+        title="视频批量预览"
+        :width="1060"
+        destroyOnClose
+        @cancel="videoClean"
+      >
+        <template #footer></template>
+        <div class="batch-video">
+          <div
+            v-for="item in videoList"
+            :key="item.id"
+            style="width: 100%; height: 100%"
+          >
+            <p></p>
+            <vue3VideoPlay v-bind="item.options" />
+          </div>
+        </div>
+        <a-pagination
+          v-model:current="current"
+          :total="videoTotal"
+          defaultPageSize="4"
+          :showSizeChanger="false"
+          @change="batchPreview"
+          show-less-items
+        />
+      </a-modal>
+      <a-modal
+        wrapClassName="wrj"
+        v-model:visible="wrjVisible"
+        :width="1000"
+        :title="wrjName + '详情'"
+        @ok="wrjVisible = false"
+      >
+        <template v-if="dataSource2[0].type !== '单兵设备'">
+          <div v-for="wrj in wrjData" :key="wrj.name">
             <div
               style="
                 font-size: 20px;
@@ -230,24 +566,47 @@
                 text-align: center;
               "
             >
-              {{ key }}
+              {{ wrj.name }}
             </div>
             <div
               style="padding: 0 30px"
-              v-for="(value, key2) in db"
+              v-for="(value, key) in wrj.attribute"
               :key="value"
             >
-              {{ key2 + '：' + value }}
+              {{ key + '：' + value }}
             </div>
-          </template>
-          <template v-else>
-            <div style="padding: 0 30px">
-              {{ key + '：' + db }}
-            </div>
-          </template>
-        </div>
-      </template>
-    </a-modal>
+          </div>
+        </template>
+        <template v-else>
+          <div v-for="(db, key) in wrjData" :key="key">
+            <template v-if="typeof db == 'object'">
+              <div
+                style="
+                  font-size: 20px;
+                  font-weight: 600;
+                  margin: 10px 0;
+                  text-align: center;
+                "
+              >
+                {{ key }}
+              </div>
+              <div
+                style="padding: 0 30px"
+                v-for="(value, key2) in db"
+                :key="value"
+              >
+                {{ key2 + '：' + value }}
+              </div>
+            </template>
+            <template v-else>
+              <div style="padding: 0 30px">
+                {{ key + '：' + db }}
+              </div>
+            </template>
+          </div>
+        </template>
+      </a-modal>
+    </div>
   </div>
 </template>
 <script setup>
@@ -255,16 +614,31 @@
   // import { getCategoryTreePage } from '@/api/personalCenter'
   // import { dataType } from 'element-plus/es/components/table-v2/src/common'
   import { useRouter } from 'vue-router'
-  import { message } from 'ant-design-vue'
-  import { ref, reactive, onMounted } from 'vue'
+  import { message, Upload } from 'ant-design-vue'
+  import {
+    ref,
+    reactive,
+    onMounted,
+    watch,
+    defineComponent,
+    nextTick,
+  } from 'vue'
   import {
     getCameraByParentId,
     getStreamByChannelCode,
     getCameraAllLabel,
   } from '@/api/videoSurveillance'
   import { getCameraByCondition } from '@/api/file'
-  import { sgcInsert } from '@/api/home'
+  import {
+    sgcInsert,
+    getRoomSearch,
+    getDate,
+    setSubmit,
+    getYuyue,
+  } from '@/api/home'
   import mybus from '@/myplugins/mybus'
+  import dayjs from 'dayjs'
+  import { Form } from 'ant-design-vue'
   const current = ref(1)
   const videoTotal = ref(0)
   const router = useRouter()
@@ -307,6 +681,78 @@
     showSizeChanger: true,
     pageSizeOptions: ['10', '30', '50', '100', '1000'], //每页中显示的数据
   })
+  //会议室变量区域=======
+  const paginationRoom = ref({
+    total: 0,
+    current: 1,
+    pageSize: 10, //每页中显示10条数据
+    showSizeChanger: true,
+    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
+  })
+  const formState = reactive({
+    // name: '',
+    // iphone: '18264084961',
+    // group: '',
+    // create: '',
+    // cerateTime: '',
+    // endTime: '',
+    // introduction: '',
+    // uploadRoom: '',
+    roomId: '',
+    bookDate: '', //日期
+    startTime: '', //开始时间
+    endTime: '', //结束时间
+    name: '',
+    phone: '',
+    dept: '',
+    matter: '',
+    file: '',
+  })
+  const fileList = ref([])
+  const useForm = Form.useForm
+  const roomInput = ref('')
+  const rulesRef = reactive({
+    bookDate: [
+      {
+        type: 'string',
+        required: true,
+        message: '请选择日期',
+      },
+    ],
+    startTime: [
+      {
+        type: 'string',
+        required: true,
+        message: '请选择时间段',
+      },
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入预约人',
+      },
+    ],
+    matter: [
+      {
+        required: true,
+        message: '请输入内容',
+      },
+    ],
+    phone: [
+      {
+        required: true,
+        pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
+        message: '请输入正确的手机号',
+      },
+    ],
+    dept: [
+      {
+        required: true,
+        message: '请输入部门',
+      },
+    ],
+  })
+  const { resetFields, validateInfos, validate } = useForm(formState, rulesRef)
   const mapSearchParam = ref({
     // 地图搜索初始化数据
     parentId: '',
@@ -320,6 +766,29 @@
     labelCodes: [],
   })
   const showMap = ref(true)
+  const room = ref(true)
+  const roomResult = ref(true)
+  const roomYuyue = ref(true)
+  const visibleRoom = ref(false)
+  const appointmentRoom = ref(false)
+  const labelPosition = ref('left')
+  const apiURL = window.SITE_CONFIG.apiURL
+  const roomList = ref([])
+  const roomPage = ref(1)
+  const roomLimit = ref(5)
+  const roomTotal = ref(0)
+  const pageSizeOptions = ref(['5', '10', '20', '50'])
+  const pageSizeOptionsChengguo = ref(['5', '10', '20', '50'])
+  const dateId = ref(null)
+  const roomDateList = ref([])
+  //开始时间---结束时间
+  const roomCerateDate = ref('')
+  const roomCreateTime = ref('')
+  const roomEndTime = ref('')
+  const roomModalCreateTime = ref('')
+  const roomModalEndTime = ref('')
+  const lookData = ref({})
+  //===========================
   onMounted(() => {
     if (jcssType.value) {
       tabClick(0, jcssType.value)
@@ -349,7 +818,7 @@
   const tabList = ref([
     {
       title: '设施类型',
-      content: ['视频资源', '云资源', '感知资源'],
+      content: ['视频资源', '云资源', '感知资源', '会议室'],
     },
     {
       title: '视频标签',
@@ -429,6 +898,153 @@
   }
   let clickList = ref([]) //存储点击的tab
   init()
+  //点击会议室左侧切换
+  const result = () => {
+    roomYuyue.value = false
+    roomResult.value = true
+    chengguoSearch()
+  }
+  const chengguoSearch = () => {
+    let query = {
+      page: roomPage.value,
+      limit: roomLimit.value,
+      roomName: roomInput.value,
+    }
+    getYuyue(query).then(({ data: res }) => {
+      dataRoom.value = res.data.list
+      roomTotal.value = res.data.total
+    })
+  }
+  const roomResults = () => {
+    roomYuyue.value = true
+    roomResult.value = false
+  }
+  // 查看详情
+  const look = (row) => {
+    visibleRoom.value = true
+    lookData.value = row
+  }
+  //   搜索
+  const onSearch = (searchValue) => {
+    searchData()
+    chengguoSearch()
+  }
+  //重置
+  const reSetSearch = () => {
+    roomInput.value = ''
+    searchData()
+    chengguoSearch()
+  }
+  //分页
+  const onRoomChange = (pageNumber) => {
+    roomPage.value = pageNumber
+    searchData()
+  }
+  const onShowSizeChange = (current, pageSize) => {
+    roomLimit.value = pageSize
+    searchData()
+  }
+  const onRoomChangeChengguo = (pageNumber) => {
+    roomPage.value = pageNumber
+    chengguoSearch()
+  }
+  const onShowSizeChangeChengguo = (current, pageSize) => {
+    roomLimit.value = pageSize
+    chengguoSearch()
+  }
+  //预约
+  const appointment = (item) => {
+    dateId.value = item.id
+    formState.roomId = item.id
+    appointmentRoom.value = true
+  }
+  //预约弹框 选择日期
+  const handleChange = (i) => {
+    let query = {
+      date: i, //查询的riqi
+      roomId: dateId.value, //会议室主键
+    }
+    getDate(query).then(({ data: res }) => {
+      roomDateList.value = res.data
+    })
+  }
+
+  const columnsRomm = [
+    {
+      title: '会议室名称',
+      dataIndex: 'roomName',
+      align: 'center',
+    },
+    {
+      title: '预约时段',
+      key: 'bookDate',
+      align: 'center',
+    },
+    {
+      title: '预约状态',
+      key: 'state',
+      align: 'center',
+    },
+    {
+      title: '预约详情',
+      key: 'action',
+      align: 'center',
+    },
+  ]
+  const dataRoom = ref([])
+  const bodystyle = {
+    paddingTop: 0,
+    borderBottom: 0,
+  }
+  const handleOk = (e) => {
+    console.log(e)
+  }
+  //文件上传成功回调
+  const roomUpload = (response) => {
+    if (response.file.response !== undefined) {
+      fileList.value = response.fileList
+      formState.file = response.file.response.data
+    }
+  }
+  //提交预约
+  const onSubmit = () => {
+    validate()
+      .then(() => {
+        setSubmit(formState).then(({ data: res }) => {
+          appointmentRoom.value = false
+          formState.roomId = ''
+          formState.bookDate = ''
+          formState.startTime = '' //开始时间
+          formState.endTime = '' //结束时间
+          formState.name = ''
+          formState.phone = ''
+          formState.dept = ''
+          formState.matter = ''
+          formState.file = ''
+          fileList.value = []
+          searchData()
+        })
+      })
+      .catch((err) => {
+        console.log('error', err)
+      })
+  }
+  //会议室查询接口
+  const searchData = () => {
+    let query = {
+      bookDate: roomCerateDate.value, //	预约开始时间 年月日
+      startTime: roomCreateTime.value, //预约开始时 间时分秒
+      endTime: roomEndTime.value, //	预约结束时间
+      name: roomInput.value, //会议室名称
+      page: roomPage.value, //页码
+      limit: roomLimit.value, //每页条数
+    }
+    getRoomSearch(query).then(({ data: res }) => {
+      roomList.value = res.data.list
+      roomTotal.value = res.data.total
+    })
+  }
+  const emits = defineEmits(['add'])
   //表格的高度
   let tableHeight = ref('600')
   //tab切换点击事件
@@ -443,10 +1059,12 @@
     selectedList.value = []
     if (clickList.value[indexFather].content.indexOf(name) != -1) {
       if (name == '视频资源') {
+        room.value = true
         tableHeight.value = 330
         showMap.value = true
         tabList.value[1].title = '视频标签'
       } else if (name == '云资源') {
+        room.value = true
         tableHeight.value = 600
         showMap.value = false
         dataSource.value = []
@@ -454,11 +1072,21 @@
         pagination.value.total = 0
         tabList.value[1].title = '云资源分类'
       } else if (name == '感知资源') {
+        room.value = true
         tableHeight.value = 330
         showMap.value = true
         dataSource.value = []
         dataSource2.value = []
         pagination.value.total = 0
+      } else if (name == '会议室') {
+        //     room.value = false
+        //     wrjFlag.value = true
+        //     showMap.value = false
+        // roomYuyue.value = true
+        //     roomResult.value = false
+        //     tabList.value[1] = []
+        //     emits('add', 6)
+        //     searchData()
       }
       clickList.value[indexFather].content.splice(
         clickList.value[indexFather].content.indexOf(name),
@@ -475,6 +1103,7 @@
         clickList.value[indexFather].content[0] = name
         dataSource.value = []
         dataSource2.value = []
+        room.value = true
         getCameraAllLabel().then((res) => {
           res.data.data.forEach((val) => {
             tabList.value[1].content.push({
@@ -490,6 +1119,7 @@
         })
         console.log('选中的标签code', mapSearchParam.value)
         mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
+        emits('add', 1)
         getCamera()
       } else if (name == '云资源') {
         tableHeight.value = 600
@@ -510,7 +1140,9 @@
           '负载均衡',
           '公网IP',
         ]
+        room.value = true
         wrjFlag.value = false
+        emits('add', 2)
       } else if (name == '感知资源') {
         tableHeight.value = 330
         showMap.value = true
@@ -521,8 +1153,11 @@
         tabList.value[1].content = []
         dataSource.value = []
         dataSource2.value = []
+        room.value = true
         wrjFlag.value = false
+        emits('add', 3)
       } else if (name == '无人机') {
+        room.value = true
         tableHeight.value = 600
         showMap.value = false
         dataSource.value = []
@@ -542,6 +1177,7 @@
         })
         wrjFlag.value = true
       } else if (name == '单兵设备') {
+        room.value = true
         tableHeight.value = 600
         showMap.value = false
         dataSource.value = []
@@ -560,6 +1196,24 @@
           })
         })
         wrjFlag.value = true
+      } else if (name == '会议室') {
+        showMap.value = false
+        dataSource.value = []
+        dataSource2.value = []
+        pagination.value.total = 0
+        clickList.value[1].content = []
+        clickList.value[indexFather].content[0] = name
+        tabList.value[1].title = ''
+        tabList.value[1].content = []
+        wrjFlag.value = true
+        room.value = false
+        // wrjFlag.value = true
+        // showMap.value = false
+        roomYuyue.value = true
+        roomResult.value = false
+        // tabList.value[1] = []
+        emits('add', 6)
+        searchData()
       } else {
         clickList.value[indexFather].content.push(name)
       }
@@ -1022,13 +1676,186 @@
       position: relative;
     }
   }
+  .roomBackground {
+    background: #0058e1;
+    color: #ffffff;
+  }
+  .nullBackground {
+    background: #f3f5f9;
+    color: #0087ff;
+  }
+  :deep(.ant-form-item-control-input-content) {
+    margin-left: 0.15rem;
+  }
+  :deep(.ant-col) {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+  .jinggaoD {
+    display: flex;
+    align-items: center;
+  }
+  .jinggaoNull {
+    display: none;
+  }
+  .imgJinggao {
+    width: 0.2rem;
+    height: 0.2rem;
+    background: url('~@/assets/home/jingao.png') no-repeat;
+    background-size: 100%;
+  }
+  .introduction {
+    :deep(.ant-form-item-control) {
+      margin-left: -2.1rem;
+    }
+  }
+  .roomBox {
+    .leftMake {
+      float: left;
+      margin-left: -1rem;
+      margin-top: -0.5rem;
+      font-size: 0.2rem;
+      cursor: pointer;
+      .leftTop {
+        width: 0.6rem;
+        height: 1.75rem;
+        border-top-left-radius: 0.08rem;
+        border-bottom-left-radius: 0.08rem;
+        padding: 0.13rem;
+        text-align: center;
+      }
+      .leftBottom {
+        width: 0.6rem;
+        height: 1.75rem;
+        border-top-left-radius: 0.08rem;
+        border-bottom-left-radius: 0.08rem;
+        padding: 0.2rem 0.13rem 0.1rem 0.1rem;
+        text-align: center;
+      }
+    }
+    .roomSearch {
+      display: flex;
+      align-items: center;
+      .searchInput {
+        display: flex;
+        margin-right: 0.2rem;
+        margin-left: 0.2rem;
+        // .ant-input-search {
+        //   max-width: 4rem;
+        // }
+        :deep(.ant-input) {
+          width: 2rem;
+          height: 0.36rem;
+          font-size: 0.14rem;
+          color: #b2b2b2;
+          background: #f5f5f5;
+        }
+        :deep(.ant-input-group-addon) {
+          display: inline-block;
+          margin-left: 0.1rem;
+          .ant-input-search-button {
+            width: 0.8rem;
+            height: 0.36rem;
+            background: #0558e1;
+            border-radius: 0.06rem;
+            font-size: 0.14rem;
+          }
+        }
+        :deep(.ant-btn) {
+          border-radius: 0.06rem;
+        }
+      }
+    }
+    .roomTableList {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0.4rem 0 0.2rem 0;
+      .roomTime {
+        display: flex;
+        align-items: center;
+        :deep(.ant-space-vertical) {
+          flex-direction: inherit;
+          margin-left: 0.2rem;
+        }
+      }
+    }
+    .roomItem {
+      width: 10.3rem;
+      height: 2rem;
+      border-top: 1px #d5d4d4 solid;
+      display: flex;
+      align-items: center;
+      .leftImg {
+        width: 2.4rem;
+        height: 1.75rem;
+        margin: 0 0.3rem 0 0.15rem;
+
+        // background: url('~@/assets/home/yyzy_square.png') no-repeat;
+        background-size: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .rightContent {
+        height: 1.75rem;
+        width: 5.8rem;
+        .topContent {
+          font-size: 0.2rem;
+          color: #000;
+          font-weight: 600;
+        }
+        .centerContent {
+          display: flex;
+          justify-content: space-between;
+          font-size: 0.14rem;
+          margin: 0.15rem 0 0.2rem 0;
+        }
+      }
+    }
+    :deep(.ant-pagination) {
+      float: right;
+    }
+    :deep(.ant-pagination) {
+      text-align: end;
+    }
+  }
 </style>
 <style lang="less">
   .wrj {
     .ant-modal-body {
       height: 700px !important;
+    }
+  }
+  .modalClass {
+    .ant-modal-body {
+      height: 4rem !important;
       overflow-y: scroll !important;
     }
+    .ant-modal-title {
+      font-weight: 600;
+    }
+    .ant-modal-content {
+      .ant-modal-header {
+        border-bottom: 0 !important;
+      }
+    }
+  }
+  .appModal {
+    .ant-modal-body {
+      height: 4.8rem !important;
+      overflow-y: scroll !important;
+    }
+    .ant-modal-title {
+      font-weight: 600;
+    }
+    .ant-modal-content {
+      .ant-modal-header {
+        border-bottom: 0 !important;
+      }
+    }
   }
   .single-preview-modal {
     .ant-modal-header {