| New file |
| | |
| | | <template> |
| | | <div id="newPushDetail"> |
| | | <header> |
| | | <img src="../../assets/images/homeLogin.png" alt="" srcset=""> |
| | | </header> |
| | | <Col v-if="show" class="demo-spin-col" span="24"> |
| | | <Spin fix> |
| | | <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon> |
| | | <div>Loading</div> |
| | | </Spin> |
| | | </Col> |
| | | <main v-else> |
| | | <div class="item" v-for="item in this.arr1"> |
| | | <div class="left">{{ item.Name ? item.Name.replace('事件', '').replace('系统', '') + ':' : '--' }}</div> |
| | | <div class="right"> {{ item.Value ? item.Value : '--' }}</div> |
| | | </div> |
| | | |
| | | <div class="item"> |
| | | <div class="left">公司名称:</div> |
| | | <div class="right"> {{ content.CompanyName ? content.CompanyName : '--' }}</div> |
| | | |
| | | </div> |
| | | <div class="item"> |
| | | <div class="left">事件类别:</div> |
| | | <div class="right"> {{ content.EventType ? content.EventType : '--' }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="left">风险等级:</div> |
| | | <div class="right"> {{ content.WarnLevelName ? content.WarnLevelName : '--' }} </div> |
| | | </div> |
| | | <div v-if="this.arr2.length > 0"> |
| | | <div v-for="(item, index) in this.arr2" style="display: flex;padding:0 10px 0 0" :key="index"> |
| | | <span style="display: inline-block;white-space: nowrap;font-size: 18px;font-weight: 500;" |
| | | v-html="item.Name"></span> |
| | | <span style="display: inline-block;font-size: 18px;font-weight: 500;">:</span> |
| | | <span style="display: inline-block;line-height: 27px;" |
| | | v-show="item.Value === '' || item.Value === null">--</span> |
| | | <span style="display: inline-block;word-break: break-all;line-height: 27px;" |
| | | v-if="item.Value != '' && item.Value != null" |
| | | v-html="item.Name.indexOf('元') > -1 || item.Name.indexOf('(元)') > -1 ? CustomMethods.numTo$(item.Value.replace(/\n/g, '<br>').replaceAll(content.CompanyName, `<span style='color:red;'>${content.CompanyName}</span>`)) : item.Value.replace(/\n/g, '<br>').replaceAll(content.CompanyName, `<span style='color:red;'>${content.CompanyName}</span>`)"></span> |
| | | </div> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import axios from '@/libs/api.request' |
| | | export default { |
| | | name: 'newPushDetail', |
| | | data() { |
| | | return { |
| | | id: 0, |
| | | content: { |
| | | CompanyName: '', |
| | | EventType: '', |
| | | WarnLevelName: '', |
| | | Content: '', |
| | | }, |
| | | arr1: [], |
| | | arr2: [], |
| | | show: true, |
| | | |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | }, |
| | | mounted() { |
| | | |
| | | // setTimeout(() => { |
| | | |
| | | // return false |
| | | // }, 1000); |
| | | // |
| | | }, |
| | | methods: { |
| | | // EventKg/GetDynamicById(int Id) |
| | | |
| | | GetDynamicById() { |
| | | this.show = true |
| | | let data = { |
| | | Id: this.id |
| | | // Id: 28616 |
| | | } |
| | | axios.request({ |
| | | url: '/EventKg/GetDynamicById', |
| | | method: 'post', |
| | | data: data |
| | | }).then(res => { |
| | | if (res.data.Check) { |
| | | this.content = res.data.Data |
| | | this.content.Content = JSON.parse(this.content.Content) |
| | | this.arr1 = this.content.Content.slice(0, 2) |
| | | this.arr2 = this.content.Content.slice(3) |
| | | console.log(this.content, this.arr1, this.arr2); |
| | | this.show = false |
| | | } else { |
| | | this.content = {} |
| | | this.arr1 = [] |
| | | this.arr2 = [] |
| | | this.show = false |
| | | } |
| | | }, res => { |
| | | this.content = {} |
| | | this.arr1 = [] |
| | | this.arr2 = [] |
| | | this.show = false |
| | | }) |
| | | } |
| | | }, |
| | | watch: { |
| | | $route: { |
| | | handler() { |
| | | if (this.$router.currentRoute.name === 'newPushDetail') { |
| | | this.id = this.$route.query.Id |
| | | this.GetDynamicById() |
| | | return |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | }, |
| | | beforeRouteLeave(to, from, next) { |
| | | // console.log(to, from); |
| | | // if(to.name=='login'){ |
| | | // next() |
| | | // } |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" > |
| | | body { |
| | | overflow: auto; |
| | | } |
| | | |
| | | #newPushDetail { |
| | | overflow: visible !important; |
| | | } |
| | | |
| | | #newPushDetail header { |
| | | width: 100vw; |
| | | height: 80px; |
| | | background-color: #123DD6; |
| | | |
| | | img { |
| | | height: 60px; |
| | | margin-top: 10px; |
| | | position: relative; |
| | | left: ~'calc(50% - 103px)'; |
| | | } |
| | | } |
| | | |
| | | main { |
| | | width: 100vw; |
| | | padding: 20px 10px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | |
| | | .left { |
| | | min-width: 90px; |
| | | // width: 120px; |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .right { |
| | | line-height: 27px; |
| | | display: inline-block; |
| | | word-break: break-all; |
| | | } |
| | | } |
| | | } |
| | | |
| | | #newPushDetail img { |
| | | max-width: 300px !important; |
| | | } |
| | | |
| | | |
| | | #newPushDetail .demo-spin-col .circular { |
| | | width: 25px; |
| | | height: 25px; |
| | | } |
| | | |
| | | #newPushDetail .demo-spin-icon-load { |
| | | animation: ani-demo-spin 1s linear infinite; |
| | | } |
| | | |
| | | @keyframes ani-demo-spin { |
| | | from { |
| | | transform: rotate(0deg); |
| | | } |
| | | |
| | | 50% { |
| | | transform: rotate(180deg); |
| | | } |
| | | |
| | | to { |
| | | transform: rotate(360deg); |
| | | } |
| | | } |
| | | |
| | | #newPushDetail .demo-spin-col { |
| | | height: 100vh; |
| | | position: relative; |
| | | border: 1px solid #eee; |
| | | } |
| | | </style> |