This commit is contained in:
yanran200730
2022-03-31 16:03:40 +08:00
parent 27ab36b3ce
commit 49a2d392ad
21 changed files with 74 additions and 49 deletions

View File

@@ -5,8 +5,7 @@
<template #content>
<div class="showPanel">
<ai-dv-wrapper :views="views" v-model="active">
<AiMonitor style="width: 600px; height: 300px" type="slw"
src="http://120.221.159.18:8000/flv/MT_20220319123025570adZa68OLywxi?encrypt=m3sbNQg2wFw9HdZn&timestamp=1647992818471"></AiMonitor>
<AiDvDisplay></AiDvDisplay>
</ai-dv-wrapper>
</div>
</template>

View File

@@ -1,9 +1,9 @@
<template>
<section class="AiDvDisplay">
<div class="display-top">
<img class="left" src="asset/display-icon.svg">
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
<h2>{{ title }}</h2>
<img class="right" src="asset/display-icon.svg">
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
</div>
<component class="background" :is="type"/>
<div class="displayPanel">
@@ -29,6 +29,10 @@ export default {
},
list: {default: () => []},
},
data () {
return {
}
},
methods: {
getPos(i) {
let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,

View File

@@ -2,8 +2,8 @@
<div class="display0">
<div class="display0-container">
<div class="display0-content">
<img src="../asset/display0-left.png">
<img src="../asset/display0-left.png">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
</div>
</div>
</div>
@@ -15,7 +15,6 @@
data () {
return {
}
}
}
@@ -26,7 +25,7 @@
position: relative;
width: 840px;
height: 465px;
background: url(../asset/display0-bg.png) no-repeat center;
background: url(./../asset/display0-bg.png) no-repeat center;
background-size: cover;
.display0-content {
@@ -38,7 +37,7 @@
transform: translateY(-50%);
align-items: center;
justify-content: space-between;
background: url(../asset/display0-bg.png) no-repeat center;
background: url(./../asset/display0-bg.png) no-repeat center;
background-size: cover;
img:last-child {

View File

@@ -28,7 +28,7 @@ export default {
font-weight: bold;
line-height: 26px;
position: relative;
background-image: url("../asset/displayItem-bg.svg");
background-image: url("./../asset/displayItem-bg.svg");
background-repeat: no-repeat;
background-position: center;
@@ -39,7 +39,7 @@ export default {
bottom: 0;
right: 0;
content: " ";
background-image: url("../asset/displayItem-bg1.svg");
background-image: url("./../asset/displayItem-bg1.svg");
background-repeat: no-repeat;
background-position: center;
animation: rotate 4s infinite linear;

View File

@@ -22,7 +22,7 @@ export default {
height: 100%;
.title {
padding-left: 30px;
background-image: url("../asset/titleBg.svg");
background-image: url("./../asset/titleBg.svg");
background-repeat: no-repeat;
height: 41px;
margin-bottom: 10px;

View File

@@ -33,7 +33,7 @@ export default {
.bg {
position: relative;
margin: 15px 20px;
background-image: url("../asset/border1Bg.svg");
background-image: url("./../asset/border1Bg.svg");
background-size: 100% calc(100%);
background-repeat: no-repeat;
padding: 30px 20px 0 20px;
@@ -52,7 +52,7 @@ export default {
align-items: center;
color: #fff;
font-size: 16px;
background-image: url("../asset/border1Title.svg");
background-image: url("./../asset/border1Title.svg");
background-size: 100%;
background-repeat: no-repeat;
}

View File

@@ -4,9 +4,9 @@
<div class="corner right-bottom"></div>
<div class="bg">
<div class="header">
<img src="../asset/sanjiaoxing.svg" />
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
<h2>{{ title }}</h2>
<img class="header-right" src="../asset/sanjiaoxing.svg" />
<img class="header-right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
</div>
<div class="slot">
<slot/>
@@ -18,7 +18,12 @@
<script>
export default {
name: 'border2',
props: {title: String}
props: {title: String},
data () {
return {
}
}
}
</script>
@@ -38,7 +43,7 @@ export default {
width: 18px;
position: absolute;
display: block;
background-image: url(../asset/corner.svg);
background-image: url(./../asset/corner.svg);
background-repeat: no-repeat;
}
.corner.left-top {
@@ -85,7 +90,7 @@ export default {
height: 40px;
line-height: 40px;
text-align: center;
background: url(../asset/border2Title.svg) no-repeat;
background: url(./../asset/border2Title.svg) no-repeat;
background-size: cover;
.header-right {

View File

@@ -122,7 +122,7 @@ export default {
height: 12px;
transform: translate(-50%, -50%);
content: ' ';
background: url(../asset/border3Title.png) no-repeat;
background: url(./../asset/border3Title.png) no-repeat;
background-size: 100% 100%;
opacity: 0.8;
}

View File

@@ -65,7 +65,7 @@
width: 18px;
position: absolute;
display: block;
background-image: url(../asset/corner.svg);
background-image: url(./../asset/corner.svg);
background-repeat: no-repeat;
}
.corner.left-top {

View File

@@ -66,7 +66,7 @@
width: 18px;
position: absolute;
display: block;
background-image: url(../asset/corner.svg);
background-image: url(./../asset/corner.svg);
background-repeat: no-repeat;
}
.corner.left-top {

View File

@@ -53,7 +53,7 @@
height: 180px;
padding: 0 90px;
box-sizing: border-box;
background: url(../asset/summary1-bg.svg) center;
background: url(./../asset/summary1-bg.svg) center;
background-size: 800px 180px;
.summary2-title {
@@ -76,7 +76,7 @@
width: 35px;
height: 22px;
content: '';
background: url(../asset/jt.svg) center;
background: url(./../asset/jt.svg) center;
background-size: 40px 112px;
transform: translate(-100%, -50%);
}
@@ -89,7 +89,7 @@
width: 35px;
height: 22px;
content: '';
background: url(../asset/jt.svg) center;
background: url(./../asset/jt.svg) center;
background-size: 40px 112px;
transform: translate(100%, -50%) rotate(180deg);
}
@@ -103,7 +103,7 @@
width: 40px;
height: 112px;
content: '';
background: url(../asset/top.svg) center;
background: url(./../asset/top.svg) center;
background-size: 40px 112px;
transform: translateY(-50%);
}
@@ -116,7 +116,7 @@
width: 40px;
height: 112px;
content: '';
background: url(../asset/top.svg) center;
background: url(./../asset/top.svg) center;
background-size: 40px 112px;
transform: translateY(-50%) rotate(180deg);
}

View File

@@ -59,14 +59,14 @@
height: 164px;
line-height: 1;
padding-top: 58px;
background: url(../asset/summary3-small.svg);
background: url(./../asset/summary3-small.svg);
background-size: 100% 164px;
transform: scale(0.8);
&:nth-of-type(2) {
width: 280px;
height: 180px;
background: url(../asset/summary3-big.svg);
background: url(./../asset/summary3-big.svg);
background-size: 100% 180px;
transform: scale(1);
}

View File

@@ -58,7 +58,7 @@
height: 108px;
padding: 18px 0 ;
font-size: 0;
background-image: url(../asset/summary4-small.svg);
background-image: url(./../asset/summary4-small.svg);
background-size: 100% 100%;
&::after {
@@ -84,7 +84,7 @@
height: 140px;
padding-top: 28px;
padding: 28px ;
background-image: url(../asset/summary4-big.svg);
background-image: url(./../asset/summary4-big.svg);
background-size: 100% 100%;
}

View File

@@ -97,7 +97,7 @@
width: 18px;
position: absolute;
display: block;
background-image: url(../asset/corner.svg);
background-image: url(./../asset/corner.svg);
background-repeat: no-repeat;
}
.corner.left-top {

View File

@@ -153,7 +153,7 @@
width: 380px;
height: 124px;
padding: 0 44px;
background: url(../asset/summary6-bg.svg);
background: url(./../asset/summary6-bg.svg);
background-size: 100% 100%;
.el-progress-circle {

View File

@@ -71,7 +71,7 @@
width: 132px;
height: 160px;
padding-top: 32px;
background-image: url(../asset/summary9-bg.svg);
background-image: url(./../asset/summary9-bg.svg);
background-size: 100% 100%;
div {
@@ -108,7 +108,6 @@
p {
line-height: 35px;
margin: 0 0 4px;
font-size: 32px;
font-weight: 700;
color: #fff;
}

View File

@@ -195,7 +195,9 @@ export default {
@import url('../../lib/animation.scss');
.AiDvWrapper {
.viewPanel {
display: flex;
position: relative;
flex-direction: column;
width: 100%;
height: 100%;
background-repeat: no-repeat;
@@ -212,6 +214,8 @@ export default {
}
::v-deep.headerPane {
display: flex;
align-items: center;
height: 120px;
width: 100%;
padding: 0 10px;
@@ -223,11 +227,15 @@ export default {
}
.viewTabs {
display: flex;
align-items: center;
height: 60px;
font-size: 15px;
overflow: visible;
.btn {
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
min-width: 120px;
@@ -273,6 +281,8 @@ export default {
}
.settingZone {
display: flex;
align-items: center;
font-family: DIN, serif;
height: 60px;
justify-content: flex-end;
@@ -323,7 +333,7 @@ export default {
width: 760px;
height: 124px;
background-repeat: no-repeat;
background-image: url("assets/headerCenterBorderLight.svg"), url("assets/headerCenterBorder.svg"), url("assets/headerCenterBg2.png");
background-image: url("./assets/headerCenterBorderLight.svg"), url("./assets/headerCenterBorder.svg"), url("./assets/headerCenterBg2.png");
background-position: center bottom, center 0, center -20px;
overflow: visible;

View File

@@ -32,7 +32,7 @@ export default {
width: 18px;
position: absolute;
display: block;
background-image: url("assets/corner.svg");
background-image: url("./assets/corner.svg");
background-repeat: no-repeat;
&.left-top {