更新大屏

src/assets/css/homeScreen.scss

@@ -0,0 +1,228 @@
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.homeBox{
+    width: 100%;
+    height: 100vh;
+    .home-contant{
+      position: relative;
+      top: 70px;
+      width: 100%;
+      height: calc(100vh - 72px);
+      overflow: hidden;
+      z-index: 2;
+      .home-aside{
+        width: 442px;
+        height: 100%;
+        z-index: 10;
+      }
+      .homeBtn{
+        height: 302px;
+        width: calc(100% - 894px);
+        position: absolute;
+        bottom: 2px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    // 头部
+    .headBox {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      height: 151px;
+      background: url("~@/assets/images/home_head.png") no-repeat center center;
+      background-size: 100% 100%;
+      .top-center {
+        position: absolute;
+        left: 50%;
+        top: 2%;
+        transform: translateX(-50%);
+        font-size: 56px;
+        letter-spacing: 2px;
+        font-family: "YSBTH";
+        white-space: nowrap;
+        background-image: linear-gradient(
+          72deg,
+          #0072ff 0%,
+          #00ffff 18%,
+          #07e9ff 51%,
+          #00ffff 83%,
+          #0072ff 100%
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
+      }
+      .topBtn {
+        display: flex;
+        position: absolute;
+        top: 15%;
+        .topBtn-item {
+          width: 190px;
+          height: 38px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url("~@/assets/images/home_btns.png") no-repeat center center;
+          background-size: 100% 100%;
+          font-size: 18px;
+          cursor: pointer;
+          span {
+            font-family: "YSBTH";
+            margin-top: -4px;
+            @include textColor(#a1d6ff, #ffffff);
+          }
+        }
+        .yjbtn{
+          width: 155px;
+          height: 38px;
+          line-height: 38px;
+          text-align: center;
+          background: url("~@/assets/images/home_btns.png") no-repeat center center;
+          background-size: 100% 100%;
+          font-size: 16px;
+          font-family: "YSBTH";
+          .btms{
+            @include textColor(#a1d6ff, #ffffff);
+          }
+        }
+        .yjbtnActive{
+          // background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
+          // background-size: 100% 100%;
+        }
+      }
+      .topBtn-left {
+        left: 5px;
+        font-size: 12px;
+        .text {
+          font-family: "YSBTH";
+          color: #0bb7ff;
+        }
+        .tests {
+          color: #0a99ff;
+        }
+      }
+      .topBtn-right {
+        right: 170px;
+        .topBtn-item {
+          background: url("~@/assets/images/home_btns_right.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+        .active-topBtn {
+          background: url("~@/assets/images/home_btns_right_active.png") no-repeat
+            center center;
+          background-size: 100% 100%;
+          span {
+            @include textColor(#00ffff, #faff00);
+          }
+        }
+      }
+      .rightIcon {
+        position: absolute;
+        right: 20px;
+        top: 20%;
+        font-size: 17px;
+        span {
+          color: #0bb7ff;
+          cursor: pointer;
+        }
+        img {
+          width: 20px;
+        }
+      }
+    }
+    // 左边
+    .asideL{
+      position: absolute;
+      box-sizing: border-box;
+      left: 10px;
+      .asideL-top{
+        width: 100%;
+        height: 141px;
+        background: #052249;
+      }
+      .asideL-Bottom{
+        height: calc(100% - 141px);
+        .commom-aside{
+          height: calc((100%/3) - 6px);
+          margin-top: 7px;
+          background: #052249;
+        }
+      }
+    }
+    // 右边
+    .asideR{
+      position: absolute;
+      right: 10px;
+      .commom-aside-small{
+        height: calc(((100% - 146px) /3) - 6px);
+        background: #052249;
+        margin-top: 9px;
+      }
+      .commom-aside-big{
+        height: calc(((100% - (100% - 146px) /3)/2) - 6px);
+        margin-bottom: 9px;
+        background: #052249;
+      }
+    }
+    
+    .home-center{
+      position: absolute;
+      left: 50%;
+      top: 0px;
+      transform: translateX(-50%);
+      width: calc(100% - 920px);
+      height: 80px;
+    }
+    .home-foot{
+      position: absolute;
+      left: 50%;
+      bottom: 0px;
+      transform: translateX(-50%);
+      width: calc(100% - 920px);
+      height: calc((100% - 141px)/3 - 9px);
+      min-width: 560px;
+      overflow: hidden;
+      background: url("~@/assets/images/right-1.png") no-repeat center center;
+      background-size: 100% 100%;
+      .comom-title{
+        background: url("~@/assets/images/bg18.png") no-repeat center center;
+        background-size: 100% 100%;
+        .title{
+          font-size: 22px;
+          font-family: 'YSBTH';
+          padding-left: 35px;
+        }
+      }
+    }
+  
+    // 公用
+    .comom-title{
+      background: url("~@/assets/images/bg17.png") no-repeat center center;
+      background-size: 100% 100%;
+      width: 100%;
+      height: 35px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      box-sizing: border-box;
+      .title{
+        font-size: 22px;
+        font-family: 'YSBTH';
+        padding-left: 35px;
+      }
+    }
+    .comom-cnt{
+      height: calc(100% - 35px);
+      padding: 4px 10px;
+      box-sizing: border-box;
+      background: url("~@/assets/images/bg_13.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+    
+  }

src/components/MyComponents/Empty/index.vue

@@ -0,0 +1,25 @@
+<template>
+   <el-empty :description="props.description" :image="require('@/assets/images/icon_043.png')" v-if="props.show" :image-size="props.imgSize" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  imgSize:{
+    type:Number,
+    default:150
+  },
+  show:{
+    type:Boolean,
+    default:false
+  },
+  description:{
+    type:String,
+    default:'暂无数据'
+  }
+});
+</script>
+
+<style>
+
+</style>

src/components/MyComponents/index.js

@@ -18,6 +18,7 @@ import MarkdownEdit from "./MarkdownEdit/index.vue";
 import FileUpload from "./FileUpload/index.vue";
 import RichOnly from "./RichOnly/index.vue";
 import Date from "./Date/index.vue";
+import Empty from "./Empty/index.vue";
 export {
   AddressSelect,
   FrameWork,
@@ -38,5 +39,6 @@ export {
   MarkdownEdit,
   FileUpload,
   RichOnly,
-  Date
+  Date,
+  Empty
 };

src/components/aboutTable/DarkTable.vue

@@ -0,0 +1,376 @@
+<template>
+  <div style="width: 100%;height:100%">
+    <!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
+    <el-table
+      ref="multipleTableRef"
+      :data="tableData"
+      :class="customClass"
+      :cell-class-name="setClass"
+      :row-class-name="rowClassName"
+      @selection-change="handleSelectionChange"
+      @current-change="handleCurrentChange"
+      @row-click="singleElection"
+      @row-dblclick="rowdbClickHland"
+      :reserve-selection="true"
+      @row-contextmenu="rowcontextmenuHland"
+      @mouseover.native="clearnScroll"
+      @mouseleave.native="createScroll"
+      :row-key="getConfiger.rowKey"
+      :border="getConfiger.border"
+      :default-expand-all="getConfiger.defaultExpandAll"
+      :stripe="getConfiger.stripe"
+      :height="tableHeight"
+      v-loading="tableConfiger.loading"
+      :lazy="getConfiger.lazy"
+      :load="load"
+      v-el-table-infinite-scroll="loadTable"
+      :tree-props="treePros"
+      style="width: 100%; font-size: 16px"
+      :header-cell-class-name="() => 'myTableHeadBgColorDark'"
+      :highlight-current-row="getConfiger.showSelectType === 'radio'"
+      :row-style="{
+        height:
+          getConfiger.rowHeight === 'auto'
+            ? getConfiger.rowHeight
+            : getConfiger.rowHeight + 'px'
+      }"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        v-if="getConfiger.showSelectType === 'checkBox'"
+        :reserve-selection="true"
+      />
+      <el-table-column
+        width="55"
+        v-else-if="getConfiger.showSelectType === 'radio'"
+        #default="{ row }"
+      >
+        <el-radio
+          class="radio"
+          v-model="radioChoose"
+          :label="row[getConfiger.rowKey]"
+          >&nbsp;</el-radio
+        >
+      </el-table-column>
+      <el-table-column
+        type="index"
+        label="序号"
+        v-if="getConfiger.showIndex"
+        width="60"
+        :align="getConfiger?.align"
+      />
+      <el-table-column
+        v-for="(item, index) in tableColumn"
+        :align="getConfiger?.align"
+        :prop="item.prop"
+        :key="index"
+        :label="item.label"
+        :width="item.width"
+        :show-overflow-tooltip="item.showOverflowTooltip || false"
+        :sortable="item.sortable || false"
+      >
+        <!-- 使用自定义表头 -->
+        <template v-if="item.showSoltHeader" #header="column">
+          <span class="header-icon">
+            <slot :name="item.prop + 'head'" v-bind="column"></slot>
+          </span>
+        </template>
+
+        <!-- 使用自定义 -->
+        <template v-if="item.showSolt" #default="scope">
+          <slot :name="item.prop" v-bind="scope"></slot>
+        </template>
+        <!-- 默认 -->
+        <template v-else #default="{ row }">
+          {{ row[item.prop] }}
+        </template>
+      </el-table-column>
+
+      <!-- 操作 -->
+      <el-table-column
+        v-if="getConfiger.haveControls"
+        :fixed="fixed"
+        :label="getConfiger.controls"
+        :width="controlsWidth"
+        :align="getConfiger?.align"
+      >
+        <template #default="scope">
+          <slot name="controls" v-bind="scope"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
+import {
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect
+} from "vue";
+const props = defineProps({
+  tableConfiger: {
+    type: Object,
+    default: () => {}
+  },
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  tableColumn: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  controlsWidth: {
+    type: Number,
+    default: 180
+  },
+  tableHeight: {
+    type: Number
+  },
+  isScroll: {
+    type: Number,
+    default: false
+  },
+  customClass: {
+    type: String
+  },
+  setClass: {
+    type: String
+  },
+  setRowClass: {
+    type: Boolean
+  },
+  treePros: {
+    type: Object,
+    default: {
+      children: "children",
+      hasChildren: "hasChildren"
+    }
+  },
+  fixed: {
+    type: String,
+    default: "right"
+  }
+});
+// 可选的时候选择的数据
+const emit = defineEmits([
+  "chooseData",
+  "rowdbClickHland",
+  "rowcontextmenuHland"
+]);
+const multipleTableRef = ref();
+const currentRow = ref();
+let getConfiger = reactive({
+  showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
+  showIndex: true, // 是否显示索引
+  rowKey: "id", // 如果是树形表格必须设置rowKey
+  border: true, // 是否显示边框
+  defaultExpandAll: false, // 是否展开全部
+  loading: false,
+  align: "center", // 列的对齐方式 left / center / right
+  haveControls: true, // 是否有操作列
+  controls: "操作", // 操作列的表头
+  stripe: false, // 是否有斑马线
+  lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置  hasChildren: true,才会显示展开icon
+  portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
+  defaultSelectKeys: [], // 默认选中的key集合
+  radioChoose: "", // 单选时选中的值------------------------------------------- 待完成
+  rowHeight: "41", // 每行的高度
+  //用作指定行自定义行样式
+  rowClassProp: "", //行匹配字段名称
+  rowClassLinght: "" //行匹配数据
+});
+const radioChoose = ref("");
+
+watchEffect(() => {
+  getConfiger = { ...getConfiger, ...props.tableConfiger };
+  setDefaultChoose();
+});
+
+onMounted(() => {
+  setDefaultChoose();
+  createScroll(); //是否滚动
+});
+const rowClassName = ({ row, rowIndex }) => {
+  if (props.setRowClass) {
+    return row.setRowClass || "";
+  } else {
+    if (row[getConfiger.rowClassProp] == getConfiger.rowClassLinght) {
+      return "table_light_row";
+    }
+    if (rowIndex % 2 == 0) {
+      return "";
+    } else {
+      return "table_blue_row";
+    }
+  }
+};
+// 可选的时候选择的数据
+const handleSelectionChange = (val) => {
+  emit("chooseData", val);
+};
+// 单选的时候选择的数据
+const handleCurrentChange = (val) => {
+  currentRow.value = val;
+  emit("chooseData", val);
+};
+const singleElection = (val) => {
+  if (getConfiger.showSelectType === "radio") {
+    radioChoose.value = val[getConfiger.rowKey];
+    emit("chooseData", val);
+  }
+};
+// 懒加载数据的方法
+const load = (date, treeNode, resolve) => {
+  setTimeout(() => {
+    resolve([
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      }
+    ]);
+  }, 1000);
+};
+// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
+function setDefaultChoose() {
+  nextTick(() => {
+    // 多选的默认选中
+    if (
+      getConfiger.defaultSelectKeys?.length > 0 &&
+      getConfiger.showSelectType === "checkBox"
+    ) {
+      props.tableData.forEach((item) => {
+        if (
+          getConfiger.defaultSelectKeys.findIndex(
+            (v) => v === item[getConfiger.rowKey]
+          ) > -1
+        ) {
+          if (multipleTableRef.value)
+            multipleTableRef.value.toggleRowSelection(item, true);
+        }
+      });
+      // 单选的默认选中
+    } else if (
+      getConfiger.defaultSelectKeys &&
+      getConfiger.defaultSelectKeys?.length > 0 &&
+      getConfiger.showSelectType === "radio"
+    ) {
+      radioChoose.value = getConfiger.defaultSelectKeys[0];
+    }
+  });
+}
+//当某一行被双击时会触发该事件
+const rowdbClickHland = (row) => {
+  emit("rowdbClickHland", row);
+};
+//当某一行右键点击时会触发该事件
+const rowcontextmenuHland = (row, column, e) => {
+  e.preventDefault();
+  emit("rowcontextmenuHland", { row, e });
+};
+
+const timer = ref(null);
+// 鼠标进入
+const clearnScroll = () => {
+  clearInterval(timer.value);
+  timer.value = null;
+};
+// 鼠标离开
+const createScroll = () => {
+  clearnScroll();
+  // 拿到table
+  const tabel = multipleTableRef.value.layout.table.refs;
+  // 拿到可以滚动的元素
+  const tableWrapper = tabel.bodyWrapper.firstElementChild.firstElementChild;
+  if (props.isScroll) {
+    timer.value = setInterval(() => {
+      tableWrapper.scrollTop += 1;
+      //判断滚动到底部,设置为0(可视高度+距离顶部 = 整个高度)
+      if (
+        tableWrapper.clientHeight + tableWrapper.scrollTop ==
+        tableWrapper.scrollHeight
+      ) {
+        tableWrapper.scrollTop = 0;
+      }
+    }, 100);
+  }
+};
+
+// 触底加载
+const loadTable = () => {
+  emit("changePage");
+};
+
+onUnmounted(() => {
+  clearnScroll();
+});
+</script>
+
+<style lang = "scss">
+.myTableHeadBgColorDark {
+  background-color: rgba(18, 97, 192, 0.3) !important;
+  color: #008efc;
+}
+</style>
+<style lang = "scss" scoped>
+::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
+  font-size: 14px;
+}
+::v-deep .el-table {
+  background-color: transparent;
+  --el-table-border-color: transparent;
+  --el-table-row-hover-bg-color: #008ffd4b;
+}
+
+::v-deep .el-table th.el-table__cell {
+  color: #1f84ff;
+  border-bottom: none;
+}
+::v-deep .el-table tr {
+  background-color: transparent;
+
+  color: #fff;
+}
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+}
+::v-deep .el-table .table_blue_row {
+  background: #072343;
+}
+::v-deep .el-table .table_light_row {
+  background: #6b933d;
+}
+::v-deep .el-table .cell {
+  padding: 0;
+  line-height: unset;
+}
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
+  background: #002961;
+}
+::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right {
+  background: #fff !important;
+}
+::v-deep .el-loading-mask {
+  background: rgba(0, 0, 0, 0.3);
+}
+.header-icon {
+  white-space: nowrap;
+}
+</style>

src/components/aboutTable/FormMessage.vue

@@ -0,0 +1,127 @@
+<template>
+    <el-form
+      ref="elform"
+      :model="listQuery"
+      :label-width="140"
+      :rules="props.rules"
+      :inline="true"
+      label-position="right"
+    >
+      <el-form-item v-for="item in props.formData" :style="{ width: item.width }" :prop="item.prop" :label="item.text" :label-width="item.labelWidth"   :key="item">
+        <!-- input表单 -->
+        <MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.text}`"/>
+        <el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" :placeholder="`请输入${item.text}`" />
+        <!-- Select选择 -->
+        <MOSTY.Select
+          v-else-if="item.type == 'select'"
+          width="100%"
+          clearable
+          v-model="listQuery[item.prop]"
+          :dictEnum="item.optionList"
+          :placeholder="`请选择${item.text}`"
+        />
+
+        <template v-else-if="item.showType === 'department'">
+          <MOSTY.Department clearable v-model="listQuery[item.prop]" />
+        </template>
+
+        <!-- Upload选择 -->
+        <MOSTY.Upload
+          v-else-if="item.type == 'upload'"
+          width="100%"
+          v-model="listQuery[item.prop]"
+        />
+        <!-- CheckBox选择 -->
+        <MOSTY.CheckBox
+          v-else-if="item.type == 'checkbox'"
+          width="100%"
+          clearable
+          v-model="listQuery[item.prop]"
+          :checkList="item.optionList"
+          :placeholder="`请选择${item.text}`"
+        />
+        <el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
+          <el-radio
+            v-for="obj in item.optionList"
+            :key="obj.value"
+            :label="obj.value"
+            >{{ obj.label }}</el-radio
+          >
+        </el-radio-group>
+        <el-date-picker
+          v-else-if="item.type == 'date'"
+          v-model="listQuery[item.prop]"
+          type="date"
+          value-format="YYYY-MM-DD"
+          :placeholder="请选择时间"
+        />
+        <el-date-picker
+          v-else-if="item.type == 'datetime'"
+          v-model="listQuery[item.prop]"
+          type="datetime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :placeholder="请选择时间"
+        />
+        <el-date-picker
+          v-else-if="item.type == 'datetimerange'"
+          v-model="listQuery[item.prop]"
+          type="datetimerange"
+          :shortcuts="shortcuts"
+          range-separator="To"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          start-placeholder="选择开始时间"
+          end-placeholder="选择结束时间"
+        />
+        <el-date-picker
+          v-else-if="item.type == 'daterange'"
+          v-model="listQuery[item.prop]"
+          type="daterange"
+          range-separator="To"
+          value-format="YYYY-MM-DD"
+          start-placeholder="选择开始日期"
+          end-placeholder="选择开始日期"
+        />
+        <el-switch
+          v-else-if="item.type == 'switch'"
+          v-model="listQuery[item.prop]"
+          class="ml-2"
+          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+        />
+        <template v-else-if="item.type === 'slot'">
+          <slot :name="item.prop"></slot>
+        </template>
+      </el-form-item>
+    </el-form>
+  </template>
+  <script setup>
+  import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+  import * as MOSTY from "@/components/MyComponents/index";
+  import { ref, defineProps, defineEmits, defineExpose } from "vue";
+  const props = defineProps({
+    //循环的值
+    formData: {
+      default: [],
+      type: Array
+    },
+    propName: {
+      default: "",
+      type: String
+    },
+    rules: {
+      default: {},
+      type: Object
+    }
+  });
+  const elform = ref();
+  const listQuery = ref({});
+  const emits = defineEmits(["update:modelValue"]);
+ 
+  const submit = (resfun) => {
+    elform.value.validate((valid) => {
+      if (!valid) return false;
+      resfun(listQuery.value);
+    });
+  };
+  defineExpose({ submit });
+  </script>
+  

src/components/aboutTable/FormMessage/index.vue

@@ -1,141 +0,0 @@
-<template>
-  <el-form
-    ref="elform"
-    :model="listQuery"
-    :label-width="140"
-    :rules="props.rules"
-    :inline="true"
-    label-position="right"
-  >
-    <el-form-item
-      :style="{ width: item.width }"
-      :prop="item.prop"
-      :label="item.text"
-      :label-width="item.labelWidth"  
-      v-for="item in props.formData"
-      :key="item"
-    >
-      <MOSTY.Other
-        v-if="item.type == 'input'"
-        width="100%"
-        clearable
-        v-model="listQuery[item.prop]"
-        :placeholder="`请输入${item.text}`"
-      />
-      <el-input
-        v-model="listQuery[item.prop]"
-        v-else-if="item.type == 'textarea'"
-        :placeholder="`请输入${item.text}`"
-      />
-      <MOSTY.Select
-        v-else-if="item.type == 'select'"
-        width="100%"
-        clearable
-        v-model="listQuery[item.prop]"
-        :dictEnum="item.optionList"
-        :placeholder="`请选择${item.text}`"
-      />
-      <MOSTY.Upload
-        v-else-if="item.type == 'upload'"
-        width="100%"
-        v-model="listQuery[item.prop]"
-      />
-      <MOSTY.CheckBox
-        v-else-if="item.type == 'checkbox'"
-        width="100%"
-        clearable
-        v-model="listQuery[item.prop]"
-        :checkList="item.optionList"
-        :placeholder="`请选择${item.text}`"
-      />
-      <el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
-        <el-radio
-          v-for="obj in item.optionList"
-          :key="obj.value"
-          :label="obj.value"
-          >{{ obj.label }}</el-radio
-        >
-      </el-radio-group>
-      <el-date-picker
-        v-else-if="item.type == 'date'"
-        v-model="listQuery[item.prop]"
-        type="date"
-        value-format="YYYY-MM-DD"
-        :placeholder="请选择时间"
-      />
-      <el-date-picker
-        v-else-if="item.type == 'datetime'"
-        v-model="listQuery[item.prop]"
-        type="datetime"
-        value-format="YYYY-MM-DD HH:mm:ss"
-        :placeholder="请选择时间"
-      />
-      <el-date-picker
-        v-else-if="item.type == 'datetimerange'"
-        v-model="listQuery[item.prop]"
-        type="datetimerange"
-        :shortcuts="shortcuts"
-        range-separator="To"
-        value-format="YYYY-MM-DD HH:mm:ss"
-        start-placeholder="选择开始时间"
-        end-placeholder="选择结束时间"
-      />
-      <el-date-picker
-        v-else-if="item.type == 'daterange'"
-        v-model="listQuery[item.prop]"
-        type="daterange"
-        range-separator="To"
-        value-format="YYYY-MM-DD"
-        start-placeholder="选择开始日期"
-        end-placeholder="选择开始日期"
-      />
-      <el-switch
-        v-else-if="item.type == 'switch'"
-        v-model="listQuery[item.prop]"
-        class="ml-2"
-        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-      />
-      <template v-else-if="item.type === 'slot'">
-        <slot :name="item.prop"></slot>
-      </template>
-    </el-form-item>
-  </el-form>
-</template>
-<script setup>
-import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
-import * as MOSTY from "@/components/MyComponents/index";
-import { ref, defineProps, defineEmits, defineExpose } from "vue";
-const props = defineProps({
-  //循环的值
-  formData: {
-    default: [],
-    type: Array
-  },
-  modelKey: {
-    default: {},
-    type: Object
-  },
-  // 绑定的prop
-  propName: {
-    default: "",
-    type: String
-  },
-  rules: {
-    default: {},
-    type: Object
-  }
-});
-const elform = ref();
-const listQuery = ref({});
-const emits = defineEmits(["update:modelValue"]);
-const onInput = (e) => {
-  emits("update:modelValue", e);
-};
-const submit = (resfun) => {
-  elform.value.validate((valid) => {
-    if (!valid) return false;
-    resfun(listQuery.value);
-  });
-};
-defineExpose({ submit });
-</script>

src/main.js

@@ -13,6 +13,7 @@ import "./assets/css/layout.scss";
 import "./assets/css/pulic.scss";
 import ELMessage from 'element-plus'
 import InfiniteScroll from './utils/lazyLoad'
+import Directive from './utils/directive';
 
 import DictTag from '@/components/DictTag/index'
 
@@ -22,6 +23,7 @@ import DictTag from '@/components/DictTag/index'
 const app = createApp(App);
 //注册自定义指令
 app.use(InfiniteScroll)
+app.use(Directive)
 Object.keys(ElIcons).forEach((key) => {
   //全局注册 element 图标
   app.component(key, ElIcons[key]);

src/utils/directive.js

@@ -0,0 +1,5 @@
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
+ 
+export default function directive(app) {
+	app.directive('elTableInfiniteScroll', elTableInfiniteScroll);
+}

src/utils/tools.js

@@ -1,9 +1,5 @@
-import {
+
-  getAddress
+
-} from "@/api/getAddress.js";
-import {
-  getUserArea
-} from "@/api/base.js";
 
 // 随机颜色 - 把16进制的颜色换成rgba格式
 export function choseRbgb(color,opcity) {
@@ -17,6 +13,20 @@ export function choseRbgb(color,opcity) {
     return `rgba(${r},${g},${b},${a})`
   }
 }
+// 今天周几
+export function weekValidate() {
+  let week = new Date().getDay()
+  let weekenday = ''
+  switch (week) {
+    case 0: return weekenday = '星期日'
+    case 1: return weekenday = '星期一'
+    case 2: return weekenday = '星期二'
+    case 3: return weekenday = '星期三'
+    case 4: return weekenday = '星期四'
+    case 5: return weekenday = '星期五'
+    case 6: return weekenday = '星期六'
+  }
+}
 
 // 毫秒转时长
 export function formatDuring(mss) {
@@ -150,19 +160,7 @@ export function dateFormat(type, time) {
   }
   return day
 }
-//地址解析
+
-export function getAddressApi(coords, fun) {
-  let {
-    jd,
-    wd
-  } = coords
-  getAddress({
-    jd,
-    wd
-  }).then(res => {
-    fun(res)
-  })
-}
 //数字超长处理
 export function handleNum(num) {
   var data = 0
@@ -206,20 +204,7 @@ export function IS_MP4(val) {
   return ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'fiv', 'f4v', 'mvb', 'rm', '3gp', 'vob'].indexOf(val
     .toLowerCase()) !== -1
 }
-/**
+
- * 获取用户所属区域数据
- * @param {*} fun 回调方法
- */
-export function getUserAreaData(fun) {
-  getUserArea().then(res => {
-    if (res && res.jd && res.wd) {
-      let centerCoord = [res.jd, res.wd]
-      let leavel = res.level.slice(0, 1)
-      let coorList = [...handelArr(res.dtm), ...handelArr(res.dtm1), ...handelArr(res.dtm2)]
-      fun(coorList, centerCoord, leavel)
-    }
-  })
-}
 
 function handelArr(arr) {
   let brr = []

src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue

@@ -1,11 +1,96 @@
 <template>
-  <div class="echartsBox">ggg</div>
+  <div class="echartsBox" ref="chartRef"></div>
 </template>
 
 <script>
-export default {
+import * as echarts from 'echarts';
+import 'echarts-gl';
 
-}
+// export default {
+//   name: 'Bkjbtj',
+//   data() {
+//     return {
+//       chart: null,
+//       chartData: [
+//         { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
+//         { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
+//         { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
+//         { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
+//       ]
+//     };
+//   },
+//   mounted() {
+//     this.initChart();
+//     window.addEventListener('resize', this.resizeChart);
+//   },
+//   beforeDestroy() {
+//     window.removeEventListener('resize', this.resizeChart);
+//     this.chart && this.chart.dispose();
+//   },
+//   methods: {
+//     initChart() {
+//       this.chart = echarts.init(this.$refs.chartRef);
+//       const option = {
+//         backgroundColor: 'transparent',
+//         tooltip: {
+//           trigger: 'item',
+//           formatter: '{b}: {c} ({d}%)'
+//         },
+//         legend: {
+//           orient: 'vertical',
+//           right: '5%',
+//           top: 'middle',
+//           textStyle: {
+//             color: '#fff'
+//           }
+//         },
+//         series: [{
+//           name: '告警统计',
+//           type: 'pie3D',
+//           radius: '55%',
+//           center: ['40%', '50%'],
+//           viewControl: {
+//             beta: 40,
+//             alpha: 20,
+//             distance: 200,
+//             rotateSensitivity: 1,
+//             zoomSensitivity: 1
+//           },
+//           label: {
+//             show: true,
+//             formatter: '{d}%',
+//             textStyle: {
+//               color: '#fff',
+//               fontSize: 14,
+//               borderWidth: 1
+//             }
+//           },
+//           labelLine: {
+//             show: true,
+//             lineStyle: {
+//               color: '#fff'
+//             }
+//           },
+//           itemStyle: {
+//             opacity: 0.8,
+//             borderWidth: 1,
+//             borderColor: '#fff'
+//           },
+//           emphasis: {
+//             itemStyle: {
+//               opacity: 1
+//             }
+//           },
+//           data: this.chartData
+//         }]
+//       };
+//       this.chart.setOption(option);
+//     },
+//     resizeChart() {
+//       this.chart && this.chart.resize();
+//     }
+//   }
+// };
 </script>
 
 <style lang="scss" scoped>
@@ -15,5 +100,4 @@ export default {
   background: rgba(0,29,75,0.6);
   border-radius: 0 0 4px 4px;
 }
-
 </style>

src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue

@@ -6,9 +6,6 @@
 import * as echarts from "echarts";
 import { ref, onMounted, watch, defineProps } from "vue";
 
-onMounted(() => {
-  lineChartFn();
-});
 function lineChartFn() {
   var chartDom = document.getElementById("circlecz");
   var myChart = echarts.init(chartDom);
@@ -98,7 +95,7 @@ function lineChartFn() {
         },
         markPoint: {
           symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [10, 4], // 设置扁圆的宽和高
+          symbolSize: [11, 4], // 设置扁圆的宽和高
           itemStyle: {
             color: '#087df9' // 圆盘颜色
           },
@@ -132,7 +129,7 @@ function lineChartFn() {
         },
         markPoint: {
           symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [10, 4], // 设置扁圆的宽和高
+          symbolSize: [11, 4], // 设置扁圆的宽和高
           itemStyle: {
             color: '#00FFFF' // 圆盘颜色
           },

src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue

@@ -1,5 +1,17 @@
 <template>
   <div class="systemBox">
+    <!-- 头部筛选 -->
+    <div class="topSearch">
+      <el-form v-model="listQuery">
+        <MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" />
+        <MOSTY.Select v-model="listQuery.sd" :dictEnum="search.xd" />
+        <MOSTY.Select v-model="listQuery.zs" :dictEnum="search.zs" />
+        <MOSTY.Select v-model="listQuery.qy" :dictEnum="search.qy" />
+        <MOSTY.Select v-model="listQuery.dz" :dictEnum="search.dz" />
+      </el-form>
+      <el-button type="primary">搜索</el-button>
+    </div>
+    <div></div>
     <!-- 左边列表 -->
     <div class="leftList">
       <div class="hed flex just-between align center">
@@ -17,51 +29,90 @@
         </li>
       </ul>
     </div>
-
     <!-- 右边模块 -->
     <div class="rightList">
       <!-- 第一部门 -->
       <div>
         <div class="hed flex align-center">
-        <span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it" >{{ it }}</span>
+          <span
-      </div>
+            @click="active = it"
+            :class="active == it ? 'active' : ''"
+            class="f14 mr10 pointer"
+            v-for="it in btn.bkBtn"
+            :key="it"
+            >{{ it }}</span
+          >
+        </div>
         <Count></Count>
       </div>
       <!-- 第二部分 -->
       <div class="mt10">
         <div class="hed flex align-center">布控级别统计</div>
-        <div style="width:100%;height:170px">
+        <div style="width: 100%; height: 170px">
           <Bkjbtj></Bkjbtj>
         </div>
       </div>
       <!-- 第三部分 -->
       <div class="mt10">
         <div class="hed flex align-center">
-          <span @click="active1 = it" :class="active1 == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.yrBtn" :key="it" >{{ it }}</span>
+          <span
+            @click="active1 = it"
+            :class="active1 == it ? 'active' : ''"
+            class="f14 mr10 pointer"
+            v-for="it in btn.yrBtn"
+            :key="it"
+            >{{ it }}</span
+          >
         </div>
-        <div style="width:100%;height:170px">
+        <div style="width: 100%; height: 170px">
           <RyCount></RyCount>
         </div>
       </div>
       <!-- 第四部分 -->
       <div class="mt10">
         <div class="hed flex align-center">轨迹统计</div>
-        <div style="width:100%;height:170px">
+        <div style="width: 100%; height: 170px">
           <Gjtj></Gjtj>
         </div>
       </div>
     </div>
+
+    <!-- 底部按钮 -->
+    <ul class="footBox">
+      <li class="footItem" v-for="it in btn.footBtn" :key="it">{{ it }}</li>
+    </ul>
   </div>
 </template>
 
 <script setup>
+import * as MOSTY from "@/components/MyComponents/index";
 import YjItem from "./components/yjItem.vue";
 import Count from "./components/count.vue";
 import Bkjbtj from "./components/bkjbtj.vue";
 import RyCount from "./components/ryCount.vue";
 import Gjtj from "./components/gjtj.vue";
 import { reactive, ref } from "vue";
-
+const listQuery = ref({
+  keyword: ""
+});
+const search = reactive({
+  xd: [
+    { label: "吸毒", value: "10" },
+    { label: "贩毒", value: "20" }
+  ],
+  zs: [
+    { label: "酒店", value: "10" },
+    { label: "名宿", value: "20" }
+  ],
+  qy: [
+    { label: "县城", value: "10" },
+    { label: "市区", value: "20" }
+  ],
+  dz: [
+    { label: "网吧", value: "10" },
+    { label: "酒馆", value: "20" }
+  ]
+});
 const searchForm = ref({
   keyword: ""
 });
@@ -108,8 +159,9 @@ const personList = ref([
   }
 ]);
 const btn = reactive({
-  bkBtn :["布控人员", "布控群体"],
+  bkBtn: ["布控人员", "布控群体"],
-  yrBtn :["人员身份标签统计", "人员行为标签统计"]
+  yrBtn: ["人员身份标签统计", "人员行为标签统计"],
+  footBtn:['预警','布控']
 });
 const active = ref("布控人员");
 const active1 = ref("人员身份标签统计");
@@ -126,6 +178,23 @@ const active1 = ref("人员身份标签统计");
   width: calc(100% + 40px);
   height: calc(100% + 20px);
   background: #e9edf6;
+  .topSearch {
+    position: absolute;
+    top: 10px;
+    right: 500px;
+    width: 600px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    .el-form {
+      display: flex;
+      ::v-deep .el-input__inner{
+        background: rgba(0, 22, 83, 0.4);
+        border: 1px solid #0072ff;
+        color: #fff;
+      }
+    }
+  }
   .leftList {
     position: absolute;
     left: 20px;
@@ -162,6 +231,23 @@ const active1 = ref("人员身份标签统计");
       font-family: "YSBTH";
     }
   }
+  .footBox{
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    .footItem{
+      background: red;
+      width: 195px;
+      height: 42px;
+      text-align: center;
+      line-height: 42px;
+      margin: 0 10px;
+      font-size: 16px;
+    }
+  }
   .hed {
     height: 40px;
     line-height: 40px;

src/views/backOfficeSystem/fourColorManage/IdentityManage/components/editAddForm.vue

@@ -8,13 +8,13 @@
       </div>
     </div>
     <div class="form_cnt">
-      <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules"></FormMessage>
+      <FormMessage :formData="formData" ref="elform" :rules="rules"></FormMessage>
     </div>
   </div>
 </template>
 
 <script setup>
-import FormMessage from '@/components/aboutTable/FormMessage/index.vue'
+import FormMessage from '@/components/aboutTable/FormMessage.vue'
 import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
 import * as rule from "@/utils/rules.js";
 import {

src/views/backOfficeSystem/fourColorManage/tagManage/components/editAddForm.vue

@@ -14,13 +14,13 @@
       </div>
     </div>
     <div class="form_cnt">
-      <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules"></FormMessage>
+      <FormMessage :formData="formData" ref="elform" :rules="rules"></FormMessage>
     </div>
   </div>
 </template>
 
 <script setup>
-import FormMessage from '@/components/aboutTable/FormMessage/index.vue'
+import FormMessage from '@/components/aboutTable/FormMessage.vue'
 import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
 import * as rule from "@/utils/rules.js";
 import {

src/views/home/components/bar.vue

@@ -1,74 +0,0 @@
-<template>
-
-    <div ref="vehicleChartRef" id="bar-main"></div>
-
-</template>
-
-<script setup>
-import { onMounted ,onUnmounted} from 'vue';
-import * as echarts from 'echarts'
-let myChart = null
-const getLine = async () => {
-    var chartDom = document.getElementById('bar-main');
-var myChart = echarts.init(chartDom);
-var option;
-
-option = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: [
-    {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      axisTick: {
-        alignWithLabel: true
-      }
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value'
-    }
-  ],
-  series: [
-    {
-      name: 'Direct',
-      type: 'bar',
-      barWidth: '60%',
-      data: [10, 52, 200, 334, 390, 330, 220]
-    }
-  ]
-};
-
-option && myChart.setOption(option);
-}
-
-const handleResize = () => {
-    myChart?.resize()
-}
-onMounted(() => {
-    getLine()
-    window.addEventListener('resize', handleResize)
-})
-onUnmounted(() => {
-    window.removeEventListener('resize', handleResize)
-    myChart?.dispose()
-
-})
-</script>
-
-<style lang="scss" scoped>
-#bar-main{
-    z-index:999;
-}
-</style>

src/views/home/components/line.vue

@@ -1,57 +0,0 @@
-<template>
-
-    <div ref="vehicleChartRef" id="chart-container"></div>
-
-</template>
-
-<script setup>
-import { onMounted ,onUnmounted} from 'vue';
-import * as echarts from 'echarts'
-let myChart = null
-const getLine = async () => {
-    var chartDom = document.getElementById('chart-container');
-    console.log("chartDom")
-    myChart = echarts.init(chartDom);
-    var option;
-
-    option = {
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: [
-            {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
-                type: 'line',
-                areaStyle: {}
-            }
-        ]
-    };
-
-    option && myChart.setOption(option);
-    console.log("option", option);
-}
-
-const handleResize = () => {
-    myChart?.resize()
-}
-onMounted(() => {
-    getLine()
-    window.addEventListener('resize', handleResize)
-})
-onUnmounted(() => {
-    window.removeEventListener('resize', handleResize)
-    myChart?.dispose()
-
-})
-</script>
-
-<style lang="scss" scoped>
-#chart-container{
-    z-index:999;
-}
-</style>

src/views/home/components/pei.vue

@@ -1,73 +0,0 @@
-<template>
-
-    <div ref="vehicleChartRef" id="pei-main"></div>
-
-</template>
-
-<script setup>
-import { onMounted ,onUnmounted} from 'vue';
-import * as echarts from 'echarts'
-let myChart = null
-const getLine = async () => {
-    var chartDom = document.getElementById('pei-main');
-var myChart = echarts.init(chartDom);
-var option;
-
-option = {
-  title: {
-    text: 'Referer of a Website',
-    subtext: 'Fake Data',
-    left: 'center'
-  },
-  tooltip: {
-    trigger: 'item'
-  },
-  legend: {
-    orient: 'vertical',
-    left: 'left'
-  },
-  series: [
-    {
-      name: 'Access From',
-      type: 'pie',
-      radius: '50%',
-      data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
-    }
-  ]
-};
-
-option && myChart.setOption(option);
-}
-
-const handleResize = () => {
-    myChart?.resize()
-}
-onMounted(() => {
-    getLine()
-    window.addEventListener('resize', handleResize)
-})
-onUnmounted(() => {
-    window.removeEventListener('resize', handleResize)
-    myChart?.dispose()
-
-})
-</script>
-
-<style lang="scss" scoped>
-#pei-main{
-    z-index:999;
-}
-</style>

src/views/home/components/top-icon.vue

@@ -1,49 +0,0 @@
-<template>
-    <div class="top-icon-container">
-        <div v-for="(item, index) in list" :key="`list${index}`" class="top-icon-item">
-            <img :src="item.icon" alt="">
-            <div>
-                <div>{{ item.title }}</div>
-                <div style="font-size:10px">{{ item.desc }}</div>
-            </div>
-        </div>
-        <div class="yjbk"></div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const list = ref([{
-    icon: require("@/assets/images/databi/tianqi.png"),
-    title: "多云转小雨",
-    desc: "无持续风向微风",
-},
-{
-    icon: require("@/assets/images/databi/wendu.png"),
-    title: "36°",
-    desc: "11°~26°",
-},
-{
-    icon: require("@/assets/images/databi/time.png"),
-    title: "20:30:59",
-    desc: "星期二 2024-12-17",
-}
-
-
-])
-</script>
-
-<style lang="scss" scoped>
-.top-icon-container{
-    gap: 10px;
-    display: flex;
-    .top-icon-item{
-    display: flex;
-
-    }
-    .yjbk{
-        background: url("~@/assets/images/databi/head-1.png") no-repeat center center;
-
-    }
-}
-</style>

src/views/home/components/yjItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
+    <div class="warning-image">
+      <img :src="item.image" alt="预警图片" />
+    </div>
+    <div class="warning-info">
+      <div class="flex just-between align-center">
+        <div class="flex align-center mt4">
+            <span>{{ item.name }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.gender }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.age }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.mz }}</span>
+      </div>
+        <span class="tag">涉警人员</span>
+      </div>
+      <div class="mt4">身份证：{{ item.sfzh }}</div>
+      <div class="mt4 one_text_detail">户籍地址：{{ item.location }}</div>
+      <div class="mt4 one_text_detail">居住地址：{{ item.location }}</div>
+      <div class="mt4 two_text_detail">预警内容：{{ item.yjnr }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { de } from "element-plus/es/locale.mjs";
+import { cs } from "element-plus/es/locale.mjs";
+import { reactive, ref } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  }
+});
+
+const changeBG = (str) => {
+    switch(str){
+        case "10":
+            return "red";
+        case "20":
+            return "orange";
+        case "30":
+            return "yellow";
+        default:
+            return "blue";
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-card {
+  background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
+  background-size: 100% 100%;
+  gap: 12px;
+  margin-bottom: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+  .warning-image {
+    width: 80px;
+    height: 100px;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .warning-info {
+        flex: 1;
+        .tag{
+            padding: 1px 6px;
+            background: #0072FF;
+            border-radius: 2px 2px 2px 2px;
+            font-size: 12px;
+        }
+        .gapline{
+            width: 2px;
+            height: 14px;
+            background: #e9e9e9;
+        }
+    }
+}
+.red {
+  background: url("~@/assets/images/GroupRed.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.orange {
+  background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
+  background-size: 100% 100%;  
+}
+.yellow {
+  background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+.blue {
+  background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
+  background-size: 100% 100%; 
+}
+
+</style>

src/views/home/echarts/barEcharts.vue

@@ -0,0 +1,106 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'lineId'
+  },
+  data:{
+    type:Object,
+    default:{
+      list:[],
+      colors:[]
+    }
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ 
+     chartFn()
+   })
+},{immediate:true,deep:true})
+
+function chartFn() {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    grid: {
+      top: "16%",
+      right: "2%",
+      left: "2%",
+      bottom: "4%",
+      containLabel:true
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#ddd"
+        }
+      },
+      backgroundColor: "rgba(255,255,255,1)",
+      padding: [5, 10],
+      textStyle: {
+        color: "#7588E4"
+      },
+    },
+    xAxis: {
+      type: "category",
+      data:props.data.list.map(v=>{return v.label}),
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff",magin:20 },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show:true ,
+        lineStyle: {
+          type:'dashed',
+          color: "rgba(14,95,255,0.5)"
+        }
+      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
+    },
+    series: [
+      {
+        type: "bar",
+        barGap:'80%',
+        barWidth: "20px",
+        data: props.data.list.map(v=>{return v.val}),
+        label:{
+          normal:{show:true,position:'top',color:'#EB00FF'}
+        },
+        itemStyle: {
+          normal: {
+            color:function name(params) {
+                let colorList = []
+                if(props.data.colors && props.data.colors.length>0){
+                  props.data.colors.forEach(item => {
+                    colorList.push(new echarts.graphic.LinearGradient( 0,0,0, 1,[{offset:0,color:item[0]},{offset:1,color:item[1]}]))
+                  });
+                }
+              if(colorList.length > 0) return colorList[params.dataIndex]
+              else return new echarts.graphic.LinearGradient( 0,0,0, 1,[{ offset: 0,color: "rgba(0,244,255,1)"},{ offset: 1, color: "rgba(0,77,167,1)" }])
+            },
+            shadowColor: "rgba(0,160,221,1)",
+            shadowBlur: 2
+          }
+        },
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+  window.addEventListener('resize',function(){
+    myChart.resize();
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/echarts/lineEcharts.vue

@@ -0,0 +1,119 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'lineId'
+  },
+  data:{
+    type:Array,
+    default:[]
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ chartFn() })
+},{immediate:true,deep:true})
+
+function chartFn() {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option;   
+  option = {
+    grid: {
+      top: "8%",
+      right: "2%",
+      left: "2%",
+      bottom: "7%",
+      containLabel:true
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#ddd"
+        }
+      },
+      backgroundColor: "rgba(255,255,255,1)",
+      padding: [5, 10],
+      textStyle: {
+        color: "#7588E4"
+      },
+      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
+    },
+    xAxis: {
+      type: "category",
+      data:props.data.map(v=>{return v.label}),
+      boundaryGap: false,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+       show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show:true ,
+        lineStyle: {
+          type:'dashed',
+          color: "rgba(14,95,255,0.5)"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show:false
+      },
+    },
+    series: [
+      {
+        type: "line",
+        smooth:true,
+        showSymbol:false,
+        data: props.data.map(v=>{return v.val}),
+        areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(199, 237, 250,0.5)'
+              }, {
+                  offset: 1,
+                  color: 'rgba(199, 237, 250,0.2)'
+              }], false)
+            }
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(4, 145, 216)"
+          }
+        },
+        lineStyle: {
+          normal: {
+            width: 1,
+            color:'#00FFFF'
+          }
+        }
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+  window.addEventListener('resize',function(){
+    myChart.resize();
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/echarts/moreBarEcharts.vue

@@ -0,0 +1,113 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+import { on } from "element-plus/lib/utils";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'moreBarId'
+  },
+  data:{
+    type:Object,
+    default:{
+      xData:[],
+      color:[],
+      list:[]
+    }
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ init(val) })
+},{immediate:true,deep:true})
+
+
+// 初始化
+function init (val) {
+  let color = val.color;
+  let list = val.list
+  let total = 0
+  let series = list.map((item ,idx)=>{
+    let obj = {
+      type: "bar",
+      stack:'total',
+      name:item.label,
+      data:item.val,
+      barGap:'80%',
+      barWidth: "30px",
+      itemStyle:{normal: { color: color[idx]  }}
+    }
+    if(item.label == '总数'){
+      obj.stack = ''
+      obj.z = -1
+      obj.barGap = '-100%'
+      obj.label = { normal:{show:true,position:'top',color:'#EB00FF'} }
+    }
+    return obj;
+  })
+  chartFn(series)
+}
+
+function chartFn(series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    grid: {
+      top: "30%",
+      right: "2%",
+      left: "2%",
+      bottom: "3%",
+      containLabel:true
+    },
+    legend:{
+      data:props.data.list.map(v=>{return v.label}),
+      textStyle: { color: "#fff"},
+      icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
+      itemWidth:16,
+      itemHeight:8,
+      itemGap:10
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: { color: "#ddd" }
+      },
+      backgroundColor: "rgba(255,255,255,1)",
+      padding: [5, 10],
+      textStyle: { color: "#7588E4" },
+      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
+    },
+    xAxis: {
+      type: "category",
+      data:props.data.xData,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff",magin:20 },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show:true ,
+        lineStyle: {
+          type:'dashed',
+          color: "rgba(14,95,255,0.5)"
+        }
+      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
+    },
+    series:series
+  };
+  option && myChart.setOption(option);
+  window.addEventListener('resize',function(){
+    myChart.resize();
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/echarts/moreLineEcharts.vue

@@ -0,0 +1,124 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'morelineId'
+  },
+  data:{
+    type:Object,
+    default:{
+      color:[], //['#EB00FF','#F57100']
+      list:[], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
+      xData:[] ,//['09-01','09-02','09-03','09-04']
+    }
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ 
+      init(val)
+   })
+},{immediate:true,deep:true})
+
+
+// 初始化
+function init (val) {
+  let color = val.color;
+  let list = val.list
+  let series = list.map((item ,idx)=>{
+    return {
+      type: "line",
+      name:item.label,
+      data:item.val,
+      itemStyle:{normal: { color: color[idx]  }},
+      smooth:true,
+      showSymbol:false,
+      areaStyle: {
+          normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(199, 237, 250,0.5)'
+              }, {
+                  offset: 1,
+                  color: 'rgba(199, 237, 250,0.2)'
+              }], false)
+          }
+      },
+    }
+  })
+  chartFn(series)
+}
+
+function chartFn(series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    grid: {
+      top: "20%",
+      right: "6%",
+      left: "2%",
+      bottom: "3%",
+      containLabel:true
+    },
+    legend:{
+      data:props.data.list.map(v=>{return v.label}),
+      textStyle: { color: "#fff"},
+      icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
+      itemWidth:16,
+      itemHeight:8,
+      itemGap:5
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: { color: "#ddd" }
+      },
+      backgroundColor: "rgba(255,255,255,1)",
+      padding: [5, 10],
+      textStyle: { color: "#7588E4" },
+      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
+    },
+    xAxis: {
+      type: "category",
+      data:props.data.xData,
+      boundaryGap: false,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
+      axisLabel: {
+        show: true,
+        color: "#fff",
+        interval: 0, // 强制显示所有标签
+        // rotate: 15, // 标签旋转角度
+        // formatter: function(value) { return value.split("").join("\n");}
+      }
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show:true ,
+        lineStyle: {
+          type:'dashed',
+          color: "rgba(14,95,255,0.5)"
+        }
+      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
+    },
+    series:series
+  };
+  option && myChart.setOption(option);
+  window.addEventListener('resize',function(){
+    myChart.resize();
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/index.vue

@@ -1,608 +1,53 @@
 <template>
   <div class="homeBox">
     <!-- 头部 -->
-<div class="head">
     <Head></Head>
-    <TopIcon class="head-icon-l"></TopIcon>
+    <!-- 内容 -->
-</div>
+    <div class="home-contant">
-  
+      <!-- 左边 -->
-    <div></div>
+      <div class="home-aside asideL">
-    <el-container class="container" direction="horizontal">
+        <div class="asideL-top">
-      <el-aside style="width:455px">
+          <DbCount></DbCount>
-        <div class="content-box">
-          <div class="title-box">
-            <span class="title">线索研判盯办统计</span>
-          </div>
-          <div class="content background-img-1" style="height:106px">
-            <div class="content-item" v-for="(value, key) in contentItem" :key="`contentItem${key}`">
-              {{ key }}:{{ value }}
-            </div>
-          </div>
         </div>
-        <div class="content-box">
+        <div class="asideL-Bottom">
-          <div class="title-box">
+          <div class="commom-aside"><QbsbCount></QbsbCount></div>
-            <span class="title">情报上报数量</span>
+          <div class="commom-aside"><QblyType></QblyType></div>
-          </div>
+          <div class="commom-aside"><QbfkCount></QbfkCount></div>
-          <!-- <div class="content background-img-2" style="height:185px">
-           
-          </div> -->
-          <Line class="content background-img-2" style="height:175px"></Line>
         </div>
-        <div class="content-box">
+      </div>
-          <div class="title-box">
+      <!-- 右边 -->
-            <span class="title">情报数据情报来源</span>
+      <div class="home-aside asideR">
-          </div>
+        <div class="commom-aside-big"><ZdryWarning></ZdryWarning></div>
-          <!-- <div class="content background-img-2" style="height:185px">
+        <div class="commom-aside-big"><Zdgk></Zdgk></div>
-          </div> -->
+        <div class="commom-aside-small"><Fjqk></Fjqk></div>
-          <Bar class="content background-img-2" style="height:175px"></Bar>
+      </div>
-        </div>
+      <!-- 中间 -->
-        <div class="content-box">
+      <div class="home-center"><Yszs></Yszs></div>
-          <div class="title-box">
+      <!-- 底部 -->
-            <span class="title">情报反馈统计</span>
+      <div class="home-foot">
-          </div>
+        <Bkcz></Bkcz>
-          <!-- <div class="content background-img-3" style="height:234px">
+      </div>
-          </div> -->
+    </div>
-          <Pei class="content background-img-3" style="height:234px">
-          </Pei>
-        </div>
-      </el-aside>
-      <el-main class="h-100 main">
-        <div class="top">
-
-          <div class="top-item" v-for="(item, index) in topRightTile" :key="`topRightTile${index}`">
-            <img :src="item.icon" alt="" class="top-icon" />
-            <div class="top-item-right">
-              <div class="top-item-title">{{ item.title }}</div>
-              <div class="top-item-title-tow">{{ item.desc }}</div>
-              <img src="~@/assets/images/databi/line.png" alt="">
-            </div>
-          </div>
-
-        </div>
-        <div class="med content background-img-4" style="height:calc(100% - 338px)">
-        </div>
-        <div class="footer  " style="height:234px">
-          <div class="content-box">
-            <div class="title-box title-img-2">
-              <div class="flexcb">
-                <div>
-                  <span class="title">全域布控处置重点人员</span>
-                  <span class="title-desc">全域布控处置重点群体</span>
-                </div>
-                <div class="btn">
-                  查看更多》
-                </div>
-              </div>
-
-            </div>
-            <div class="content background-img-5" style="height:234px">
-              <MyTable :tableData="pageData.tableData1" :tableColumn="pageData.tableColumn1"
-                :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
-                :controlsWidth="pageData.controlsWidth" class="my-table">
-                <template #zp="{ row }">
-                  <el-image style="width: 40px; height: 40px" :src="row.zp">
-                  </el-image>
-                </template>
-                <template #clzt="{ row }">
-                  <span style="color: #FDBC3A ;">{{ row.clzt }}</span>
-                </template>
-              </MyTable>
-            </div>
-          </div>
-        </div>
-      </el-main>
-      <el-footer>
-        <div class="content-box">
-          <div class="title-box">
-            <span class="title">情报上报数量</span>
-          </div>
-          <div class="content right-1" style="height:251px">
-            <div>
-              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-                <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
-                  {{ city }}
-                </el-checkbox>
-              </el-checkbox-group>
-
-              <div class="warning-list">
-                <div class="warning-card" v-for="(item, index) in warningList" :key="index">
-                  <div class="warning-image">
-                    <img :src="item.image" alt="预警图片">
-                  </div>
-                  <div class="warning-info">
-                    <div class="info-item">
-                      <span class="label">姓名：</span>
-                      <span>{{ item.name }}</span>
-                      <span class="tag">涉警人员</span>
-                    </div>
-                    <div class="info-item">
-                      <span class="label">性别：</span>
-                      <span>{{ item.gender }}</span>
-                    </div>
-                    <div class="info-item">
-                      <span class="label">相似度：</span>
-                      <span class="highlight">{{ item.similarity }}%</span>
-                    </div>
-                    <div class="info-item">
-                      <span class="label">预警时间：</span>
-                      <span>{{ item.warningTime }}</span>
-                    </div>
-                    <div class="info-item flex align-center">
-                      <span class="label nowrap">抓拍地址：</span>
-                      <span class="one_text_detail">{{ item.location }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-
-          </div>
-        </div>
-        <div class="content-box">
-          <div class="title-box">
-            <span class="title">情报上报数量</span>
-          </div>
-          <div class="content right-2" style="height:244px">
-            <MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
-              :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
-              :controlsWidth="pageData.controlsWidth" class="my-table">
-              <template #zp="{ row }">
-                  <el-image style="width: 40px; height: 40px" :src="row.zp">
-                  </el-image>
-                </template>
-            </MyTable>
-          </div>
-        </div>
-        <div class="content-box">
-          <div class="title-box">
-            <span class="title">重点人发掘情况</span>
-          </div>
-          <div class="content right-3" style="height:234px">
-            <MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
-              :tableHeight="pageData.tableHeight" :key="pageData.keyCount+2" :tableConfiger="pageData.tableConfiger"
-              :controlsWidth="pageData.controlsWidth" class="my-table">
-              <template #zp="{ row }">
-                  <el-image style="width: 40px; height: 40px" :src="row.zp">
-                  </el-image>
-                </template>
-            </MyTable>
-          </div>
-        </div>
-      </el-footer>
-    </el-container>
   </div>
 </template>
 
 <script setup>
 import Head from './layout/head.vue'
-import { ref, reactive, onMounted } from 'vue';
+import DbCount from './model/dbCount.vue'
-import MyTable from "@/components/aboutTable/MyTable.vue";
+import QbfkCount from './model/qbfkCount.vue'
-import Line from './components/line.vue'
+import QbsbCount from './model/qbsbCount.vue'
-import Bar from './components/bar.vue'
+import QblyType from './model/qblyType.vue'
-import Pei from './components/pei.vue'
+import Bkcz from './model/bkcz.vue'
-import TopIcon from './components/top-icon.vue'
+import ZdryWarning from './model/zdryWarning.vue'
-
+import Zdgk from './model/zdgk.vue'
-
+import Fjqk from './model/fjqk.vue'
-const contentItem = ref(
+import Yszs from './model/yszs.vue'
-
+import { ref } from 'vue';
-  {
-    '线索总数': "892条", "下发总数": "892条", "已处置总数": "892条", "反馈总数": "892条", "未反馈总数": "892条", "未处置总数": "892条"
-  })
-const topRightTile = ref([
-  {
-    title: "线索总数",
-    desc: "25",
-    icon: require("@/assets/images/databi/top-1.png"),
-
-  }, {
-    title: "已处理线索总数",
-    desc: "5222/3",
-    icon: require("@/assets/images/databi/top-2.png"),
-
-  }, {
-    title: "重点人总数",
-    desc: "100.0",
-    icon: require("@/assets/images/databi/top-3.png"),
-
-  }, {
-    title: "重点群体总数",
-    desc: "99.9",
-    icon: require("@/assets/images/databi/top-4.png"),
-
-  }
-])
-const pageData = reactive({
-  tableData1: [
-
-    {
-      zp: require("@/assets/images/databi/top-1.png"),
-      name: "12344",
-      xb: "12344",
-      sfzh: "12344",
-      gkdw: "12344",
-      hdsj: "12344",
-      hdfsdz: "12344",
-      clzt: "12344",
-    }
-
-  ],
-  tableData2: [{
-    zp: require("@/assets/images/databi/top-1.png"),
-
-    name: "123",
-    xb: "123",
-    sfzh: "123",
-    gkyy: "123",
-  }],
-
-  //表格数据
-  keyCount: 0,
-  tableConfiger: {
-    rowHieght: 61,
-    showSelectType: "null",
-    loading: false,
-    border: false,
-    size: "small",
-    haveControls: false,
-    stripe: true
-  },
-  tableHeight: '100%',
-  tableColumn1: [
-    { label: "照片", prop: "zp", showSolt: true },
-    { label: "姓名", prop: "name" },
-    { label: "性别", prop: "xb", },
-    { label: "身份证号", prop: "sfzh", },
-    { label: "管控单位", prop: "gkdw" },
-
-    { label: " 活动时间", prop: "hdsj", },
-    { label: " 活动发生地址", prop: "hdfsdz", },
-
-    { label: " 处置状态", prop: "clzt", showSolt: true }
-  ],
-  tableColumn2: [
-    { label: "照片", prop: "zp", showSolt: true ,},
-    { label: "姓名", prop: "name", width:50},
-    { label: "性别", prop: "xb", width:50},
-    { label: "身份证号", prop: "sfzh",  },
-    { label: "管控原因", prop: "gkyy",width:100 },
-  ],
-});
-
-
-
-
-
-const checkAll = ref(false)
-const isIndeterminate = ref(true)
-const checkedCities = ref(['全部'])
-const cities = ['全部', '红色', '橙色', '黄色', '蓝色']
-
-const handleCheckAllChange = (val) => {
-  checkedCities.value = val ? cities : []
-  isIndeterminate.value = false
-}
-const handleCheckedCitiesChange = (value) => {
-  const checkedCount = value.length
-  checkAll.value = checkedCount === cities.length
-  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
-}
-
-const warningList = ref([
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路宫区天山路宫区天山路'
-  },
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路宫区天山路宫区天山路'
-  },
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路...'
-  }
-])
-
-
-
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.container {
+@import "@/assets/css/homeScreen.scss";
-  height: calc(100% - 67px);
+.transition {
-  width: 100%;
+  transition: all 0.5s;
-  margin-top: -61px;
-  box-sizing: border-box;
-  padding: 0 30px 20px 30px;
-
-  .content-box {
-    margin-top: 4px;
-
-    .title-img-2 {
-      background: url("~@/assets/images/databi/title-box-2.png") no-repeat center center !important;
-
-      .title-desc {
-        font-size: 14px;
-        color: #98BCE0;
-        margin-left: 20px;
-      }
-
-      .btn {
-        cursor: pointer;
-        color: #0072FF;
-        margin-top: 3px;
-      }
-    }
-
-    .title-box {
-      width: 100%;
-      height: 35px;
-      background: url("~@/assets/images/databi/title-box.png") no-repeat center center;
-      position: relative;
-      line-height: 35px;
-
-      .title {
-        margin-left: 60px;
-        font-weight: 700;
-        font-size: 16px;
-
-      }
-
-    }
-
-
-  }
-
-  .background-img-1 {
-    background: url("~@/assets/images/databi/content-box.png") no-repeat center center;
-  }
-
-  .background-img-2 {
-    background: url("~@/assets/images/databi/content-box-2.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .background-img-3 {
-    background: url("~@/assets/images/databi/content-box-3.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .background-img-4 {
-    background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .background-img-5 {
-    background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .right-1 {
-    background: url("~@/assets/images/databi/right-1.png") no-repeat center center;
-    background-size: 100% 100%;
-
-
-
-    .warning-list {
-      height: 205px;
-      overflow: auto;
-
-    }
-
-    .info-item {
-      margin-bottom: 4px;
-      color: #fff;
-      font-size: 14px;
-    }
-
-    .warning-card {
-      background: url("~@/assets/images/databi/blue.png") no-repeat center center;
-      background-size: 100% 100%;
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 4px;
-      padding: 4px 4px 4px 10px;
-      box-sizing: border-box;
-    }
-
-    .warning-image {
-      width: 100px;
-      height: 80px;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .warning-image img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .warning-info {
-      flex: 1;
-    }
-  }
-
-  .right-2 {
-    background: url("~@/assets/images/databi/right-2.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .right-3 {
-    background: url("~@/assets/images/databi/right-3.png") no-repeat center center;
-    background-size: 100% 100%
-  }
-
-  .content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding: 10px;
-    box-sizing: border-box;
-    .content-item {
-      width: 138px;
-      height: 36px;
-      line-height: 36px;
-      text-align: center;
-      background: url("~@/assets/images/databi/content-item.png") no-repeat center center;
-
-    }
-
-  }
-
-  .el-main {
-    padding: 10px;
-
-    .top {
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 0 20px;
-
-      .top-item {
-
-        display: flex;
-        gap: 5px;
-
-        .top-icon {
-          height: 50px;
-          width: 50px;
-        }
-
-
-
-        .top-item-right {
-          font-size: 12px;
-
-          .top-item-title {
-            color: #0072FF;
-          }
-
-          .top-item-title-tow {
-            color: #ffffff;
-          }
-
-        }
-      }
-
-    }
-
-    .med {
-      margin-top: 4px;
-    }
-
-    .footer {
-      // margin-top: 4px;
-
-    }
-
-  }
-
-  .el-footer {
-    padding: 0 !important;
-    height: 100% !important;
-    width: 455px !important;
-  }
-
-
-
-
-}
-
-.homeBox {
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  background: url("~@/assets/images/databi/cantainer.png") no-repeat center center;
-  background-size: 100% 100%;
-.head{
-  position: relative;
-  .head-icon-l{
-    position: absolute;
-    top: 30px;
-    left: 30px;
-  }
-}
-  .my-table :deep(.el-table--fit) {
-    border: none !important;
-  }
-
-  .my-table .el-table,
-  .el-table__expanded-cell {
-    background-color: transparent !important;
-    border: none !important;
-  }
-
-  .my-table :deep(.el-table) tr {
-    background-color: transparent !important;
-    border: none;
-  }
-
-  .el-table th,
-  .el-table tr {
-    border: 0 !important;
-    background-color: transparent !important;
-    color: white !important;
-  }
-
-  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
-    background: #003D82;
-    opacity: 75%;
-  }
-
-  .el-table--border tr,
-  td {
-    border: none !important;
-  }
-
-  /* 去最下面的横线 */
-
-  .el-table::after {
-    border-bottom: none !important;
-  }
-  /*table内的高亮*/
-
-.el-table tbody tr:hover>td {
-
-background-color: transparent !important
-
-}
-
-
-
-}
-
-.el-checkbox__inner {
-  background-color: transparent !important;
-  border: 1px solid #0072FF;
-}
-
-.el-checkbox__label {
-  color: #fff;
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #00FFFF !important;
-}
-
-.el-checkbox__inner::after {
-  border-color: black !important;
-
 }
 </style>

src/views/home/layout/head.vue

@@ -1,31 +1,244 @@
 <template>
-  <div class="home-head-box relative">
+  <div class="headBox">
-    <div class="title absolute" @click="goPath">林芝市检查站综合管理</div>
+    <!-- 左边 -->
+    <el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
+      <template #reference>
+        <ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
+          <li class="flex align-center pointer mr10">
+            <img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
+            <div class="">
+              <div class="f15 text">{{ wekendays[0].dqtq }}</div>
+              <div class="tests">{{ wekendays[0].fx }}</div>
+            </div>
+          </li>
+          <li class="flex align-center mr10 ml10 pointer">
+            <img class="mr10" :src="icon3" alt="" />
+            <div>
+              <div class="f16 text">{{ wekendays[0].dqwd }}°C</div>
+              <div class="tests">
+                {{ wekendays[0].btwd }}°~{{ wekendays[0].yjwd }}°
+              </div>
+            </div>
+          </li>
+          <li class="flex align-center pointer relative">
+            <span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length  }}</span>
+            <img v-if="wekendays[0].list.length > 0" width="34" height="34" class="mr10" src="@/assets/images/icon_066.gif" alt=""  />
+            <img  v-else  class="mr10"  src="@/assets/images/icon_057.png" alt=""  />
+            <div>
+              <div class="f16 text"> {{ hour + ":" + minute + ":" + second }}</div>
+              <div class="tests">{{ weekenday }} {{ datatime }}</div>
+            </div>
+          </li>
+          <li class="yjbtn">
+            <span class="btms">预警布控</span>
+          </li>
+        </ul>
+      </template>
+      <ul class="tqBox pt10 pl10 pr10">
+        <li class="tqItem flex align-center pointer mt10 bth">
+          <div class="ml43 tc" style="width: 100px">温度</div>
+          <div class="tc" style="width: 80px">天气</div>
+          <div class="tc" style="width: 100px">风向</div>
+          <div class="tc" style="width: 80px">风速</div>
+          <div class="tc" style="width: 100px">日期</div>
+        </li>
+        <li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx" >
+          <span class="Count" v-if="iv.list.length > 0">{{ iv.list.length  }}</span>
+          <img class="mr10" :src="showIcon(iv.dqtq)" alt="" />
+          <div class="tc" style="width: 100px"> {{ iv.btwd }}° ~ {{ iv.yjwd }}° </div>
+          <div class="tc" style="width: 80px">晴</div>
+          <div class="tc" style="width: 100px">{{ iv.fx }}</div>
+          <div class="tc" style="width: 80px">微风</div>
+          <div class="tc" style="width: 100px">{{ iv.tqrq.slice(0, 11) }}</div>
+        </li>
+      </ul>
+    </el-popover>
+    <div class="top-center pointer">{{ props.title }}</div>
+    <!-- 右边 -->
+     <ul class="topBtn topBtn-right">
+      <li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
+        <span>{{ it }}</span>
+        <img class="ml10" :src="it == '消息' ? xinxi : tool" />
+      </li>
+    </ul>
+    <ul class="rightIcon">
+      <div class="flex align-center">
+        <img class="mr10" src="@/assets/images/icon_046.png" alt="" />
+        <div class="f14">
+          <div style="color:#0BB7FF">张某某</div><div>安全管理科</div>
+        </div>
+        <span class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
+        <el-icon color="#0BB7FF" :size="24" @click="goPath"><Menu /></el-icon>
+      </div>
+    </ul>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
+import { choseRbgb } from "@/utils/tools.js";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { timeValidate, weekValidate } from "@/utils/tools.js";
+import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
+import { useStore } from "vuex";
+import xinxi from "@/assets/images/icon_045.png";
+import tool from "@/assets/images/icon_044.png";
+const icon1 = require("@/assets/images/icon_048.png"); //晴天
+const icon2 = require("@/assets/images/icon_049.png"); //小雨
+const icon3 = require("@/assets/images/icon_050.png"); //高温
+const icon4 = require("@/assets/images/icon_052.png"); //中雨
+const icon5 = require("@/assets/images/icon_053.png"); //大雨
+const icon6 = require("@/assets/images/icon_054.png"); //雷阵雨
+const icon7 = require("@/assets/images/icon_055.png"); //多云转晴 - 阴天
+const icon8 = require("@/assets/images/icon_056.png"); //多云
+import { ref, onMounted, defineEmits, defineProps,onUnmounted, reactive, watch } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "林芝哨岗系统"
+  },
+});
+const wekendays = ref([
+  { dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
+  { dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
+  { dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
+]);
+const isShowVisble = ref(false);
+const store = useStore();
 const router = useRouter();
+const route = useRoute();
+const btns = reactive({
+  rightBtn: ["四色预警", "重点人群"],
+  leftBtn: ["预警布控"]
+});
+
+const btnsActive = ref("");
+const showMore = ref(false); //更多
+const activeText = ref("");
+const day = ref(0);
+const minute = ref("00"); //分
+const second = ref("00"); //秒
+const hour = ref("00"); //时
+const weekenday = weekValidate(); //星期几
+const datatime = ref(timeValidate(null, "ymd"));
+const timersfm = ref(null);
+onMounted(() => {
+  // getWheather();
+  timersfm.value = setInterval(() => {
+    CurrentTime();
+  }, 1000);
+});
+
+
+// 按钮切换
+const handleBtns = (val) => {
+  // btnsActive.value = val;
+  switch (val) {
+    // case "工作后台":
+    //   break;
+   
+    // case "退出登录":
+    //   store.dispatch("user/logout");
+    //   store.commit("app/clearTag", null, { immediate: true });
+    //   store.commit("permission/deleteRouter", { immediate: true });
+    //   store.commit("user/deleteKeepLiiveRoute", "home");
+    //   break;
+  }
+};
+
+function openWinter() {
+  isShowVisble.value = !isShowVisble.value;
+  // if (!isShowVisble.value) emitter.emit("deletePointArea", "tq_xfq");
+}
+function showIcon(val) {
+  switch (val) {
+    case "晴":
+      return icon1;
+    case "小雨":
+      return icon2;
+    case "中雨":
+      return icon4;
+    case "大雨":
+      return icon5;
+    case "雷阵雨":
+      return icon6;
+    case "多云":
+      return icon8;
+    case "阴":
+      return icon7;
+    // ------------------------------//
+    case "冻雨":
+      return icon6;
+    case "雾":
+      return icon6;
+    case "冰雹":
+      return icon6;
+    case "大到暴雪":
+      return icon6;
+    case "中雪":
+      return icon6;
+    case "小雪":
+      return icon6;
+    case "大到暴雨":
+      return icon6;
+  }
+}
+
+// 获取时分秒
+function CurrentTime() {
+  const date = new Date();
+  hour.value = date.getHours();
+  minute.value = date.getMinutes();
+  second.value = date.getSeconds();
+  day.value = day.value < 10 ? "0" + day.value : day.value;
+  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
+  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
+  second.value = second.value < 10 ? "0" + second.value : second.value;
+}
+
+// 获取天气
+function getWheather() {
+  // qcckGet({}, "/mosty-base/weather/getTbWeatherSeven").then((res) => {
+  //   wekendays.value = res || [];
+  // });
+}
+
 function goPath() {
   router.push("/editPassword");
 }
+
+
+onUnmounted(() => {
+  clearInterval(timersfm.value);
+});
 </script>
 
 <style lang="scss" scoped>
-.home-head-box{
+@import "@/assets/css/homeScreen.scss";
-  width: 100%;
+.tqItem{
-  height: 138px;
+  color: #fff;
-  background: url("~@/assets/images/home_head.png") no-repeat center center;
+}
-  .title{
+</style>
-    font-size: 36px;
+<style lang="scss">
-    left: 50%;
+.zdy-meuns-popover {
-    top: 10px;
+  background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
-    transform: translateX(-50%);
+  background-size: 100% 100% !important;
-    font-family: 'YSBTH';
+  border: 1px solid transparent !important;
-    background: linear-gradient(0deg, #59A6F4 0%,#ffffff 100%);
+}
-    -webkit-background-clip: text;
+
-    -webkit-text-fill-color: transparent;
+.zdy-meuns-popover .el-popper__arrow::before {
+  background: #0c1850 !important;
+  border: 1px solid #224281 !important;
+  display: none !important;
+}
+.bszdr-tq-Popover {
+  background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
+  background-size: 100% 100% !important;
+  border: 1px solid transparent !important;
+  &[data-popper-placement^="bottom"] .el-popper__arrow::before {
+    border: none !important;
+    background: transparent !important;
   }
 }
-</style>
+</style>
+

src/views/home/model/bkcz.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="comom-title">
+    <div class="title">
+      <span class="mr12 pointer nowrap" :style="{fontSize:activeIndex == idx ? '22px':'18px'} " v-for="(it,idx) in btns" :key="idx" @click="activeIndex = idx">{{ it }}</span>
+    </div>
+  </div>
+  <div class="comom-cnt" id="qcbk">
+    <MyTable @changePage="changePage" customClass="zdy_bkcz_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
+        <template #tp="{row}">
+            <img width="30" src="@/assets/images/icon100.png" alt="">
+        </template>
+        <template #czzt="{row}">
+            <span style="color:#FDBC3A">{{ row.czzt }}</span>
+        </template>
+    </MyTable>
+  </div>
+</template>
+  
+<script setup>
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, ref,onMounted } from "vue";
+const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
+const activeIndex = ref(0);
+const pageData = reactive({
+  tableData: [
+    {
+      tp: "https://example.com/photo1.jpg",
+      xm: "张三",
+      xb: "男",
+      sfzh: "330102199001011234",
+      gkdw: "城东派出所",
+      hdsj: "2023-12-25 14:30",
+      sfdz: "杭州市上城区平海路123号",
+      czzt: "已处置"
+    },
+    {
+      tp: "https://example.com/photo2.jpg",
+      xm: "李四",
+      xb: "女",
+      sfzh: "330102199203034567",
+      gkdw: "城西派出所",
+      hdsj: "2023-12-25 16:45",
+      sfdz: "杭州市西湖区文三路456号",
+      czzt: "待处置"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkdw: "城北派出所",
+      hdsj: "2023-12-25 09:15",
+      sfdz: "杭州市拱墅区莫干山路789号",
+      czzt: "处置中"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkdw: "城北派出所",
+      hdsj: "2023-12-25 09:15",
+      sfdz: "杭州市拱墅区莫干山路789号",
+      czzt: "处置中"
+    },
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    showIndex: false,
+    stripe:true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableColumn: [
+    { label: "照片", prop: "tp", showSolt: true },
+    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "性别", prop: "xb" ,showOverflowTooltip: true},
+    { label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
+    { label: "管控单位", prop: "gkdw" ,showOverflowTooltip: true},
+    { label: "活动时间", prop: "hdsj" ,showOverflowTooltip: true},
+    { label: "活动发生地址", prop: "sfdz" ,showOverflowTooltip: true},
+    { label: "处置状态", prop: "czzt",showOverflowTooltip: true,showSolt: true  },
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+});
+
+const changePage = () => {
+  console.log('触底加载==========');
+};
+
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('qcbk').offsetHeight - 10;
+    window.onresize = function () {
+      tabHeightFn();
+    };
+};
+
+</script>
+  
+  
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+::v-deeep .comom-title{
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deeep .comom-cnt{
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+::v-deep .el-table td.el-table__cell{
+  color: #ffffff;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+    background: rgba(0,61,130,0.75);
+}
+</style>
+<style lang="scss">
+.zdy_bkcz_table td.el-table__cell {
+    color: #ffffff !important;
+}
+.zdy_bkcz_table th.el-table__cell {
+    color: #ffffff !important;
+    font-size: 15px;
+}
+</style>

src/views/home/model/dbCount.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="comom-title">
+    <span class="title">线索研判盯办统计</span>
+  </div> 
+  <ul class="comom-cnt xsBox flex flex-warp just-between align-center">
+    <li class="xs-item" v-for="(item, idx) in contentItem" :key="idx">
+        {{ item.label }}:{{ item.value }}条
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const contentItem = ref([
+    {label:'线索总数',value:'892'},
+    {label:'下发总数',value:'892'},
+    {label:'已处置总数',value:'892'},
+    {label:'反馈总数',value:'892'},
+    {label:'未反馈总数',value:'892'},
+    {label:'未处置总数',value:'892'},
+])
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.xsBox{
+    background: url("~@/assets/images/bg_12.png") no-repeat center center;
+    background-size: 100% 100%;
+    .xs-item{
+        width: 31%;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        background: url("~@/assets/images/content-item.png") no-repeat center center;
+        background-size: 100% 100%;
+    }
+}
+
+</style>

src/views/home/model/fjqk.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="comom-title">
+    <div class="title">重点人发掘情况</div>
+  </div>
+  <div class="comom-cnt" id="fjfk">
+    <MyTable
+      @changePage="changePage"
+      customClass="zdy_bkcz_table"
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+    >
+      <template #tp="{ row }">
+        <img width="30" src="@/assets/images/icon100.png" alt="" />
+      </template>
+    </MyTable>
+  </div>
+</template>
+    
+<script setup>
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, onMounted } from "vue";
+const pageData = reactive({
+  tableData: [
+    {
+      tp: "https://example.com/photo1.jpg",
+      xm: "张三",
+      xb: "男",
+      sfzh: "330102199001011234",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo2.jpg",
+      xm: "李四",
+      xb: "女",
+      sfzh: "330102199203034567",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    }
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    showIndex: false,
+    stripe: true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableColumn: [
+    { label: "照片", prop: "tp", showSolt: true },
+    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "性别", prop: "xb", showOverflowTooltip: true },
+    { label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
+    { label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+});
+
+const changePage = () => {
+  console.log("触底加载==========");
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('fjfk').offsetHeight - 10;
+    window.onresize = function () {
+      tabHeightFn();
+    };
+};
+
+</script>
+    
+    
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+::v-deeep .comom-title {
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deep .el-table td.el-table__cell {
+  color: #ffffff;
+}
+
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: rgba(0, 61, 130, 0.75);
+}
+</style>
+<style lang="scss">
+
+.zdy_bkcz_table td.el-table__cell {
+  color: #ffffff !important;
+}
+.zdy_bkcz_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+</style>

src/views/home/model/qbfkCount.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="comom-title">
+    <span class="title">情报反馈统计</span>
+  </div> 
+  <div class="comom-cnt">
+    <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { fa } from 'element-plus/es/locale.mjs';
+
+const initChart = () => {
+  const chartDom = document.getElementById('qbfk');
+  const myChart = echarts.init(chartDom);
+  
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      borderColor: '#0C2E5A',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    legend: {
+      top: 'middle',
+      right: '5%',
+      orient: 'vertical',
+      itemGap: 20,
+      textStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      itemWidth: 15,
+      itemHeight: 15,
+      icon: 'roundRect',
+      formatter: function(name) {
+        const data = option.series[0].data;
+        const target = data.find(item => item.name === name);
+        if (target) {
+          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
+        }
+        return name;
+      }
+    },
+    series: [
+      {
+        name: '情报反馈统计',
+        type: 'pie',
+        radius: ['40%', '75%'],
+        center: ['30%', '50%'],
+        startAngle: 90,
+        zlevel: 10,
+        itemStyle: {
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: '#0C2E5A'
+        },
+        selectedMode: 'single',
+        selectedOffset: 30,
+        animation: true,
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+        animationDelay: function (idx) {
+          return Math.random() * 200;
+        },
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#0C2E5A',
+          opacity: 0.8,
+          shadowBlur: 20,
+          shadowColor: 'rgba(0,0,0,0.5)'
+        },
+        data: [
+          { 
+            value: 18, 
+            name: '实反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FF6B9A' },
+                { offset: 1, color: '#FF4B7A' }
+              ])
+            } 
+          },
+          { 
+            value: 13, 
+            name: '超时反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFAA33' },
+                { offset: 1, color: '#FF8A00' }
+              ])
+            } 
+          },
+          { 
+            value: 17, 
+            name: '处置下发', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFE699' },
+                { offset: 1, color: '#FFD666' }
+              ])
+            } 
+          },
+          { 
+            value: 2, 
+            name: '未反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#66B5FF' },
+                { offset: 1, color: '#3AA1FF' }
+              ])
+            } 
+          }
+        ],
+        zlevel: 10,
+        emphasis: {
+          scale: true,
+          scaleSize: 10,
+          itemStyle: {
+            shadowBlur: 30,
+            shadowColor: 'rgba(0,0,0,0.6)'
+          }
+        }
+      }
+    ],
+    
+  };
+
+  option && myChart.setOption(option);
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+};
+
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.xsBox{
+    background: #052249;
+    .xs-item{
+        width: 31%;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        background: url("~@/assets/images/content-item.png") no-repeat center center;
+        background-size: 100% 100%;
+    }
+}
+
+.qbfkBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

src/views/home/model/qblyType.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="comom-title">
+    <span class="title">情报来源类型</span>
+  </div> 
+  <div class="comom-cnt">
+    <div id="qbltBox" class="qbltBox" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script setup>
+import LineEcharts from "../echarts/moreLineEcharts.vue";
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps } from "vue";
+
+onMounted(() => {
+  lineChartFn();
+});
+
+function lineChartFn() {
+  var chartDom = document.getElementById("qbltBox");
+  var myChart = echarts.init(chartDom);
+  var option;
+  option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: [
+        { name: "总数" },
+        { name: "已处置" }
+      ]
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "5%",
+      left: "5%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ['110警情','人力情报','系统采集','民警处置单'],
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: "总数",
+        type: "bar",
+        data: [10,20,30,40],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[
+              {
+                  offset: 0,
+                  color: "rgba(0,244,255,1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0,77,167,1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [11, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#087df9' // 圆盘颜色
+          },
+          data: [10,20,30,40].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+      {
+        name: "已处置",
+        type: "bar",
+        data: [40,50,60,70],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,
+              [
+                {
+                  offset: 0,
+                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [11, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#00FFFF' // 圆盘颜色
+          },
+          data: [40,50,60,70].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+  document.getElementById("qbltBox").setAttribute("_echarts_instance_", "");
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.qbltBox {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>

src/views/home/model/qbsbCount.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="comom-title">
+    <span class="title">情报上报数量统计</span>
+  </div> 
+  <div class="comom-cnt qxsbBox">
+   <LineEcharts echartsId="qbsbEcharts" :data="dataList"></LineEcharts>
+  </div>
+</template>
+
+<script setup>
+import { values } from "lodash";
+import LineEcharts from "../echarts/moreLineEcharts.vue";
+import { reactive, ref } from 'vue';
+
+const dataList = reactive({
+  xData:['巴宜区','工布江达县','米林县','墨脱县','波密县','察隅县','朗县'],
+  color:['#0386FB','#00FFFF'],
+  list:[
+    {label:'总数',val:[30,20,10,60,50,60,35]},
+    {label:'已处置',val:[40,30,20,50,30,44,50]},
+  ]
+});
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+</style>

src/views/home/model/yszs.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="ww100 h100 flex just-between align-center pl10 pr10">
+    <div class="flex align-center" v-for="(item, idx) in contentItem" :key="idx">
+        <div class="mr10"><img :src="item.icon" alt=""></div>
+        <div class="vountItem">
+            <div style="color:#0072FF" class="f16 lh20">{{ item.label }}</div>
+            <div class="mt4 f12">{{ item.value }}</div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+const contentItem = ref([
+  { label: "线索总数", value: "892" ,icon:require('@/assets/images/top-1.png')},
+  { label: "已处置线索总数", value: "892",icon:require('@/assets/images/top-2.png') },
+  { label: "重点人总数", value: "892",icon:require('@/assets/images/top-3.png') },
+  { label: "重点群体总数", value: "892" ,icon:require('@/assets/images/top-4.png')},
+]);
+</script>
+
+<style lang="scss" scoped>
+.vountItem{
+    width: 128px;
+    height: 50px;
+    background: url('~@/assets/images/line.png') no-repeat bottom center;
+}
+</style>

src/views/home/model/zdgk.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="comom-title">
+    <div class="title">
+      <span
+        class="mr12 pointer nowrap"
+        :style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
+        v-for="(it, idx) in btns"
+        :key="idx"
+        @click="activeIndex = idx"
+        >{{ it }}</span
+      >
+    </div>
+  </div>
+  <div id="zdgk" class="comom-cnt">
+    <MyTable
+      @changePage="changePage"
+      customClass="zdy_bkcz_table"
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+    >
+      <template #tp="{ row }">
+        <img width="30" src="@/assets/images/icon100.png" alt="" />
+      </template>
+    </MyTable>
+  </div>
+</template>
+    
+<script setup>
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, ref,onMounted } from "vue";
+const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
+const activeIndex = ref(0);
+const pageData = reactive({
+  tableData: [
+    {
+      tp: "https://example.com/photo1.jpg",
+      xm: "张三",
+      xb: "男",
+      sfzh: "330102199001011234",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo2.jpg",
+      xm: "李四",
+      xb: "女",
+      sfzh: "330102199203034567",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkyy: "抢劫xxxxx"
+    }
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    showIndex: false,
+    stripe: true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableColumn: [
+    { label: "照片", prop: "tp", showSolt: true },
+    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "性别", prop: "xb", showOverflowTooltip: true },
+    { label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
+    { label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+});
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('zdgk').offsetHeight - 10;
+};
+
+const changePage = () => {
+  console.log("触底加载==========");
+};
+</script>
+    
+    
+  <style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+::v-deeep .comom-title {
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deep .el-table td.el-table__cell {
+  color: #ffffff;
+}
+
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: rgba(0, 61, 130, 0.75);
+}
+</style>
+  <style lang="scss">
+.zdy_bkcz_table td.el-table__cell {
+  color: #ffffff !important;
+}
+.zdy_bkcz_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+</style>

src/views/home/model/zdryWarning.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="comom-title">
+    <span class="title">重点人员动态预警</span>
+  </div> 
+  <div class="comom-cnt zdryBox">
+    <div style="height:33px;">
+     <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
+    </div>
+    <ul class="ryBox" v-loading="loading">
+      <li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
+        <YjItem :item="item"></YjItem>
+      </li>
+      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="120"></MOSTY.Empty>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import YjItem from "@/views/home/components/yjItem.vue";
+import * as MOSTY from "@/components/MyComponents/index";
+import CheckBox from "@/components/checkBox/index.vue";
+import { ref ,reactive} from 'vue';
+const checkData = reactive({
+  list: ["红", "橙", "黄", "蓝"],
+  hasChoose: ["红"]
+});
+const loading = ref(false); // 加载中
+const personList = ref([
+  {
+    image: require("@/assets/images/person.png"),
+    name: "张三",
+    gender: "男",
+    similarity: 85,
+    sfzh:'11010119900307121X',
+    age: 25,
+    mz:'汉',
+    warningTime: "2025-02-15 13: 00",
+    location: "林艺市八宫区天山路宫区天山路宫区天山路",
+    yjjb:'10',
+    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
+  },
+  {
+    image: require("@/assets/images/person.png"),
+    name: "张三",
+    gender: "男",
+    age: 25,
+    sfzh:'11010119900307121X',
+    mz:'汉',
+    similarity: 85,
+    warningTime: "2025-02-15 13: 00",
+    location: "林艺市八宫区天山路宫区天山路宫区天山路",
+    yjjb:'20',
+    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
+  },
+  {
+    image: require("@/assets/images/person.png"),
+    name: "张三",
+    gender: "男",
+    age: 25,
+    mz:'汉',
+    sfzh:'11010119900307121X',
+    similarity: 85,
+    warningTime: "2025-02-15 13: 00",
+    location: "林艺市八宫区天山路...",
+    yjjb:'30',
+    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
+  },
+  {
+    image: require("@/assets/images/person.png"),
+    name: "张三",
+    gender: "男",
+    age: 25,
+    mz:'汉',
+    sfzh:'11010119900307121X',
+    similarity: 85,
+    warningTime: "2025-02-15 13: 00",
+    location: "林艺市八宫区天山路...",
+    yjjb:'40',
+    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
+  },
+]);
+// 复选框切换
+function changeData(){
+  console.log('切换');
+}
+
+
+const contentItem = ref([
+    {label:'线索总数',value:'892'},
+    {label:'下发总数',value:'892'},
+    {label:'已处置总数',value:'892'},
+    {label:'反馈总数',value:'892'},
+    {label:'未反馈总数',value:'892'},
+    {label:'未处置总数',value:'892'},
+])
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.zdryBox{
+  background: #052249;
+  .ryBox{
+    height: calc(100% - 33px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+
+::-webkit-scrollbar {
+  background-color: #263b70;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #146bbe;
+}
+::-webkit-scrollbar-track {
+  background-color: #263b70;
+}
+::-webkit-scrollbar-corner {
+  background-color: #142141;
+}
+
+::v-deep .el-checkbox__label{
+  color:#fff;
+}
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
+  color:#00FFFF;
+}
+::v-deep .el-checkbox__inner{
+  background:rgba(0,144,255,0.2);
+  border:1px solid #0072FF;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: #00FFFF;
+  border-color:#00FFFF;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: #00FFFF;
+  border-color:#00FFFF;
+}
+::v-deep .el-checkbox__inner::after{
+  border:2px solid #000;
+  border-left:0;
+  border-top:0;
+  left:3px;
+  top:0px;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
+  background: #000;
+}
+
+
+</style>