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

2022-08-29 14:30:21 +08:00 · 2022-08-29 14:30:21 +08:00 · 65e41e390f
parent 080790fedb
commit 65e41e390f
14 changed files with 244 additions and 117 deletions
--- a/src/api/iot/project_new.js
+++ b/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
+  });
+}
--- a/src/views/iot/project/index.vue
+++ b/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 {
--- a/src/views/iot/project/profileV2/DeviceManage/EDeviceChildren.vue
+++ b/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;
--- a/src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue
+++ b/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;
--- a/src/views/iot/project/profileV2/DeviceManage/EDynamicTable.vue
+++ b/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-column type="selection" v-if="isSelect" width="50" align="center" />
+    <el-table
+      v-loading="loading"
+      :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>
-          <span v-else class="lay-table-textarea" :title="scope.row[tableItem.prop || '']">
-            {{ scope.row[tableItem.prop || ''] }}
+          <slot
+            v-if="tableItem.slot"
+            :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',
-          prop: '',
-          width: '',
+          align: "left",
+          prop: "",
+          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>

--- a/src/views/iot/project/profileV2/DeviceManage/index.vue
+++ b/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() {
--- a/src/views/iot/project/profileV2/ECensusCards.vue
+++ b/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>
--- a/src/views/iot/project/profileV2/EEchartsGauge.vue
+++ b/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: {
--- a/src/views/iot/project/profileV2/EEchartsLine.vue
+++ b/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%;
 }
--- a/src/views/iot/project/profileV2/EObjectContainer.vue
+++ b/src/views/iot/project/profileV2/EObjectContainer.vue
@ -31,7 +31,7 @@ export default {
    },
    projectTypeOptions: {
      type: Array
-    }
+    },
  },
  data() {
    return  {
--- a/src/views/iot/project/profileV2/EObjectSpace.vue
+++ b/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;
--- a/src/views/iot/project/profileV2/EObjectTenant.vue
+++ b/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;
--- a/src/views/iot/project/profileV2/ETrendCensus.vue
+++ b/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",
-          right: "20",
+          left: "10",
+          right: "10",
          bottom: "5",
-          top: 30,
+          top: 37,
          containLabel: true,
        },
        xAxis: {
--- a/src/views/iot/project/profileV2/details.vue
+++ b/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">
-          <span>{{ infoData.projectName }}</span>
-          <i class="el-icon-arrow-left icon-c"></i>
-          <i class="el-icon-arrow-right icon-c"></i>
+        <div class="title-left" v-for="(item, idx) in projectList" :key="idx" v-show="item.projectId === infoData.projectId">
+          <span>{{ item.projectName }}</span>
+          <i class="el-icon-arrow-left icon-c but-icon" @click="handlePrev(idx)"></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
-        title="类型分布统计"
-        class="type-census-card"
-      >
+      <e-simple-card title="类型分布统计" class="type-census-card">
        <template slot="cardBody">
-          <e-type-census
-            :result="resultInfo['alarmCategoriesList'] || []"
-          />
+          <e-type-census v-if="!isFoldRight" :result="resultInfo['alarmCategoriesList'] || []" />
        </template>
      </e-simple-card>

-      <e-simple-card
-        title="报警预警趋势"
-        class="trend-census-card"
-      >
+      <e-simple-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 { getWarningAnalysis, appProjectList } from "@/api/app";
+import { getProject, listProject } from "@/api/iot/project";
+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 ETrendCensus from './ETrendCensus'
-import EObjectContainer from './EObjectContainer'
-import EDeviceManage from './DeviceManage/index'
+import ETypeCensus from "./ETypeCensus";
+import ETrendCensus from "./ETrendCensus";
+import EObjectContainer from "./EObjectContainer";
+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.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
-    // document.getElementById("con_lf_top_div").style.background = "#010e45";
-    // document.getElementById("con_lf_top_div").style.height =
-    //   "calc(100vh - 0px)";
-    // document.getElementById("con_lf_top_div").style.minHeight =
-    //   "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();
-    // });
+    this.resize_window_project();
+    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
+    document.getElementById("con_lf_top_div").style.overflow = "hidden";
+    document.getElementById("con_lf_top_div").scrollTop = 0;
+    window.addEventListener("resize", () => {
+      this.resize_window_project();
+    });
  },
  methods: {
-    resize_window() {
-      // if (this.fullscreen) {
-      //   this.scalseNumX = Number(document.documentElement.clientWidth / 1682);
-      //   this.scalseNumY = Number(document.documentElement.clientHeight / 812);
-      // } else {
-      //   if (document.documentElement.clientWidth < 993) {
-      //     this.scalseNumX =
-      //       Number(document.documentElement.clientWidth / 1682) -
-      //       (Cookies.get("sidebarStatus") !== "0" ? Number(200 / 1920) : 0);
-      //   } else {
-      //     this.scalseNumX =
-      //       Number(document.documentElement.clientWidth / 1920) -
-      //       (Cookies.get("sidebarStatus") !== "0"
-      //         ? Number(200 / 1920)
-      //         : Number(54 / 1920));
-      //   }
-      //   this.scalseNumY = Number(document.documentElement.clientHeight / 1080);
-      // }
+    init() {
+      this.getInfoByProjectId();
+      this.getProjectCount()
+      this.warningAnalysisList();
+    },
+    resize_window_project() {
+      var documentDiv = document.getElementById("project-detail-v2-id");
+      if (this.fullscreen) {
+        this.scalseNumX = Number(documentDiv.clientWidth / this.divWidth);
+        this.scalseNumY = Number(documentDiv.clientHeight / this.divHeight);
+      } else {
+        if (document.documentElement.clientWidth < 993) {
+          this.scalseNumX =
+            Number(document.documentElement.clientWidth / this.divWidth) -
+            (Cookies.get("sidebarStatus") !== "0"
+              ? Number(200 / this.divWidth)
+              : 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.$forceUpdate()
+      this.isFoldRight = !this.isFoldRight;
+      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>