添加四个弹窗

.env.development

 NODE_ENV = "development"
 Mock: true
-VUE_APP_API_URL = "http:///192.168.0.180:8002"
+VUE_APP_API_URL = "http://192.168.0.127:8002"

src/api/index.js

@@ -171,6 +171,46 @@ export function getWorkTypeList() {
     })
 }
 
+
+export function getPersonList(params) {
+    return request({
+        url: `${baseUrl}/personel`,
+        method: `get`,
+        params
+    })
+}
+
+export function getPersonListConfigData() {
+    return request({
+        url: `${baseUrl}/personel/configdata`,
+        method: `get`
+    })
+}
+
+export function getCheckInListByDate(params) {
+    return request({
+        url: `${baseUrl}/personel/day/attendance/list`,
+        method: `get`,
+        params
+    })
+}
+
+export function getCheckPersonData(id) {
+    return request({
+        url: `${baseUrl}/personel/${id}`,
+        method: `get`
+    })
+}
+
+export function getPersonCheckInList(params) {
+    return request({
+        url: `${baseUrl}/personel/attendance/record`,
+        method: `get`,
+        params
+    })
+}
+
+
 // supervisory
 export function getVideoTreeData() {
     return request({

src/assets/iconfont/iconfont.css

 @font-face {
   font-family: "iconfont";
   /* Project id 4100703 */
-  src: url('iconfont.woff2?t=1689752730446') format('woff2'),
-    url('iconfont.woff?t=1689752730446') format('woff'),
-    url('iconfont.ttf?t=1689752730446') format('truetype');
+  src: url('iconfont.woff2?t=1690536909939') format('woff2'),
+    url('iconfont.woff?t=1690536909939') format('woff'),
+    url('iconfont.ttf?t=1690536909939') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zuo1:before {
+  content: "\e609";
+}
+
+.icon-nan:before {
+  content: "\e664";
+}
+
+.icon-nv:before {
+  content: "\e665";
+}
+
+.icon-shijian:before {
+  content: "\e85f";
+}
+
 .icon-jiaojufangda:before {
   content: "\e602";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "2304262",
+      "name": "左",
+      "font_class": "zuo1",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "982372",
+      "name": "男",
+      "font_class": "nan",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "982373",
+      "name": "女",
+      "font_class": "nv",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "34202286",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e85f",
+      "unicode_decimal": 59487
+    },
     {
       "icon_id": "20743929",
       "name": "焦距放大",

src/components/construction/Index.vue

@@ -234,8 +234,11 @@
                     v-for="(progress, index) in progressDetail.progress_data"
                     :key="index"
                     :class="[
-                      progress.type ? progress.type : '',
-                      index <= progressDetail.step - 1 ? 'success' : '',
+                      progress.status == 2
+                        ? 'wait'
+                        : progress.status == 1
+                        ? 'none'
+                        : '',
                     ]"
                   >
                     <template #title>
@@ -1174,6 +1177,23 @@ table {
       }
     }
   }
+
+  ::v-deep .el-step.none {
+    .el-step__icon,
+    .el-step__line {
+      border-color: rgb(192, 196, 204) !important;
+    }
+    .step-status,
+    .step-description,
+    .step-title {
+      color: rgb(192, 196, 204) !important;
+    }
+
+    ::v-deep .el-step__head.is-success {
+      color: rgb(192, 196, 204) !important;
+      border-color: rgb(192, 196, 204) !important;
+    }
+  }
 }
 
 ::v-deep .el-step.success {

src/components/realname/CheckInDetail.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    append-to-body
+    title="今日考勤情况"
+    top="0"
+    width="800px"
+  >
+    <div class="check-in-detail">
+      <div class="person-detail">
+        <div class="person-portrait">
+          <img :src="personData.face_img_url" alt="" />
+        </div>
+        <div class="person-name">
+          {{ personData.name }}
+          <i
+            :class="['iconfont', personData.sex == 1 ? 'icon-nan' : 'icon-nv']"
+          ></i>
+        </div>
+        <div class="person-job">{{ personData.work_types_name.join("/") }}</div>
+        <div class="person-status">{{ personData.duty_status_name }}</div>
+        <div class="check-status">
+          <div>最近考勤：{{ personData.last_attendance_time }}</div>
+          <div>考勤地点：{{ personData.last_attendance_area_name }}</div>
+        </div>
+        <div class="person-detail-text">
+          <div>工号：{{ personData.job_number }}</div>
+          <div>联系电话：{{ personData.format_mobile }}</div>
+          <div>所在班组：{{ personData.team_name_arr.join(",") }}</div>
+          <div>所属岗位：{{ personData.position_type_name }}</div>
+          <div>单位类型：{{ personData.unit_type_name_arr.join(",") }}</div>
+          <div>所属单位：{{ personData.company_name }}</div>
+        </div>
+      </div>
+      <div class="time-detail">
+        <div class="time-picker">
+          <i class="iconfont icon-you-22" @click="prevDay"></i>
+          <span>{{ this.getTime(this.timeStamp) }}</span>
+          <i class="iconfont icon-you-2-2" @click="nextDay"></i>
+        </div>
+        <div class="time-line">
+          <i class="iconfont icon-shijian"></i>
+
+          <div
+            class="time-line-container"
+            v-for="(check, index) in checkList"
+            :key="index"
+          >
+            <div class="list-line-container">
+              <div class="mid-line">
+                <div class="dot"></div>
+              </div>
+            </div>
+            <div class="time-description">
+              <div class="time-description-inner">
+                <div>
+                  最新考勤：{{ check.record_time
+                  }}<span :style="{ color: check.type, float: 'right' }">{{
+                    check.type_str
+                  }}</span>
+                </div>
+                <div>考勤地点：{{ check.area_name }}</div>
+                <div class="arrow"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getCheckPersonData, getPersonCheckInList } from "@/api/index";
+export default {
+  name: "CheckInDetail",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    itemId: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      timeStamp: new Date().getTime(),
+      personData: {
+        work_types_name: [],
+        team_name_arr: [],
+        unit_type_name_arr: [],
+      },
+      checkList: [],
+    };
+  },
+  methods: {
+    getTime(ts) {
+      let date = new Date(ts);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let day = date.getDate();
+      month = month > 9 ? month : "0" + month;
+      day = day < 10 ? "0" + day : day;
+      let today = year + "-" + month + "-" + day;
+      return `${today}`;
+    },
+    prevDay() {
+      this.timeStamp = this.timeStamp - 86400000;
+      this.getPersonCheckListData();
+    },
+    nextDay() {
+      this.timeStamp = this.timeStamp + 86400000;
+      this.getPersonCheckListData();
+    },
+    getPersonData() {
+      getCheckPersonData(this.itemId).then((res) => {
+        this.personData = res.data;
+      });
+      this.getPersonCheckListData();
+    },
+    getPersonCheckListData() {
+      getPersonCheckInList({
+        person_id: this.itemId,
+        start_time: this.getTime(this.timeStamp) + " 00:00:00",
+        end_time: this.getTime(this.timeStamp) + " 23:59:59",
+      }).then((res) => {
+        this.checkList = res.data;
+      });
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("changeVisible", val);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.getPersonData();
+      } else {
+        this.personData = {
+          work_types_name: [],
+          team_name_arr: [],
+          unit_type_name_arr: [],
+        };
+        this.checkList = [];
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.check-in-detail {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  color: #c6def9;
+  .person-detail {
+    padding: 20px;
+    background: #0e3c75;
+    width: 240px;
+    color: #fff;
+    font-size: 14px;
+    .person-portrait {
+      padding: 40px;
+      padding-bottom: 24px;
+      text-align: center;
+      img {
+        width: 118px;
+        height: 118px;
+        vertical-align: top;
+        border-radius: 50%;
+        border: 4px solid #2268bf;
+        margin: 0 auto;
+      }
+    }
+    .person-name {
+      font-size: 18px;
+      margin-bottom: 18px;
+      text-align: center;
+    }
+    .person-job {
+      text-align: center;
+      margin-bottom: 14px;
+    }
+    .person-status {
+      width: 60px;
+      line-height: 24px;
+      background: #00c2c9;
+      border-radius: 4px;
+      text-align: center;
+      margin: 0 auto;
+      margin-bottom: 30px;
+    }
+    .person-detail-text {
+      color: #c6def9;
+      padding: 10px;
+      line-height: 30px;
+    }
+    .check-status {
+      color: #c6def9;
+      border-top: 4px solid #164b8e;
+      border-bottom: 4px solid #164b8e;
+      padding: 10px;
+      line-height: 30px;
+    }
+  }
+  .time-detail {
+    width: calc(100% - 290px);
+
+    .time-picker {
+      display: flex;
+      justify-content: space-between;
+      background: #0e3c75;
+      padding: 20px;
+      i {
+        cursor: pointer;
+      }
+    }
+
+    .time-line {
+      margin-top: 10px;
+      background: #0e3c75;
+      padding: 20px;
+      height: calc(100% - 110px);
+      overflow-y: auto;
+    }
+  }
+}
+.time-line {
+  .iconfont {
+    transform: translateY(2px);
+  }
+  i {
+    vertical-align: top;
+    font-size: 24px;
+  }
+}
+
+.time-line-container {
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-3px);
+  &:hover {
+    .list-line-container {
+      .mid-line {
+        .dot {
+          background: #00ffff;
+          border: 2px solid #ffffff;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+  .time-description {
+    width: calc(100% - 48px);
+    height: 100px;
+    .time-description-inner {
+      padding: 20px 20px;
+      line-height: 20px;
+      color: #c6def9;
+      border-radius: 6px;
+      height: 40px;
+      background: #134584;
+      margin: 10px 0;
+      position: relative;
+      .arrow {
+        width: 20px;
+        height: 20px;
+        background: url("@/assets/realname/arrow.png") no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateX(-100%) translateY(-50%);
+      }
+      &:hover {
+        background: #1c569f;
+        .arrow {
+          width: 20px;
+          height: 20px;
+          background: url("@/assets/realname/arrow-hover.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+  .list-line-container {
+    width: 24px;
+    .mid-line {
+      width: 2px;
+      height: 100px;
+      background: #2f69b2;
+      margin: 0 auto;
+      position: relative;
+      .dot {
+        width: 14px;
+        height: 14px;
+        background: #1e4c85;
+        border: 2px solid #2f69b2;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+  }
+  &:last-child {
+    .mid-line {
+      width: 2px;
+      height: 50px;
+      background: #2f69b2;
+      margin: 0 auto;
+      position: relative;
+      .dot {
+        width: 14px;
+        height: 14px;
+        background: #1e4c85;
+        border: 2px solid #2f69b2;
+        border-radius: 50%;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(100%);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/realname/CheckInList.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    append-to-body
+    title="考勤情况"
+    top="0"
+    width="1200px"
+  >
+    <el-form
+      inline
+      :model="searchForm"
+      style="padding: 10px; background: #0e3c75; margin-bottom: 10px"
+    >
+      <el-form-item label="考勤时间">
+        <el-date-picker
+          v-model="searchForm.date"
+          type="date"
+          value-format="yyyy-MM-dd"
+          clearable
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="岗位类型">
+        <el-select v-model="searchForm.position_type" clearable>
+          <el-option
+            v-for="(option, index) in positionTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="单位类型">
+        <el-select v-model="searchForm.company_type" clearable>
+          <el-option
+            v-for="(option, index) in unitTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工种">
+        <el-select v-model="searchForm.work_type" clearable>
+          <el-option
+            v-for="(option, index) in workTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="姓名">
+        <el-input v-model="searchForm.keywords" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          @click="searchRecords"
+          style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      :data="tableData"
+      height="550px"
+      stripe
+      @row-click="showCheckInDetail"
+    >
+      <el-table-column label="考勤拍照" align="center" width="90">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.face_img_url" class="previewImg" />
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" prop="name" align="center">
+      </el-table-column>
+      <el-table-column label="所属单位" prop="company_name" align="center">
+      </el-table-column>
+      <el-table-column
+        label="所在岗位"
+        prop="position_type_name"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column label="工种" prop="work_types_name" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.work_types_name.join(",") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="最早入厂时间"
+        prop="in_record_time"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column
+        label="最近出场时间"
+        prop="out_record_time"
+        align="center"
+      >
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+    <CheckInDetail
+      :itemId="personId"
+      :visible="singleCheckInVisible"
+      @changeVisible="(val) => (singleCheckInVisible = val)"
+    ></CheckInDetail>
+  </el-dialog>
+</template>
+<script>
+import CheckInDetail from "./CheckInDetail";
+import { getCheckInListByDate, getPersonListConfigData } from "@/api/index";
+export default {
+  name: "CheckInList",
+  components: { CheckInDetail },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    currentIn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      currentPage: 1,
+      total: 0,
+      searchForm: {
+        date: this.getTime(new Date().getTime()),
+      },
+      pageSize: 10,
+      tableData: [],
+      unitTypeData: [],
+      positionTypeData: [],
+      workTypeData: [],
+      singleCheckInVisible: false,
+      personId: "",
+    };
+  },
+  mounted() {
+    getPersonListConfigData().then((res) => {
+      this.unitTypeData = res.data.unitTypeData;
+      this.positionTypeData = [
+        ...res.data.normalPositionTypeData,
+        ...res.data.managerPositionTypeData,
+      ]; //这里两个需要合并
+      this.workTypeData = res.data.workTypeData;
+    });
+  },
+  methods: {
+    showCheckInDetail(row) {
+      this.personId = row.person_id;
+      this.singleCheckInVisible = true;
+    },
+    handleCurrentChange(current) {
+      getCheckInListByDate({
+        ...this.searchForm,
+        current_in: this.currentIn ? 1 : "",
+        limit: this.pageSize,
+        page: current,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = current;
+      });
+    },
+    handleSizeChange(size) {
+      getCheckInListByDate({
+        ...this.searchForm,
+        current_in: this.currentIn ? 1 : "",
+        limit: size,
+        page: 1,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = 1;
+      });
+    },
+    searchRecords() {
+      getCheckInListByDate({
+        ...this.searchForm,
+        current_in: this.currentIn ? 1 : "",
+        limit: this.pageSize,
+        page: 1,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = 1;
+      });
+    },
+    getTime(ts) {
+      let date = new Date(ts);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let day = date.getDate();
+      month = month > 9 ? month : "0" + month;
+      day = day < 10 ? "0" + day : day;
+      let today = year + "-" + month + "-" + day;
+      return `${today}`;
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("changeVisible", val);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.searchForm = {
+          date: this.getTime(new Date().getTime()),
+        };
+        this.searchRecords();
+      } else {
+        this.tableData = [];
+        this.currentPage = 1;
+        this.pageSize = 10;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import "@/assets/common/element.less";
+.step-area {
+  padding: 24px;
+  background: #0e3b72;
+}
+.dialog-title {
+  line-height: 44px;
+  background: #0e3b72;
+  text-align: center;
+  font-size: 16px;
+  color: #24f0b8;
+  margin-bottom: 2px;
+  margin-top: 12px;
+}
+.dialog-form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .dialog-item {
+    width: calc(50% - 50px);
+    margin-bottom: 2px;
+    background: #114483;
+    padding: 12px 24px;
+    color: #c6def9;
+    font-size: 14px;
+    &.inline {
+      width: 100%;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &.border {
+    border-top: 10px solid #0e3b72;
+  }
+}
+.imgs {
+  width: 100px;
+  height: 100px;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+#scroll-dialog {
+  max-height: 800px;
+  overflow-y: auto;
+}
+
+::v-deep .el-step__icon.is-text {
+  border: none !important;
+  i {
+    font-size: 24px;
+  }
+}
+::v-deep .el-step__head.is-finish {
+  color: #24f0b8;
+  border-color: #24f0b8;
+}
+::v-deep .el-step__head.is-process {
+  color: #c6def9;
+}
+.previewImg {
+  width: 50px;
+  height: 50px;
+}
+.construction-title {
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+  padding: 10px 20px 30px;
+}
+::v-deep .el-select {
+  width: 120px;
+}
+::v-deep .el-date-editor {
+  width: 140px !important;
+}
+::v-deep .el-table__row {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file

src/components/realname/Index.vue

@@ -15,7 +15,11 @@
             </div>
           </div>
         </div>
-        <div class="status-count">
+        <div
+          class="status-count"
+          @click="showPersonList(2)"
+          style="cursor: pointer"
+        >
           <img
             class="status-img"
             src="@/assets/realname/icon_b_er@2x.png"
@@ -28,7 +32,11 @@
             </div>
           </div>
         </div>
-        <div class="status-count">
+        <div
+          class="status-count"
+          @click="showPersonList(1)"
+          style="cursor: pointer"
+        >
           <img
             class="status-img"
             src="@/assets/realname/icon_b_san@2x.png"
@@ -54,7 +62,14 @@
             </div>
           </div>
         </div>
-        <div class="status-count">
+        <div
+          class="status-count"
+          style="cursor: pointer"
+          @click="
+            checkInListVisible = true;
+            currentIn = false;
+          "
+        >
           <img
             class="status-img"
             src="@/assets/realname/icon_b_wu@2x.png"
@@ -67,7 +82,19 @@
             </div>
           </div>
         </div>
-        <div class="status-count">
+        <CheckInList
+          :visible="checkInListVisible"
+          @changeVisible="(val) => (checkInListVisible = val)"
+          :currentIn="currentIn"
+        ></CheckInList>
+        <div
+          class="status-count"
+          style="cursor: pointer"
+          @click="
+            checkInListVisible = true;
+            currentIn = true;
+          "
+        >
           <img
             class="status-img"
             src="@/assets/realname/icon_b_liu@2x.png"
@@ -80,6 +107,12 @@
             </div>
           </div>
         </div>
+        <PersonList
+          :visible="personListVisible"
+          @changeVisible="changePersonListVisible"
+          :type="personType"
+          :workType="personWorkType"
+        ></PersonList>
       </div>
     </div>
     <div class="mid-area">
@@ -95,6 +128,7 @@
             class="person-check"
             v-for="(person, index) in checkList"
             :key="index"
+            @click="showPersonCheckDetail(person.id)"
           >
             <div class="portrait">
               <img
@@ -125,6 +159,11 @@
             <div>暂无数据！</div>
           </div>
         </div>
+        <CheckInDetail
+          :itemId="personId"
+          :visible="singleCheckInVisible"
+          @changeVisible="(val) => (singleCheckInVisible = val)"
+        ></CheckInDetail>
       </ShadowContainer>
       <Title text="人员地域分布"></Title>
       <ShadowContainer class="short-container">
@@ -207,6 +246,7 @@
                 v-for="(iType, index) in industryTypes"
                 :key="index"
                 class="i-type"
+                @click="showWorkTypeList(iType.type)"
               >
                 <div class="type-info">
                   <div class="i-type-name">
@@ -251,8 +291,12 @@ import {
   getInOutData,
   getWorkTypeList,
 } from "@/api/index";
+import CheckInDetail from "./CheckInDetail";
+import CheckInList from "./CheckInList";
+import PersonList from "./PersonList";
 export default {
   name: "Realname",
+  components: { CheckInDetail, PersonList, CheckInList },
   data() {
     return {
       checkList: [],
@@ -271,9 +315,41 @@ export default {
       areaTotal: 0,
       interval1: null,
       interval2: null,
+      personId: "",
+      singleCheckInVisible: false,
+      personType: 2,
+      personWorkType: "",
+      personListVisible: false,
+      checkInListVisible: false,
+      currentIn: false,
     };
   },
   methods: {
+    showPersonCheckDetail(personId) {
+      this.personId = personId;
+      this.$nextTick(() => {
+        this.singleCheckInVisible = true;
+      });
+    },
+    changePersonListVisible(visible) {
+      this.personListVisible = visible;
+      if (!visible) {
+        this.personWorkType = "";
+      }
+    },
+    showWorkTypeList(type) {
+      this.personType = 2;
+      this.personWorkType = Number(type);
+      this.$nextTick(() => {
+        this.personListVisible = true;
+      });
+    },
+    showPersonList(type) {
+      this.personType = type;
+      this.$nextTick(() => {
+        this.personListVisible = true;
+      });
+    },
     formatSlider(value) {
       return `人数占总工程人数：${value}%`;
     },
@@ -879,6 +955,7 @@ export default {
   border-radius: 4px;
   margin-bottom: 12px;
   display: flex;
+  cursor: pointer;
   &:hover {
     background: rgba(20, 86, 144, 0.5);
   }
@@ -947,6 +1024,7 @@ export default {
   font-size: 14px;
   color: #c6def9;
   padding: 4px;
+  cursor: pointer;
   .type-info {
     display: flex;
     justify-content: space-between;

src/components/realname/PersonList.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    append-to-body
+    :title="type == 2 ? '普通工人列表' : '关键岗位人员列表'"
+    top="0"
+    width="1200px"
+  >
+    <el-form
+      inline
+      :model="searchForm"
+      style="padding: 10px; background: #0e3c75; margin-bottom: 10px"
+    >
+      <el-form-item v-if="type == 2" label="班组">
+        <el-select v-model="searchForm.team_id" clearable>
+          <el-option
+            v-for="(option, index) in teamData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="type == 2" label="工种">
+        <el-select v-model="searchForm.work_type" clearable>
+          <el-option
+            v-for="(option, index) in workTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="type == 1" label="单位类型">
+        <el-select v-model="searchForm.company_type" clearable>
+          <el-option
+            v-for="(option, index) in unitTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="type == 1" label="岗位类型">
+        <el-select v-model="searchForm.position_type" clearable>
+          <el-option
+            v-for="(option, index) in managerPositionTypeData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-select v-model="searchForm.sex" clearable>
+          <el-option
+            v-for="(option, index) in sexData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="在岗状态">
+        <el-select v-model="searchForm.duty_status" clearable>
+          <el-option
+            v-for="(option, index) in dutyStatusData"
+            :key="index"
+            :value="option.value"
+            :label="option.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="姓名">
+        <el-input v-model="searchForm.keywords" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          @click="searchRecords"
+          style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" height="550px" stripe>
+      <el-table-column
+        label="姓名"
+        prop="person_name"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        v-if="type == 2"
+        label="所属参见单位"
+        prop="company_name"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.company_type_name_arr.join(",") }}/{{
+            scope.row.company_name
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="type == 2"
+        label="所在班组"
+        prop="team_name_arr"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.team_name_arr.join(",") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="type == 2"
+        prop="work_types_name"
+        label="工种"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.work_types_name.join(",") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="type == 1"
+        label="所属单位类型"
+        prop="company_type_name_arr"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.company_type_name_arr.join(",") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="type == 1"
+        label="所属单位"
+        prop="company_name"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        v-if="type == 1"
+        prop="position_type_name"
+        label="岗位类型"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column label="性别" prop="sex_name" align="center" width="90">
+      </el-table-column>
+      <el-table-column label="联系电话" prop="format_mobile" align="center">
+      </el-table-column>
+      <el-table-column label="在岗状态" align="center" width="90">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color: scope.row.duty_status == 1 ? '#5CFF6B' : '#C6DEF9',
+            }"
+            >{{ scope.row.duty_status_name }}</span
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </el-dialog>
+</template>
+<script>
+import { getPersonList, getPersonListConfigData } from "@/api/index";
+export default {
+  name: "PersonList",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: Number,
+      default: 1,
+    },
+    workType: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentPage: 1,
+      total: 0,
+      searchForm: {},
+      pageSize: 10,
+      tableData: [],
+      teamData: [],
+      workTypeData: [],
+      unitTypeData: [],
+      managerPositionTypeData: [],
+      sexData: [],
+      dutyStatusData: [],
+    };
+  },
+  mounted() {
+    getPersonListConfigData().then((res) => {
+      this.teamData = res.data.teamData;
+      this.unitTypeData = res.data.unitTypeData;
+      this.managerPositionTypeData = res.data.managerPositionTypeData; // 普通工人不需要岗位类型 管理人员需要
+      this.sexData = res.data.sexData;
+      this.dutyStatusData = res.data.dutyStatusData;
+      this.workTypeData = res.data.workTypeData;
+    });
+  },
+  methods: {
+    handleCurrentChange(current) {
+      getPersonList({
+        ...this.searchForm,
+        limit: this.pageSize,
+        type: this.type,
+        page: current,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = current;
+      });
+    },
+    handleSizeChange(size) {
+      getPersonList({
+        ...this.searchForm,
+        type: this.type,
+        limit: size,
+        page: 1,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = 1;
+      });
+    },
+    searchRecords() {
+      getPersonList({
+        ...this.searchForm,
+        type: this.type,
+        limit: this.pageSize,
+        page: 1,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.data;
+        this.currentPage = 1;
+      });
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("changeVisible", val);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        if (this.workType && this.type == 2) {
+          this.searchForm.work_type = this.workType;
+        }
+        this.searchRecords();
+      } else {
+        this.tableData = [];
+        this.currentPage = 1;
+        this.pageSize = 10;
+        this.searchForm = {};
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.step-area {
+  padding: 24px;
+  background: #0e3b72;
+}
+.dialog-title {
+  line-height: 44px;
+  background: #0e3b72;
+  text-align: center;
+  font-size: 16px;
+  color: #24f0b8;
+  margin-bottom: 2px;
+  margin-top: 12px;
+}
+.dialog-form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .dialog-item {
+    width: calc(50% - 50px);
+    margin-bottom: 2px;
+    background: #114483;
+    padding: 12px 24px;
+    color: #c6def9;
+    font-size: 14px;
+    &.inline {
+      width: 100%;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &.border {
+    border-top: 10px solid #0e3b72;
+  }
+}
+.imgs {
+  width: 100px;
+  height: 100px;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+#scroll-dialog {
+  max-height: 800px;
+  overflow-y: auto;
+}
+
+::v-deep .el-step__icon.is-text {
+  border: none !important;
+  i {
+    font-size: 24px;
+  }
+}
+::v-deep .el-step__head.is-finish {
+  color: #24f0b8;
+  border-color: #24f0b8;
+}
+::v-deep .el-step__head.is-process {
+  color: #c6def9;
+}
+.previewImg {
+  width: 50px;
+  height: 50px;
+}
+.construction-title {
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+  padding: 10px 20px 30px;
+}
+::v-deep .el-select {
+  width: 120px;
+}
+</style>
\ No newline at end of file

src/components/supervisory/Index.vue

@@ -411,7 +411,8 @@ export default {
           return item.id;
         });
         if (cameraIdList.indexOf(data.id) != -1) {
-          return this.$message.warning("该监控已存在!");
+          this.activeIndex = cameraIdList.indexOf(data.id);
+          return;
         }
         const nullIndex = playerArray.indexOf(null);
         if (nullIndex != -1) {
@@ -583,7 +584,8 @@ export default {
                   singlePlayer.play();
                 });
 
-                this.cameraList[this.cameraList.length].player = singlePlayer;
+                this.cameraList[this.cameraList.length - 1].player =
+                  singlePlayer;
                 this.$forceUpdate();
               });
             }, 500);

src/utils/noloadingRequest.js

 import axios from 'axios'
 import { Message } from 'element-ui';
 const noLoadingrequest = axios.create({
-    withCredentials: false,
+    withCredentials: false
 })
 
 noLoadingrequest.interceptors.request.use(

src/utils/request.js

@@ -35,7 +35,7 @@ var hideLoading = _.debounce(() => {
 }, 10);
 
 const request = axios.create({
-    withCredentials: false,
+    withCredentials: false
 })
 
 request.interceptors.request.use(
@@ -76,7 +76,6 @@ request.interceptors.response.use(
             message: '服务器错误',
             type: 'error'
         })
-        console.log(error)
         closeLoading()
         return Promise.reject(new Error(error).message)
     }