提交: 现版本 项目管理详情 基础代码

src/api/iot/project_new.js

@@ -26,3 +26,12 @@ export function listProjectTableFilter(query) {
     params: query
   });
 }
+
+// 查询 项目 型号
+export function statProject(query) {
+  return request({
+    url: "/iot/project/projectStat",
+    method: "get",
+    params: query
+  });
+}

src/views/iot/project/index.vue

@@ -304,7 +304,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import SelectTableWrap from "@/components/SelectTable/index";
 
 /////、、、、、、、、、、、、、、、、、、、、
-// import DetailsWrapNew from './profileV2/details'
+import DetailsWrapNew from './profileV2/details'
 
 export default {
   name: "Project",
@@ -313,7 +313,7 @@ export default {
     Treeselect,
     DetailsWrap,
     SelectTableWrap,
-    // DetailsWrapNew
+    DetailsWrapNew
   },
   data() {
     return {

src/views/iot/project/profileV2/DeviceManage/EDeviceChildren.vue

@@ -33,7 +33,7 @@
         <div :class="tableSelectList && tableSelectList.length > 0 ? 'operate-onekey-on' : 'operate-onekey-on but-disable'" @click="handleChildStatus('false')">
           一键分闸
         </div>
-        <el-select v-model="queryParams.prodKey" style="margin-left: 5xp; width: 120px;" placeholder="请选择项目类型" size="small">
+        <el-select v-model="queryParams.prodKey" style="margin-left: 5xp; width: 130px;" placeholder="请选择项目类型" size="small">
           <el-option
             v-for="dict in projectModelList"
             :key="dict.prodKey"
@@ -47,13 +47,14 @@
     </div>
     <div class="device-children-center">
       <e-dynamic-table
-        :border="false"
+        :border="true"
         :loading="tableLoading"
-        :tableTotal="0"
+        :tableTotal="deviceTotal"
         :queryParams="queryParams"
         :tableList="tableList"
         :filterList="[...defaultFilterList, ...filterList]"
         :isIndex="true"
+        :tableHeight="tableList.length > 0 ? '470px' : '495px'"
         :isSelect="true"
         rowKey="deviceId"
         @tableSelectionChange="handleTableChange"
@@ -129,7 +130,8 @@ export default {
       tableSelectList: [],
       stompClient: null,
       socket_flag: true,
-      timeout_flag: null
+      timeout_flag: null,
+      deviceTotal: 0
     };
   },
   created() {
@@ -189,7 +191,8 @@ export default {
         deviceTags: this.deviceType || '',
         pid: this.gatewayDevice.deviceId || ''
       }, this.queryParams)).then(res => {
-        this.tableList = res.data
+        this.tableList = res.rows
+        this.deviceTotal = res.total
         if (this.stompClient) {
           this.closeSocket()
         }
@@ -402,7 +405,7 @@ export default {
       }
     }
     .right-operate {
-      width: 350px;
+      width: 360px;
       display: flex;
       justify-content: flex-end;
       font-weight: 400;

src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue

@@ -63,11 +63,11 @@
             <el-button
               type="primary"
               icon="el-icon-search"
-              size="mini"
+              size="small"
               @click="handleQuery"
               >搜索</el-button
             >
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
               >重置</el-button
             >
           </el-form-item>
@@ -225,6 +225,7 @@ export default {
     sourceId(val) {
       if (val) {
         this.initHTML();
+        this.showChildrenView = false
       }
     },
     deviceType(val) {
@@ -300,7 +301,7 @@ export default {
         projectId: this.sourceId,
         deviceTags: this.deviceType || ''
       }, this.queryParams)).then(res => {
-        this.list = res.data
+        this.list = res.rows
         if (this.stompClient) {
           this.closeSocket()
         }
@@ -494,7 +495,7 @@ export default {
 
             .footer-title {
               width: 100%;
-              margin-left: 10px;
+              margin-left: 3px;
               display: block;
               text-overflow: ellipsis;
               white-space: nowrap;

src/views/iot/project/profileV2/DeviceManage/EDynamicTable.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="e-dynamic-table">
-    <el-table v-loading="loading" :data="tableList" :row-key="rowKey" :border="border"  @selection-change="handleSelectionChange">
+    <el-table
-
+      v-loading="loading"
-      <el-table-column type="selection" v-if="isSelect" width="50" align="center" />
+      :height="tableHeight"
+      :data="tableList"
+      :row-key="rowKey"
+      :border="border"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        v-if="isSelect"
+        width="50"
+        align="center"
+      />
 
       <el-table-column
         v-if="isIndex"
@@ -28,14 +39,23 @@
         :key="idx"
       >
         <template slot-scope="scope">
-          <slot v-if="tableItem.slot" :name="tableItem.slotName" :row="scope.row" ></slot>
+          <slot
-          <span v-else class="lay-table-textarea" :title="scope.row[tableItem.prop || '']">
+            v-if="tableItem.slot"
-            {{ scope.row[tableItem.prop || ''] }}
+            :name="tableItem.slotName"
+            :row="scope.row"
+          ></slot>
+          <span
+            v-else
+            class="lay-table-textarea"
+            :title="scope.row[tableItem.prop || '']"
+          >
+            {{ scope.row[tableItem.prop || ""] }}
           </span>
         </template>
       </el-table-column>
     </el-table>
     <pagination
+      style="margin-top: 5px; height: 35px"
       v-show="tableTotal > 0"
       :total="tableTotal"
       :page.sync="queryParams.pageNum"
@@ -48,6 +68,10 @@
 export default {
   name: "EDynamicTable",
   props: {
+    tableHeight: {
+      type: [Number, String],
+      default: "",
+    },
     border: {
       type: Boolean,
       default: false,
@@ -87,36 +111,36 @@ export default {
     },
     isSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     rowKey: {
       type: String,
-      default: 'id'
+      default: "id",
-    }
+    },
   },
   data() {
     return {
       filter: [
         {
           label: "",
-          align: 'left',
+          align: "left",
-          prop: '',
+          prop: "",
-          width: '',
+          width: "",
           slot: true,
-          slotName: 'inst'
+          slotName: "inst",
         },
       ],
     };
   },
   methods: {
     handleQuery2() {
-      this.$emit('handleQuery', this.queryParams)
+      this.$emit("handleQuery", this.queryParams);
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.$emit('tableSelectionChange', selection)
+      this.$emit("tableSelectionChange", selection);
+    },
   },
-  }
 };
 </script>
 

src/views/iot/project/profileV2/DeviceManage/index.vue

@@ -2,7 +2,7 @@
   <div class="e-object-device-manage">
     <el-tabs v-model="activeName">
       <el-tab-pane :label="tabLabel.dictLabel" :name="tabLabel.dictValue" v-for="(tabLabel, idx) in projectDeviceTagGroup" :key="idx">
-        <e-device-table v-if="tabLabel.dictValue === activeName" :sourceId="projectInfo['projectId']" :deviceType="tabLabel.dictValue" />
+        <e-device-table v-if="tabLabel.dictValue === activeName" :sourceId="sourceId" :deviceType="tabLabel.dictValue" />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -18,6 +18,10 @@ export default {
     projectInfo: {
       type: Object,
       require: true
+    },
+    sourceId: {
+      type: [Number, String],
+      require: true
     }
   },
   data() {

src/views/iot/project/profileV2/ECensusCards.vue

@@ -10,7 +10,7 @@
     >
       <div class="card-for-item">
         <div class="card-item-title">{{ item.label }}</div>
-        <div class="card-item-value">{{ result[item.key] || 222 }}</div>
+        <div class="card-item-value">{{ result[item.key] || 0 }}</div>
       </div>
     </div>
   </div>

src/views/iot/project/profileV2/EEchartsGauge.vue

@@ -94,6 +94,13 @@ export default {
               show: false,
               text: "今日报警"
             },
+            grid: {
+              left: "10",
+              right: "10",
+              bottom: "5",
+              top: 50,
+              containLabel: true,
+            },
             axisLine: {
               // 坐标轴线
               lineStyle: {

src/views/iot/project/profileV2/EEchartsLine.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss">
 .project-e-trend-echart-line {
   position: relative;
-  height: 100%;
+  height: calc(100%);
   top: 0px;
   width: 100%;
 }

src/views/iot/project/profileV2/EObjectContainer.vue

@@ -31,7 +31,7 @@ export default {
     },
     projectTypeOptions: {
       type: Array
-    }
+    },
   },
   data() {
     return  {

src/views/iot/project/profileV2/EObjectSpace.vue

@@ -79,7 +79,7 @@
     </el-table>
 
     <!-- 添加或修改项目空间对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <el-dialog class="eldialog-wrap" append-to-body='true' :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="上级空间:" prop="parentId">
           <treeselect v-model="form.parentId" :options="spaceOptions" placeholder="请选择上级空间" />
@@ -111,6 +111,7 @@
       width="75%"
       top="10vh"
       :close-on-click-modal="false"
+      append-to-body='true'
     >
       <e-object-space-device
         v-if="selectTableShow"
@@ -133,8 +134,6 @@ import {
   delSpace,
   addSpace,
   updateSpace,
-  exportSpace,
-  listSpaceDevice,
   listSpaceTree
 } from "@/api/iot/space";
 import EObjectSpaceDevice from "./EObjectSpaceDevice";
@@ -181,6 +180,17 @@ export default {
       spaceDeviceTitle: ""
     };
   },
+  watch: {
+    infoData: {
+      handler(newValue) {
+        if (newValue) {
+          this.getList()
+        }
+      },
+      deep:true, // 深度监听
+			immediate: false, // 初始化监听
+    }
+  },
   created() {
     this.getDicts("space_type").then(response => {
       this.spaceTypeOptions = response.data;

src/views/iot/project/profileV2/EObjectTenant.vue

@@ -141,6 +141,17 @@ export default {
       tenantTypeOptions: []
     };
   },
+  watch: {
+    infoData: {
+      handler(newVal) {
+        if (newVal) {
+          this.getList()
+        }
+      },
+      deep:true, // 深度监听
+			immediate: false, // 初始化监听
+    }
+  },
   created() {
     this.getDicts("sys_tenant_type").then(response => {
       this.tenantTypeOptions = response.data;

src/views/iot/project/profileV2/ETrendCensus.vue

@@ -38,7 +38,7 @@ export default {
           trigger: "axis",
         },
         legend: {
-          top: 5,
+          top: -5,
           right: 5,
           data: ["报警", "预警"],
           // icon: "circle",
@@ -49,10 +49,10 @@ export default {
           },
         },
         grid: {
-          left: "20",
+          left: "10",
-          right: "20",
+          right: "10",
           bottom: "5",
-          top: 30,
+          top: 37,
           containLabel: true,
         },
         xAxis: {

src/views/iot/project/profileV2/details.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="project-detail-v2"
+  <div
+    class="project-detail-v2"
     id="project-detail-v2-id"
     ref="project-detail-v2-id"
     :style="{
@@ -9,12 +10,12 @@
       transition: `all 0.5s ease 0s`,
     }"
   >
-    <div :class="isFoldRight ? 'block-lift block-right-fold':'block-lift'">
+    <div :class="isFoldRight ? 'block-lift block-right-fold' : 'block-lift'">
       <div class="container-title">
-        <div class="title-left">
+        <div class="title-left" v-for="(item, idx) in projectList" :key="idx" v-show="item.projectId === infoData.projectId">
-          <span>{{ infoData.projectName }}</span>
+          <span>{{ item.projectName }}</span>
-          <i class="el-icon-arrow-left icon-c"></i>
+          <i class="el-icon-arrow-left icon-c but-icon" @click="handlePrev(idx)"></i>
-          <i class="el-icon-arrow-right icon-c"></i>
+          <i class="el-icon-arrow-right icon-c but-icon" @click="handleNext(idx)"></i>
         </div>
         <div class="title-but">
           <div class="but-home" @click="handleLinkToTable">
@@ -50,7 +51,7 @@
         <div class="info-divider"></div>
         <div class="info-right">
           <div>
-            <e-census-cards :propList="censusCardList" :result="censusResult" />
+            <e-census-cards :propList="censusCardList" :result="projectStatistics" />
           </div>
         </div>
       </div>
@@ -65,42 +66,41 @@
           "
         />
         <div class="main-block">
-          <component :is="activeName" :projectInfo="infoData" :projectTypeOptions="projectTypeOptions"></component>
+          <component
+            :is="activeName"
+            :projectInfo="infoData"
+            :projectTypeOptions="projectTypeOptions"
+            :sourceId="stateSourceId"
+          ></component>
         </div>
       </div>
     </div>
     <div class="block-right" v-if="!isFoldRight">
       <e-simple-card title="最近2 天警情同比" class="today-ratio-card">
         <template slot="cardBody">
-          <e-today-ratio :result="resultInfo['warningAnalysisStatisticsVo']"/>
+          <e-today-ratio v-if="!isFoldRight" :result="resultInfo['warningAnalysisStatisticsVo']" />
         </template>
       </e-simple-card>
 
-      <e-simple-card
+      <e-simple-card title="类型分布统计" class="type-census-card">
-        title="类型分布统计"
-        class="type-census-card"
-      >
         <template slot="cardBody">
-          <e-type-census
+          <e-type-census v-if="!isFoldRight" :result="resultInfo['alarmCategoriesList'] || []" />
-            :result="resultInfo['alarmCategoriesList'] || []"
-          />
         </template>
       </e-simple-card>
 
-      <e-simple-card
+      <e-simple-card title="报警预警趋势" class="trend-census-card">
-        title="报警预警趋势"
-        class="trend-census-card"
-      >
         <template slot="cardBody">
-          <e-trend-census :result="resultInfo['alarmChartDataVo'] || []"/>
+          <e-trend-census v-if="!isFoldRight" :result="resultInfo['alarmChartDataVo'] || []" />
         </template>
       </e-simple-card>
     </div>
   </div>
 </template>
 <script>
-import { getProject } from "@/api/iot/project";
+import { getProject, listProject } from "@/api/iot/project";
-import { getWarningAnalysis, appProjectList } from "@/api/app";
+import { statProject } from "@/api/iot/project_new"
+import { getWarningAnalysis } from "@/api/app";
+import Cookies from "js-cookie";
 import ECensusCards from "./ECensusCards";
 import ElDescriptions from "@/components/Edescriptions";
 import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";
@@ -108,10 +108,10 @@ import ESimpleCard from "@/components/Cards/index";
 import ENavMenu from "./ENavMenu";
 import EProjectManage from "./EProjectManage";
 import ETodayRatio from "./ETodayRatio";
-import ETypeCensus from './ETypeCensus'
+import ETypeCensus from "./ETypeCensus";
-import ETrendCensus from './ETrendCensus'
+import ETrendCensus from "./ETrendCensus";
-import EObjectContainer from './EObjectContainer'
+import EObjectContainer from "./EObjectContainer";
-import EDeviceManage from './DeviceManage/index'
+import EDeviceManage from "./DeviceManage/index";
 
 export default {
   name: "projectDetailV2",
@@ -126,7 +126,7 @@ export default {
     ETypeCensus,
     ETrendCensus,
     EObjectContainer,
-    EDeviceManage
+    EDeviceManage,
   },
   props: {
     sourceId: {
@@ -151,96 +151,141 @@ export default {
       ],
       projectTypeOptions: [],
       infoData: {},
-      censusResult: {
-        device: 3555,
-      },
       censusCardList: [
         {
           label: "设备总数",
-          key: "device",
+          key: "deviceTotal",
         },
         {
           label: "在线设备数",
-          key: "device",
+          key: "onlineTotal",
         },
         {
           label: "离线设备数",
-          key: "device",
+          key: "offlineTotal",
         },
         {
           label: "今日报警数",
-          key: "device",
+          key: "todayAlarmTotal",
         },
         {
           label: "本月报警数",
-          key: "device",
+          key: "alarmTotal",
         },
       ],
+      projectList: [],
       isFoldRight: false,
       scalseNumX: 1,
       scalseNumY: 1,
+      fullscreen: false,
+      divWidth: 1682,
+      divHeight: 812,
+      projectStatistics: {}
     };
   },
   created() {
     this.stateSourceId = this.sourceId;
-    this.getInfoByProjectId();
+    this.getProjectList();
+    // this.init()
     this.activeName = "EObjectContainer";
     this.getDicts("project_industry").then((response) => {
       this.projectTypeOptions = response.data;
     });
-    this.warningAnalysisList();
   },
-  switch: {
+  watch: {
+    isFoldRight: {
+      handler(newValue) {
+        if (!newValue) {
+          this.warningAnalysisList()
+        }
+      },
+      deep:true, // 深度监听
+			immediate: false, // 初始化监听
+    },
     sourceId(val) {
-      console.log(val);
       this.stateSourceId = this.sourceId;
-      this.getInfoByProjectId();
+    },
-      this.warningAnalysisList();
+    stateSourceId(val) {
+      this.init()
     },
   },
   mounted() {
     // 计算缩放比例
-    // this.resize_window();
+    this.resize_window_project();
-    // this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
+    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
-    // document.getElementById("con_lf_top_div").style.background = "#010e45";
+    document.getElementById("con_lf_top_div").style.overflow = "hidden";
-    // document.getElementById("con_lf_top_div").style.height =
+    document.getElementById("con_lf_top_div").scrollTop = 0;
-    //   "calc(100vh - 0px)";
+    window.addEventListener("resize", () => {
-    // document.getElementById("con_lf_top_div").style.minHeight =
+      this.resize_window_project();
-    //   "calc(100vh - 0px)";
+    });
-    // document.getElementById("con_lf_top_div").style.overflow = "hidden";
-    // document.getElementById("con_lf_top_div").scrollTop = 0;
-    // window.addEventListener("resize", () => {
-    //   this.resize_window();
-    // });
   },
   methods: {
-    resize_window() {
+    init() {
-      // if (this.fullscreen) {
+      this.getInfoByProjectId();
-      //   this.scalseNumX = Number(document.documentElement.clientWidth / 1682);
+      this.getProjectCount()
-      //   this.scalseNumY = Number(document.documentElement.clientHeight / 812);
+      this.warningAnalysisList();
-      // } else {
+    },
-      //   if (document.documentElement.clientWidth < 993) {
+    resize_window_project() {
-      //     this.scalseNumX =
+      var documentDiv = document.getElementById("project-detail-v2-id");
-      //       Number(document.documentElement.clientWidth / 1682) -
+      if (this.fullscreen) {
-      //       (Cookies.get("sidebarStatus") !== "0" ? Number(200 / 1920) : 0);
+        this.scalseNumX = Number(documentDiv.clientWidth / this.divWidth);
-      //   } else {
+        this.scalseNumY = Number(documentDiv.clientHeight / this.divHeight);
-      //     this.scalseNumX =
+      } else {
-      //       Number(document.documentElement.clientWidth / 1920) -
+        if (document.documentElement.clientWidth < 993) {
-      //       (Cookies.get("sidebarStatus") !== "0"
+          this.scalseNumX =
-      //         ? Number(200 / 1920)
+            Number(document.documentElement.clientWidth / this.divWidth) -
-      //         : Number(54 / 1920));
+            (Cookies.get("sidebarStatus") !== "0"
-      //   }
+              ? Number(200 / this.divWidth)
-      //   this.scalseNumY = Number(document.documentElement.clientHeight / 1080);
+              : 0);
-      // }
+        } else {
+          this.scalseNumX =
+            Number(document.documentElement.clientWidth / this.divWidth) -
+            (Cookies.get("sidebarStatus") !== "0"
+              ? Number(240 / this.divWidth)
+              : Number(54 / this.divWidth));
+        }
+        this.scalseNumY = Number(
+          (document.documentElement.clientHeight - 125) / this.divHeight
+        );
+      }
+    },
+    handlePrev(idx) {
+      if (idx >= 1) {
+        // this.getInfoByProjectId(this.projectList[idx - 1].projectId)
+        this.stateSourceId = this.projectList[idx - 1].projectId
+      }
+    },
+    handleNext(idx) {
+      if (idx < this.projectList.length - 1) {
+        // this.getInfoByProjectId(this.projectList[idx + 1].projectId)
+        this.stateSourceId = this.projectList[idx + 1].projectId
+      }
+    },
+    // 查询 项目统计
+    getProjectCount() {
+      statProject({ projectId: this.stateSourceId }).then(res => {
+        this.projectStatistics = res.data
+      })
+    },
+    // 查询项目列表
+    getProjectList() {
+      listProject({
+        pageNum: 1,
+        pageSize: 99999,
+        orderByColumn: 'createTime',
+        isAsc: 'desc',
+      }).then((response) => {
+        this.projectList = response.rows;
+      });
     },
     // 返回列表
     handleLinkToTable() {
-      this.$emit('linkToTable')
+      this.$emit("linkToTable");
     },
     // 折叠开启右侧数据
     handleFoldRight() {
-      this.isFoldRight = !this.isFoldRight
+      this.isFoldRight = !this.isFoldRight;
-      this.$forceUpdate()
+      this.$forceUpdate();
     },
     // 查询获取告警分析等数据
     warningAnalysisList() {
@@ -268,8 +313,14 @@ export default {
   height: 100%;
   height: calc(100vh - 125px);
   display: flex;
+  width: 1682px;
+  height: 812px;
+  transform-origin: center top 0px;
+  position: relative;
+  left: 50%;
+  margin-left: -840px;
   .block-lift {
-    width: calc(100% - 300px - 20px);
+    width: calc(100% - 290px - 20px);
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -391,6 +442,7 @@ export default {
       display: flex;
       border: 1px solid #e8e8e8;
       border-radius: 5px;
+      height: calc(100% - 160px);
       .main-block {
         padding: 15px;
         width: calc(100% - 150px);
@@ -402,7 +454,7 @@ export default {
     width: 100%;
   }
   .block-right {
-    width: 300px;
+    width: 290px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -447,5 +499,11 @@ export default {
   .el-descriptions-item__label.is-bordered-label {
     background: #fafafa00;
   }
+  .but-icon:hover {
+    color: #1890ff !important;
+    font-size: 20px !important;
+  }
 }
+
+
 </style>