|
|
@@ -1,115 +1,114 @@
|
|
|
<template>
|
|
|
<div class="pagePadding box">
|
|
|
<div id="index" ref="appRef">
|
|
|
- <div class="bg">
|
|
|
- <dv-loading v-if="loading">Loading...</dv-loading>
|
|
|
- <div v-else class="host-body">
|
|
|
- <div class="d-flex jc-center">
|
|
|
- <dv-decoration-10 class="dv-dec-10" />
|
|
|
+ <div class="bg">
|
|
|
+ <dv-loading v-if="loading">Loading...</dv-loading>
|
|
|
+ <div v-else class="host-body">
|
|
|
<div class="d-flex jc-center">
|
|
|
- <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
|
|
- <div class="title">
|
|
|
- <span class="title-text">数据可视化面板</span>
|
|
|
- <dv-decoration-6
|
|
|
- class="dv-dec-6"
|
|
|
+ <dv-decoration-10 class="dv-dec-10" />
|
|
|
+ <div class="d-flex jc-center">
|
|
|
+ <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
|
|
+ <div class="title">
|
|
|
+ <span class="title-text">数据可视化面板</span>
|
|
|
+ <dv-decoration-6
|
|
|
+ class="dv-dec-6"
|
|
|
+ :reverse="true"
|
|
|
+ :color="['#50e3c2', '#67a1e5']"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <dv-decoration-8
|
|
|
+ class="dv-dec-8"
|
|
|
:reverse="true"
|
|
|
- :color="['#50e3c2', '#67a1e5']"
|
|
|
+ :color="decorationColor"
|
|
|
/>
|
|
|
</div>
|
|
|
- <dv-decoration-8
|
|
|
- class="dv-dec-8"
|
|
|
- :reverse="true"
|
|
|
- :color="decorationColor"
|
|
|
- />
|
|
|
+ <dv-decoration-10 class="dv-dec-10-s" />
|
|
|
</div>
|
|
|
- <dv-decoration-10 class="dv-dec-10-s" />
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 第二行 -->
|
|
|
- <div class="d-flex jc-between px-2">
|
|
|
- <div class="d-flex aside-width">
|
|
|
- <div class="react-left ml-4 react-l-s">
|
|
|
- <span class="react-left"></span>
|
|
|
- <span class="text">今日相关</span>
|
|
|
- </div>
|
|
|
- <div class="react-left ml-3">
|
|
|
- <span class="text">数据概览</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="d-flex aside-width">
|
|
|
- <div class="react-right bg-color-blue mr-3">
|
|
|
- <span class="text fw-b">待处理</span>
|
|
|
+ <!-- 第二行 -->
|
|
|
+ <div class="d-flex jc-between px-2">
|
|
|
+ <div class="d-flex aside-width">
|
|
|
+ <div class="react-left ml-4 react-l-s">
|
|
|
+ <span class="react-left"></span>
|
|
|
+ <span class="text">今日相关</span>
|
|
|
+ </div>
|
|
|
+ <div class="react-left ml-3">
|
|
|
+ <span class="text">数据概览</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="react-right mr-4 react-l-s">
|
|
|
- <span class="react-after"></span>
|
|
|
- <span class="text"
|
|
|
- >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
|
|
- >
|
|
|
+ <div class="d-flex aside-width">
|
|
|
+ <div class="react-right bg-color-blue mr-3">
|
|
|
+ <span class="text fw-b">待处理</span>
|
|
|
+ </div>
|
|
|
+ <div class="react-right mr-4 react-l-s">
|
|
|
+ <span class="react-after"></span>
|
|
|
+ <span class="text" style="white-space: nowrap;"
|
|
|
+ >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="body-box">
|
|
|
- <!-- 第三行数据 -->
|
|
|
- <div class="content-box">
|
|
|
- <div>
|
|
|
- <dv-border-box-12>
|
|
|
- <centerLeft1 />
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <dv-border-box-12>
|
|
|
- <centerLeft2 />
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- <!-- 中间 -->
|
|
|
- <div>
|
|
|
- <center />
|
|
|
- </div>
|
|
|
- <!-- 中间 -->
|
|
|
- <!-- <div>
|
|
|
+ <div class="body-box">
|
|
|
+ <!-- 第三行数据 -->
|
|
|
+ <div class="content-box">
|
|
|
+ <div>
|
|
|
+ <dv-border-box-12>
|
|
|
+ <centerLeft1 />
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <dv-border-box-12>
|
|
|
+ <centerLeft2 />
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <!-- 中间 -->
|
|
|
+ <div>
|
|
|
+ <center />
|
|
|
+ </div>
|
|
|
+ <!-- 中间 -->
|
|
|
+ <!-- <div>
|
|
|
|
|
|
<dv-border-box-13>
|
|
|
<centerRight2 />
|
|
|
</dv-border-box-13>
|
|
|
</div> -->
|
|
|
- <div>
|
|
|
+ <div>
|
|
|
+ <dv-border-box-13>
|
|
|
+ <centerRight1 />
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第四行数据 -->
|
|
|
+ <div class="bototm-box">
|
|
|
<dv-border-box-13>
|
|
|
- <centerRight1 />
|
|
|
+ <bottomLeft />
|
|
|
</dv-border-box-13>
|
|
|
+ <dv-border-box-12>
|
|
|
+ <bottomRight />
|
|
|
+ </dv-border-box-12>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 第四行数据 -->
|
|
|
- <div class="bototm-box">
|
|
|
- <dv-border-box-13>
|
|
|
- <bottomLeft />
|
|
|
- </dv-border-box-13>
|
|
|
- <dv-border-box-12>
|
|
|
- <bottomRight />
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import drawMixin from "../drawMixin";
|
|
|
-import { formatTime } from '../index.js'
|
|
|
-import centerLeft1 from './centerLeft1'
|
|
|
-import centerLeft2 from './centerLeft2'
|
|
|
-import centerRight1 from './centerRight1'
|
|
|
-import centerRight2 from './centerRight2'
|
|
|
-import center from './center'
|
|
|
-import bottomLeft from './bottomLeft'
|
|
|
-import bottomRight from './bottomRight'
|
|
|
+// import drawMixin from "../drawMixin";
|
|
|
+import { formatTime } from "../index.js";
|
|
|
+import centerLeft1 from "./centerLeft1";
|
|
|
+import centerLeft2 from "./centerLeft2";
|
|
|
+import centerRight1 from "./centerRight1";
|
|
|
+import centerRight2 from "./centerRight2";
|
|
|
+import center from "./center";
|
|
|
+import bottomLeft from "./bottomLeft";
|
|
|
+import bottomRight from "./bottomRight";
|
|
|
|
|
|
export default {
|
|
|
- mixins: [ drawMixin ],
|
|
|
+ // mixins: [ drawMixin ],
|
|
|
data() {
|
|
|
return {
|
|
|
timing: null,
|
|
|
@@ -117,9 +116,9 @@ export default {
|
|
|
dateDay: null,
|
|
|
dateYear: null,
|
|
|
dateWeek: null,
|
|
|
- weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
- decorationColor: ['#568aea', '#000000']
|
|
|
- }
|
|
|
+ weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
|
+ decorationColor: ["#568aea", "#000000"],
|
|
|
+ };
|
|
|
},
|
|
|
components: {
|
|
|
centerLeft1,
|
|
|
@@ -128,34 +127,47 @@ export default {
|
|
|
centerRight2,
|
|
|
center,
|
|
|
bottomLeft,
|
|
|
- bottomRight
|
|
|
+ bottomRight,
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.timeFn()
|
|
|
- this.cancelLoading()
|
|
|
+ this.timeFn();
|
|
|
+ this.cancelLoading();
|
|
|
},
|
|
|
- beforeDestroy () {
|
|
|
- clearInterval(this.timing)
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timing);
|
|
|
},
|
|
|
methods: {
|
|
|
timeFn() {
|
|
|
this.timing = setInterval(() => {
|
|
|
- this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
|
|
- this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
|
|
- this.dateWeek = this.weekday[new Date().getDay()]
|
|
|
- }, 1000)
|
|
|
+ this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
|
+ this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
|
|
+ this.dateWeek = this.weekday[new Date().getDay()];
|
|
|
+ }, 1000);
|
|
|
},
|
|
|
cancelLoading() {
|
|
|
setTimeout(() => {
|
|
|
- this.loading = false
|
|
|
- }, 500)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.loading = false;
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-@import '../assetsDv/scss/index.scss';
|
|
|
-@import '../assetsDv/scss/style.scss';
|
|
|
+@import "../assetsDv/scss/index.scss";
|
|
|
+@import "../assetsDv/scss/style.scss";
|
|
|
|
|
|
+.box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #000;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
</style>
|
