大屏和环林卡口管理

src/views/home/components/Checkpoint.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="mian_box">
+    <div class="item">检查站：<span @click="openDialog('jcz')">2</span></div>
+    <div class="item">卡口：<span @click="openDialog('kk')">8</span></div>
+  </div>
+  <pointList v-model="pointListShow" :lxType="lxType" />
+</template>
+<script setup>
+import pointList from "./pointList.vue";
+import { ref, onMounted, reactive } from "vue";
+const lxType = ref();
+const pointListShow = ref(false);
+const openDialog = (val) => {
+  lxType.value = val;
+  pointListShow.value = true;
+};
+</script>
+<style lang="scss" scoped>
+.mian_box {
+  display: flex;
+  justify-content: space-around;
+  font-size: 24px;
+  color: #fff;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/views/home/components/beonDuty.vue

@@ -9,7 +9,7 @@
         <span class="checkpoint-count">{{ item.personSl }} 人</span>
       </div>
     </div>
-    <Empty :show="checkpoints.length == 0" />
+    <Empty :show="checkpoints.length == 0" :imgSize="100" />
   </div>
 </template>
 

src/views/home/components/pointList.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    v-model="modelValue"
+    width="60%"
+    custom-class="container"
+    @close="close"
+    :title="title"
+    align-center
+    append-to-body
+  >
+    <MyTable
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+      :controlsWidth="pageData.controlsWidth"
+      @chooseData="chooseData"
+    >
+      <template #sblx="{ row }">
+        <dict-tag :options="D_BZ_SBLX" :value="row.sblx" :tag="false" />
+      </template>
+      <template #sblxdm="{ row }">
+        <dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
+      </template>
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-link type="primary" @click="enterLevel(row)">详情</el-link>
+      </template>
+    </MyTable>
+    <div class="footInfoBtn flex just-between align-center">
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="550"
+        :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch, getCurrentInstance } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { ysSxtgetPageList } from "@/api/yszx";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const { D_BZ_SBLX, D_BZ_GZSBLX } = proxy.$dict("D_BZ_SBLX", "D_BZ_GZSBLX");
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lxType: {
+    type: String,
+    default: ""
+  }
+});
+const emit = defineEmits(["update:modelValue", "choose"]);
+const dataLsit = ref();
+const title = ref();
+const pageData = reactive({
+  tableData: [{ ssbm: "测试" }], //表格数据
+  keyCount: 0,
+  tableHeight: 500,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "radio",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 180, //操作栏宽度
+  tableColumn: [
+    { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+    { label: "检查站名称", prop: "sbmc", showOverflowTooltip: true },
+    { label: "环林检查站类型", prop: "sbbh", showOverflowTooltip: true },
+    { label: "执勤类型", prop: "csmc", showOverflowTooltip: true },
+    { label: "检查站地址", prop: "dzmc", showOverflowTooltip: true }
+  ]
+});
+watch(
+  () => props.lxType,
+  (val) => {
+    if (val == "jcz") {
+      title.value = "检查站";
+      pageData.tableColumn = [
+        { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+        { label: "检查站名称", prop: "sbmc", showOverflowTooltip: true },
+        { label: "环林检查站类型", prop: "sbbh", showOverflowTooltip: true },
+        { label: "执勤类型", prop: "csmc", showOverflowTooltip: true },
+        { label: "检查站地址", prop: "dzmc", showOverflowTooltip: true }
+      ];
+    } else {
+      title.value = "卡口信息";
+      pageData.tableColumn = [
+        { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+        { label: "卡口名称", prop: "sbmc", showOverflowTooltip: true },
+        { label: "环林卡口类型", prop: "sbbh", showOverflowTooltip: true },
+        { label: "执勤类型", prop: "csmc", showOverflowTooltip: true },
+        { label: "卡口地址", prop: "dzmc", showOverflowTooltip: true }
+      ];
+    }
+  }
+);
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    // ssbm: propsGzyList.ssbm,
+    pageSize: pageData.pageConfiger.pageSize,
+    pageCurrent: pageData.pageConfiger.pageCurrent
+  };
+  ysSxtgetPageList(promes)
+    .then((res) => {
+      pageData.tableData = res.records || [];
+      pageData.total = res.total || 0;
+    })
+    .finally(() => {
+      pageData.tableConfiger.loading = false;
+    });
+};
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    // getList();
+  }
+);
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+const chooseData = (val) => {
+  if (pageData.tableConfiger.showSelectType === "radio") {
+    dataLsit.value = val[0];
+  } else {
+    dataLsit.value = val;
+  }
+};
+const close = () => {
+  emit("update:modelValue", false);
+};
+const submitDate = () => {
+  emit("choose", dataLsit.value);
+  close();
+};
+const enterLevel = (val) => {
+  const hrefs = router.resolve({
+    name: "StationLevel",
+    path: "/StationLevel",
+    query: { id: val.id, name: val.jczmc }
+  });
+  window.open(hrefs.href, "_blank");
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  color: #000000;
+}
+</style>

src/views/home/index.vue

@@ -6,6 +6,12 @@
     <Head></Head>
     <!-- 左边 内容-->
     <div class="home-aside asideL">
+      <div class="asideL-bottom">
+        <div class="common-title">检查站卡口统计</div>
+        <div class="comom-cnt">
+          <Checkpoint />
+        </div>
+      </div>
       <div class="asideL-top">
         <div class="common-title">数据采集</div>
         <div class="comom-cnt">
@@ -13,26 +19,27 @@
         </div>
       </div>
       <div class="asideL-bottom">
-        <div class="common-title">人员预警</div>
+        <div class="common-title">值班备勤</div>
         <div class="comom-cnt">
-          <PeoWarning />
-        </div>
-      </div>
-      <div class="asideL-bottom">
-        <div class="common-title">车辆预警</div>
-        <div class="comom-cnt">
-          <CarWarning />
+          <BeOnDuty></BeOnDuty>
         </div>
       </div>
+      
     </div>
     <!-- <Warning></Warning> -->
 
     <!-- 右边 内容-->
     <div class="home-aside asideR">
       <div class="asideL-top">
-        <div class="common-title">值班备勤</div>
+        <div class="common-title">人员预警</div>
         <div class="comom-cnt">
-          <BeOnDuty></BeOnDuty>
+          <PeoWarning />
+        </div>
+      </div>
+      <div class="asideL-top">
+        <div class="common-title">车辆预警</div>
+        <div class="comom-cnt">
+          <CarWarning />
         </div>
       </div>
       <div class="asideL-bottom">
@@ -55,6 +62,7 @@ import Collection from "./components/collection.vue";
 import CarWarning from "./components/CarWarning.vue";
 import PeoWarning from "./components/PeoWarning.vue";
 import BeOnDuty from "./components/beonDuty.vue";
+import Checkpoint from "./components/Checkpoint.vue";
 import Entrance from "./components/entrance.vue";
 import WanringAnyse from "./components/wanringAnyse.vue";
 import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
@@ -263,7 +271,7 @@ const getMapData = () => {
     box-sizing: border-box;
 
     .asideL-top {
-      height: 40%;
+      height: 20%;
       background: url("~@/assets/images/border_R_T.png") no-repeat center center;
       background-size: 100% 100%;
     }

src/views/home/layout/head.vue

@@ -81,7 +81,7 @@ const {
 const props = defineProps({
   title: {
     type: String,
-    default: "林芝市环林卡口综合管理"
+    default: "林芝市智慧公安检查"
   },
   query: {
     type: String,
@@ -112,7 +112,6 @@ onMounted(() => {
   username.value = localStorage.getItem("USERNAME");
   emitter.on("chengZ", (res) => {
     row.value = res;
-    console.log(res);
   });
   timersfm.value = setInterval(() => {
     CurrentTime();

src/views/home/layout/zbbb.vue

@@ -214,7 +214,7 @@
       </div>
     </el-form>
   </div>
-  <ChoosePersonnel  v-model="showMfDialog" @choose="chooseDataGzy" />
+  <ChoosePersonnel v-model="showMfDialog" @choose="chooseDataGzy" />
 </template>
 
 <script setup>
@@ -269,7 +269,7 @@ const ChegeMj = (val) => {
       ryXm: item.xm,
       rysfzh: item.sfzh,
       ryMfjlb: item.fl,
-      ryid:item.ryid,
+      ryid: item.ryid,
       ryLxdh: item.lxdh
     };
   });
@@ -282,7 +282,7 @@ const fz = (val) => {
       xm: item.ryXm,
       sfzh: item.rysfzh,
       fl: item.ryMfjlb,
-      ryid:item.ryid,
+      ryid: item.ryid,
       lxdh: item.ryLxdh
     };
   });
@@ -293,17 +293,17 @@ const fz = (val) => {
 const init = (type) => {
 
 
-  pageType.value = type==undefined||type=='add'?"add":"detail";
+  pageType.value = type == undefined || type == 'add' ? "add" : "detail";
   dialogForm.value = true;
   // 根据type和row初始化表单数据
   if (props.row) {
     listQuery.value = { ...props.row };
-    if (props.row.ryList&&props.row.ryList.length > 0) {
+    if (props.row.ryList && props.row.ryList.length > 0) {
       const data = fz(props.row.ryList);
       mjData.value = data.filter((item) => item.fl == "01");
       fjData.value = data.filter((item) => item.fl == "02");
     }
-    if (listQuery.value.qxList&&listQuery.value.qxList.length == 0) {
+    if (listQuery.value.qxList && listQuery.value.qxList.length == 0) {
       listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
         return { qxmc: item.label, qxsl: 0 };
       });