123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <template>
- <section class="exhibition-crux">
- <p class="title">
- <span class="iconfont icon-juxing"></span>
- {{exhibitionCrux.title}}
- <span class="icon-shezhi iconfont setting" @click="setting"></span></p>
- <div>
- <div v-if="exhibitionCrux.cruxArray.length">
- <div class="crux-list" v-for="(item,index) in exhibitionCrux.cruxArray" :key="index">{{item.name}}:
- <el-popover
- v-if="item.Path == 'equipQRCode' || item.Path == 'roomQRCode' || item.Path == 'shaftQRCode'"
- placement="top"
- width="360"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
- <div style="overflow:hidden;">
- <div style="float:left;width: 60%">
- <img
- style="width:200px;height:200px;"
- :src="'/image-service/common/file_get/'+ item.value +'?systemId=dataPlatform'"
- alt="二维码"
- >
- </div>
- <div style="float:right;width: 40%;margin-top: 30px">
- <span>{{item.value}}</span>
- </div>
- </div>
- <div style="text-align: center; margin: 0">
- <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
- </div>
- <el-button slot="reference" type="text">{{item.value ? '有' :'-'}}</el-button>
- </el-popover>
- <el-popover
- v-else-if="Array.isArray(item.value) && item.dataType== 'ATTACHMENT'"
- placement="right"
- width="250"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
- <div v-for="(pic,index) in item.value">
- <div>图纸名称:{{ pic.name }}
- <el-button size="mini" style="" type="text" @click="downloadFile(pic.key)">下载</el-button>
- </div>
- </div>
- <el-button slot="reference" type="text">{{item.value? '有':'-'}}</el-button>
- </el-popover>
- <el-popover
- v-else-if="item.value && item.value.length && `${item.InfoPointName}:${item.value}`.length>21"
- placement="top"
- width="160"
- trigger="hover">
- <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
- <p>{{item.value}}</p>
- <div style="text-align: center; margin: 0">
- <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
- </div>
- <el-button slot="reference" type="text">{{handleName(item.InfoPointName, item.value)}}</el-button>
- </el-popover>
- <span v-else>{{item.value}}</span>
- </div>
- </div>
- </div>
- <cruxDialog
- ref="setting"
- :crux="exhibitionCrux.allMessage"
- :type="type"
- @cruxSuccess="cruxSuccess"
- />
- </section>
- </template>
- <script>
- import cruxDialog from "./cruxDialog";
- export default {
- name: "exhibition-crux",
- props: ['exhibitionCrux','type'],
- components: {cruxDialog},
- data() {
- return {
- list: []
- }
- },
- methods: {
- downloadFile(key) {
- window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
- },
- setting() {
- this.$refs.setting.dialogOpen()
- },
- cruxSuccess() {
- this.$emit('cruxSuccess')
- },
- 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 value = val;
- if (Array.isArray(value)) {
- value = JSON.stringify(val)
- }
- let text = `${infoPoint}:${value}`;
- return text.length > 21 ? value.substring(0, 21-`${infoPoint}:`.length) + '...' : value;
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .exhibition-crux {
- padding: 10px 0;
- /deep/ .el-button--text {
- color: #555 !important;
- font-size: 14px;
- }
- .title {
- /*border-left: 8px solid black;*/
- margin: 0 20px 0 10px;
- font-weight: 600;
- /*text-indent: 10px;*/
- display: block;
- overflow: hidden;
- .setting {
- float: right;
- }
- }
- .crux-list {
- display: inline-block;
- width: 315px;
- margin-left: 20px;
- vertical-align: text-top;
- }
- }
- </style>
|