|
@@ -0,0 +1,251 @@
|
|
|
+<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>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="content-keyPoint"></div>
|
|
|
+ <div class="content-showType"></div>
|
|
|
+ <div class="content-point">
|
|
|
+ <div class="content-point-left">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div style="height:1000px"></div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div class="content-point-right">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div style="height:1000px"></div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="content-repair"></div>
|
|
|
+ <div class="content-media">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div style="height:1000px"></div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
|
|
|
+ import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
|
|
|
+ import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
|
|
|
+ import selectRadio from "@/components/ledger/details/detail/selectRadio";
|
|
|
+
|
|
|
+ import { getDataDictionary, queryEquip, BeatchQueryParam } from "@/api/scan/request";
|
|
|
+ import { mapGetters, mapActions } from "vuex";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "deviceDetails",
|
|
|
+ components: {exhibitionBaseInformation, exhibitionFile, exhibitionImage, selectRadio},
|
|
|
+ created() {
|
|
|
+ this.id = this.$route.query.equipId;
|
|
|
+ this.name = this.$route.query.equipName;
|
|
|
+ this.code = this.$route.query.equipCode;
|
|
|
+ this.type = this.$route.query.type;
|
|
|
+ this.list = this.$route.query.data;
|
|
|
+ this.getData();
|
|
|
+ console.log(this.$route.query)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("layout", ["projectId", "secret", "userId"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '', //当前设备id
|
|
|
+ name: '', //当前设备本地名称
|
|
|
+ code: '', //当前设备的本地编码
|
|
|
+ type: '', //设备类型
|
|
|
+ list: [], //设备列表
|
|
|
+ pointData: [], //信息点数据
|
|
|
+ exampleData: {}, //实例数据
|
|
|
+ selectRadio: {
|
|
|
+ information: '设备信息点',
|
|
|
+ radioList: [
|
|
|
+ {
|
|
|
+ value: '显示需采集信息点',
|
|
|
+ label: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '显示需采集信息点',
|
|
|
+ label: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '显示需采集信息点',
|
|
|
+ label: '3'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ exhibitionBaseInformation: {
|
|
|
+ //产品说所有信息的key和value是动态生成的
|
|
|
+ base: {
|
|
|
+ baseInformation: '基本信息',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ text: '设备本地编码:',
|
|
|
+ val: '123--22:'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '设备二维码图片:',
|
|
|
+ val: '2:'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ manufacture: {
|
|
|
+ manufacturerParameter: '台账参数 / 设备厂家',
|
|
|
+ },
|
|
|
+ supplier: {
|
|
|
+ supplierParameters: '台账参数 / 供应购买'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exhibitionFile: {},
|
|
|
+ exhibitionImage: {
|
|
|
+ title:'图片'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取表头和实例数据(动态数据在组件中获取,在此格式化请求参数)
|
|
|
+ getData () {
|
|
|
+ let params1 = {
|
|
|
+ data: {
|
|
|
+ Orders: "sort asc",
|
|
|
+ PageNumber: 1,
|
|
|
+ PageSize: 1000
|
|
|
+ },
|
|
|
+ type: this.type
|
|
|
+ }, params2 = {
|
|
|
+ Filters: `EquipID='${this.id}'`,
|
|
|
+ };
|
|
|
+ let promise1 = new Promise((resolve, reject) => {
|
|
|
+ getDataDictionary(params1, res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let promise2 = new Promise((resolve, reject) => {
|
|
|
+ queryEquip(params2, res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ Promise.all([promise1, promise2]).then(values => {
|
|
|
+ this.pointData = values[0].Content;
|
|
|
+ this.exampleData = values[1].Content[0];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goBack () {
|
|
|
+ this.$router.push({path: "/ledger/facility"})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ projectId() {
|
|
|
+ this.$router.push({path: "/ledger/facility"})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .tableDisplay {
|
|
|
+ .header {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .details-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 20px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100% - 82px);
|
|
|
+ .content-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ .content-keyPoint {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .content-showType {
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-bottom: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .content-point {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ height: calc(100% - 160px);
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .content-point-left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .content-point-right {
|
|
|
+ width: 400px;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right {
|
|
|
+ width: 400px;
|
|
|
+ margin-left: 10px;
|
|
|
+ .content-repair {
|
|
|
+ height: 50px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .content-media {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|