假数据添加

src/components/common/Dialog.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :class="[isFullScreen ? 'full-screen' : '']"
+    :append-to-body="true"
+    :width="width"
+    top=".98rem"
+    @close="closeDialog"
+    :destroy-on-close="true"
+  >
+    <template slot="title">
+      <div class="dialog-title">
+        <span class="dialog-title-span">
+          {{ title }}
+        </span>
+        <span class="op-buttons">
+          <i
+            @click="changeFullScreen"
+            :class="['iconfont', isFullScreen ? 'icon-suoxiao' : 'icon-fangda']"
+          ></i>
+        </span>
+      </div>
+    </template>
+    <slot />
+  </el-dialog>
+</template>
+<script>
+export default {
+  name: "Dialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: [String, Number],
+      default: 1200,
+    },
+  },
+  data() {
+    return {
+      isFullScreen: false,
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("change-visible", val);
+      },
+    },
+  },
+  methods: {
+    closeDialog() {
+      console.log("???");
+      this.dialogVisible = false;
+      console.log(this.dialogVisible);
+    },
+    changeFullScreen() {
+      this.isFullScreen = !this.isFullScreen;
+      this.$nextTick(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.dialog-title {
+  position: relative;
+  z-index: 999;
+  color: #fff;
+  font-size: 18px;
+  line-height: 0.22rem;
+  .op-buttons {
+    position: absolute;
+    right: 15px;
+    top: 0px;
+    i {
+      cursor: pointer;
+      margin-left: 15px;
+      font-size: 18px;
+      margin-right: 18px;
+      padding: 0 12px;
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+}
+.dialog-title-span {
+  position: relative;
+}
+</style>
\ No newline at end of file

src/components/common/DialogApiDataTable.vue

+<template>
+  <div class="data-table-out">
+    <el-table
+      border
+      class="dialog-data-table"
+      :data="tableData"
+      v-loading="loading"
+      :element-loading-background="loadingBG"
+      height="calc(100% - .5rem)"
+    >
+      <el-table-column
+        v-if="hasIndex"
+        label="序号"
+        type="index"
+        align="center"
+      ></el-table-column>
+      <template v-for="(column, cIndex) in columns">
+        <!-- 无插槽 -->
+        <el-table-column
+          v-if="!column.hasSlot"
+          :key="column.prop"
+          :label="column.label"
+          :prop="column.prop"
+          :align="column.align ? column.align : 'center'"
+          :min-width="column.minWidth ? column.minWidth : ''"
+        ></el-table-column>
+        <!-- 自定义插槽 -->
+        <el-table-column
+          v-else
+          :key="cIndex"
+          :label="column.label"
+          :prop="column.prop"
+          :align="column.align ? column.align : 'center'"
+          :min-width="column.minWidth ? column.minWidth : ''"
+        >
+          <template #default="scope">
+            <slot :name="column.prop" :data="scope.row" />
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <el-pagination
+      v-if="hasPagination"
+      class="table-pagination"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: "DialogApiDataTable",
+  props: {
+    api: {
+      type: Function,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "6rem",
+    },
+    columns: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+    parameters: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    hasIndex: {
+      type: Boolean,
+      default: true,
+    },
+    hasPagination: {
+      type: Boolean,
+      default: true,
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true,
+    },
+    apiType: {
+      default: "",
+    },
+    pathId: {
+      default: "",
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      currentPage: 1,
+      total: 0,
+      pageSize: 20,
+      loadingBG: "rgba(0, 0, 0, 0.2)",
+      loading: false,
+    };
+  },
+  mounted() {
+    if (this.autoLoad) {
+      this.getData();
+    } else {
+      this.tableData = this.data;
+      this.total = 13;
+    }
+  },
+  methods: {
+    getData() {
+      if (this.api) {
+        this.loading = true;
+        this.tableData = [];
+        if (!this.pathId) {
+          this.api({
+            ...this.parameters,
+            page: this.currentPage,
+            limit: this.pageSize,
+          }).then((res) => {
+            this.loading = false;
+            this.tableData = res.data.data;
+            this.total = res.data.total;
+          });
+        } else {
+          this.api(
+            {
+              ...this.parameters,
+              page: this.currentPage,
+              limit: this.pageSize,
+            },
+            this.pathId
+          ).then((res) => {
+            this.loading = false;
+            this.tableData = res.data.data;
+            this.total = res.data.total;
+          });
+        }
+      }
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.handleCurrentChange(1);
+    },
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage;
+      this.getData();
+    },
+  },
+};
+</script>
+<style>
+.data-table-out {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/common/DialogTabs.vue

+<template>
+  <div class="dialog-tab">
+    <div
+      v-for="tab in tabList"
+      :key="tab.name"
+      :class="['tab-pane', currentTab == tab.name ? 'active' : '']"
+      @click="changeTab(tab.name)"
+    >
+      {{ tab.label }}
+    </div>
+    <div class="separate-lines">
+      <div class="separate-line"></div>
+      <img
+        class="separate-arrow"
+        src="@/assets/images/common/icon_tab_arr.png"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "DialogTabs",
+  props: {
+    currentTab: {
+      type: String,
+      default: "",
+    },
+    tabList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  methods: {
+    changeTab(tabName) {
+      this.$emit("change", tabName);
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.dialog-tab {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .tab-pane {
+    font-size: 16px;
+    color: #82a4e4;
+    line-height: 20px;
+    padding: 0 10px;
+    border-left: 1px solid #2857ae;
+    cursor: pointer;
+    &:hover {
+      color: #fff;
+    }
+    &.active {
+      padding-left: 30px;
+      position: relative;
+      color: #fff;
+      &::before {
+        position: absolute;
+        content: "";
+        width: 4px;
+        height: 4px;
+        background: #23ddff;
+        border: 3px solid #fff;
+        border-radius: 50%;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  .separate-lines {
+    flex-grow: 1;
+    border-left: 1px solid #2857ae;
+    display: flex;
+    align-items: center;
+    .separate-line {
+      display: flex;
+
+      height: 1px;
+      background: #2857ae;
+      flex-grow: 1;
+    }
+    .separate-arrow {
+      width: 20px;
+      padding-left: 4px;
+      vertical-align: top;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/common/STable.vue

@@ -18,8 +18,9 @@
       v-infinite-scroll="load"
       :infinite-scroll-distance="1"
       :infinite-scroll-delay="1000"
-      ref="tableData"
+      ref="scrollContainer"
     >
+      <div ref="scrollList">
         <div
           class="table-data-columns"
           v-for="(row, index) in tableData"
@@ -51,6 +52,7 @@
             </template>
           </div>
         </div>
+      </div>
       <div v-if="tableData.length == 0" class="no-data">
         <div class="inner">
           <img src="@/assets/images/index/no-data.png" alt="" />
@@ -81,23 +83,59 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      scrollInterval: null,
+    };
+  },
   methods: {
     load() {
       if (this.pagination) {
         this.$emit("load");
       }
     },
+    startScrolling() {
+      const scrollContainer = this.$refs.scrollContainer;
+      const scrollList = this.$refs.scrollList;
+
+      let scrollTop = 0; // 当前滚动位置
+
+      this.scrollInterval = setInterval(() => {
+        scrollTop++;
+        scrollContainer.scrollTop = scrollTop;
+
+        // 如果滚动到底部，直接返回顶部
+        if (
+          scrollTop >=
+          scrollList.scrollHeight - scrollContainer.clientHeight
+        ) {
+          scrollTop = 0; // 重置滚动位置为顶部
+        }
+      }, 80);
+    },
+    stopScrolling() {
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval);
+      }
+    },
   },
   data() {
     return {};
   },
   mounted() {
-    this.$refs.tableData.onscroll = () => {
+    this.$refs.scrollContainer.onscroll = () => {
       let list = document.getElementsByClassName("el-tooltip__popper");
       if (list.length > 0) {
         list[list.length - 1].style.display = "none";
       }
     };
+    this.$refs.scrollContainer.onmouseover = () => {
+      this.stopScrolling();
+    };
+    this.$refs.scrollContainer.onmouseout = () => {
+      this.startScrolling();
+    };
+    this.startScrolling();
   },
 };
 </script>

src/components/common/STable2.vue

@@ -18,8 +18,9 @@
       v-infinite-scroll="load"
       :infinite-scroll-distance="1"
       :infinite-scroll-delay="1000"
-      ref="tableData"
+      ref="scrollContainer"
     >
+      <div ref="scrollList">
         <div
           class="table-data-columns"
           v-for="(row, index) in tableData"
@@ -51,6 +52,8 @@
             </template>
           </div>
         </div>
+      </div>
+
       <div v-if="tableData.length == 0" class="no-data">
         <div class="inner">
           <img src="@/assets/images/index/no-data.png" alt="" />
@@ -81,23 +84,59 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      scrollInterval: null,
+    };
+  },
   methods: {
     load() {
       if (this.pagination) {
         this.$emit("load");
       }
     },
+    startScrolling() {
+      const scrollContainer = this.$refs.scrollContainer;
+      const scrollList = this.$refs.scrollList;
+
+      let scrollTop = 0; // 当前滚动位置
+
+      this.scrollInterval = setInterval(() => {
+        scrollTop++;
+        scrollContainer.scrollTop = scrollTop;
+
+        // 如果滚动到底部，直接返回顶部
+        if (
+          scrollTop >=
+          scrollList.scrollHeight - scrollContainer.clientHeight
+        ) {
+          scrollTop = 0; // 重置滚动位置为顶部
+        }
+      }, 80);
+    },
+    stopScrolling() {
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval);
+      }
+    },
   },
   data() {
     return {};
   },
   mounted() {
-    this.$refs.tableData.onscroll = () => {
+    this.$refs.scrollContainer.onscroll = () => {
       let list = document.getElementsByClassName("el-tooltip__popper");
       if (list.length > 0) {
         list[list.length - 1].style.display = "none";
       }
     };
+    this.$refs.scrollContainer.onmouseover = () => {
+      this.stopScrolling();
+    };
+    this.$refs.scrollContainer.onmouseout = () => {
+      this.startScrolling();
+    };
+    this.startScrolling();
   },
 };
 </script>

src/components/common/Section.vue

 <template>
   <div class="section" :style="{ height: height }">
-    <Title :title="title"> </Title>
+    <Title :title="title">
+      <template #right-slot>
+        <slot name="right-slot"></slot>
+      </template>
+    </Title>
     <div :class="[type == 'long' ? 'container2' : 'container']">
       <slot />
     </div>

src/components/common/Title.vue

 <template>
   <div class="title">
     {{ title }}
+    <div class="right-slot">
+      <slot name="right-slot"></slot>
+    </div>
   </div>
 </template>
 <script>
@@ -23,8 +26,14 @@ export default {
   background: url("@/assets/images/index/icon_toubg@2x.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  position: relative;
 }
 .right-slot {
-  float: right;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #43bcd2;
+  font-size: 14px;
 }
 </style>
\ No newline at end of file

src/main.js

@@ -15,7 +15,9 @@ import STable from "@/components/common/STable"
 import "@/assets/iconfont/iconfont.css";
 import "@/assets/common/common.less"
 import "@/assets/common/element.less"
-
+import Dialog from "@/components/common/Dialog.vue"
+import DialogTabs from "@/components/common/DialogTabs.vue"
+import DialogApiDataTable from "@/components/common/DialogApiDataTable.vue"
 
 window._AMapSecurityConfig = {
   securityJsCode: 'a5006042196de6dda20a434eb443bf45',
@@ -24,13 +26,15 @@ Vue.use(scroll)
 
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
-
+Vue.prototype.$eventBus = new Vue();
 Vue.use(ElementUI)
 Vue.component('Title', Title)
 Vue.component('Title2', Title2)
 Vue.component('Section', Section)
 Vue.component('STable', STable)
-
+Vue.component('Dialog', Dialog)
+Vue.component('DialogTabs', DialogTabs)
+Vue.component('DialogApiDataTable', DialogApiDataTable)
 new Vue({
   render: h => h(App),
   store,

src/utils/request.js

@@ -70,6 +70,8 @@ request.interceptors.response.use(
         return response.data
     },
     async (error) => {
+
+
         if (error.request.status == 401) {
             closeLoading()
             localStorage.setItem('Authorization', '')
@@ -79,6 +81,7 @@ request.interceptors.response.use(
             })
             window.location.href = window.location.origin
         }
+        closeLoading()
         Message({
             message: '服务器错误',
             type: 'error'

src/views/DataStatis/project/CXCY.vue

+<template>
+  <div class="dialog-body-container">
+    <el-form inline :model="searchForm" class="search-form">
+      <el-form-item label="所在地区：">
+        <el-select></el-select>
+      </el-form-item>
+      <el-form-item label="政府监管：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工程名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <DialogApiDataTable
+      :has-index="true"
+      ref="table"
+      :columns="columns"
+      :parameters="searchForm"
+      :api="api"
+      :auto-load="false"
+      :data="data"
+    >
+      <template #quality_score="{ data }">
+        <span :style="{ color: data.quality_score < 80 ? '#f86262' : '' }">
+          {{ data.quality_score }}
+        </span>
+      </template>
+    </DialogApiDataTable>
+  </div>
+</template>
+<script>
+export default {
+  name: "WarningMsg",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      searchForm: {},
+      columns: [
+        {
+          label: "工程名称",
+          prop: "project_name",
+          minWidth: "600px",
+          align: "left",
+        },
+        { label: "所属地区", prop: "city_name" },
+        { label: "创新创优得分", prop: "quality_score", hasSlot: true },
+      ],
+      dateRange: [],
+      data: [
+        {
+          project_name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
+          city_name: "杭州市",
+          quality_score: "90",
+          quality_score2: "85",
+        },
+        {
+          project_name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
+          city_name: "杭州市",
+          quality_score: "85",
+          quality_score2: "87",
+        },
+        {
+          project_name: "钱塘江北岸五堡排涝泵站工程",
+          city_name: "杭州市",
+          quality_score: "77",
+          quality_score2: "85",
+        },
+        {
+          project_name: "钱塘江西江塘闻堰段海塘提标加固工程",
+          city_name: "杭州市",
+          quality_score: "92",
+          quality_score2: "83",
+        },
+        {
+          project_name: "杭州市萧围西线（一工段至四工段）提标加固工程",
+          quality_score: "85",
+          city_name: "杭州市",
+          quality_score2: "82",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
+          quality_score: "90",
+          city_name: "杭州市",
+          quality_score2: "73",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
+          quality_score: "82",
+          city_name: "杭州市",
+          quality_score2: "81",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
+          quality_score: "87",
+          city_name: "杭州市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
+          quality_score: "88",
+          city_name: "杭州市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "临安区双溪口水库工程",
+          quality_score: "81",
+          city_name: "杭州市",
+          quality_score2: "93",
+        },
+        {
+          project_name: "宁波市界牌碶泵站工程",
+          quality_score: "79",
+          city_name: "宁波市",
+          quality_score2: "84",
+        },
+        {
+          project_name: "奉化区柏坑水库扩容工程",
+          quality_score: "89",
+          city_name: "宁波市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "余姚市陶家路江排涝枢纽及供水工程",
+          quality_score: "85",
+          city_name: "余姚市",
+          quality_score2: "87",
+        },
+      ],
+      // api: getWarningList,
+    };
+  },
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.table.getData();
+    },
+    openPdf(url) {
+      window.open(url);
+    },
+    changeTime(tr) {
+      this.searchForm.start_time = tr[0] ? tr[0] : "";
+      this.searchForm.end_time = tr[1] ? tr[1] : "";
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.search-form {
+  margin: 20px 0 10px 0;
+}
+
+.blue {
+  color: #0178ff;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.dialog-body-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/DataStatis/project/GCZL.vue

+<template>
+  <div class="dialog-body-container">
+    <el-form inline :model="searchForm" class="search-form">
+      <el-form-item label="所在地区：">
+        <el-select></el-select>
+      </el-form-item>
+      <el-form-item label="质量检测：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="质量评定：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工程整体：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工程名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <DialogApiDataTable
+      :has-index="true"
+      ref="table"
+      :columns="columns"
+      :parameters="searchForm"
+      :api="api"
+      :auto-load="false"
+      :data="data"
+    >
+      <template #quality_score="{ data }">
+        <span :style="{ color: data.quality_score < 80 ? '#f86262' : '' }">
+          {{ data.quality_score }}
+        </span>
+      </template>
+      <template #quality_score2="{ data }">
+        <span :style="{ color: data.quality_score2 < 80 ? '#f86262' : '' }">
+          {{ data.quality_score2 }}
+        </span>
+      </template>
+    </DialogApiDataTable>
+  </div>
+</template>
+<script>
+export default {
+  name: "WarningMsg",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      searchForm: {},
+      columns: [
+        {
+          label: "工程名称",
+          prop: "project_name",
+          minWidth: "600px",
+          align: "left",
+        },
+        { label: "所属地区", prop: "city_name" },
+        { label: "质量检测得分", prop: "quality_score", hasSlot: true },
+        { label: "质量评定得分", prop: "quality_score2", hasSlot: true },
+      ],
+      dateRange: [],
+      // api: getWarningList,
+      data: [
+        {
+          project_name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
+          city_name: "杭州市",
+          quality_score: "90",
+          quality_score2: "85",
+        },
+        {
+          project_name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
+          city_name: "杭州市",
+          quality_score: "85",
+          quality_score2: "87",
+        },
+        {
+          project_name: "钱塘江北岸五堡排涝泵站工程",
+          city_name: "杭州市",
+          quality_score: "77",
+          quality_score2: "85",
+        },
+        {
+          project_name: "钱塘江西江塘闻堰段海塘提标加固工程",
+          city_name: "杭州市",
+          quality_score: "92",
+          quality_score2: "83",
+        },
+        {
+          project_name: "杭州市萧围西线（一工段至四工段）提标加固工程",
+          quality_score: "85",
+          city_name: "杭州市",
+          quality_score2: "82",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
+          quality_score: "90",
+          city_name: "杭州市",
+          quality_score2: "73",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
+          quality_score: "82",
+          city_name: "杭州市",
+          quality_score2: "81",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
+          quality_score: "87",
+          city_name: "杭州市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
+          quality_score: "88",
+          city_name: "杭州市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "临安区双溪口水库工程",
+          quality_score: "81",
+          city_name: "杭州市",
+          quality_score2: "93",
+        },
+        {
+          project_name: "宁波市界牌碶泵站工程",
+          quality_score: "79",
+          city_name: "宁波市",
+          quality_score2: "84",
+        },
+        {
+          project_name: "奉化区柏坑水库扩容工程",
+          quality_score: "89",
+          city_name: "宁波市",
+          quality_score2: "92",
+        },
+        {
+          project_name: "余姚市陶家路江排涝枢纽及供水工程",
+          quality_score: "85",
+          city_name: "余姚市",
+          quality_score2: "87",
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.table.getData();
+    },
+    openPdf(url) {
+      window.open(url);
+    },
+    changeTime(tr) {
+      this.searchForm.start_time = tr[0] ? tr[0] : "";
+      this.searchForm.end_time = tr[1] ? tr[1] : "";
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.search-form {
+  margin: 20px 0 10px 0;
+}
+
+.blue {
+  color: #0178ff;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.dialog-body-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/DataStatis/project/Index.vue

+<template>
+  <Dialog
+    title="更多工程"
+    :visible="dialogVisible"
+    width="70%"
+    @change-visible="changeVisible"
+  >
+    <DialogTabs
+      :tabList="tabList"
+      :currentTab="currentTabNow"
+      @change="(val) => changeTab(val)"
+    ></DialogTabs>
+    <component :is="currentTabNow"></component>
+  </Dialog>
+</template>
+<script>
+import ProjectDetail from "./ProjectDetail.vue";
+
+import CXCY from "./CXCY.vue";
+import GCZL from "./GCZL.vue";
+import ZFJG from "./ZFJG.vue";
+export default {
+  name: "ProjectDialog",
+  components: { ProjectDetail, CXCY, GCZL, ZFJG },
+  props: {
+    projectName: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    projectId: {
+      type: [Number, String],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      tabList: [
+        { name: "ZFJG", label: "政府监管" },
+        { name: "GCZL", label: "工程质量" },
+        { name: "CXCY", label: "创新创优" },
+        { name: "ProjectDetail", label: "工程整体情况" },
+      ],
+      currentTabNow: "ProjectDetail",
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("change-visible", val);
+      },
+    },
+  },
+  methods: {
+    changeTab(e) {
+      this.currentTabNow = e;
+    },
+    changeVisible(val) {
+      console.log(val);
+      this.dialogVisible = val;
+    },
+  },
+  mounted() {
+    this.$eventBus.$on("switchTab", (type) => {
+      this.$nextTick(() => {
+        this.currentTabNow = type;
+      });
+    });
+  },
+};
+</script>
+  <style lang="less" scoped>
+</style>
\ No newline at end of file

src/views/DataStatis/project/ProjectDetail.vue

+<template>
+  <div class="dialog-body-container">
+    <el-form inline :model="searchForm" class="search-form">
+      <el-form-item label="所在地区：">
+        <el-select></el-select>
+      </el-form-item>
+      <el-form-item label="工程整体：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工程名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <DialogApiDataTable
+      :has-index="true"
+      ref="table"
+      :columns="columns"
+      :parameters="searchForm"
+      :api="api"
+      :auto-load="false"
+      :data="data"
+    >
+      <template #quality_score="{ data }">
+        <span :style="{ color: data.quality_score < 80 ? '#f86262' : '' }">
+          {{ data.quality_score }}
+        </span>
+      </template>
+      <template #quality_score1="{ data }">
+        <span :style="{ color: data.quality_score1 < 80 ? '#f86262' : '' }">
+          {{ data.quality_score1 }}
+        </span>
+      </template>
+      <template #quality_score2="{ data }">
+        <span :style="{ color: data.quality_score2 < 80 ? '#f86262' : '' }">
+          {{ data.quality_score2 }}
+        </span>
+      </template>
+      <template #quality_score3="{ data }">
+        <span :style="{ color: data.quality_score3 < 80 ? '#f86262' : '' }">
+          {{ data.quality_score3 }}
+        </span>
+      </template>
+      <template #quality_score4="{ data }">
+        <span :style="{ color: data.quality_score4 < 80 ? '#f86262' : '' }">
+          {{ data.quality_score4 }}
+        </span>
+      </template>
+    </DialogApiDataTable>
+  </div>
+</template>
+<script>
+export default {
+  name: "WarningMsg",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      searchForm: {},
+      columns: [
+        {
+          label: "工程名称",
+          prop: "project_name",
+          minWidth: "350px",
+          align: "left",
+        },
+        { label: "所属地区", prop: "city_name" },
+        { label: "政府监管得分", prop: "quality_score", hasSlot: true },
+        { label: "质量检测得分", prop: "quality_score1", hasSlot: true },
+        { label: "质量评定得分", prop: "quality_score2", hasSlot: true },
+        { label: "创新创优得分", prop: "quality_score3", hasSlot: true },
+        { label: "整体得分", prop: "quality_score4", hasSlot: true },
+      ],
+      dateRange: [],
+      data: [
+        {
+          project_name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
+          city_name: "杭州市",
+          quality_score: "90",
+          quality_score1: "90",
+          quality_score2: "85",
+          quality_score3: "83",
+          quality_score4: "85",
+        },
+        {
+          project_name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
+          city_name: "杭州市",
+          quality_score: "85",
+          quality_score1: "92",
+
+          quality_score2: "87",
+          quality_score3: "90",
+          quality_score4: "89",
+        },
+        {
+          project_name: "钱塘江北岸五堡排涝泵站工程",
+          city_name: "杭州市",
+          quality_score: "77",
+          quality_score1: "78",
+
+          quality_score2: "85",
+          quality_score3: "82",
+          quality_score4: "83",
+        },
+        {
+          project_name: "钱塘江西江塘闻堰段海塘提标加固工程",
+          city_name: "杭州市",
+          quality_score: "92",
+          quality_score1: "70",
+
+          quality_score2: "83",
+          quality_score3: "79",
+          quality_score4: "85",
+        },
+        {
+          project_name: "杭州市萧围西线（一工段至四工段）提标加固工程",
+          quality_score: "85",
+          city_name: "杭州市",
+          quality_score1: "83",
+
+          quality_score2: "82",
+          quality_score3: "84",
+          quality_score4: "81",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
+          quality_score: "90",
+          city_name: "杭州市",
+          quality_score1: "82",
+
+          quality_score2: "73",
+          quality_score3: "79",
+          quality_score4: "85",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
+          quality_score: "82",
+          city_name: "杭州市",
+          quality_score1: "92",
+
+          quality_score2: "81",
+          quality_score3: "75",
+          quality_score4: "80",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
+          quality_score: "87",
+          city_name: "杭州市",
+          quality_score1: "87",
+
+          quality_score2: "92",
+          quality_score3: "83",
+          quality_score4: "85",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
+          quality_score: "88",
+          city_name: "杭州市",
+          quality_score1: "92",
+
+          quality_score2: "92",
+          quality_score3: "78",
+          quality_score4: "85",
+        },
+        {
+          project_name: "临安区双溪口水库工程",
+          quality_score: "81",
+          city_name: "杭州市",
+          quality_score1: "91",
+
+          quality_score2: "93",
+          quality_score3: "81",
+          quality_score4: "82",
+        },
+        {
+          project_name: "宁波市界牌碶泵站工程",
+          quality_score: "79",
+          city_name: "宁波市",
+          quality_score1: "88",
+
+          quality_score2: "84",
+          quality_score3: "87",
+          quality_score4: "85",
+        },
+        {
+          project_name: "奉化区柏坑水库扩容工程",
+          quality_score: "89",
+          city_name: "宁波市",
+          quality_score1: "83",
+
+          quality_score2: "92",
+          quality_score3: "82",
+          quality_score4: "81",
+        },
+        {
+          project_name: "余姚市陶家路江排涝枢纽及供水工程",
+          quality_score: "85",
+          city_name: "余姚市",
+          quality_score1: "78",
+          quality_score2: "87",
+          quality_score3: "78",
+          quality_score4: "82",
+        },
+      ],
+      // api: getWarningList,
+    };
+  },
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.table.getData();
+    },
+    openPdf(url) {
+      window.open(url);
+    },
+    changeTime(tr) {
+      this.searchForm.start_time = tr[0] ? tr[0] : "";
+      this.searchForm.end_time = tr[1] ? tr[1] : "";
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.search-form {
+  margin: 20px 0 10px 0;
+}
+
+.blue {
+  color: #0178ff;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.dialog-body-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/DataStatis/project/ZFJG.vue

+<template>
+  <div class="dialog-body-container">
+    <el-form inline :model="searchForm" class="search-form">
+      <el-form-item label="所在地区：">
+        <el-select></el-select>
+      </el-form-item>
+      <el-form-item label="政府监管：">
+        <el-select>
+          <el-option label="预警" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工程名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <DialogApiDataTable
+      :has-index="true"
+      ref="table"
+      :columns="columns"
+      :parameters="searchForm"
+      :api="api"
+      :auto-load="false"
+      :data="data"
+    >
+      <template #quality_score="{ data }">
+        <span :style="{ color: data.quality_score < 80 ? '#f86262' : '' }">
+          {{ data.quality_score }}
+        </span>
+      </template>
+      <!-- <template #noise_status="{ data }"> </template> -->
+    </DialogApiDataTable>
+  </div>
+</template>
+<script>
+export default {
+  name: "WarningMsg",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      searchForm: {},
+      columns: [
+        {
+          label: "工程名称",
+          prop: "project_name",
+          minWidth: "600px",
+          align: "left",
+        },
+        { label: "所属地区", prop: "city_name" },
+        { label: "政府监管得分", prop: "quality_score", hasSlot: true },
+      ],
+      dateRange: [],
+      data: [
+        {
+          project_name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
+          city_name: "杭州市",
+          quality_score: "90",
+        },
+        {
+          project_name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
+          city_name: "杭州市",
+          quality_score: "85",
+        },
+        {
+          project_name: "钱塘江北岸五堡排涝泵站工程",
+          city_name: "杭州市",
+          quality_score: "77",
+        },
+        {
+          project_name: "钱塘江西江塘闻堰段海塘提标加固工程",
+          city_name: "杭州市",
+          quality_score: "92",
+        },
+        {
+          project_name: "杭州市萧围西线（一工段至四工段）提标加固工程",
+          quality_score: "85",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
+          quality_score: "90",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
+          quality_score: "82",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
+          quality_score: "87",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
+          quality_score: "88",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "临安区双溪口水库工程",
+          quality_score: "81",
+          city_name: "杭州市",
+        },
+        {
+          project_name: "宁波市界牌碶泵站工程",
+          quality_score: "79",
+          city_name: "宁波市",
+        },
+        {
+          project_name: "奉化区柏坑水库扩容工程",
+          quality_score: "89",
+          city_name: "宁波市",
+        },
+        {
+          project_name: "余姚市陶家路江排涝枢纽及供水工程",
+          quality_score: "85",
+          city_name: "余姚市",
+        },
+      ],
+      // api: getWarningList,
+    };
+  },
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.table.getData();
+    },
+    openPdf(url) {
+      window.open(url);
+    },
+    changeTime(tr) {
+      this.searchForm.start_time = tr[0] ? tr[0] : "";
+      this.searchForm.end_time = tr[1] ? tr[1] : "";
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.search-form {
+  margin: 20px 0 10px 0;
+}
+
+.blue {
+  color: #0178ff;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.dialog-body-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
\ No newline at end of file

vue.config.js

@@ -23,7 +23,7 @@ module.exports = defineConfig({
     port: 3000,
     proxy: {
       '/site': {
-        target: 'http://192.168.0.185/',
+        target: 'http://192.168.0.212/',
         changeOrigin: true,
         // pathRewrite: {
         //   '^/api': ''