提交: 统计分析 模块代码；(部分优化使用组件问题！)

src/api/iot/staistics.js

@@ -7,3 +7,19 @@ export function projectEnergy(query) {
         params: query
     })
 }
+
+export function monthOnMonthEnergy(query) {
+    return request({
+        url: '/iot/stat/monthOnMonthEnergy',
+        method: 'get',
+        params: query
+    })
+}
+
+export function monthOnCircleEnergy(query) {
+    return request({
+        url: '/iot/stat/monthOnCircleEnergy',
+        method: 'get',
+        params: query
+    })
+}

src/components/Echarts/EEchartsBar.vue

@@ -32,7 +32,9 @@ export default {
     this.chart = null;
   },
   mounted() {
-    this.drawBar();
+    window.addEventListener("resize", () => {
+      this.updateEchart();
+    });
   },
   methods: {
     updateEchart() {

src/components/RightToolbar/index.vue

@@ -11,19 +11,23 @@
         <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
       </el-tooltip>
     </el-row>
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
+    <dialog-template :title="title" :visible="open" @close="open = false" >
       <el-transfer
+        slot="dialog-center"
         :titles="['显示', '隐藏']"
         v-model="value"
         :data="columns"
         @change="dataChange"
       ></el-transfer>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 <script>
+import DialogTemplate from "@/components/DialogTemplate";
+
 export default {
   name: "RightToolbar",
+  components: {DialogTemplate},
   data() {
     return {
       // 显隐数据

src/views/iot/autocontrol/job/index.vue

@@ -158,8 +158,8 @@
     />
 
     <!-- 添加或修改定时任务对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" @close="detailsShow = false" width="50%">
+    <dialog-template :close-on-click-modal="false" :title="title" :visible="open" @close="detailsShow = false" width="50%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" slot="dialog-center" >
         <el-row>
           <el-col :span="24">
             <el-form-item label="任务名称:" prop="jobName">
@@ -177,7 +177,7 @@
               <device-param-wrap
                 ref="paramsWrap"
                 :disabled="detailsShow"
-                v-for="(item,index) in relationList"
+                v-for="(item) in relationList"
                 :tempIndex="item.guid"
                 :deleteButtonD="relationList.length < 2"
                 :key="item.guid"
@@ -190,12 +190,12 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" v-show="detailsShow" @click="detailsShow = false">编辑</el-button>
         <el-button size="mini" type="primary" v-show="detailsShow === false" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
@@ -213,12 +213,14 @@ import {
 import EasyCron from "@/components/EasyCron";
 import CronValidator from '@/components/EasyCron/validator'
 import DeviceParamWrap from "./profile/deviceParam";
+import DialogTemplate from "@/components/DialogTemplate";
 import md5 from 'js-md5';
 export default {
   name: "DeviceJob",
   components: {
     EasyCron,
-    DeviceParamWrap
+    DeviceParamWrap,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/circuitBreaker/index.vue

@@ -174,14 +174,14 @@
     </div>
 
     <!-- 添加或修改设备对话框 -->
-    <el-dialog
+    <dialog-template
-      class="eldialog-wrap"
       :close-on-click-modal="false"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
+      @close="open = false"
       width="500px"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="所属型号：" prop="modelId">
           <el-input
             v-model="form.modelName"
@@ -236,11 +236,11 @@
           </div>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       title="选择"
@@ -286,6 +286,7 @@ import { listModel, getModel } from "@/api/iot/model";
 import SelectTableWrap from "@/components/SelectTable/index";
 import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
+import DialogTemplate from "@/components/DialogTemplate";
 const deviceStatusOpt = {
   ONLINE: "在线",
   OFFLINE: "离线",
@@ -302,7 +303,8 @@ export default {
   components: {
     SelectTableWrap,
     DetailsWrap,
-    ParamWrap
+    ParamWrap,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/contacts/index.vue

@@ -129,8 +129,8 @@
     />
 
     <!-- 添加或修改联系人对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template :title="title" @close="open = false" :visible="open" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" slot="dialog-center">
         <el-form-item label="姓名:" prop="name">
           <el-input v-model="form.name" placeholder="请输入姓名" />
         </el-form-item>
@@ -153,15 +153,15 @@
           <el-input v-model="form.email" placeholder="请输入邮箱地址" />
         </el-form-item>-->
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <!-- 添加或修改联系人对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false"  title="授权扫二维码" :visible.sync="qrCodeDialogOpen" width="650px">
+    <dialog-template :close-on-click-modal="false"  @close="qrCodeDialogOpen = false"  title="授权扫二维码" :visible="qrCodeDialogOpen" width="650px">
-      <div class="qrcode-wrap" v-if="qrCodeDialogOpen">
+      <div class="qrcode-wrap" v-if="qrCodeDialogOpen" slot="dialog-center">
         <div class="qr-wrap">
           <img src="@/assets/images/gzhqr.jpg"/>
           <span>第一步：扫码关注公众号。</span>
@@ -172,10 +172,10 @@
           <span style="margin-top: 10px;">第二步：扫码绑定微信。</span>
         </div>
       </div>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" style="margin-right: 10px;" @click="qrCodeSubmit">确 定</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
@@ -193,10 +193,11 @@ import {
 import { getIotFileUrl } from "@/utils/hciot";
 import QRCode from "qrcodejs2";
 import gzhqr from "@/assets/images/gzhqr.jpg"
+import DialogTemplate from "@/components/DialogTemplate";
 
 export default {
   name: "Contacts",
-  components: {},
+  components: {DialogTemplate},
   data() {
     return {
       gzhqr,

src/views/iot/device/index.vue

@@ -242,14 +242,15 @@
     </div>
 
     <!-- 添加或修改设备对话框 -->
-    <el-dialog
+    <dialog-template
       class="eldialog-wrap"
       :close-on-click-modal="false"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
+      @close="open = false"
       width="500px"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="所属型号：" prop="modelId">
           <e-dialog-table-input
             :table="selectModelTable"
@@ -363,13 +364,13 @@
           </div>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm"
           >确 定</el-button
         >
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
     <div
       :class="
         componectVal === 'GatewayDetail'
@@ -402,6 +403,8 @@ import DetailsWrap from "./profile/details";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
 import GatewayDetail from "@/views/profile/DeviceDetailsView/index";
 import EDialogTableInput from "@/components/EDialogTableInput";
+import DialogTemplate from "@/components/DialogTemplate";
+
 const deviceStatusOpt = {
   ONLINE: "在线",
   OFFLINE: "离线",
@@ -614,6 +617,7 @@ export default {
     ParamWrap,
     GatewayDetail,
     EDialogTableInput,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/device/profile/childDevice.vue

@@ -91,8 +91,8 @@
 
 
     <!-- 添加或修改设备对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template class="eldialog-wrap"  @close="open = false" :title="title" :visible="open" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" slot="dialog-center" :rules="rules" label-width="100px">
         <el-form-item label="所属型号：" prop="modelId">
           <el-input
             v-model="form.modelName"
@@ -156,11 +156,11 @@
           </div>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="open = false">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
 
     <el-dialog
@@ -201,6 +201,8 @@ import {
 import { listModel, getModel } from "@/api/iot/model";
 import SelectTableWrap from "@/components/SelectTable/index";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
+import DialogTemplate from "@/components/DialogTemplate";
+
 const lineTypeOpt = {
   MAIN:'总路',
   BRANCH: '支路'
@@ -210,7 +212,8 @@ export default {
   props: ['sourceId', 'pDevcieInfo'],
   components: {
     SelectTableWrap,
-    ParamWrap
+    ParamWrap,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/device/profile/info.vue

@@ -145,30 +145,32 @@
       </div>
     </div>
     <!-- 添加或修改设备对话框 -->
-    <el-dialog
+    <dialog-template
       class="eldialog-wrap"
-      :close-on-click-modal="false"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
       width="500px"
+      @close="open = false"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="设备密码：" prop="devicePassword">
           <el-input v-model="form.devicePassword" @input="inputI" placeholder="选填--设备密码" clearable />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="open = false">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 <script>
 import { updateDevice, resetPssword } from "@/api/iot/device";
+import DialogTemplate from "@/components/DialogTemplate";
 export default {
   name: "DeviceInfo",
   props: ["infoData"],
+  components: {DialogTemplate},
   data() {
     const validatorNull = (rule, value, callback) => {
       callback();

src/views/iot/library/index.vue

@@ -210,15 +210,17 @@
         </div>
       </dialog-template>
 
-      <el-dialog
+      <dialog-template
         title="选择"
-        :visible.sync="selectTableShow"
+        :visible="selectTableShow"
         width="75%"
         top="10vh"
         class="select-table-dialog"
+        @close="selectTableShow = false"
         :close-on-click-modal="false"
       >
         <select-table-wrap
+          slot="dialog-center"
           v-if="selectTableShow"
           :tableOption="tableSelectOption.tableOpt"
           :queryOption="tableSelectOption.queryOpt"
@@ -228,7 +230,7 @@
           @returnEvent="returnEvent($event)"
         />
 
-        <div slot="footer" class="dialog-footer">
+        <div class="dialog-footer" slot="dialog-footer">
           <el-button size="mini" type="primary" @click="resuleClick"
             >确 定</el-button
           >
@@ -242,16 +244,16 @@
             >取 消</el-button
           >
         </div>
-      </el-dialog>
+      </dialog-template>
 
       <!-- 用户导入对话框 -->
-      <el-dialog
+      <dialog-template
         :title="upload.title"
-        :visible.sync="upload.open"
+        :visible="upload.open"
         width="400px"
-        append-to-body
+        @close="upload.open = false"
-        :close-on-click-modal="false"
       >
+      <template slot="dialog-center">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="批次" prop="batchId">
             <el-input
@@ -290,13 +292,15 @@
             提示：仅允许导入“xls”或“xlsx”格式文件！
           </div>
         </el-upload>
-        <div slot="footer" class="dialog-footer">
+      </template>
+        
+        <div slot="dialog-footer" class="dialog-footer">
           <el-button type="primary" size="mini" @click="submitFileForm"
             >确 定</el-button
           >
           <el-button size="mini" @click="upload.open = false">取 消</el-button>
         </div>
-      </el-dialog>
+      </dialog-template>
     </div>
   </div>
 </template>
@@ -313,10 +317,10 @@ import {
   importTemplate,
 } from "@/api/iot/library";
 import { listBatch } from "@/api/iot/batch";
-import DialogTemplate from "@/components/DialogTemplate";
 import SelectTableWrap from "@/components/SelectTable/index";
 import { getToken } from "@/utils/auth";
 import { downloadFile } from "@/utils/hciot";
+import DialogTemplate from "@/components/DialogTemplate";
 
 export default {
   name: "Library",

src/views/iot/model/index.vue

@@ -192,14 +192,13 @@
     />
 
     <!-- 添加或修改型号对话框 -->
-    <el-dialog
+    <dialog-template
-      class="eldialog-wrap"
-      :close-on-click-modal="false"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
       width="1000px"
+      @close="open = false"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="厂商：" prop="vendorId">
@@ -299,13 +298,13 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button type="primary" size="mini" @click="submitForm"
           >确 定</el-button
         >
         <el-button @click="cancel" size="mini">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       title="选择"

src/views/iot/param/index.vue

@@ -201,8 +201,8 @@
     />
 
     <!-- 添加或修改设备参数对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template class="eldialog-wrap" :title="title" @close="open = false" :visible="open" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="功率限额(单位:W)" prop="powerLimit">
           <el-input
             v-model="form.powerLimit"
@@ -240,11 +240,11 @@
           />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer"  class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
@@ -257,10 +257,11 @@ import {
   updateParam,
   exportParam
 } from "@/api/iot/param";
+import DialogTemplate from "@/components/DialogTemplate";
 
 export default {
   name: "Param",
-  components: {},
+  components: {DialogTemplate},
   data() {
     return {
       // 遮罩层

src/views/iot/project/profile/space.vue

@@ -79,8 +79,8 @@
     </el-table>
 
     <!-- 添加或修改项目空间对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template class="eldialog-wrap":title="title" :visible.sync="open" @close="open = false" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" slot="dialog-center" label-width="100px">
         <el-form-item label="上级空间:" prop="parentId">
           <treeselect v-model="form.parentId" :options="spaceOptions" placeholder="请选择上级空间" />
         </el-form-item>
@@ -98,11 +98,11 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       class="eldialog-wrap"
@@ -140,12 +140,15 @@ import {
 import SpaceDeviceWrap from "./spaceDevice";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import DialogTemplate from "@/components/DialogTemplate";
+
 
 export default {
   name: "Space",
   components: {
     Treeselect,
-    SpaceDeviceWrap
+    SpaceDeviceWrap,
+    DialogTemplate
   },
   props: ["infoData"],
   data() {

src/views/iot/project/profile/spaceDevice.vue

@@ -41,13 +41,13 @@
     />
 
     <!-- 添加或修改空间设备对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+    <dialog-template :title="title" :visible="open" width="500px" @close="open = false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px"></el-form>
+      <el-form ref="form" :model="form" slot="dialog-center" :rules="rules" label-width="80px"></el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       title="选择设备"

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

@@ -395,6 +395,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      width: calc(100% - 300px);
       .data-type {
         width: 32px;
         height: 32px;

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

@@ -63,7 +63,7 @@
           </el-form-item>
         </el-col> -->
 
-        <el-col :span="4">
+        <el-col :span="9">
           <el-form-item class="query-foot">
             <el-button
               type="primary"

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

@@ -162,9 +162,9 @@
                   <span>最小值:</span>
                   <span>{{ item.minVal }}</span>
                 </div>
-                <div class="vlue-warp">
+                <div class="vlue-warp" >
                   <span>最大值:</span>
-                  <span>{{ item.maxVal }}</span>
+                  <span :title="item.maxVal">{{ item.maxVal }}</span>
                 </div>
               </div>
               <div class="dj-wrap">
@@ -401,6 +401,8 @@ export default {
           width: calc(100% - 55px);
           text-align: center;
           color: #3300ff;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
       }
     }

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

@@ -81,8 +81,8 @@
     </el-table>
 
     <!-- 添加或修改项目空间对话框 -->
-    <el-dialog class="eldialog-wrap" append-to-body='true' :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template class="eldialog-wrap" @close="open = false" :title="title" :visible.sync="open" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="上级空间:" prop="parentId">
           <treeselect v-model="form.parentId" :options="spaceOptions" placeholder="请选择上级空间" />
         </el-form-item>
@@ -100,11 +100,11 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       class="eldialog-wrap"
@@ -141,12 +141,15 @@ import {
 import EObjectSpaceDevice from "./EObjectSpaceDevice";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import DialogTemplate from "@/components/DialogTemplate";
+
 
 export default {
   name: "EObjectSpace",
   components: {
     Treeselect,
-    EObjectSpaceDevice
+    EObjectSpaceDevice,
+    DialogTemplate
   },
   props: ["infoData"],
   data() {

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

@@ -42,13 +42,13 @@
     />
 
     <!-- 添加或修改空间设备对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" >
+    <dialog-template :title="title" :visible.sync="open" width="500px" @close="open = false" >
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px"></el-form>
+      <el-form ref="form" :model="form" slot="dialog-center" :rules="rules" label-width="80px"></el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       title="选择设备"
@@ -89,12 +89,15 @@ import {
 } from "@/api/iot/spaceDevice";
 import { listSpaceDevice } from "@/api/iot/space";
 import SelectTableWrap from "@/components/SelectTable/index";
+import DialogTemplate from "@/components/DialogTemplate";
+
 
 export default {
   name: "SpaceDeviceWrap",
   props: ["sourceId", "projectId"],
   components: {
-    SelectTableWrap
+    SelectTableWrap,
+    DialogTemplate
   },
   data() {
     return {

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

@@ -121,15 +121,13 @@
     />
 
     <!-- 添加或修改电价合同对话框 -->
-    <el-dialog
+    <dialog-template
-      class="eldialog-wrap"
       :title="title"
       :visible.sync="open"
       width="720px"
-      :close-on-click-modal="false"
+      @close="open = false"
-      append-to-body
     >
-      <el-form ref="form" :disabled="tempType === 'destail'" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :disabled="tempType === 'destail'" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="合同名称:" prop="contractName">
           <el-input v-model="form.contractName" placeholder="请输入合同名称" />
         </el-form-item>
@@ -180,11 +178,11 @@
           </div>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" v-show="tempType !== 'destail'" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
@@ -199,6 +197,7 @@ import {
 } from "@/api/iot/contract";
 
 import TimePickerWrap from "./profile/timePicker";
+import DialogTemplate from "@/components/DialogTemplate";
 
 const contractTypeOption = {
   PEAK_VALLEY: "峰谷时段计价",
@@ -208,7 +207,8 @@ const contractTypeOption = {
 export default {
   name: "Contract",
   components: {
-    TimePickerWrap
+    TimePickerWrap,
+    DialogTemplate
   },
   props: {
     projectInfo: {

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

@@ -152,16 +152,14 @@
       </div>
       <div class="e-dialog">
         <!-- 添加或修改建筑类型对话框 -->
-        <el-dialog
+        <dialog-template
           :title="title"
           :visible="open"
-          @close="open = false"
-          class="eldialog-wrap"
           width="880px"
-          append-to-body
+          @close="open = false"
-          :close-on-click-modal="false"
         >
           <el-form
+            slot="dialog-center"
             ref="form"
             :model="form"
             style="padding-right: 20px"
@@ -288,13 +286,13 @@
               </el-col>
             </el-row>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <div slot="dialog-footer" class="dialog-footer">
             <el-button type="primary" size="mini" @click="submitForm"
               >确 定</el-button
             >
             <el-button @click="cancel" size="mini">取 消</el-button>
           </div>
-        </el-dialog>
+        </dialog-template>
       </div>
     </div>
     <e-logging v-if="isLoggingViewShow"
@@ -322,6 +320,7 @@ import ETagCard from "@/components/Cards/ETagCard";
 import ESceneAction from "./ESceneAction/index";
 import ELogging from './ELogging'
 
+
 export default {
   name: "ESceneManage",
   props: {
@@ -663,6 +662,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      width: calc(100% - 300px);
       .data-type {
         width: 32px;
         height: 32px;

src/views/iot/project/profileV2/SafetyTemplate/ELeakageCurrent.vue

@@ -163,16 +163,16 @@
         @pagination="getDeviceRecordTable"
       />
     </div>
-    <el-dialog append-to-body :title="dialogTitle" :close-on-click-modal="false" :visible="dialogOpen" width="800px" @close="() => { dialogOpen = false }">
+    <dialog-template :title="dialogTitle" :visible="dialogOpen" width="800px" @close="() => { dialogOpen = false }">
-      <div style="height: 100%; width: 100%;">
+      <div style="height: 100%; width: 100%;" slot="dialog-center">
         <e-leakage-detail v-if="dialogOpen" :sourceId="sourceId" :tempType="tempType" :deviceId="deviceId"></e-leakage-detail>
       </div>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button type="primary" size="mini" @click="() => { dialogOpen = false }"
           >取 消</el-button
         >
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 <script>
@@ -440,6 +440,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      width: calc(100% - 300px);
       .data-type {
         width: 32px;
         height: 32px;

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

@@ -420,6 +420,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      width: calc(100% - 300px);
       .data-type {
         width: 32px;
         height: 32px;

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

@@ -3,13 +3,16 @@
     class="project-detail-v2"
     id="project-detail-v2-id"
     ref="project-detail-v2-id"
+  >
+    <!--
+    比例缩放效果01
     :style="{
       transformOrigin: 'center top',
       transform: `scale(${scalseNumX}, ${scalseNumY})`,
       opacity: 1,
       transition: `all 0.5s ease 0s`,
     }"
-  >
+  -->
     <div :class="isFoldRight ? 'block-lift block-right-fold' : 'block-lift'">
       <div class="container-title">
         <div
@@ -39,7 +42,7 @@
           </div>
         </div>
       </div>
-      <div style="width: 100%;">
+      <div style="width: 100%">
         <e-nav-menu-button
           v-model="activeType"
           :activeList="activeList"
@@ -52,10 +55,21 @@
             }
           "
         />
-
       </div>
       <div class="container-info">
-        <div class="info-left">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <div
+              style="
+                background: rgb(244, 245, 247);
+                height: 104px;
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding-left: 20px;
+              "
+            >
               <el-descriptions class="margin-top" title="" :column="2">
                 <el-descriptions-item label="行业类型：">{{
                   statusFormat(infoData)
@@ -71,7 +85,10 @@
                 </el-descriptions-item>
                 <el-descriptions-item label="项目地址：">
                   <div class="e-descriptions-address">
-                <span class="e-address-span" :title="infoData.projectAddress">
+                    <span
+                      class="e-address-span"
+                      :title="infoData.projectAddress"
+                    >
                       {{ infoData.projectAddress }}
                     </span>
                     <i
@@ -86,7 +103,6 @@
                       v-model="visible"
                       style="top: 30px; left: -85%; position: relative"
                     >
-                  <!-- 地图模块选择和设置 -->
                       <slot>
                         <el-row>
                           <el-col :span="10">
@@ -95,9 +111,6 @@
                           <el-col :span="10">
                             <span>纬度：{{ mapForm.lat }}</span>
                           </el-col>
-                      <!-- <el-col :span="10">
-                        <span>地址：{{ mapForm.address }}</span>
-                      </el-col> -->
                         </el-row>
 
                         <shop-location
@@ -132,7 +145,100 @@
                 </el-descriptions-item>
               </el-descriptions>
             </div>
-        <div class="info-divider"></div>
+          </el-col>
+          <el-col :span="12">
+            <div
+              style="
+                background: rgb(244, 245, 247);
+                height: 104px;
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding-left: 20px;
+              "
+            >
+              <e-census-cards
+                :propList="censusCardList"
+                :result="projectStatistics"
+              />
+            </div>
+          </el-col>
+        </el-row>
+        <!-- <div class="info-left">
+          <el-descriptions class="margin-top" title="" :column="2">
+            <el-descriptions-item label="行业类型：">{{
+              statusFormat(infoData)
+            }}</el-descriptions-item>
+            <el-descriptions-item label="联系人1：">
+              {{ infoData["contacts1"] || "--" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="联系人2：">
+              {{ infoData["contacts2"] || "--" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="联系人3：">
+              {{ infoData["contacts3"] || "--" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="项目地址：">
+              <div class="e-descriptions-address">
+                <span class="e-address-span" :title="infoData.projectAddress">
+                  {{ infoData.projectAddress }}
+                </span>
+                <i
+                  class="el-icon-map-location e-i-custom"
+                  @click="mapClick"
+                ></i>
+                <el-popover
+                  placement="bottom"
+                  title="项目地址坐标"
+                  width="1080"
+                  trigger="manual"
+                  v-model="visible"
+                  style="top: 30px; left: -85%; position: relative"
+                >
+                  <slot>
+                    <el-row>
+                      <el-col :span="10">
+                        <span>经度：{{ mapForm.lng }}</span>
+                      </el-col>
+                      <el-col :span="10">
+                        <span>纬度：{{ mapForm.lat }}</span>
+                      </el-col>
+                    </el-row>
+
+                    <shop-location
+                      v-if="visible === true"
+                      style="height: 450px; margin-top: 10px"
+                      :mapCenter="mapCenter"
+                      :draggable="false"
+                      @mapEvent="mapEvent"
+                      :zoom="zoom"
+                    />
+
+                    <div
+                      style="
+                        width: 100%;
+                        height: 35px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        margin-top: 5px;
+                      "
+                    >
+                      <el-button
+                        type="primary"
+                        size="mini"
+                        @click="visible = false"
+                        >确 定</el-button
+                      >
+                    </div>
+                  </slot>
+                </el-popover>
+              </div>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div> -->
+        <!-- <div class="info-divider"></div>
         <div class="info-right">
           <div>
             <e-census-cards
@@ -140,10 +246,9 @@
               :result="projectStatistics"
             />
           </div>
-        </div>
+        </div> -->
       </div>
       <div class="container-main">
-
         <!-- <e-nav-menu
           v-model="activeType"
           :activeList="activeList"
@@ -229,13 +334,13 @@ import EDebuff from "./SafetyTemplate/EDebuff";
 import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
 import EElectricity from "./EnergyManage/EElectricity";
 import EEnergyLoad from "./EnergyManage/EEnergyLoad";
-import ENavMenuButton from './ENavMenuButton/index';
+import ENavMenuButton from "./ENavMenuButton/index";
 
 import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
-import ESceneManage from './ESceneManage/index'
+import ESceneManage from "./ESceneManage/index";
 
-import ENavLayout from './ENavLayout/index'
+import ENavLayout from "./ENavLayout/index";
 
 export default {
   name: "projectDetailV2",
@@ -261,7 +366,7 @@ export default {
     ShopLocation,
     ESceneManage,
     ENavMenuButton,
-    ENavLayout
+    ENavLayout,
   },
   props: {
     sourceId: {
@@ -291,20 +396,20 @@ export default {
         {
           label: "项目信息",
           key: "EObjectContainer",
-          icon: 'iconfont iconxiangmugl',
+          icon: "iconfont iconxiangmugl",
           template: "EObjectContainer",
         },
         {
           label: "设备管理",
           key: "EDeviceManage",
-          icon: 'iconfont iconwumoxing',
+          icon: "iconfont iconwumoxing",
           template: "EDeviceManage",
         },
         {
           label: "安全监管",
           key: "safety",
-          icon: 'iconfont iconanquangl',
+          icon: "iconfont iconanquangl",
-          template: 'ENavLayout',
+          template: "ENavLayout",
           children: [
             // 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
             {
@@ -372,8 +477,8 @@ export default {
         {
           label: "能源管理",
           key: "energyManage",
-          icon: 'iconfont iconnengyuanguanli',
+          icon: "iconfont iconnengyuanguanli",
-          template: 'ENavLayout',
+          template: "ENavLayout",
           children: [
             {
               label: "电 量",
@@ -395,15 +500,14 @@ export default {
         {
           label: "综合管理",
           key: "synthesizeManage",
-          icon: 'iconfont icontasks',
+          icon: "iconfont icontasks",
-          template: 'ENavLayout',
+          template: "ENavLayout",
           children: [
             {
               label: "场景控制",
               key: "sceneManage",
               template: "ESceneManage",
             },
-
           ],
         },
       ],
@@ -455,11 +559,11 @@ export default {
   },
   watch: {
     $route(to, from) {
-      if (from.fullPath === '/project/project'){
+      // if (from.fullPath === "/project/project") {
-        document.getElementById("con_lf_top_div").style.overflow = "auto";
+      //   document.getElementById("con_lf_top_div").style.overflow = "auto";
-      } else if (to.fullPath === '/project/project') {
+      // } else if (to.fullPath === "/project/project") {
-        document.getElementById("con_lf_top_div").style.overflow = "hidden";
+      //   document.getElementById("con_lf_top_div").style.overflow = "hidden";
-      }
+      // }
     },
     isFoldRight: {
       handler(newValue) {
@@ -479,7 +583,7 @@ export default {
     },
     opened: {
       handler() {
-        this.resize_window_project();
+        // this.resize_window_project();
       },
       deep: true,
       immediate: true,
@@ -487,13 +591,13 @@ export default {
   },
   mounted() {
     // 计算缩放比例
-    this.resize_window_project();
+    // 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").style.overflow = "hidden";
     document.getElementById("con_lf_top_div").scrollTop = 0;
-    window.addEventListener("resize", () => {
+    // window.addEventListener("resize", () => {
-      this.resize_window_project();
+    //   this.resize_window_project();
-    });
+    // });
   },
   computed: {
     opened() {
@@ -619,12 +723,14 @@ export default {
   height: 100%;
   height: calc(100vh - 125px);
   display: flex;
-  width: 1682px;
-  height: 812px;
   transform-origin: center top 0px;
   position: relative;
-  left: 50%;
+  min-width: 1180px;
-  margin-left: -840px;
+  // 缩放样式
+  // left: 50%;
+  // margin-left: -840px;
+  // width: 1682px;
+  // height: 812px;
   .block-lift {
     width: calc(100% - 290px - 20px);
     height: 100%;
@@ -711,12 +817,13 @@ export default {
       }
     }
     .container-info {
-      height: 104px;
+      // height: 104px;
       width: 100%;
       background: #f4f5f7;
       border-radius: 5px;
       margin-top: 5px;
       display: flex;
+      padding: 10px;
       .info-left {
         width: calc(40%);
         padding: 8px 20px;
@@ -741,7 +848,6 @@ export default {
       }
     }
     .container-main {
-
       width: calc(100% - 0px);
       height: calc(100vh - 286px);
       margin-left: 0px;
@@ -821,6 +927,7 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      max-width: calc(500px - 170px);
     }
   }
   .e-i-custom {

src/views/iot/region/profile/BuildingDevice.vue

@@ -42,13 +42,13 @@
     />
 
     <!-- 添加或修改空间设备对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+    <dialog-template :title="title" :visible.sync="open" width="500px" @close="open = false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px"></el-form>
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="80px"></el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       title="选择设备"
@@ -86,12 +86,15 @@ import {
 } from "@/api/iot/buildingDevice";
 import { listSpaceDevice } from "@/api/iot/space";
 import SelectTableWrap from "@/components/SelectTable/index";
+import DialogTemplate from "@/components/DialogTemplate";
+
 
 export default {
   name: "BuildingDevice",
   props: ["buildingCode"],
   components: {
-    SelectTableWrap
+    SelectTableWrap,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/region/profile/BuildingSpace.vue

@@ -77,8 +77,8 @@
     </el-table>
 
     <!-- 添加或修改项目建筑对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <dialog-template :title="title" :visible.sync="open" @close="open = false" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="上级建筑:" prop="parentCode">
           <treeselect v-model="form.parentCode" :normalizer="normalizer" :options="spaceOptions" placeholder="请选择上级建筑" />
         </el-form-item>
@@ -99,11 +99,11 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <el-dialog
       class="eldialog-wrap"
@@ -141,12 +141,14 @@ import {
 import BuildingDevice from "./BuildingDevice";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import DialogTemplate from "@/components/DialogTemplate";
 
 export default {
   name: "Space",
   components: {
     Treeselect,
-    BuildingDevice
+    BuildingDevice,
+    DialogTemplate
   },
   props: ["infoData"],
   data() {

src/views/iot/region/profile/table.vue

@@ -130,14 +130,14 @@
     />
 
     <!-- 添加或修改项目对话框 -->
-    <el-dialog
+    <dialog-template
       class="eldialog-wrap"
-      :close-on-click-modal="false"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
+      @close="open = false"
       width="720px"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form slot="dialog-center" ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="区域名称:" prop="regionName">
@@ -269,13 +269,13 @@
         </el-row>
         
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm"
           >确 定</el-button
         >
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 <script>
@@ -283,6 +283,7 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { initMap, gjzCode } from "@/utils/latlngFromAddress.js";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
+import DialogTemplate from "@/components/DialogTemplate";
 import {
   listRegion,
   getRegion,
@@ -295,6 +296,7 @@ export default {
   components: {
     Treeselect,
     ShopLocation,
+    DialogTemplate,
   },
   data() {
     return {

src/views/iot/statistics/chain/index.vue

@@ -21,7 +21,7 @@
       </el-form-item>
 
       <el-form-item label="时间" prop="time">
-        <el-date-picker v-model="time" type="month" placeholder="选择年">
+        <el-date-picker v-model="time" type="year" size="small" :clearable="false" placeholder="选择年">
         </el-date-picker>
       </el-form-item>
 
@@ -29,79 +29,28 @@
         <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="mini" @click="resetQuery"
           >重置</el-button
-        >
+        > -->
       </el-form-item>
     </el-form>
 
-    <div class="main-echarts">
+    <el-tabs v-model="activeName">
-      <e-echarts-bar
+      <el-tab-pane :label="tabItem.label" :name="tabItem.key" v-for="tabItem in tabsList" :key="tabItem.key">
-        ref="echartsLineTrend"
+        <e-chain-template ref="chainTemplate" v-if="tabItem.key === activeName" :energyType="tabItem.key" :unit="tabItem.unit" :params="queryParams" />
-        :styles="echartsOption.styles"
+      </el-tab-pane>
-        :colorList="echartsOption.colorList"
+    </el-tabs>
-        :eId="echartsOption.eId"
-        :option="resultOption"
-      ></e-echarts-bar>
-    </div>
     
-    <div class="main-table">
-      <el-table v-loading="loading" :data="tableList">
-        <el-table-column
-          type="index"
-          label="序号"
-          align="center"
-          :index="
-            (val) => {
-              return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
-            }
-          "
-          width="80px"
-        ></el-table-column>
-        <el-table-column label="项目名称" align="left" prop="projectName" />
-        <el-table-column label="日期" align="left" prop="projectName" />
-        <el-table-column label="本期用量" align="center" prop="industry" />
-        <el-table-column label="同期用量" align="center" prop="electric">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.electric).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="增长值" align="center" prop="coal">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.coal).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="增长率" align="center" prop="coal">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.coal).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </div>
   </div>
 </template>
 <script>
 import { listProject } from "@/api/iot/project";
 import EDialogTableInput from "@/components/EDialogTableInput";
-import EEchartsBar from "@/components/Echarts/EEchartsBar";
+import EChainTemplate from './template'
 const selectTable = {
   otherOption: {
     tableType: "project",
@@ -180,91 +129,44 @@ export default {
   name: "StatisticsCompared",
   components: {
     EDialogTableInput,
-    EEchartsBar,
+    EChainTemplate,
   },
   data() {
     return {
       selectTable,
       total: 0,
+      activeName: 'water',
       queryParams: {
         projectName: "",
-        pageNum: 1,
+        year: ''
-        pageSize: 10,
       },
       time: "",
-      resultOption: {
+      tabsList: [
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          left: "3%",
-          right: "2%",
-          bottom: "2%",
-          top: '2%',
-          containLabel: true,
-        },
-        xAxis: [
         {
-            type: "category",
+          label: '水量统计',
-            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          key: 'water',
-            axisTick: {
+          unit: '吨'
-              alignWithLabel: true,
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "Kwh",
-            position: "left",
-            alignTicks: true,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#1890FF",
-              },
-            },
-            axisLabel: {
-              formatter: "{value}",
-            },
-          },
-        ],
-        series: [
-          {
-            name: "去年",
-            type: "bar",
-            barWidth: "30%",
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
-              3.3,
-            ],
         },
         {
-            name: "同期",
+          label: '电量统计',
-            type: "bar",
+          key: 'electry',
-            barWidth: "30%",
+          unit: 'kwh'
-            data: [
+        },
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+        {
-              2.3,
+          label: '气量统计',
+          key: 'gas',
+          unit: 'm³'
+        }
       ],
-          },
-        ],
-      },
-      echartsOption: {
-        styles: "width: 100%; height: 100%;",
-        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
-        eId: "statisticsComparedEchartsBar",
-      },
-      loading: false,
-      tableList: [],
     };
   },
   created() {
     this.time = new Date();
-    this.getList();
+  },
+  watch: {
+    time() {
+      this.queryParams.year = this.parseTime(this.time, "{y}");
+    }
   },
   methods: {
     listProject,
@@ -278,7 +180,6 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
@@ -288,10 +189,10 @@ export default {
       this.handleQuery();
     },
     getList() {
-      // console.log(this.time)
+      console.log(this.$refs.chainTemplate)
-      // console.log('compared-getList:', Object.assign(this.queryParams, {
+      if (this.$refs.chainTemplate) {
-      //   time: this.parseTime(this.time, '{y}:01:01 00:00:00')
+        this.$refs.chainTemplate[0].getChartList();
-      // }))
+      }
     },
   },
 };

src/views/iot/statistics/chain/template.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="compared-template">
+    <div class="main-echarts">
+      <e-echarts-bar
+        ref="echartsLineTrend"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></e-echarts-bar>
+    </div>
+
+    <div class="main-table">
+      <el-table v-loading="loading" :data="tableList">
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="
+            (val) => {
+              return val;
+            }
+          "
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="项目名称" align="left" prop="projectName" />
+        <el-table-column label="日期" align="left" prop="date" />
+        <el-table-column
+          :label="`本期用量 (${unit})`"
+          align="center"
+          prop="homochronousValue"
+        >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.homochronousValue).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="`同期用量 (${unit})`"
+          align="center"
+          prop="currentPeriodValue"
+        >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.currentPeriodValue).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="`增长值`" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.increaseValue).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="`增长率`" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea"
+              >{{ Number(scope.row.increaseRate).toFixed(2) || "--" }} %</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { monthOnCircleEnergy } from "@/api/iot/staistics";
+import EEchartsBar from "@/components/Echarts/EEchartsBar";
+export default {
+  name: "ChainTemplate",
+  props: {
+    energyType: String,
+    params: Object,
+    unit: String,
+  },
+  components: {
+    EEchartsBar,
+  },
+  data() {
+    return {
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      loading: false,
+      tableList: [],
+      resultOption: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "2%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "Kwh",
+            position: "left",
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#1890FF",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "同期",
+            type: "bar",
+            barWidth: "30%",
+            data: [],
+          },
+          {
+            name: "本期",
+            type: "bar",
+            barWidth: "30%",
+            data: [],
+          },
+        ],
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
+        eId: "statisticsComparedEchartsBar",
+      },
+    };
+  },
+  created() {
+    this.getChartList();
+  },
+  methods: {
+    updateEcharts() {
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart();
+      }
+    },
+    getList() {
+      this.getChartList();
+    },
+    handleCeanData(list) {
+      var xAxis = [];
+      var seriesFast = [];
+      var seriesLast = [];
+      if (list && list.length > 0) {
+        list.forEach((v) => {
+          xAxis.push(v["date"]);
+          seriesFast.push(v["currentPeriodValue"]);
+          seriesLast.push(v["homochronousValue"]);
+        });
+      } else {
+        for (let i = 0; i < 12; i++) {
+          xAxis.push(this.parseTime(new Date(), "{y}-{m}"));
+          seriesFast.push(0);
+          seriesLast.push(0);
+        }
+      }
+      return {
+        xAxis: xAxis,
+        seriesFast: seriesFast,
+        seriesLast: seriesLast,
+      };
+    },
+    getChartList() {
+      this.loading = true;
+      if (this.energyType && this.params.year) {
+        monthOnCircleEnergy(
+          Object.assign(
+            {
+              energyType: this.energyType,
+            },
+            this.params
+          )
+        ).then((res) => {
+          this.tableList = res.rows;
+          this.resultOption.yAxis[0].name = this.unit || "";
+          var result = this.handleCeanData(res.rows);
+          this.resultOption.xAxis[0].data = result["xAxis"];
+          this.resultOption.series[0].data = result["seriesFast"];
+          this.resultOption.series[1].data = result["seriesLast"];
+          this.updateEcharts();
+          this.loading = false;
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.compared-template {
+  .main-echarts {
+    height: 350px;
+    width: 100%;
+    margin: 10px 0;
+  }
+  .main-table {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/iot/statistics/compared/index.vue

@@ -22,7 +22,7 @@
       </el-form-item>
 
       <el-form-item label="时间" prop="time">
-        <el-date-picker v-model="time" type="year" placeholder="选择年">
+        <el-date-picker v-model="time" type="year" size="small" :clearable="false" placeholder="选择年">
         </el-date-picker>
       </el-form-item>
 
@@ -30,79 +30,37 @@
         <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="mini" @click="resetQuery"
           >重置</el-button
-        >
+        > -->
       </el-form-item>
     </el-form>
 
-    <div class="main-echarts">
+    <el-tabs v-model="activeName">
-      <e-echarts-bar
+      <el-tab-pane
-        ref="echartsLineTrend"
+        :label="tabItem.label"
-        :styles="echartsOption.styles"
+        :name="tabItem.key"
-        :colorList="echartsOption.colorList"
+        v-for="tabItem in tabsList"
-        :eId="echartsOption.eId"
+        :key="tabItem.key"
-        :option="resultOption"
+      >
-      ></e-echarts-bar>
+        <e-compared-template
-    </div>
+          ref="comparedTemplate"
-
+          v-if="tabItem.key === activeName"
-    <div class="main-table">
+          :energyType="tabItem.key"
-      <el-table v-loading="loading" :data="tableList">
+          :unit="tabItem.unit"
-        <el-table-column
+          :params="queryParams"
-          type="index"
+        ></e-compared-template>
-          label="序号"
+      </el-tab-pane>
-          align="center"
+    </el-tabs>
-          :index="
-            (val) => {
-              return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
-            }
-          "
-          width="80px"
-        ></el-table-column>
-        <el-table-column label="项目名称" align="left" prop="projectName" />
-        <el-table-column label="日期" align="left" prop="projectName" />
-        <el-table-column label="本期用量" align="center" prop="industry" />
-        <el-table-column label="同期用量" align="center" prop="electric">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.electric).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="增长值" align="center" prop="coal">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.coal).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="增长率" align="center" prop="coal">
-          <template slot-scope="scope">
-            <span class="lay-table-textarea">{{
-              Number(scope.row.coal).toFixed(2) || "--"
-            }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </div>
   </div>
 </template>
 <script>
 import { listProject } from "@/api/iot/project";
 import EDialogTableInput from "@/components/EDialogTableInput";
-import EEchartsBar from "@/components/Echarts/EEchartsBar";
 const selectTable = {
   otherOption: {
     tableType: "project",
@@ -176,110 +134,61 @@ const selectTable = {
     ],
   },
 };
+import EComparedTemplate from "./profile/template";
 
 export default {
   name: "StatisticsCompared",
   components: {
     EDialogTableInput,
-    EEchartsBar,
+    EComparedTemplate,
   },
   data() {
     return {
       selectTable,
       total: 0,
+      activeName: "water",
       queryParams: {
         projectName: "",
-        pageNum: 1,
+        year: "",
-        pageSize: 10,
       },
+      tabsList: [
+        {
+          label: "水量统计",
+          key: "water",
+          unit: "吨",
+        },
+        {
+          label: "电量统计",
+          key: "electry",
+          unit: "kwh",
+        },
+        {
+          label: "气量统计",
+          key: "gas",
+          unit: "m³",
+        },
+      ],
       time: "",
-      resultOption: {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          left: "3%",
-          right: "2%",
-          bottom: "2%",
-          top: '2%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-            axisTick: {
-              alignWithLabel: true,
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "Kwh",
-            position: "left",
-            alignTicks: true,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#1890FF",
-              },
-            },
-            axisLabel: {
-              formatter: "{value}",
-            },
-          },
-        ],
-        series: [
-          {
-            name: "去年",
-            type: "bar",
-            barWidth: "30%",
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
-              3.3,
-            ],
-          },
-          {
-            name: "同期",
-            type: "bar",
-            barWidth: "30%",
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
-              2.3,
-            ],
-          },
-        ],
-      },
-      echartsOption: {
-        styles: "width: 100%; height: 100%;",
-        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
-        eId: "statisticsComparedEchartsBar",
-      },
       loading: false,
       tableList: [],
     };
   },
+  watch: {
+    time() {
+      this.queryParams.year = this.parseTime(this.time, "{y}");
+    },
+  },
   created() {
     this.time = new Date();
-    this.getList();
+    // this.getList();
   },
   methods: {
     listProject,
-    updateEcharts() {
-      if (this.$refs.echartsLineTrend) {
-        this.$refs.echartsLineTrend.updateEchart();
-      }
-    },
     handleDialogEvent(e) {
       this.handleQuery();
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
@@ -289,10 +198,9 @@ export default {
       this.handleQuery();
     },
     getList() {
-      console.log(this.queryParams)
+      if (this.$refs.comparedTemplate) {
-      // console.log('compared-getList:', Object.assign(this.queryParams, {
+        this.$refs.comparedTemplate[0].getChartList();
-      //   time: this.parseTime(this.time, '{y}:01:01 00:00:00')
+      }
-      // }))
     },
   },
 };

src/views/iot/statistics/compared/profile/amount.vue

@@ -0,0 +1,5 @@
+<template>
+<div class="e-compared-amount">
+    
+</div>
+</template>

src/views/iot/statistics/compared/profile/template.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="compared-template">
+    <div class="main-echarts">
+      <e-echarts-bar
+        ref="echartsLineTrend"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></e-echarts-bar>
+    </div>
+
+    <div class="main-table">
+      <el-table v-loading="loading" :data="tableList">
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="
+            (val) => {
+              return val + 1;
+            }
+          "
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="项目名称" align="left" prop="projectName" />
+        <el-table-column label="日期" align="left" prop="date" />
+        <el-table-column :label="`本期用量 (${unit})`" align="center" prop="homochronousValue" >
+            <template slot-scope="scope">
+                <span class="lay-table-textarea">{{
+                Number(scope.row.homochronousValue).toFixed(2) || "--"
+                }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column :label="`同期用量 (${unit})`"  align="center" prop="currentPeriodValue">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.currentPeriodValue).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="`增长值`" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.increaseValue).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column  :label="`增长率`" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.increaseRate).toFixed(2) || "--"
+            }} %</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { monthOnMonthEnergy } from "@/api/iot/staistics";
+import EEchartsBar from "@/components/Echarts/EEchartsBar";
+export default {
+  name: "ComparedTemplate",
+  props: {
+    energyType: String,
+    params: Object,
+    unit: String,
+  },
+  components: {
+    EEchartsBar,
+  },
+  data() {
+    return {
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      loading: false,
+      tableList: [],
+      resultOption: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "2%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "Kwh",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#1890FF",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "同期",
+            type: "bar",
+            barWidth: "30%",
+            data: [],
+          },
+          {
+            name: "本期",
+            type: "bar",
+            barWidth: "30%",
+            data: [],
+          },
+        ],
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
+        eId: "statisticsComparedEchartsBar",
+      },
+    };
+  },
+  created() {
+    this.getChartList();
+  },
+  methods: {
+    updateEcharts() {
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart();
+      }
+    },
+    getList() {
+      this.getChartList();
+    },
+    handleCeanData(list) {
+      var xAxis = [];
+      var seriesFast = [];
+      var seriesLast = [];
+      if (list && list.length > 0) {
+        list.forEach((v) => {
+          xAxis.push(v["date"]);
+          seriesFast.push(v["currentPeriodValue"]);
+          seriesLast.push(v["homochronousValue"]);
+        });
+      } else {
+        for (let i = 0; i < 12; i++) {
+          xAxis.push(this.parseTime(new Date(), "{y}-{m}"));
+          seriesFast.push(0);
+          seriesLast.push(0);
+        }
+      }
+      return {
+        'xAxis': xAxis,
+        'seriesFast': seriesFast,
+        'seriesLast': seriesLast,
+      };
+    },
+    getChartList() {
+      this.loading = true;
+      if (this.energyType && this.params.year) {
+        monthOnMonthEnergy(
+          Object.assign(
+            {
+              energyType: this.energyType,
+            },
+            this.params
+          )
+        ).then((res) => {
+          this.tableList = res.rows;
+          this.resultOption.yAxis[0].name = this.unit || "";
+          var result = this.handleCeanData(res.rows);
+          this.resultOption.xAxis[0].data = result["xAxis"];
+          this.resultOption.series[0].data = result["seriesFast"];
+          this.resultOption.series[1].data = result["seriesLast"];
+          this.updateEcharts();
+          this.$forceUpdate();
+          this.loading = false;
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.compared-template {
+  .main-echarts {
+    height: 350px;
+    width: 100%;
+    margin: 10px 0;
+  }
+  .main-table {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/iot/statistics/energy/index.vue

@@ -60,12 +60,12 @@
         </el-table-column>
         <el-table-column label="水用量 (吨)" align="center" prop="electric" >
           <template slot-scope="scope">
-            <span class="lay-table-textarea">{{  Number(scope.row.electric).toFixed(2) || '--' }}</span>
+            <span class="lay-table-textarea">{{  Number(0).toFixed(2) || '--' }}</span>
           </template>
         </el-table-column>
          <el-table-column label="气用量 (m³)" align="center" prop="electric" >
           <template slot-scope="scope">
-            <span class="lay-table-textarea">{{  Number(scope.row.electric).toFixed(2) || '--' }}</span>
+            <span class="lay-table-textarea">{{  Number(0).toFixed(2) || '--' }}</span>
           </template>
         </el-table-column>
 				<el-table-column label="碳排放 (吨)" align="center" prop="coal" >

src/views/iot/video/camera/index.vue

@@ -198,15 +198,13 @@
     />
 
     <!-- 添加或修改监控详情对话框 -->
-    <el-dialog
+    <dialog-template
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      class="n-dialog"
       :title="title"
-      :visible.sync="open"
+      :visible="open"
+      @close="open = false"
       width="750px"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="摄像头名称" prop="videoName">
@@ -402,23 +400,22 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button type="primary" size="mini" @click="submitForm"
           >确 定</el-button
         >
         <el-button @click="cancel" size="mini">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <!-- 摄像头导入对话框 -->
-    <el-dialog
+    <dialog-template
       :title="upload.title"
-      :visible.sync="upload.open"
+      :visible="upload.open"
       width="400px"
-      :close-on-click-modal="false"
+      @close="upload.open = false"
-      append-to-body
     >
-      <el-upload
+      <el-upload slot="dialog-center"
         ref="upload"
         :limit="1"
         accept=".xlsx, .xls"
@@ -450,11 +447,11 @@
           提示：仅允许导入“xls”或“xlsx”格式文件！
         </div>
       </el-upload>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button type="primary" @click="submitFileForm">确 定</el-button>
         <el-button @click="upload.open = false">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
@@ -475,6 +472,7 @@ import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import SelectInput from "../profile/SelectInput/index";
 
 import EDialogTableInput from "@/components/EDialogTableInput";
+import DialogTemplate from "@/components/DialogTemplate";
 import { getToken } from "@/utils/auth";
 
 const joinTypeOpt = {
@@ -652,6 +650,7 @@ export default {
     ShopLocation,
     SelectInput,
     EDialogTableInput,
+    DialogTemplate
   },
   data() {
     return {

src/views/iot/video/site/index.vue

@@ -130,15 +130,13 @@
 
     <!-- 添加或修改站点监控对话框 -->
     <div class="eldialog-div">
-      <el-dialog
+      <dialog-template
-        class="n-dialog"
         :title="title"
-        :visible.sync="open"
+        :visible="open"
         width="750px"
-        :close-on-click-modal="false"
+        @close="open = false"
-        :close-on-press-escape="false"
       >
-        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="110px">
           <el-row :gutter="20" v-show="tempType !== 'distri'">
             <el-col :span="24">
               <el-form-item label="所属项目" prop="projectName">
@@ -414,13 +412,13 @@
             <!-- </template> -->
           </el-row>
         </el-form>
-        <div slot="footer" class="dialog-footer form-button-div">
+        <div slot="dialog-footer" class="dialog-footer form-button-div">
           <el-button type="primary" size="mini" @click="submitForm"
             >确 定</el-button
           >
           <el-button size="mini" @click="cancel">取 消</el-button>
         </div>
-      </el-dialog>
+      </dialog-template>
     </div>
   </div>
 </template>
@@ -440,6 +438,7 @@ import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import EDialogTableInput from "@/components/EDialogTableInput";
 import { serviceApiDesc } from "@/config/dvr.config";
+import DialogTemplate from "@/components/DialogTemplate";
 const serverTypeOpt = {
   SRS: "SRS",
   QI_NIU: "七牛",
@@ -530,6 +529,7 @@ export default {
     Treeselect,
     ShopLocation,
     EDialogTableInput,
+    DialogTemplate,
   },
   data() {
     return {

src/views/monitor/job/index.vue

@@ -138,8 +138,8 @@
     />
 
     <!-- 添加或修改定时任务对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+    <dialog-template :title="title" :visible="open" @close="open = false" width="700px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form ref="form" :model="form" slot="dialog-center" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务名称" prop="jobName">
@@ -209,15 +209,15 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
 
     <!-- 任务日志详细 -->
-    <el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body :close-on-click-modal="false">
+    <dialog-template title="任务详细" :visible="openView" width="700px" @close="openView = false">
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
+      <el-form ref="form" slot="dialog-center" dialog-template :model="form" label-width="120px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
@@ -258,18 +258,20 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button @click="openView = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
 <script>
 import { listJob, getJob, delJob, addJob, updateJob, exportJob, runJob, changeJobStatus } from "@/api/monitor/job";
+import DialogTemplate from "@/components/DialogTemplate";
 
 export default {
   name: "Job",
+  components: {DialogTemplate},
   data() {
     return {
       // 遮罩层

src/views/monitor/job/log.vue

@@ -131,8 +131,8 @@
     />
 
     <!-- 调度日志详细 -->
-    <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+    <dialog-template title="调度日志详细" :visible="open" width="700px" @close="open = false">
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+      <el-form ref="form" slot="dialog-center" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
@@ -159,18 +159,21 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button @click="open = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
 <script>
 import { listJobLog, delJobLog, exportJobLog, cleanJobLog } from "@/api/monitor/jobLog";
+import DialogTemplate from "@/components/DialogTemplate";
+
 
 export default {
   name: "JobLog",
+  components: {DialogTemplate},
   data() {
     return {
       // 遮罩层

src/views/monitor/operlog/index.vue

@@ -143,8 +143,8 @@
     />
 
     <!-- 操作日志详细 -->
-    <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+    <dialog-template title="操作日志详细" :visible="open" width="700px" @close="open = false">
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+      <el-form ref="form" slot="dialog-center" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
@@ -179,18 +179,20 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button @click="open = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 
 <script>
 import { list, delOperlog, cleanOperlog, exportOperlog } from "@/api/monitor/operlog";
 
+import DialogTemplate from "@/components/DialogTemplate";
 export default {
   name: "Operlog",
+  components: {DialogTemplate},
   data() {
     return {
       // 遮罩层

src/views/personal/device/profile/runStarts.vue

@@ -41,17 +41,16 @@
       </div>
     </div>
 
-    <el-dialog
+    <dialog-template
-      append-to-body
-      class="device-run-state-dailog"
       title="查看数据"
-      :visible.sync="dialogShow"
+      :visible="dialogShow"
       width="700px"
       :close-on-click-modal="false"
       @close="dialogCloseCell"
       @opened="dialogOpen"
     >
       <run-state-table
+        slot="dialog-center"
         :dialogData="dialogData"
         :prodId="prodId"
         :pro_type="dialogData.funDataType"
@@ -59,14 +58,15 @@
         :deviceKey="deviceInfo.deviceKey"
         ref="showChart"
       />
-      <div slot="footer" class="dialog-footer">
+      <div slot="dialog-footer" class="dialog-footer">
         <el-button size="small" @click="dialogShow = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </dialog-template>
   </div>
 </template>
 <script>
 import { getDeviceFunList, getDeviceCmdList } from "@/api/iot/device";
+import DialogTemplate from "@/components/DialogTemplate";
 import { iotWebSocketBaseUrl } from "@/config/env";
 import RunStateTable from "./runStateTable";
 export default {
@@ -74,6 +74,7 @@ export default {
   props: ["prodId", "sourceId", "deviceInfo"],
   components: {
     RunStateTable,
+    DialogTemplate
   },
   data() {
     return {
@@ -102,6 +103,7 @@ export default {
       this.$refs.showChart.initDialog(this.dialogData);
     },
     dialogCloseCell() {
+      this.dialogShow = false;
       this.$refs.showChart.close();
     },
     // 创建ws

src/views/system/dept/index.vue

@@ -184,7 +184,7 @@ export default {
       // 表单校验
       rules: {
         parentId: [
-          { required: true, message: "上级部门不能为空", trigger: "blur" }
+          { required: false, message: "上级部门不能为空", trigger: "blur" }
         ],
         deptName: [
           { required: true, message: "部门名称不能为空", trigger: "blur" }