台账+样式

ems-ui/package.json

@@ -43,7 +43,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "^3.25.3",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "echarts": "5.4.0",
     "element-resize-detector": "^1.2.4",
     "element-ui": "2.15.14",

ems-ui/src/views/basecfg/meterdevc/index.vue

@@ -350,6 +350,7 @@ export default {
       } else if (row.objType === 2) {
         devTreeByFacs(row.areaCode).then(response => {
           this.objCodeOptions = response.data
+
         })
       }
     },
@@ -452,6 +453,7 @@ export default {
       if (objType === 1) {
         areaTreeSelectByCode('Area', this.form.areaCode).then(response => {
           this.objCodeOptions = response.data
+          console.log("onjcodeOPtion!!!",this.objCodeOptions)
         })
       } else if (objType === 2) {
         devTreeByFacs(this.form.areaCode).then(response => {

ems-ui/src/views/devmgr/el/index.vue

@@ -11,15 +11,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="对象代码" prop="objCode">
-        <el-input
-          v-model="queryParams.objCode"
-          placeholder="请输入对象代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="对象名称" prop="objName">
+      <el-form-item label="目标对象" prop="objName">
         <el-input
           v-model="queryParams.objName"
           placeholder="请输入对象名称"
@@ -27,6 +19,14 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="创建时间" prop="recordTime">
+        <el-date-picker clearable
+                        v-model="queryParams.recordTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="请选择日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item label="维护标题" prop="maintainTitle">
         <el-input
           v-model="queryParams.maintainTitle"
@@ -97,31 +97,25 @@
 
     <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-
       <el-table-column label="记录编号" align="center" prop="recordCode" />
-      <el-table-column label="对象类型" align="center" prop="objType">
+      <el-table-column label="目标对象" align="center" prop="objName">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.device_type" :value="scope.row.objType"/>
+          <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{ scope.row.objName }}</span>
+          <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="对象代码" align="center" prop="objCode" />
-      <el-table-column label="对象名称" align="center" prop="objName" />
       <el-table-column label="安装位置" align="center" prop="insLocation" />
       <el-table-column label="维护标题" align="center" prop="maintainTitle" />
-      <el-table-column label="维护内容" align="center" prop="maintainContent" />
+      <el-table-column label="创建时间" align="center" prop="recordTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="维护人" align="center" prop="maintainPerson" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ems:rbook:edit']"
-          >修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:rbook:remove']">
-            删除</el-button>
-
+          <el-button size="mini" type="text"  icon="el-icon-document" @click="handleViewRec(scope.row)">
+            查看</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -133,14 +127,76 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <!-- 查看设备台账对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="记录编号" prop="recordCode">
+          <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly" />
+        </el-form-item>
+        <el-form-item label="对象类型" >
+          <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions" :disabled="isViewOnly">
+            <el-option
+              v-for="dict in dict.type.device_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="对象代码" prop="objCode" >
+          <el-select v-model="form.objCode" placeholder="请输入对象代码" @change="handleSelect" :disabled="isViewOnly">
+            <el-option
+              v-for="item in AllCode"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="recordTime">
+          <el-date-picker clearable
+                          v-model="form.recordTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="请选择日期 yyyy-MM-dd HH:mm:ss"
+                          :disabled="isViewOnly">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="目标对象" prop="objName" >
+          <el-input v-model="form.objName" placeholder="请输入对象名称" :disabled="isViewOnly" />
+        </el-form-item>
+        <el-form-item label="安装位置" prop="insLocation">
+          <el-input v-model="form.insLocation" placeholder="请输入安装位置" :disabled="isViewOnly" />
+        </el-form-item>
+        <el-form-item label="维护标题" prop="maintainTitle">
+          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" :disabled="isViewOnly" />
+        </el-form-item>
+        <el-form-item label="维护内容">
+          <!-- 只读模式下显示内容 -->
+          <div v-if="isViewOnly" v-html="form.maintainContent"></div>
+          <!-- 编辑模式下显示编辑器 -->
+          <editor v-else v-model="form.maintainContent" :min-height="192"></editor>
+        </el-form-item>
+        <el-form-item label="维护人" prop="maintainPerson">
+          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" :disabled="isViewOnly" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <!-- 只在非查看模式显示提交按钮 -->
+        <el-button type="primary" v-if="!isViewOnly" @click="submitForm">确 定</el-button>
+        <!-- 编辑按钮，点击切换到编辑模式 -->
+        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit" v-hasPermi="['ems:rbook:edit']">编辑</el-button>
+        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedRow)" v-hasPermi="['ems:rbook:remove']">删除</el-button>
+        <el-button  v-if="isViewOnly" @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
 
     <!-- 添加或修改设备台账对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="记录编号" prop="recordCode">
           <el-input v-model="form.recordCode" placeholder="请输入记录编号" />
         </el-form-item>
-<!--        prop="objType"-->
         <el-form-item label="对象类型" >
           <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions" >
             <el-option
@@ -151,6 +207,9 @@
             ></el-option>
           </el-select>
         </el-form-item>
+<!--        <el-form-item label="计量对象" prop="objCode">-->
+<!--          <treeselect v-model="objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" ref="treeObjCodeOptions" />-->
+<!--        </el-form-item>-->
         <el-form-item label="对象代码" prop="objCode" >
           <el-select v-model="form.objCode" placeholder="请输入对象代码" @change="handleSelect"  >
             <el-option
@@ -161,7 +220,16 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="对象名称" prop="objName" >
+        <el-form-item label="创建时间" prop="recordTime">
+          <el-date-picker clearable
+                          v-model="form.recordTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="请选择日期 "
+                          :disabled="isViewOnly">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="目标对象" prop="objName" >
           <el-input v-model="form.objName" placeholder="请输入对象名称" />
         </el-form-item>
         <el-form-item label="安装位置" prop="insLocation">
@@ -189,12 +257,14 @@
 import { listRbook, getRbook, delRbook, addRbook, updateRbook } from "@/api/device/rbook";
 import {listAllFacs} from '@/api/basecfg/emsfacs'
 import {devTreeByFacs, listDevice, listDevRecursionByArea} from '@/api/device/device'
-import {listBuildingByArea} from "@/api/basecfg/building";
+import Treeselect from "@riophae/vue-treeselect";
 export default {
   name: "Rbook",
+  components: {Treeselect},
   dicts: ['device_type'],
   data() {
     return {
+      isViewOnly: false, // 添加这个标志变量
       // 遮罩层
       loading: true,
       // 选中数组
@@ -213,13 +283,19 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      addOrUpdateOpen:false,
       //能源设施全部数据
       AllCode:[],
+      objCodeOptions: [],
       areaCode: '', // 你需要根据实际情况设置或获取 areaCode
+      // 日期范围
+      dateRange: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        selectedRow:null,
+        recordTime: null,
         recordCode: null,
         objType: null,
         objCode: null,
@@ -228,6 +304,7 @@ export default {
         maintainTitle: null,
         maintainContent: null,
         maintainPerson: null,
+        recordTimeRange:[]
       },
       // 表单参数
       form: {},
@@ -245,6 +322,9 @@ export default {
         maintainTitle: [
           { required: true, message: "维护标题不能为空", trigger: "blur" }
         ],
+        recordTime: [
+          { required: true, message: "日期 yyyy-MM-dd HH:mm:ss不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -256,13 +336,17 @@ export default {
     getList() {
       this.loading = true;
       listRbook(this.queryParams).then(response => {
+        console.log("设备台账搜索参数！！！！！",this.queryParams)
         this.rbookList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
+
     // 取消按钮
     cancel() {
+      // this.isViewOnly = true; // 切换回只读模式
+      this.addOrUpdateOpen=false;
       this.open = false;
       this.reset();
     },
@@ -274,14 +358,18 @@ export default {
         objType: null,
         objCode: null,
         objName: null,
+        recordTime: null,
         insLocation: null,
         maintainTitle: null,
         maintainContent: null,
         maintainPerson: null,
         createTime: null,
-        updateTime: null
+        updateTime: null,
+
       };
       this.resetForm("form");
+      this.dateRange = [];
+      // this.isViewOnly = true; // 重置为可编辑模式
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -293,16 +381,16 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-
     handleSelect(value){
       //获取能源设施所有信息
-      this.loading = true
+      // this.loading = true
       listAllFacs(this.areaCode).then(response =>{
         const data = response.data;
         //循环输出
@@ -312,11 +400,10 @@ export default {
             this.form.insLocation=data[i].refAreaName
           }
         }
-        this.loading = false;
+        // this.loading = false;
       })
-
       ///获取能源设备所有信息
-      this.loading = true
+      // this.loading = true
       listDevRecursionByArea(this.queryParams).then(response => {
         this.total = response.total
         //循环输出
@@ -326,40 +413,61 @@ export default {
             this.form.insLocation=response.rows[i].areaPath
           }
         }
-        this.loading = false
+        // this.loading = false
       })
 
     },
+
     changeObjOptions(objType) {
-      if (objType == 1){
-        this.loading = true
-        listAllFacs(this.areaCode).then(response =>{
-         const data = response.data;
-          this.AllCode = [];
-          //循环输出
-          for (let i = 0; i <data.length ; i++) {
-            this.AllCode.push({ value:data[i].facsCode, label: data[i].facsCode}); // 添加到数组
-          }
-          this.loading = false;
-        })
-      }else if(objType == 0){
-        this.loading=true
-        listDevRecursionByArea(this.queryParams).then(response => {
-          this.AllCode = [];
-             //循环输出
-          for (let i = 0; i <this.total ; i++) {
-            this.AllCode.push({ value:response.rows[i].deviceCode, label: response.rows[i].deviceCode}); // 添加到数组
-          }
-          this.loading = false
+      if (objType == 1) {
+        // this.loading = true;
+        listAllFacs(this.areaCode).then(response => {
+          this.objCodeOptions = response.data;
+          this.AllCode = this.objCodeOptions.map(item => ({
+            value: item.facsCode,
+            label: item.facsCode
+          }));
+          // this.loading = false;
+          // 重置对象代码和相关字段，但不刷新整个表单
+          this.form.objCode = null;
+          this.form.objName = null;
+          this.form.insLocation = null;
+        });
+      } else if (objType == 0) {
+        // this.loading = true;
+        devTreeByFacs(this.areaCode).then(response => {
+          this.objCodeOptions = response.data
+          this.AllCode = response.rows.map(row => ({
+            value: row.deviceCode,
+            label: row.deviceCode
+          }));
         })
+        // listDevRecursionByArea(this.queryParams).then(response => {
+        //   this.total = response.total;
+          this.AllCode = response.rows.map(row => ({
+            value: row.deviceCode,
+            label: row.deviceCode
+          }));
+        //   // this.loading = false;
+        //   // 重置对象代码和相关字段，但不刷新整个表单
+        //   this.form.objCode = null;
+        //   this.form.objName = null;
+        //   this.form.insLocation = null;
+        // });
       }
     },
 
 
-    /** 新增按钮操作 */
+    /**编辑按钮操作*/
+    handleEdit() {
+      this.isViewOnly = false; // 切换到编辑模式
+      this.title = '编辑设备台账';
+    },
+
+    // /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.open = true;
+      this.addOrUpdateOpen = true;
       this.title = "添加设备台账";
     },
     /** 修改按钮操作 */
@@ -368,10 +476,24 @@ export default {
       const id = row.id || this.ids
       getRbook(id).then(response => {
         this.form = response.data;
-        this.open = true;
+        this.addOrUpdateOpen = true;
         this.title = "修改设备台账";
       });
     },
+    /** 查看按钮操作*/
+    handleViewRec(row){
+      this.selectedRow=row
+      // this.reset();
+      const id = row.id || this.ids
+      getRbook(id).then(response => {
+        this.form = response.data;
+        console.log("查看按钮触发的事件",response.data)
+        this.open = true;
+        this.title = "查看设备台账";
+        this.isViewOnly = true; // 设置为查看模式
+      });
+    },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -379,19 +501,23 @@ export default {
           if (this.form.id != null) {
             updateRbook(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
+              console.log('点击确认后response里面的内容',response)
               this.open = false;
+              this.addOrUpdateOpen=false
               this.getList();
             });
           } else {
             addRbook(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
+              this.addOrUpdateOpen=false
               this.getList();
             });
           }
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
@@ -400,8 +526,10 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
+       this.open=false
       }).catch(() => {});
     },
+
     /** 导出按钮操作 */
     handleExport() {
       this.download('ems/rbook/export', {

ems-ui/src/views/mgr/charging.vue

@@ -35,25 +35,42 @@
                   </el-date-picker>
                 </div>
                 <el-table :data="historyData" style="width: 100%;margin-bottom:20px" max-height="300px">
-                  <el-table-column prop="meteredTime" align="center" label="账单月份">
+                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                   </el-table-column>
-                  <el-table-column prop="meteredValue" align="center" label="商户用量">
+                  <el-table-column
+                    prop="meteredValue"
+                    align="center"
+                    :label="`商户用量(${queryParams.meterCls === 45 ? 'kW-h' : '吨'})`">
+                    <template slot-scope="scope">
+                      {{ scope.row.meteredValue }}
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="meteredPrice" align="center" label="商户金额">
+                  <el-table-column prop="meteredPrice" align="center" label="商户金额(￥)">
                   </el-table-column>
-                  <el-table-column prop="sharedValue" align="center" label="公摊用量">
+                  <el-table-column
+                    prop="sharedValue"
+                    align="center"
+                    :label="`公摊用量(${queryParams.meterCls === 45 ? 'kW-h' : '吨'})`">
+                    <template slot-scope="scope">
+                      {{ scope.row.meteredValue }}
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="sharedPrice" align="center" label="公摊金额">
+                  <el-table-column prop="sharedPrice" align="center" label="公摊费用(￥)">
                   </el-table-column>
-                  <el-table-column prop="totalValue" align="center" label="总用量">
+                  <el-table-column
+                    prop="totalValue"
+                    align="center"
+                    :label="`总用量(${queryParams.meterCls === 45 ? 'kW-h' : '吨'})`">
+                    <template slot-scope="scope">
+                      {{ scope.row.meteredValue }}
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="totalPrice" align="center" label="总金额">
+                  <el-table-column prop="totalPrice" align="center" label="总金额(￥)">
                   </el-table-column>
                 </el-table>
                 <BaseChart width="100%" height="300px" :option="overviewOptions" />
               </div>
             </div>
-
           </el-tab-pane>
           <el-tab-pane label="个户" name="second">
             <div class="custom-form">
@@ -65,20 +82,26 @@
               <div class="panel-title">当月数据</div>
               <div class="panel-body">
                 <el-table :data="currentData" style="width: 100%">
-                  <el-table-column prop="meteredTime" align="center" label="账单月份">
+                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                   </el-table-column>
-                  <el-table-column prop="meteredValue" align="center" label="用量">
+                  <el-table-column
+                    prop="meteredValue"
+                    align="center"
+                    :label="`用量(${queryParams.meterCls === 45 ? 'kW-h' : '吨'})`">
+                    <template slot-scope="scope">
+                      {{ scope.row.meteredValue }}
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="meteredPrice" align="center" label="金额">
+                  <el-table-column prop="meteredPrice" align="center" label="金额(￥)">
                   </el-table-column>
-                  <el-table-column prop="sharedPrice" align="center" label="公摊价格">
+                  <el-table-column prop="sharedPrice" align="center" label="公摊费用(￥)">
                   </el-table-column>
                   <el-table-column prop="sharedComputeType" align="center" label="公摊类型">
                     <template slot-scope="scope">
                       {{formatDict(scope.row.sharedComputeType,'computeTypeOptions')}}
                     </template>
                   </el-table-column>
-                  <el-table-column prop="totalPrice" align="center" label="总金额">
+                  <el-table-column prop="totalPrice" align="center" label="总金额(￥)">
                   </el-table-column>
                 </el-table>
               </div>
@@ -93,11 +116,17 @@
                   </el-date-picker>
                 </div>
                 <el-table :data="historyData" style="width: 100%;margin-bottom:20px" max-height="300px">
-                  <el-table-column prop="meteredTime" align="center" label="账单月份">
+                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                   </el-table-column>
-                  <el-table-column prop="meteredValue" align="center" label="用量">
+                  <el-table-column
+                    prop="meteredValue"
+                    align="center"
+                    :label="`用量(${queryParams.meterCls === 45 ? 'kW-h' : '吨'})`">
+                    <template slot-scope="scope">
+                      {{ scope.row.meteredValue }}
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="meteredPrice" align="center" label="金额">
+                  <el-table-column prop="meteredPrice" align="center" label="金额(￥)">
                   </el-table-column>
                   <!-- <el-table-column prop="sharedPrice" align="center" label="公摊价格">
                   </el-table-column>
@@ -106,7 +135,7 @@
                       {{formatDict(scope.row.sharedComputeType,'computeTypeOptions')}}
                     </template>
                   </el-table-column> -->
-                  <el-table-column prop="totalPrice" align="center" label="总价">
+                  <el-table-column prop="totalPrice" align="center" label="总价(￥)">
                   </el-table-column>
                 </el-table>
                 <BaseChart width="100%" height="300px" :option="elecOptions" />
@@ -134,6 +163,7 @@ export default {
     const nowDay = new Date()
     const lastMonth = new Date(nowDay.getFullYear(), nowDay.getMonth() - 1)
     return {
+
       activeTab: 'first',
       // 总条数
       areaName: undefined,
@@ -458,7 +488,9 @@ export default {
     }
   },
   methods: {
-    meterClsChange() {
+
+    meterClsChange(value) {
+      this.queryParams.meterCls = value;
       this.getList('current')
       this.getList()
     },

ems-ui/src/views/tool/gen/index.vue

@@ -244,6 +244,7 @@ export default {
     getList() {
       this.loading = true;
       listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        console.log("设备台账搜索参数！！！！！",this.queryParams)
           this.tableList = response.rows;
           this.total = response.total;
           this.loading = false;

ems-ui/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://172.192.13.80:9100/`,
+        target: `http://127.0.0.1:9100/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API + '/ems']: process.env.EMS_REWRITE_URL,