123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379 |
- <template>
- <div class="eqS-right">
- <div class="atten-content">
- <p>重点关注的内容</p>
- <div><span></span><li>此区域暂时没有数据!</li></div>
- </div>
- <div class="info-center">
- <div class="i-top" v-if="flag==3">
- <div class="top-left">
- <div class="i-box">优</div>
- <p>环境健康指数</p>
- </div>
- <div class="top-right">
- <p>空气温度: <span>{{envData.Tdb}}℃</span></p>
- <p>空气湿度: <span>{{envData.RH }}%</span></p>
- <p>CO2浓度: <span>{{envData.CO }} ppm</span></p>
- <p>PM2.5: <span>{{envData.PM}} μg/m³</span></p>
- </div>
- </div>
- <div class="i-top2" v-if="flag==1">
- <p><img src="/static/img/yongxing.png" alt=""> 设备运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
- </div>
- <div class="i-top2" v-if="flag==4">
- <p><img src="/static/img/yongxing.png" alt=""> 系统运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
- </div>
- <div class="i-top2" v-if="flag==2">
- <p><img src="/static/img/yongxing.png" alt=""> 使用状态 <span class="grade" v-if="linkEq">使用中</span><span v-else>暂无使用</span></p>
- </div>
- <div class="i-bottom" v-if="flag==1 || flag==3 || flag==4">
- <div class="bottom-left">
- <p><img src="/static/img/elePower.png"> <strong>{{ElecConsumPData || '--'}}</strong> kW</p>
- <p class="readmine">耗电功率</p>
- </div>
- <div class="bottom-right">
- <p><img src="/static/img/eleCon.png" alt=""> <strong>{{AccElecConsumData|| '--'}}</strong> kW/h</p>
- <p class="readmine">累计用电量</p>
- </div>
- </div>
- </div>
- <div v-if="flag==1" class="fault-rate">
- <div>
- <p class="rate-num">{{subsetCount}}</p>
- <p class="rate-name">同类设备数量</p>
- </div>
- <!-- <div>
- <p class="rate-num">2<span style="font-size:14px">%</span> </p>
- <p class="rate-name">平均故障率</p>
- </div> -->
- <div>
- <p class="rate-num">{{repairRadio}}<span style="font-size:14px">%</span> </p>
- <p class="rate-name">同类设备故障率</p>
- </div>
- </div>
- <div class="detail-info" >
- <ul>
- <a :href="`/equipment?pid=${this.$store.state.projId}&${Info.infos.EquipID}&${Info.infos.EquipLocalName}`" target="_black">
- <li v-if="flag==1">
- <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
- <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
- </li>
- </a>
- <a :href="`/rooms?pid=${this.$store.state.projId}&${Info.infos.RoomID}&${Info.infos.RoomLocalName}`" target="_black">
- <li v-if="flag==3">
- <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
- <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
- </li>
- </a>
- <li v-if="flag!=2">
- <a><img src="/static/img/order.png" alt="">进行中的工单 </a>
- <span class="type-number">{{orderCount}}<img src="/static/img/left.png" alt=""></span>
- </li>
- <li @click="getMoreMonitor" v-if="flag==3">
- <a><img src="/static/img/video.png" alt="">查看空间监控</a>
- <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
- </li>
- <li @click="getMoreMonitor" v-if="flag==2 || flag==1">
- <a><img src="/static/img/video.png" alt="">查看设备相关视频</a>
- <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
- </li>
- <li @click="getMoreMonitor" v-if="flag==4">
- <a><img src="/static/img/video.png" alt="">系统内相关视频</a>
- <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
- </li>
- </ul>
- <!-- <div class="video-box">
- <video class="my-video" ></video>
- <p><button class="my-button" v-for="(item ,index ) in btn" :key="index" :class="{btnClass:type==item.type}" @click="changeVideo(item)">{{item.name}}</button></p>
- </div> -->
- </div>
- </div>
- </template>
- <script>
- export default {
- components: {
- },
- mixins: [],
- props: {
- envData: {
- type: Object,
- default: () => {}
- },
- Info: {
- type: Object,
- default: () => {}
- },
- noAlarmNum: {
- type: Number,
- default: 0
- },
- AccElecConsumData: {
- type: String
- },
- ElecConsumPData: {
- type: String
- },
- orderCount: {
- type: Number
- },
- linkEq: {
- type: String
- },
- RunStatusData: {
- type: String
- },
- subsetCount: {
- type: Number
- },
- repairRadio: {
- type: Number
- },
- moniData: {
- type: Number
- }
- },
- data () {
- return {
- btn: [{type: 1, name: 'f001'}, {type: 2, name: 'f002'}, {type: 3, name: 'f003'}, {type: 4, name: 'f004'}],
- type: 1
- }
- },
- computed: {
- flag () {
- if (location.pathname === '/spread') {
- return 1
- } else if (location.pathname === '/asset') {
- return 2
- } else if (location.pathname === '/vr') {
- return 3
- } else if (location.pathname === '/system') {
- return 4
- }
- },
- RunStatus () {
- if (this.Info.infos.RunStatus) {
- return this.Info.infos.RunStatus
- } else {
- return '--'
- }
- }
- },
- mounted () {
- },
- methods: {
- getMoreMonitor () {
- this.$router.push('monitoring')
- },
- changeVideo (item) {
- this.type = item.type
- }
- }
- }
- </script>
- <style scoped lang="less" >
- .eqS-right {
- min-width: 300px;
- .atten-content {
- background: #FFFFFF;
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- padding: 20px;
- >p {
- font-size: 18px;
- color: #212830;
- }
- div {
- span {
- background: #728DEE;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- //margin-top: 8px;
- display: inline-block;
- }
- li {
- font-size: 14px;
- color: #6D747C;
- list-style: none;
- padding-left: 14px;
- display: inline;
- }
- }
- }
- .info-center{
- margin: 20px 0;
- background: #FFFFFF;
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- .i-top {
- display: flex;
- padding: 20px;
- justify-content: space-evenly;
- .top-left {
- .i-box {
- background: #3BC6A1;
- border-radius: 6px;
- width: 80px;
- height: 80px;
- text-align: center;
- line-height: 80px;
- font-size: 20px;
- color: #FFFFFF;
- }
- >p{
- margin-top: 14px;
- font-size: 14px;
- color: #6D747C;
- }
- }
- .top-right {
- font-size: 14px;
- color: #6D747C;
- >p {
- margin-bottom: 10px;
- }
- }
- }
- .i-top2 {
- padding: 10px 0 15px 20px;
- p{
- >img {
- padding-right: 8px;
- }
- }
- .grade {
- font-size: 32px;
- color: #3BC6A1;
- margin-left: 10%;
- }
- }
- .i-bottom {
- display: flex;
- padding: 0 20px 20px 20px;
- justify-content:space-between;
- img {
- //margin-left: -42px;
- margin-top: -5px;
- }
- strong {
- font-family: 'DIN-Medium';
- font-size: 18px;
- color: #212830;
- }
- .readmine {
- font-size: 14px;
- color: #6D747C;
- }
- }
- }
- .fault-rate{
- display: flex;
- justify-content:space-between;
- background: #FFFFFF;
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- padding:20px 20px;
- margin-bottom:20px;
- >div{
- .rate-num {
- font-size: 36px;
- color: #212830;
- text-align: center;
- }
- .rate-name {
- font-size: 14px;
- color: #6D747C;
- }
- }
- }
- .detail-info {
- background: #FFFFFF;
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- ul {
- margin-bottom: 0;
- li {
- padding-left: 24px;
- height: 65px;
- line-height: 65px;
- font-size: 14px;
- color: #6D747C;
- display: flex;
- align-items:center;
- justify-content:space-between;
- cursor: pointer;
- &:hover {
- background: #f5f5f5;
- }
- .type-number {
- color: #212830;
- font-size: 32px;
- cursor: pointer;
- >img {
- margin-left: 14px;
- }
- }
- img {
- //vertical-align: middle;
- margin-right:20px;
- margin-top: -2px;
- }
- }
- }
- .video-box{
- width: 93%;
- margin: 0 10px;
- //height: 240px;
- background: #F5F5F5;
- border-radius: 2px;
- .my-video {
- margin: 10px;
- width: 95%;
- //height: 180px;
- background: rgba(0,0,0,0.30);
- border-radius: 2px;
- }
- >p {
- padding-left: 10px;
- .my-button {
- width: 52px;
- height: 28px;
- background: #FFFFFF;
- border: 1px solid #728DEE;
- border-radius: 2px;
- font-size: 14px;
- color: #728DEE;
- display: inline-block;
- margin-right: 10px;
- text-align: center;
- border-radius: 2px;
- margin-bottom: 10px;
- &:hover {
- background: #728DEE;
- color: #fff;
- }
- }
- .btnClass{
- background: #728DEE;
- color: #fff;
- }
- }
- }
- }
- }
- </style>
|