Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1a249169 by xiaomiao
Options

兼容性样式调整

1 parent e27e11dd
Inline Side-by-side
Showing 3 changed files with 255 additions and 266 deletions
......@@ -11,74 +11,74 @@
</template>
<script>
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
export default {
data () {
return {};
},
components: { maps, brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
};
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
export default {
data () {
return {};
},
components: { maps, brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
};
</script>
<style lang="scss" scoped>
.centercard {
width: 44%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 .0521rem;
display: flex;
flex-direction: column;
.centercard {
width: 44%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 0.0521rem;
display: flex;
flex-direction: column;
.card1 {
width: 100%;
background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 64%;
.card1 {
width: 100%;
background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 64%;
.title {
position: absolute;
font-weight: bold;
color: #02D9FD;
line-height: .1354rem;
font-size: .1146rem;
position: absolute;
left: 0;
right: 0;
top: .0365rem;
text-align: right;
padding-right: 15%;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: right;
padding-right: 15%;
}
}
}
.card2 {
width: 100%;
background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
.title {
position: absolute;
font-weight: bold;
color: #02D9FD;
line-height: .1354rem;
font-size: .1146rem;
position: absolute;
left: 0;
right: 0;
top: .0365rem;
text-align: center;
margin-bottom: .0521rem;
}
.brokenline {
margin: auto;
.card2 {
width: 100%;
background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: center;
margin-bottom: 0.0521rem;
}
.brokenline {
margin: auto;
width: 100%;
}
}
}
}
</style>
......
......@@ -13,59 +13,57 @@
<dv-decoration-5
:dur="1"
class="dv-dec-5"
:color="decorationColor"
/>
:color="decorationColor" />
</div>
<dv-decoration-8
class="dv-dec-8"
:reverse="true"
:color="decorationColor"
/>
:color="decorationColor" />
</div>
<dv-decoration-10 class="dv-dec-10-s" />
</div>
</div>
<screencontent v-show="isshow"/>
<screencontent v-show="isshow" />
</div>
</div>
</div>
</template>
<script>
import drawMixin from "@/utils/drawMixin";
import screencontent from "./screencontent";
export default {
mixins: [drawMixin],
data() {
return {
isshow:true,
loading: true,
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
screencontent,
},
mounted() {
import drawMixin from "@/utils/drawMixin";
import screencontent from "./screencontent";
export default {
mixins: [drawMixin],
data () {
return {
isshow: true,
loading: true,
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
screencontent,
},
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy() {
clearInterval(this.timing);
},
methods: {
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 500);
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
computed: {
...mapGetters(["products"]),
},
},
computed: {
...mapGetters(["products"]),
},
};
};
</script>
<style scoped lang="scss">
@import "./index.scss";
@import "./index.scss";
</style>
......
......@@ -55,206 +55,197 @@
<script>
import columnar from "@/components/Echart/Columnar";
import work from "@/api/work";
export default {
data () {
return {
// 日均接入量
qxerrer: "",
qxsuccess: "",
sterrer: "",
stsuccess: "",
qxjrl: "",
stjrl: "",
qxcgl: "",
stcgl: ""
};
},
mounted () {
this.getsthjqxjrtotal();
},
components: { columnar },
computed: {
qxjrlList: function () {
return this.qxjrl && this.qxjrl.toString().split("");
import columnar from "@/components/Echart/Columnar";
import work from "@/api/work";
export default {
data () {
return {
// 日均接入量
qxerrer: "",
qxsuccess: "",
sterrer: "",
stsuccess: "",
qxjrl: "",
stjrl: "",
qxcgl: "",
stcgl: ""
};
},
stjrlList: function () {
return this.stjrl && this.stjrl.toString().split("");
mounted () {
this.getsthjqxjrtotal();
},
},
methods: {
getsthjqxjrtotal () {
return new Promise(async (resolve) => {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
let res = await work.getsthjqxjrtotal(p);
this.stjrl=res.result.stsum
this.qxjrl=res.result.qxsum
this.qxerrer=Number(res.result.qxjrerrer)
this.sterrer=Number(res.result.sthjerrer)
if(res.result.sum=="0"){
this.qxcgl="100%"
this.stcgl="100%"
}else{
let qxcglnum=Number(res.result.qxjrsuccess)/this.qxjrl*100
let stcgl=Number(res.result.sthjsuccess)/this.qxjrl*100
this.qxcgl=qxcglnum.toFixed(2)+"%";
this.stcgl=stcgl.toFixed(2)+"%";
components: { columnar },
computed: {
qxjrlList: function () {
return this.qxjrl && this.qxjrl.toString().split("");
},
stjrlList: function () {
return this.stjrl && this.stjrl.toString().split("");
},
},
methods: {
getsthjqxjrtotal () {
return new Promise(async (resolve) => {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
let res = await work.getsthjqxjrtotal(p);
this.stjrl = res.result.stsum
this.qxjrl = res.result.qxsum
this.qxerrer = Number(res.result.qxjrerrer)
this.sterrer = Number(res.result.sthjerrer)
if (res.result.sum == "0") {
this.qxcgl = "100%"
this.stcgl = "100%"
} else {
let qxcglnum = Number(res.result.qxjrsuccess) / this.qxjrl * 100
let stcgl = Number(res.result.sthjsuccess) / this.qxjrl * 100
this.qxcgl = qxcglnum.toFixed(2) + "%";
this.stcgl = stcgl.toFixed(2) + "%";
}
} catch (error) {
this.$refs.msg.messageShow();
}
} catch (error) {
this.$refs.msg.messageShow();
}
});
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
.leftcard {
width: 32%;
height: calc(100vh -114px);
display: flex;
flex-direction: column;
.card {
background: url("~@/image/qxjr.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
height: 22%;
}
.carda {
background: url("~@/image/sthj.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
height: 22%;
}
// .card1 {
// background: url("~@/image/sbtj.png") no-repeat;
// background-size: 100% 100%;
// position: relative;
// text-align: center;
// width: 100%;
// padding: .0417rem 0;
// height: 49%;
// }
.card1 {
background: url("~@/image/sbtj.png") no-repeat;
background-size: 100% 100%;
position: relative;
box-sizing: border-box;
flex: 1;
height: 56%;
}
.cardhead {
color: #02d9fd;
line-height: .125rem;
letter-spacing: .0104rem;
position: absolute;
font-size: .1042rem;
left: 0;
right: 0;
margin: auto;
text-align: center;
top: 8px;
font-weight: 700;
}
.rjjrlList {
.leftcard {
width: 32%;
display: flex;
margin-top: .01781rem;
height: calc(100vh - 114px);
flex-direction: column;
.qxjr {
background: url("~@/image/jrl3.png");
.card {
height: 22%;
background: url("~@/image/qxjr.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
}
.sthj {
background: url("~@/image/jh.png");
background-size: 100% 100%;
}
p {
margin: 0 .0156rem .0521rem .0156rem;
font-weight: 700;
width: .195rem;
height: .2475rem;
font-size: .2863rem;
font-size: .2867rem;
.carda {
height: 22%;
background: url("~@/image/sthj.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
}
}
.cardcontent {
width: 100%;
height: 100%;
display: flex;
// padding: 35px 20px 20px 20px;
box-sizing: border-box;
color: #e3f1ff;
margin-top: .1263rem;
.cardcontent-left {
width: 60%;
flex-direction: column;
.card1 {
background: url("~@/image/sbtj.png") no-repeat;
background-size: 100% 100%;
position: relative;
li{
font-size: .1042rem;
}
box-sizing: border-box;
flex: 1;
}
.cardcontent-left::before {
.cardhead {
color: #02d9fd;
line-height: 0.125rem;
letter-spacing: 0.0104rem;
position: absolute;
font-size: 0.1042rem;
left: 0;
right: 0;
top: .3042rem;
content: "";
width: .0052rem;
height: .4688rem;
background: linear-gradient(180deg,
#091b4c 0%,
#47b5e0 56%,
#091b4c 100%);
margin: auto;
text-align: center;
top: 8px;
font-weight: 700;
}
.cardcontent-right {
flex: 1;
width: 100%;
flex-direction: column;
font-size: .0833rem;
.rjjrlList {
display: flex;
margin-top: 0.01781rem;
.bad {
color: #c97168;
.qxjr {
background: url("~@/image/jrl3.png");
background-size: 100% 100%;
}
.cg {
color: #5fba7d;
.sthj {
background: url("~@/image/jh.png");
background-size: 100% 100%;
}
p {
margin-bottom: .0417rem;
margin: 0 0.0156rem 0.0521rem 0.0156rem;
font-weight: 700;
width: 0.195rem;
height: 0.2475rem;
font-size: 0.2863rem;
font-size: 0.2867rem;
}
}
.cardcontent {
width: 100%;
height: 100%;
display: flex;
// padding: 35px 20px 20px 20px;
box-sizing: border-box;
color: #e3f1ff;
margin-top: 0.1263rem;
.cardcontent-left {
width: 60%;
flex-direction: column;
position: relative;
li {
font-size: 0.1042rem;
}
}
.cardcontent-left::before {
position: absolute;
right: 0;
top: 0.3042rem;
content: "";
width: 0.0052rem;
height: 0.4688rem;
background: linear-gradient(
180deg,
#091b4c 0%,
#47b5e0 56%,
#091b4c 100%
);
}
.cardcontent-right {
flex: 1;
width: 100%;
flex-direction: column;
font-size: 0.0833rem;
span:nth-child(1) {
margin-right: .0781rem;
.bad {
color: #c97168;
}
span:nth-child(2) {
font-size: .1042rem;
font-weight: 900;
.cg {
color: #5fba7d;
}
p {
margin-bottom: 0.0417rem;
span:nth-child(1) {
margin-right: 0.0781rem;
}
span:nth-child(2) {
font-size: 0.1042rem;
font-weight: 900;
}
}
}
}
}
}
</style>
......