Browse Source

添加组件,基本数据展示

shaun-sheep 5 years ago
parent
commit
d65a998798

+ 29 - 0
src/components/ledger/details/detail/cruxDialog.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-dialog title="关键信息点" :visible.sync="dialogFormVisible">
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: "cruxDialog",
+    data() {
+      return {
+        dialogFormVisible: false
+      }
+    },
+    methods: {
+      dialogOpen() {
+        this.dialogFormVisible = true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

+ 42 - 68
src/components/ledger/details/detail/exhibitionBaseInformation.vue

@@ -1,64 +1,37 @@
 <template>
 <div class="exhibition-baseInformation">
-  <section>
-    <p class="base">基本信息</p>
-    <article>
-      <el-row>
-        <!--v-if-->
-        <el-col :span="12">
-          <span class="ml-10">xxxx:</span>
-          <el-popover
-            placement="top-start"
-            width="160"
-            trigger="hover"
-            v-model="visible">
-            <p>xxxxxxxxx</p>
-            <div style="text-align: right; margin: 0">
-              <el-button
-                type="primary"
-                size="mini"
-                @click="handleCopy"
-              >复制N
-              </el-button>
-            </div>
-            <el-button
-              slot="reference"
-              type="text"
-            >xxxx</el-button>
-          </el-popover>
-        </el-col>
-<!--        test -->
-        <!--
-        v-else-if
-           <el-col :span="8"></el-col>
-           v-else
-           <el-col :span="6"></el-col>
-        -->
-        <el-col :span="12">
-          <span class="ml-10">xxxx:</span>
-          <el-popover
-            placement="top-start"
-            width="160"
-            trigger="hover"
-            v-model="visible">
-            <p>xxxxxxxxx</p>
-            <div style="text-align: right; margin: 0">
-              <el-button
-                type="primary"
-                size="mini"
-                @click="handleCopy"
-              >复制
-              </el-button>
-            </div>
-            <el-button
-              slot="reference"
-              type="text"
-            >xxxx</el-button>
-          </el-popover>
-        </el-col>
+  <section v-for="(val,key,i) in information">
+    <h4 class="base">{{key}}</h4>
+    <div v-for="(value,keys,index) in val.paths"
+         style="width: 47%;display: inline-block;margin-left: 20px">
+      <span> {{value.InfoPointName}}:</span>
+      <span>{{value.Value}}</span>
+
+      <!--          <el-popover-->
+
+
+      <!--            placement="top-start"-->
+      <!--            width="160"-->
+      <!--            trigger="hover"-->
+      <!--            v-model="visible">-->
+      <!--            <p>xxxxxxxxx</p>-->
+      <!--            <div style="text-align: right; margin: 0">-->
+      <!--              <el-button-->
+      <!--                type="primary"-->
+      <!--                size="mini"-->
+      <!--                @click="handleCopy"-->
+      <!--              >复制N-->
+      <!--              </el-button>-->
+      <!--            </div>-->
+      <!--            <el-button-->
+      <!--              slot="reference"-->
+      <!--              type="text"-->
+      <!--            >xxxx</el-button>-->
+      <!--          </el-popover>-->
+
+
+    </div>
 
-      </el-row>
-    </article>
 
   </section>
 </div>
@@ -66,18 +39,19 @@
 
 <script>
     export default {
-        name: "exhibition-baseInformation",
+      name: "exhibition-baseInformation",
+      props: ['information', 'exampleData'],
       data() {
-          return {
-            visible: false,
-          }
+        return {
+          visible: false,
+        }
       },
-      methods:{
-          handleCopy() {
-            this.visible = false
-            document.execCommand('Copy')
-            this.$message.success('复制成功')
-          }
+      methods: {
+        handleCopy() {
+          this.visible = false
+          document.execCommand('Copy')
+          this.$message.success('复制成功')
+        }
       }
     }
 </script>

+ 20 - 3
src/components/ledger/details/detail/exhibitionCrux.vue

@@ -1,13 +1,26 @@
 <template>
   <section class="exhibition-crux">
-    <p class="title">{{exhibitionCrux.title}}</p>
+    <p class="title">{{exhibitionCrux.title}}
+      <span class="el-icon-s-tools setting" @click="setting"></span></p>
+  <cruxDialog ref="setting"/>
   </section>
 </template>
 
 <script>
+  import cruxDialog from "./cruxDialog";
+
   export default {
     name: "exhibition-crux",
-    props: ['exhibitionCrux']
+    props: ['exhibitionCrux'],
+    components: {cruxDialog},
+    data() {
+      return {}
+    },
+    methods: {
+      setting() {
+        this.$refs.setting.dialogOpen()
+      }
+    }
   }
 </script>
 
@@ -18,8 +31,12 @@
       margin: 10px 40px 10px 10px;
       font-weight: 600;
       text-indent: 10px;
-      display: inline-block;
+      display: block;
+      overflow: hidden;
 
+      .setting {
+        float: right;
+      }
     }
   }
 </style>

+ 34 - 24
src/views/ledger/facility/details/index.vue

@@ -1,28 +1,5 @@
 <template>
   <div class="tableDisplay">
-    <!-- <el-row :gutter="24">
-      <el-col :span="18">
-        设备信息点
-        <div class="grid-content bgc-white">
-          <selectRadio :selectRadio="selectRadio"/>
-          <el-row>
-            :span的值可以根据条件改变 是一个24 or 两个 16:8
-            <el-col :span="16">
-              <exhibitionBaseInformation/>
-            </el-col>
-            <el-col :span="8">
-              能耗信息点
-            </el-col>
-          </el-row>
-
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="grid-content bgc-white">
-          <exhibitionImage :exhibitionImage="exhibitionImage"/>
-        </div>
-      </el-col>
-    </el-row> -->
     <div class="header">
       <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
       <span class="details-title"><b>{{name}} - {{code}}</b></span>
@@ -39,7 +16,11 @@
           <div class="content-point-left">
             <el-scrollbar style="height:100%;">
               <div style="height:1000px">
-                <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
+                <exhibitionBaseInformation
+                  :exhibitionBaseInformation="exhibitionBaseInformation"
+                  :information="information"
+                  :exampleData="exampleData"
+                />
               </div>
             </el-scrollbar>
           </div>
@@ -110,6 +91,7 @@
         list: [], //设备列表
         pointData: [], //信息点数据
         exampleData: {}, //实例数据
+        information:{},//传给组件
         selectRadio: {
           information: '设备信息点',
           radioList: [
@@ -187,6 +169,34 @@
         Promise.all([promise1, promise2]).then(values => {
           this.pointData = values[0].Content;
           this.exampleData = values[1].Content[0];
+          let objectList = {}
+          //
+          const result = {}
+
+          values[0].Content.forEach(i => {
+            if(  this.exampleData.hasOwnProperty(i.Path)) {
+              i.value = this.exampleData[i.Path]
+              console.log(i.InfoPointName,i.value,'======')
+            }
+            if (result[`${i.FirstName}${i.SecondName? '/'+i.SecondName:''}`]) {
+              result[`${i.FirstName}${i.SecondName? '/'+i.SecondName:''}`].paths.push({
+                Path:i.Path,
+                InfoPointName: i.InfoPointName,
+                InfoPointCode: i.InfoPointCode,
+                Value:i.value
+              })
+            } else {
+              result[`${i.FirstName}${i.SecondName? '/'+i.SecondName:''}`] = {
+                paths: [{
+                  Path:i.Path,
+                  InfoPointName: i.InfoPointName,
+                  InfoPointCode: i.InfoPointCode,
+                  Value:i.value
+                }]
+              }
+            }
+          })
+          this.information = result
         })
       },
       goBack () {