gx

src/view/dialog/dialogCamera.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShow"
+      center
+      width="80vw"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon size="26" color="#fff" @click="closeDialog">
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <!-- <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: calc(100% - 110px)">
+          
+        </div>
+      </div> -->
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  defineProps,
+  onBeforeMount,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+const props = defineProps({
+  dialogShow: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  // columns: {
+  //   type: Array,
+  //   default: () => {
+  //     return [];
+  //   },
+  // },
+  // tableData: {
+  //   type: Array,
+  //   default: () => {
+  //     return [];
+  //   },
+  // },
+  // title: {
+  //   type: String,
+  //   default: () => {
+  //     return "";
+  //   },
+  // },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShow = ref();
+const data = reactive({
+  title: "",
+  columns: [],
+  tableData: [],
+});
+
+const gridData = [];
+// 监听
+// watch(
+//   () => props.dialogShow,
+//   (newVal, oldVal) => {
+//     dialogShow.value = newVal;
+//     data.columns = props.columns;
+//   }
+// );
+// watch(
+//   () => props.tableData,
+//   (newVal, oldVal) => {
+//     data.tableData = props.tableData;
+//   }
+// );
+// 使用生命钩子
+onMounted(() => {
+  dialogShow.value = props.dialogShow;
+  console.log(111);
+  
+  // data.columns = props.columns;
+  // data.title = props.title;
+  // data.tableData = props.tableData;
+});
+
+const closeDialog = () => {
+  dialogShow.value = false;
+  emit("close");
+};
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+    justify-content: center;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/person/index.vue

@@ -35,7 +35,15 @@
           <div class="my-info-item">
             <div class="my-info-label">居住状态</div>
             <div class="my-info-content">
-              <p>{{ baseInfo.jzzt == 0 ? '居住' : baseInfo.jzzt == 1 ? '未居住' : '' }}</p>
+              <p>
+                {{
+                  baseInfo.jzzt == 0
+                    ? "居住"
+                    : baseInfo.jzzt == 1
+                    ? "未居住"
+                    : ""
+                }}
+              </p>
             </div>
           </div>
           <div class="my-info-item">
@@ -89,6 +97,12 @@
           <img src="@/assets/person/back.png" alt="" />
           <p>返回</p>
         </div>
+        <!-- v-if="dataMyTag.camera" -->
+        <div class="videoCamera">
+          <el-icon size="26" color="#fff" @click="openCamera">
+            <VideoCamera />
+          </el-icon>
+        </div>
       </div>
       <div class="person-side">
         <div v-if="dataMyTag.title == '医疗保险'">
@@ -271,7 +285,7 @@
           </div>
           <div class="my-info">
             <div class="my-info-item" v-if="dataMyTag.title == '学习'">
-              <div class="my-info-label" style="min-width:40px;">学历</div>
+              <div class="my-info-label" style="min-width: 40px">学历</div>
               <div class="my-info-content">
                 <p>{{ baseInfo.eduPhase || "" }}</p>
               </div>
@@ -286,7 +300,14 @@
               class="my-info-item"
               v-for="(item, index) in tableType.columns"
             >
-              <div class="my-info-label" :class="item.label=='学校' || item.label=='班级'? 'widu':''">{{ item.label }}</div>
+              <div
+                class="my-info-label"
+                :class="
+                  item.label == '学校' || item.label == '班级' ? 'widu' : ''
+                "
+              >
+                {{ item.label }}
+              </div>
               <div class="my-info-content" v-if="rightList?.length != 0">
                 <p>{{ pd(item.label, rightList[item.property]) }}</p>
               </div>
@@ -297,7 +318,7 @@
     </div>
     <Dialog
       :dialogShow="dialogShow"
-      :columns="tableType.columns2"
+      :columns="tableType.columns1"
       :title="tableType.title2"
       :tableData="tableType.data"
       :pagination="paginationDialog"
@@ -305,13 +326,20 @@
       @handle="handlePaginationDialog"
     >
     </Dialog>
+    <DialogCamera
+    :dialogShow="cameraShow"
+    @close="close1"
+    >
+    </DialogCamera>
   </div>
 </template>
 
 <script setup>
 import { reactive, ref, onMounted, watch, computed } from "vue";
 import Dialog from "@/view/dialog/dialog.vue";
+import DialogCamera from "@/view/dialog/dialogCamera.vue";
 import { useRouter, useRoute } from "vue-router";
+import { VideoCamera } from "@element-plus/icons-vue";
 import http from "@/utils/request.js";
 import tools from "@/utils/tools";
 const router = useRouter();
@@ -331,6 +359,7 @@ const emit = defineEmits(["backMap"]);
 const dataMyTag = reactive({
   title: "出生",
   identNo: "",
+  camera: null,
   myTag: [
     {
       name: "低保",
@@ -449,7 +478,7 @@ const dataMyTag = reactive({
   form: {
     data: [],
     column: [],
-  }
+  },
 });
 //右侧分页
 const pagination = reactive({
@@ -474,13 +503,14 @@ const paginationDialog = reactive({
 });
 const baseInfo = ref({});
 const dialogShow = ref(false);
+const cameraShow = ref(false);
 const tableType = reactive({
   url: "",
   //特殊标签
   title2: "",
   title: "出生",
   columns: [],
-  columns:[],
+  columns1: [],
   data: [],
 });
 const columnsList = reactive({
@@ -682,7 +712,7 @@ const pd = computed(() => {
 //特殊标签弹框
 const onClickTag = (item) => {
   tableType.title2 = item.name;
-  tableType.columns2 = columnsList["特殊标签"].column;
+  tableType.columns1 = columnsList["特殊标签"].column;
   dialogShow.value = true;
 };
 //圆球弹框
@@ -692,7 +722,6 @@ const onClickTag2 = (name, label) => {
   tableType.url = columnsList[name].url;
   tableType.columns = columnsList[name].column;
   if (name == "婚育") {
-
   } else if (name == "综合") {
     dataMyTag.form.column = columnsList["一卡通"].column;
     oneCardSolution();
@@ -740,10 +769,13 @@ const getTable = (url, csh) => {
       }
     });
 };
-
 const close = () => {
   dialogShow.value = false;
 };
+const close1 = () => {
+  cameraShow.value = false;
+  console.log('弹框关闭');
+};
 //右侧表格分页
 const handlePagination = (currentPage) => {
   pagination.current = currentPage;
@@ -765,6 +797,7 @@ const getData = (identNo) => {
     .then((res) => {
       if (res.code == 200) {
         baseInfo.value = res.data.ryjbxx;
+        dataMyTag.camera = res.data.camera;
         dataMyTag.myTag.forEach((item) => {
           item.show = 0;
           res.data.rybqxx.forEach((itemm, indexx) => {
@@ -788,7 +821,11 @@ const oneCardSolution = () => {
       }
     });
 };
-
+// 打开摄像头
+const openCamera = () => {
+  cameraShow.value = true;
+  console.log(cameraShow.value,"摄像头");
+};
 const back = () => {
   if (jump.value == "detail") {
     router.back();
@@ -812,7 +849,7 @@ onMounted(() => {
     dataMyTag.identNo = routers.query.identNo;
     jump.value = "detail";
     getData(routers.query.identNo);
-    onClickTag2("出生",'出生');
+    onClickTag2("出生", "出生");
   } else {
     jump.value = "map";
   }
@@ -1169,6 +1206,12 @@ onMounted(() => {
     line-height: 22px;
   }
 }
+.videoCamera {
+  position: absolute;
+  top: 8px;
+  right: 30px;
+  cursor: pointer;
+}
 .widu {
   min-width: 40px !important;
 }