大屏调整

src/api/dataStatis.js

@@ -178,4 +178,20 @@ export async function getAreaDetail(projectId) {
     })
 }
 
+// 获取政府监管预警接口
+export async function getGovernmentRegulation() {
+    return await request({
+        url: '/site/question?question_level=3',
+        method: 'get',
+    })
+}
+
+// 获取质量检测应接口
+export async function getQualityInspection() {
+    return await request({
+        url: '/site/index/getcheck',
+        method: 'get',
+    })
+}
+
 

src/components/common/Section.vue

 <template>
   <div class="section" :style="{ height: height }">
     <Title :title="title">
+      <template #left-slot>
+        <slot name="left-slot"></slot>
+      </template>
       <template #right-slot>
         <slot name="right-slot"></slot>
       </template>

src/components/common/Section2.vue

 <template>
   <div class="section" :style="{ height: height }">
-    <Title2 :title="title"> </Title2>
+    <Title2 :title="title" v-if="titleType"> </Title2>
+    <Title3 @sectionChangeTab="changeTab" :tabList="tabList" v-else> </Title3>
     <div class="container-short">
       <slot />
     </div>
@@ -10,6 +11,10 @@
 export default {
   name: "Section",
   props: {
+    titleType: {
+      type: Boolean,
+      default: true,
+    },
     title: {
       type: String,
       default: "",
@@ -18,7 +23,18 @@ export default {
       type: String,
       default: "400px",
     },
+    tabList:{
+      type: Array,
+      default: ()=>{
+        return []
+      }
+    }
   },
+  methods:{
+    changeTab(e){
+      this.$emit("listChangeTab", e);
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

src/components/common/Title.vue

 <template>
   <div class="title">
     {{ title }}
+    <div class="left-slot">
+      <slot name="left-slot"></slot>
+    </div>
     <div class="right-slot">
       <slot name="right-slot"></slot>
     </div>
@@ -36,4 +39,10 @@ export default {
   color: #43bcd2;
   font-size: 14px;
 }
+.left-slot {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
 </style>
\ No newline at end of file

src/components/common/Title3.vue

+<template>
+  <div class="title-box">
+    <div class="title" v-for="(v, i) in tabList" :key="i" :class="{'title1' : active == i}" @click="changeTab(i)">
+      {{ v }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Title3",
+  props: {
+    tabList:{
+      type: Array,
+      default: ()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      active: 0
+    }
+  },
+  methods: {
+    changeTab(index){
+      this.active = index
+      this.$emit("sectionChangeTab", index);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.title-box {
+  line-height: 40px !important;
+  text-align: left;
+  padding-left: 15px;
+  background: url("@/assets/images/index/icon_toubuj.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  .title {
+    font-size: 18px;
+    color: #B2BFCF;
+    padding: 0 10px;
+    margin-right: 20px;
+    &:hover {
+      cursor: pointer;
+      border-bottom: 2px solid #31ceea;
+      color: #FFFFFF;
+    }
+  }
+  .title1 {
+    border-bottom: 2px solid #31ceea;
+    color: #FFFFFF;
+  }
+  .right-slot {
+    float: right;
+  }
+}
+</style>
\ No newline at end of file

src/main.js

@@ -10,6 +10,7 @@ import * as echarts from "echarts"
 import scroll from 'vue-seamless-scroll'
 import Title from "@/components/common/Title"
 import Title2 from "@/components/common/Title2"
+import Title3 from "@/components/common/Title3"
 import Section from "@/components/common/Section"
 import STable from "@/components/common/STable"
 import "@/assets/iconfont/iconfont.css";
@@ -30,6 +31,7 @@ Vue.prototype.$eventBus = new Vue();
 Vue.use(ElementUI)
 Vue.component('Title', Title)
 Vue.component('Title2', Title2)
+Vue.component('Title3', Title3)
 Vue.component('Section', Section)
 Vue.component('STable', STable)
 Vue.component('Dialog', Dialog)

src/views/DataStatis/Dialogs/GCZLDialog/Index.vue

@@ -10,7 +10,7 @@
       :currentTab="currentTabNow"
       @change="(val) => changeTab(val)"
     ></DialogTabs>
-    <component :is="currentTabNow" :data="data"></component>
+    <component :is="currentTabNow" :data="data" :tabnamenow="tabName"></component>
   </Dialog>
 </template>
 <script>
@@ -30,13 +30,23 @@ export default {
         return {};
       },
     },
+    tabList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    tabName:{
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
-      tabList: [
-        { name: "ZLPD", label: "质量评定" },
-        { name: "ZLJC", label: "质量检测" },
-      ],
+      // tabList: [
+      //   { name: "ZLPD", label: "质量评定" },
+      //   { name: "ZLJC", label: "质量检测" },
+      // ],
       currentTabNow: "",
     };
   },
@@ -68,7 +78,7 @@ export default {
   watch: {
     dialogVisible(val) {
       if (val) {
-        this.currentTabNow = "ZLPD";
+        this.currentTabNow = this.tabName;
       } else {
         this.currentTabNow = "";
       }

src/views/DataStatis/Dialogs/GCZLDialog/ZLJC.vue

@@ -52,6 +52,10 @@ export default {
         return {};
       },
     },
+    tabnamenow:{
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
@@ -117,7 +121,8 @@ export default {
     },
 
     getData() {
-      getZLJCList(this.data.id).then((res) => {
+      let id = this.tabnamenow == 'ZLPD' ? this.data.id : this.data.project_id
+      getZLJCList(id).then((res) => {
         this.allData = [...res.data.score_data];
 
         let arr = [];

src/views/DataStatis/Index.vue

@@ -93,11 +93,14 @@
       </Section>
     </div>
     <div class="right-area" v-if="currentCityName">
-      <Section class="sections long" type="long" :title="currentCityName">
+      <Section class="sections long" type="long" :title="isProvice ? '浙江省' : currentCityName">
+        <template #left-slot v-if="!isProvice">
+          <img src="@/assets/images/index/icon_mapTuiChu.png" alt="" class="map-return" @click="returnCity">
+        </template>
         <template #right-slot>
           <span class="show-more" @click="showCityList">查看更多</span>
         </template>
-        <div class="get-points">
+        <div class="get-points" v-if="!isProvice">
           <div class="points">
             <div
               class="grade"
@@ -233,6 +236,8 @@
     ></CXCYDialog>
 
     <GCZLDialog
+      :tabList="tabListDialog"
+      :tabName="tabNameDialog"
       :data="currentRowData"
       :visible="GCZLVisible"
       @change-visible="(val) => (GCZLVisible = val)"
@@ -243,12 +248,19 @@
       :visible="areaDialogVisible"
       @change-visible="(val) => (areaDialogVisible = val)"
     ></AreaProjectDetail>
+    <QuestionDetail
+      :question-id="questionId"
+      :visible="QuestionDetailVisible"
+      @change-visible="(val) => (QuestionDetailVisible = val)"
+    >
+    </QuestionDetail>
     <div class="bottom-area">
-      <Section2 title="工程预警" class="bottom-section">
+      <Section2 :tabList="tabListArr" class="bottom-section" :titleType="false" @listChangeTab="changeTab">
         <STable2
           :headers="header5"
           :table-data="data5"
-          @row-click="rowClickArea"
+          @row-click="(e)=>{rowClickArea(0, e)}"
+          v-if="tabListActive == 0"
         >
           <template slot-scope="scope">
             <template v-if="scope.header.slot == 'score'">
@@ -262,6 +274,57 @@
             </template>
           </template>
         </STable2>
+        <STable2
+          :headers="header6"
+          :table-data="data6"
+          @row-click="(e)=>{rowClickArea(1, e)}"
+          v-if="tabListActive == 1"
+        >
+          <template slot-scope="scope">
+            <template v-if="scope.header.slot == 'score'">
+              <span
+                :style="{
+                  color: '#f86262',
+                }"
+              >
+                {{ scope.row.question_level_str }}
+              </span>
+            </template>
+          </template>
+        </STable2>
+        <STable2
+          :headers="header7"
+          :table-data="data7"
+          @row-click="(e)=>{rowClickArea(2, e)}"
+          v-if="tabListActive == 2"
+        >
+          <template slot-scope="scope">
+            <template v-if="scope.header.slot == 'score1'">
+              <span>
+                {{ scope.row.field_1 || 0}}
+              </span>
+              <span>
+                {{ scope.row.unqualified_percent || 0}}%
+              </span>
+            </template>
+            <template v-if="scope.header.slot == 'score2'">
+              <span>
+                {{ scope.row.check_type_2 || 0 }}
+              </span>
+              <span>
+                {{ scope.row.unqualified_percent || 0 }}%
+              </span>
+            </template>
+            <template v-if="scope.header.slot == 'score3'">
+              <span>
+                {{ scope.row.check_type_1 || 0 }}
+              </span>
+              <span>
+                {{ scope.row.unqualified_percent || 0 }}%
+              </span>
+            </template>
+          </template>
+        </STable2>
       </Section2>
     </div>
   </div>
@@ -275,6 +338,8 @@ import {
   getProjectList,
   getImportantQuestion,
   getWarningStatusNum,
+  getGovernmentRegulation,
+  getQualityInspection,
 } from "@/api/dataStatis";
 
 import { mapState } from "vuex";
@@ -287,6 +352,7 @@ import ZFJGDialog from "./Dialogs/ZFJGDialog.vue";
 import CXCYDialog from "./Dialogs/CXCYDialog.vue";
 import GCZLDialog from "./Dialogs/GCZLDialog/Index.vue";
 import AreaProjectDetail from "./Dialogs/AreaProjectDetail.vue";
+import QuestionDetail from "./Dialogs/QuestionDetail.vue";
 export default {
   name: "DataStatis",
   components: {
@@ -298,6 +364,7 @@ export default {
     CXCYDialog,
     GCZLDialog,
     AreaProjectDetail,
+    QuestionDetail,
   },
   data() {
     return {
@@ -447,6 +514,91 @@ export default {
         },
       ],
       data5: [],
+      data6: [],
+      data7: [],
+      header6: [
+        {
+          name: "工程名称",
+          props: "project_name",
+          width: "15%",
+          align: "left",
+        },
+        {
+          name: "所属区域",
+          props: "city_name",
+          width: "15%",
+          align: "left",
+        },
+        {
+          name: "单位名称",
+          props: "units_company_name",
+          width: "15%",
+        },
+        {
+          name: "单位类型",
+          props: "utype_str",
+          width: "10%",
+        },
+        {
+          name: "问题类型",
+          props: "name",
+          width: "10%",
+        },
+        {
+          name: "问题种类",
+          props: "question_type_str",
+          width: "10%",
+        },
+        {
+          name: "记录时间",
+          props: "create_time",
+          width: "15%",
+        },
+        {
+          name: "问题等级",
+          props: "question_level_str",
+          width: "10%",
+          slot: "score",
+        },
+      ],
+      header7: [
+        {
+          name: "工程名称",
+          props: "project_name",
+          width: "20%",
+          align: "left",
+        },
+        {
+          name: "所属区域",
+          props: "city_name",
+          width: "25%",
+          align: "left",
+        },
+        {
+          name: "预警类型",
+          props: "entrust_type_str",
+          width: "10%",
+        },
+        {
+          name: "中间产品（重要部位）",
+          props: "warning",
+          width: "15%",
+          slot: "score1",
+        },
+        {
+          name: "原材料（重要部位）",
+          props: "warning",
+          width: "15%",
+          slot: "score2",
+
+        },
+        {
+          name: "实体检测（重要部位）",
+          props: "warning",
+          width: "15%",
+          slot: "score3",
+        }
+      ],
       activeTab: 1,
 
       mapCenter: [],
@@ -484,6 +636,13 @@ export default {
       CXCYVisible: false,
       GCZLVisible: false,
       areaDialogVisible: false,
+      tabListArr: ['工程分值预警', '政府监管预警', '质量检测预警'],
+      tabListActive: 0,
+      QuestionDetailVisible: false,
+      isProvice: true,
+      questionId: "",
+      tabListDialog: [],
+      tabNameDialog: ""
     };
   },
   methods: {
@@ -542,7 +701,15 @@ export default {
       this.activeTab = type;
       this.data4 = [];
       this.showNumber = false;
-      getProjectList({ city_id: this.currentCityId, limit: 100 }, false).then(
+      let name = this.isProvice ? 'province_id' : 'city_id'
+      let params ={
+        [name]: this.currentCityId,
+        limit: 100 
+      }
+      if (params.province_id) {
+          params.province_id = 31
+      }
+      getProjectList(params, false).then(
         (res) => {
           this.data4 = res.data.data;
         }
@@ -900,6 +1067,7 @@ export default {
           }
           this.currentCityId = params.data.id;
           this.currentCityName = params.data.name;
+          this.isProvice = false
           this.switchList(1);
         }
       });
@@ -933,12 +1101,23 @@ export default {
       this.currentRowData = data;
       this.CXCYVisible = true;
     },
-    rowClickGCZL(data) {
+    rowClickGCZL(data,type) {
+      if (type && type == "zljc") {
+        this.tabNameDialog = "ZLJC"
+        this.tabListDialog = [{ name: "ZLJC", label: "质量检测" }];
+      } else {
+        this.tabNameDialog = "ZLPD"
+        this.tabListDialog = [
+          { name: "ZLPD", label: "质量评定" },
+          { name: "ZLJC", label: "质量检测" },
+        ];
+      }
       this.currentRowData = data;
       this.GCZLVisible = true;
     },
-    rowClickArea(data) {
-      console.log(data.type, data);
+    rowClickArea(index, data) {
+      console.log(index, data.type, data);
+      if (index == 0) {
         if (data.id) {
         this.currentRowData = data;
         this.areaDialogVisible = true;
@@ -964,6 +1143,34 @@ export default {
           this.CXCYVisible = true;
         }
       }
+      }else if(index == 1){
+        this.questionId = data.project_id
+        this.QuestionDetailVisible = true;
+      }else {
+        this.rowClickGCZL(data, "zljc")
+      }
+    },
+    changeTab(e){
+      this.tabListActive = e
+      if (e == 0) {
+        getImportantQuestion().then((res) => {
+          this.data5 = res.data;
+        });
+      }
+      if (e == 1) {
+        getGovernmentRegulation().then((res) => {
+          this.data6 = res.data.data;
+        });
+      }
+      if (e == 2) {
+        getQualityInspection().then((res) => {
+          this.data7 = res.data.list;
+        });
+      }
+    },
+    returnCity(){
+      this.isProvice = true
+      this.switchList(1);
     },
   },
 
@@ -982,6 +1189,14 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.map-return{
+  width: 16px;
+  height: 15px;
+  margin-left: 10px;
+  &:hover{
+    cursor: pointer;
+  }
+}
 #data-statis {
   position: relative;
   width: 100%;