123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <div class="exhibition-baseInformation">
- <section v-for="(val,key,i) in exhibitionBaseInformation.information">
- <h4 class="base">{{key || '信息'}}</h4>
- <div class="infoPoint-item" v-for="(value,keys,index) in val.paths">
- <span> {{value.InfoPointName}}:</span>
- <el-popover
- v-if="value.Path == 'EquipQRCode' || value.Path == 'RoomQRCode' || value.Path == 'ShaftQRCode'"
- placement="top"
- width="360"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
- <div style="overflow:hidden;">
- <div style="float:left;width: 60%">
- <img
- v-if="value.Value"
- style="width:200px;height:200px;"
- :src="'/image-service/common/file_get/'+ value.Value +'?systemId=dataPlatform'"
- alt="二维码"
- >
- <span v-else>数据暂无</span>
- </div>
- <div style="float:right;width: 40%;margin-top: 30px">
- <span>{{value.Value}}</span>
- </div>
- </div>
- <div style="text-align: center; margin: 0">
- <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
- </div>
- <el-button slot="reference" type="text">{{value.Value ? '有' :'-'}}</el-button>
- </el-popover>
- <el-popover
- v-else-if="Array.isArray(value.Value) && value.InputMode== 'F2'"
- placement="top"
- width="250"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
- <div v-for="(pic,index) in value.Value">
- <div>图纸名称:{{pic.Name}}
- <el-button style="" type="text" size="mini" @click="downloadFile(pic.Key)">下载</el-button>
- </div>
- </div>
- <el-button slot="reference" type="text">{{value.Value? '有':'-'}}</el-button>
- </el-popover>
- <el-popover
- v-else-if="Array.isArray(value.Value) && value.InputMode=='N2'"
- placement="top"
- width="600"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
- <p style="height: 300px;overflow: auto">{{value.Value}}</p>
- <div style="text-align: center; margin: 0">
- <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
- </div>
- <el-button slot="reference" type="text">{{value.Value ? '有' :'-'}}</el-button>
- </el-popover>
- <el-popover
- v-else-if="value.Value && value.Value.length && `${value.InfoPointName}:${value.Value}`.length>23"
- placement="top"
- width="160"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
- <p>{{value.Value}}</p>
- <div style="text-align: center; margin: 0">
- <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
- </div>
- <el-button slot="reference" type="text">{{handleName(value.InfoPointName, value.Value)}}</el-button>
- </el-popover>
- <span v-else>{{value.Value}}</span>
- </div>
- </section>
- </div>
- </template>
- <script>
- export default {
- name: "exhibition-baseInformation",
- props: ['exhibitionBaseInformation'],
- data() {
- return {}
- },
- methods: {
- downloadFile(key) {
- window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
- },
- handleCopy(data) {
- let oInput = document.createElement('input')
- oInput.value = data
- document.body.appendChild(oInput)
- oInput.select()
- document.execCommand('Copy')
- this.$message.success('复制成功')
- oInput.remove()
- },
- handleName(infoPoint, val) {
- let text = `${infoPoint}:${val}`
- return text.length > 23 ? val.substring(0, 23-`${infoPoint}:`.length) + '...' : val
- }
- }
- }
- </script>
- <style scoped lang="less">
- .exhibition-baseInformation {
- section {
- /*border: 1px solid #eeeeee;*/
- /*margin: 10px;*/
- .base {
- margin: 10px;
- font-weight: 600;
- text-indent: 10px;
- border-bottom: 1px dashed #eee;
- }
- /deep/ .el-button--text {
- color: #555 !important;
- font-size: 14px;
- }
- }
- .ml-10 {
- margin-left: 10px;
- text-indent: 10px;
- }
- .infoPoint-item {
- width: 350px;
- display: inline-block;
- margin-left: 20px;
- }
- }
- </style>
|