tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改项目适配方案，使用scale缩放进行适配

Browse Source
This commit is contained in:
MTrun
2021-09-18 19:36:07 +08:00
parent 46e82cfc72
commit c69a48cc05
25 changed files with 572 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5 -7
View File
@@ -4,13 +4,11 @@
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss" scoped>
body {
margin: 0;
}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; width: 100vw;
-webkit-font-smoothing: antialiased; height: 100vh;
-moz-osx-font-smoothing: grayscale; background-color: #020308;
overflow: hidden;
} }
</style> </style>
src/assets/scss/_variables.scss
+8 -7
View File
@@ -1,6 +1,6 @@
// 颜色 // 颜色
$colors: ( $colors: (
"primary": #db9e3f, "primary": #1A5CD7,
"info-1": #4394e4, "info-1": #4394e4,
"info": #4b67af, "info": #4b67af,
"white": #ffffff, "white": #ffffff,
@@ -11,6 +11,7 @@ $colors: (
"dark": #222222, "dark": #222222,
"black-1": #171823, "black-1": #171823,
"black": #000000, "black": #000000,
"icon": #5cd9e8
); );
// 字体大小 // 字体大小
@@ -86,12 +87,12 @@ $spacing-directions: (
b: bottom, b: bottom,
l: left, l: left,
); );
$spacing-base-size: 0.2rem; $spacing-base-size: 0.5rem;
$spacing-sizes: ( $spacing-sizes: (
0: 0, 0: 0,
1: 0.25, 1: 0.5,
2: 0.5, 2: 1,
3: 1, 3: 1.5,
4: 1.5, 4: 2,
5: 3, 5: 2.5,
); );
src/assets/scss/index.scss
+64 -28
View File
@@ -1,56 +1,88 @@
#index { #index {
color: #d3d6dd; color: #d3d6dd;
background-color: #000000; width: 1920px;
width: 100%; height: 1080px;
height: 100%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
overflow: hidden;
.bg { .bg {
padding: 0.2rem 0.2rem 0 0.2rem; width: 100%;
height: 100%;
padding: 16px 16px 0 16px;
background-image: url("../assets/pageBg.png"); background-image: url("../assets/pageBg.png");
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
.host-body { .host-body {
.dv-dec-10,
.dv-dec-10-s {
width: 33.3%;
height: 5px;
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-8 {
width: 200px;
height: 50px;
}
.title { .title {
position: relative; position: relative;
width: 6.25rem; width: 500px;
text-align: center; text-align: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
.title-text { .title-text {
font-size: 0.3rem; font-size: 24px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
.title-bototm { .dv-dec-6 {
position: absolute; position: absolute;
bottom: -0.375rem; bottom: -30px;
left: 50%; left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%); transform: translate(-50%);
} }
} }
// 第二行
.aside-width {
width: 40%;
}
.react-r-s,
.react-l-s {
background-color: #0f1325;
}
// 平行四边形 // 平行四边形
.react-left { .react-right {
cursor: pointer; &.react-l-s {
font-size: 0.225rem; text-align: right;
width: 3.75rem; width: 500px;
height: 0.625rem; }
line-height: 0.625rem; font-size: 18px;
width: 300px;
line-height: 50px;
text-align: center; text-align: center;
transform: skewX(-45deg); transform: skewX(-45deg);
.react-after { .react-after {
position: absolute; position: absolute;
right: -0.3125rem; right: -25px;
top: 0; top: 0;
height: 0.625rem; height: 50px;
width: 0.625rem; width: 50px;
background-color: #0f1325; background-color: #0f1325;
transform: skewX(45deg); transform: skewX(45deg);
} }
@@ -61,21 +93,25 @@
} }
} }
.react-right { .react-left {
cursor: pointer; &.react-l-s {
font-size: 0.225rem; width: 500px;
width: 3.75rem; text-align: left;
height: 0.625rem; }
line-height: 0.625rem; font-size: 18px;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center; text-align: center;
transform: skewX(45deg); transform: skewX(45deg);
background-color: #0f1325;
.react-before { .react-before {
position: absolute; position: absolute;
left: -0.3125rem; left: -25px;
top: 0; top: 0;
height: 0.625rem; height: 50px;
width: 0.625rem; width: 50px;
background-color: #0f1325; background-color: #0f1325;
transform: skewX(-45deg); transform: skewX(-45deg);
} }
@@ -87,7 +123,7 @@
} }
.body-box { .body-box {
margin-top: 0.2rem; margin-top: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -99,7 +135,7 @@
// 底部数据 // 底部数据
.bototm-box { .bototm-box {
margin-top: 0.125rem; margin-top: 10px;
display: grid; display: grid;
grid-template-columns: repeat(2, 50%); grid-template-columns: repeat(2, 50%);
} }
src/assets/scss/style.scss
+1 -1
View File
@@ -5,8 +5,8 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
box-sizing: border-box;
outline: none; outline: none;
box-sizing: border-box;
} }
html { html {
src/common/echart/index.vue
-2
View File
@@ -4,12 +4,10 @@
<script> <script>
import tdTheme from './theme.json' // 引入默认主题 import tdTheme from './theme.json' // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
import '../map/fujian.js' import '../map/fujian.js'
export default { export default {
name: 'echart', name: 'echart',
mixins: [resizeMixins],
props: { props: {
className: { className: {
type: String, type: String,
src/common/flexible.js
-147
View File
@@ -1,147 +0,0 @@
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn("将根据已有的meta标签来设置缩放比例");
var match = metaEl
.getAttribute("content")
// eslint-disable-next-line no-useless-escape
.match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute("content");
if (content) {
// eslint-disable-next-line no-useless-escape
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
// eslint-disable-next-line no-useless-escape
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
// eslint-disable-next-line no-unused-vars
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute("data-dpr", dpr);
if (!metaEl) {
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute(
"content",
"initial-scale=" +
scale +
", maximum-scale=" +
scale +
", minimum-scale=" +
scale +
", user-scalable=no"
);
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 最小1366px，最大适配2560px
if (width / dpr < 1366) {
width = 1366 * dpr;
} else if (width / dpr > 2560) {
width = 2560 * dpr;
}
// 设置成24等份，设计稿时1920px的，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
win.addEventListener(
"resize",
function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
},
false
);
win.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
},
false
);
if (doc.readyState === "complete") {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener(
"DOMContentLoaded",
// eslint-disable-next-line no-unused-vars
function(e) {
doc.body.style.fontSize = 12 * dpr + "px";
},
false
);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
val += "px";
}
return val;
};
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
val += "rem";
}
return val;
};
})(window, window["lib"] || (window["lib"] = {}));
src/components/echart/bottom/bottomLeftChart/chart.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<Echart <Echart
:options="options" :options="options"
id="bottomLeftChart" id="bottomLeftChart"
height="6.25rem" height="480px"
width="100%" width="100%"
></Echart> ></Echart>
</div> </div>
src/components/echart/bottom/bottomRightChart/chart.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<Echart <Echart
:options="options" :options="options"
id="centreLeft1Chart" id="centreLeft1Chart"
height="6rem" height="480px"
width="100%" width="100%"
></Echart> ></Echart>
</div> </div>
src/components/echart/center/centerChartRate/index.vue
+2 -2
View File
@@ -4,8 +4,8 @@
<Echart <Echart
:options="options" :options="options"
:id="id" :id="id"
height="1.25rem" height="100px"
width="1.5rem" width="100px"
></Echart> ></Echart>
</div> </div>
</template> </template>
src/components/echart/centerLeft/centerLeft1Chart/chart.vue
+3 -3
View File
@@ -3,8 +3,8 @@
<Echart <Echart
:options="options" :options="options"
id="centreLeft1Chart" id="centreLeft1Chart"
height="2.75rem" height="220px"
width="3.25rem" width="260px"
></Echart> ></Echart>
</div> </div>
</template> </template>
@@ -62,7 +62,7 @@ export default {
{ {
name: "通过率统计", name: "通过率统计",
type: "pie", type: "pie",
radius: [10, 60], radius: [10, 50],
roseType: "area", roseType: "area",
center: ["50%", "40%"], center: ["50%", "40%"],
data: newData.seriesData data: newData.seriesData
src/components/echart/centerLeft/centerLeft1Chart/index.vue
+7 -7
View File
@@ -10,14 +10,14 @@ export default {
data () { data () {
return { return {
cdata: { cdata: {
xData: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"], xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
seriesData: [ seriesData: [
{ value: 10, name: "rose1" }, { value: 10, name: "data1" },
{ value: 5, name: "rose2" }, { value: 5, name: "data2" },
{ value: 15, name: "rose3" }, { value: 15, name: "data3" },
{ value: 25, name: "rose4" }, { value: 25, name: "data4" },
{ value: 20, name: "rose5" }, { value: 20, name: "data5" },
{ value: 35, name: "rose6" } { value: 35, name: "data6" }
] ]
} }
} }
src/components/echart/centerLeft/centerLeft2Chart/chart.vue
+10 -2
View File
@@ -4,8 +4,8 @@
id="centreLeft2Chart" id="centreLeft2Chart"
ref="centreLeft2ChartRef" ref="centreLeft2ChartRef"
:options="options" :options="options"
height="4.5rem" height="360px"
width="4.125rem" width="330px"
></Echart> ></Echart>
</div> </div>
</template> </template>
@@ -224,6 +224,7 @@ export default {
reSelectMapRandomArea() { reSelectMapRandomArea() {
const length = 9; const length = 9;
this.$nextTick(() => { this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart; const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length); let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) { while (index === this.preSelectMapIndex || index >= length) {
@@ -245,10 +246,14 @@ export default {
dataIndex: index, dataIndex: index,
}); });
this.preSelectMapIndex = index; this.preSelectMapIndex = index;
} catch (error) {
console.log(error)
}
}); });
}, },
handleMapRandomSelect() { handleMapRandomSelect() {
this.$nextTick(() => { this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart; const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this; const _self = this;
setTimeout(() => { setTimeout(() => {
@@ -275,6 +280,9 @@ export default {
_self.startInterval(); _self.startInterval();
}); });
this.startInterval(); this.startInterval();
} catch (error) {
console.log(error)
}
}); });
}, },
}, },
src/components/echart/centerRight/centerRightChart/chart.vue
+3 -2
View File
@@ -3,8 +3,8 @@
<Echart <Echart
:options="options" :options="options"
id="centreRight2Chart1" id="centreRight2Chart1"
height="2.60rem" height="200px"
width="100%" width="260px"
></Echart> ></Echart>
</div> </div>
</template> </template>
@@ -42,6 +42,7 @@ export default {
indicator: newData.indicatorData, indicator: newData.indicatorData,
shape: "circle", shape: "circle",
splitNumber: 5, splitNumber: 5,
radius: ["0%", "65%"],
name: { name: {
textStyle: { textStyle: {
color: "rgb(238, 197, 102)" color: "rgb(238, 197, 102)"
src/components/echart/centerRight/centerRightChart/index.vue
-7
View File
@@ -50,13 +50,6 @@ export default {
}, },
components: { components: {
Chart, Chart,
},
mounted () {
},
methods: {
} }
} }
</script> </script>
<style lang="scss" scoped>
</style>
src/main.js
+6 -13
View File
@@ -3,8 +3,8 @@ import App from './App.vue';
import router from './router'; import router from './router';
import store from './store'; import store from './store';
import dataV from '@jiaminghi/data-view'; import dataV from '@jiaminghi/data-view';
Vue.use(dataV); // 引入全局css
import './assets/scss/style.scss';
// 按需引入vue-awesome图标 // 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon'; import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js'; import 'vue-awesome/icons/chart-bar.js';
@@ -13,16 +13,6 @@ import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js'; import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js'; import 'vue-awesome/icons/align-left.js';
// 全局注册图标
Vue.component('icon', Icon);
// 适配flex
import '@/common/flexible.js';
// 引入全局css
import './assets/scss/style.scss';
//引入echart //引入echart
//4.x 引用方式 //4.x 引用方式
import echarts from 'echarts' import echarts from 'echarts'
@@ -30,9 +20,12 @@ import echarts from 'echarts'
//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
//import * as echarts from 'echarts' //import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.config.productionTip = false; Vue.config.productionTip = false;
// 全局注册
Vue.component('icon', Icon);
Vue.use(dataV);
new Vue({ new Vue({
router, router,
store, store,
src/utils/drawMixin.js
+58
View File
@@ -0,0 +1,58 @@
// 屏幕适配 mixin 函数
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
data() {
return {
// * 定时函数
drawTiming: null
}
},
mounted () {
this.calcRate()
window.addEventListener('resize', this.resize)
},
unMounted () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
const appRef = this.$refs["appRef"]
console.log(appRef)
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
},
resize () {
clearTimeout(this.drawTiming)
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}
src/utils/resizeMixins.js → src/utils/resizeMixin.js
View File
src/views/bottomLeft.vue
+18 -21
View File
@@ -2,8 +2,8 @@
<div id="bottomLeft"> <div id="bottomLeft">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="chart-bar"></icon> <icon name="chart-bar" class="text-icon"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">数据统计图</span> <span class="fs-xl text mx-2">数据统计图</span>
@@ -17,38 +17,35 @@
</template> </template>
<script> <script>
import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart"; import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
export default { export default {
data() {
return {};
},
components: { components: {
BottomLeftChart BottomLeftChart
}, }
mounted() {}, }
methods: {}
};
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
#bottomLeft { #bottomLeft {
padding: 0.3rem 0.2rem; padding: 20px 16px;
height: 6.5rem; height: $box-height;
min-width: 3.75rem; width: $box-width;
border-radius: 0.0625rem; border-radius: 5px;
.bg-color-black { .bg-color-black {
height: 6.0625rem; height: $box-height - 35px;
border-radius: 0.125rem; border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.chart-box { .chart-box {
margin-top: 0.2rem; margin-top: 16px;
width: 2.125rem; width: 170px;
height: 2.125rem; height: 170px;
.active-ring-name { .active-ring-name {
padding-top: 0.125rem; padding-top: 10px;
} }
} }
} }
src/views/bottomRight.vue
+18 -20
View File
@@ -2,8 +2,8 @@
<div id="bottomRight"> <div id="bottomRight">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="chart-area"></icon> <icon name="chart-area" class="text-icon"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span> <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
@@ -22,40 +22,38 @@
<script> <script>
import BottomRightChart from "@/components/echart/bottom/bottomRightChart"; import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
export default { export default {
data() {
return {};
},
components: { components: {
BottomRightChart BottomRightChart
}, }
mounted() {},
methods: {}
}; };
</script> </script>
<style lang="scss"> <style lang="scss" class>
$box-height: 520px;
$box-width: 100%;
#bottomRight { #bottomRight {
padding: 0.2rem 0.2rem 0; padding: 14px 16px;
height: 6.5rem; height: $box-height;
min-width: 3.75rem; width: $box-width;
border-radius: 0.0625rem; border-radius: 5px;
.bg-color-black { .bg-color-black {
height: 6.1875rem; height: $box-height - 30px;
border-radius: 0.125rem; border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} //下滑线动态 }
//下滑线动态
.decoration2 { .decoration2 {
position: absolute; position: absolute;
right: 0.125rem; right: 0.125rem;
} }
.chart-box { .chart-box {
margin-top: 0.2rem; margin-top: 16px;
width: 2.125rem; width: 170px;
height: 2.125rem; height: 170px;
.active-ring-name { .active-ring-name {
padding-top: 0.125rem; padding-top: 10px;
} }
} }
} }
src/views/center.vue
+111 -63
View File
@@ -1,32 +1,47 @@
<template> <template>
<div id="center"> <div id="center">
<div class="up"> <div class="up">
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title"> <div
<p class="ml-3 colorBlue fw-b">{{item.title}}</p> class="bg-color-black item"
v-for="item in titleItem"
:key="item.title"
>
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
<div> <div>
<dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" /> <dv-digital-flop
class="dv-dig-flop ml-1 mt-2 pl-3"
:config="item.number"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="down"> <div class="down">
<div class="ranking bg-color-black"> <div class="ranking bg-color-black">
<span style="color:#5cd9e8"> <span>
<icon name="align-left"></icon> <icon name="chart-pie" class="text-icon"></icon>
</span> </span>
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span> <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" /> <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
</div> </div>
<div class="percent"> <div class="percent">
<div class="item bg-color-black"> <div class="item bg-color-black">
<span>今日任务通过率</span> <span>今日任务通过率</span>
<CenterChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /> <CenterChart
:id="rate[0].id"
:tips="rate[0].tips"
:colorObj="rate[0].colorData"
/>
</div> </div>
<div class="item bg-color-black"> <div class="item bg-color-black">
<span>今日任务达标率</span> <span>今日任务达标率</span>
<CenterChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> <CenterChart
:id="rate[1].id"
:tips="rate[1].tips"
:colorObj="rate[1].colorData"
/>
</div> </div>
<div class="water"> <div class="water">
<dv-water-level-pond :config="water" style="height: 1.5rem" /> <dv-water-level-pond class="dv-wa-le-po" :config="water" />
</div> </div>
</div> </div>
</div> </div>
@@ -34,152 +49,174 @@
</template> </template>
<script> <script>
import CenterChart from "@/components/echart/center/centerChartRate"; import CenterChart from '@/components/echart/center/centerChartRate'
export default { export default {
data () { data() {
return { return {
titleItem: [ titleItem: [
{ {
title: "今年累计任务建次数", title: '今年累计任务建次数',
number: { number: {
number: [120], number: [120],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
}, },
{ {
title: "本月累计任务次数", title: '本月累计任务次数',
number: { number: {
number: [18], number: [18],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
}, },
{ {
title: "今日累计任务次数", title: '今日累计任务次数',
number: { number: {
number: [2], number: [2],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
}, },
{ {
title: "今年失败任务次数", title: '今年失败任务次数',
number: { number: {
number: [14], number: [14],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
}, },
{ {
title: "今年成功任务次数", title: '今年成功任务次数',
number: { number: {
number: [106], number: [106],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
}, },
{ {
title: "今年达标任务个数", title: '今年达标任务个数',
number: { number: {
number: [100], number: [100],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
} }
} }
], ],
ranking: { ranking: {
data: [ data: [
{ {
name: "周口", name: '周口',
value: 55 value: 55
}, },
{ {
name: "南阳", name: '南阳',
value: 120 value: 120
}, },
{ {
name: "西峡", name: '西峡',
value: 78 value: 78
}, },
{ {
name: "驻马店", name: '驻马店',
value: 66 value: 66
}, },
{ {
name: "新乡", name: '新乡',
value: 80 value: 80
}, },
{ {
name: "新乡2", name: '新乡2',
value: 80 value: 80
}, },
{ {
name: "新乡3", name: '新乡3',
value: 80 value: 80
}, },
{ {
name: "新乡4", name: '新乡4',
value: 80 value: 80
}, },
{ {
name: "新乡5", name: '新乡5',
value: 80 value: 80
}, },
{ {
name: "新乡6", name: '新乡6',
value: 80 value: 80
}, }
], ],
carousel: "single", carousel: 'single',
unit: "人" unit: '人'
}, },
water: { water: {
data: [24, 45], data: [24, 45],
shape: "roundRect", shape: 'roundRect',
formatter: "{value}%", formatter: '{value}%',
waveNum: 3 waveNum: 3
}, },
// 通过率和达标率的组件复用数据 // 通过率和达标率的组件复用数据
rate: [ rate: [
{ {
id: "centerRate1", id: 'centerRate1',
tips: 60, tips: 60,
colorData: { colorData: {
textStyle: "#3fc0fb", textStyle: '#3fc0fb',
series: { series: {
color: ["#00bcd44a", "transparent"], color: ['#00bcd44a', 'transparent'],
dataColor: { dataColor: {
normal: "#03a9f4", normal: '#03a9f4',
shadowColor: "#97e2f5" shadowColor: '#97e2f5'
} }
} }
} }
}, },
{ {
id: "centerRate2", id: 'centerRate2',
tips: 40, tips: 40,
colorData: { colorData: {
textStyle: "#67e0e3", textStyle: '#67e0e3',
series: { series: {
color: ["#faf3a378", "transparent"], color: ['#faf3a378', 'transparent'],
dataColor: { dataColor: {
normal: "#ff9800", normal: '#ff9800',
shadowColor: "#fcebad" shadowColor: '#fcebad'
} }
} }
} }
} }
] ]
}; }
}, },
components: { components: {
CenterChart CenterChart
// centerChart1,
// centerChart2
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -192,26 +229,33 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
.item { .item {
border-radius: 0.0625rem; border-radius: 6px;
padding-top: 0.2rem; padding-top: 8px;
margin-top: 0.1rem; margin-top: 8px;
width: 32%; width: 32%;
height: 0.875rem; height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
} }
} }
.down { .down {
padding: 0.07rem 0.05rem; padding: 6px 4px;
padding-bottom: 0; padding-bottom: 0;
width: 100%; width: 100%;
display: flex; display: flex;
height: 3.1875rem; height: 255px;
justify-content: space-between; justify-content: space-between;
.bg-color-black { .bg-color-black {
border-radius: 0.0625rem; border-radius: 5px;
} }
.ranking { .ranking {
padding: 0.125rem; padding: 10px;
width: 59%; width: 59%;
.dv-scr-rank-board {
height: 225px;
}
} }
.percent { .percent {
width: 40%; width: 40%;
@@ -219,15 +263,19 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
width: 50%; width: 50%;
height: 1.5rem; height: 120px;
span { span {
margin-top: 0.0875rem; margin-top: 8px;
font-size: 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
} }
.water { .water {
width: 100%; width: 100%;
.dv-wa-le-po {
height: 120px;
}
} }
} }
} }
src/views/centerLeft1.vue
+72 -41
View File
@@ -2,12 +2,12 @@
<div id="centerLeft1"> <div id="centerLeft1">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="chart-bar"></icon> <icon name="chart-bar" class="text-icon"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">任务通过率</span> <span class="fs-xl text mx-2">任务通过率</span>
<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> <dv-decoration-3 class="dv-dec-3" />
</div> </div>
</div> </div>
<div class="d-flex jc-center"> <div class="d-flex jc-center">
@@ -15,13 +15,17 @@
</div> </div>
<!-- 4个主要的数据 --> <!-- 4个主要的数据 -->
<div class="bottom-data"> <div class="bottom-data">
<div class="item-box" v-for="(item,index) in numberData" :key="index"> <div
class="item-box mt-2"
v-for="(item, index) in numberData"
:key="index"
>
<div class="d-flex"> <div class="d-flex">
<span class="coin">￥</span> <span class="coin">￥</span>
<dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" /> <dv-digital-flop class="dv-digital-flop" :config="item.number" />
</div> </div>
<p class="text" style="text-align: center;"> <p class="text" style="text-align: center;">
{{item.text}} {{ item.text }}
<span class="colorYellow">(件)</span> <span class="colorYellow">(件)</span>
</p> </p>
</div> </div>
@@ -31,7 +35,7 @@
</template> </template>
<script> <script>
import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart"; import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
export default { export default {
data() { data() {
return { return {
@@ -40,98 +44,125 @@ export default {
number: { number: {
number: [15], number: [15],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
}, },
text: "今日构建总量" text: '今日构建总量'
}, },
{ {
number: { number: {
number: [1144], number: [1144],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
}, },
text: "总共完成数量" text: '总共完成数量'
}, },
{ {
number: { number: {
number: [361], number: [361],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
}, },
text: "正在编译数量" text: '正在编译数量'
}, },
{ {
number: { number: {
number: [157], number: [157],
toFixed: 1, toFixed: 1,
content: "{nt}" textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
}, },
text: "未通过数量" text: '未通过数量'
} }
] ]
}; }
}, },
components: { components: {
CenterLeft1Chart CenterLeft1Chart
}, },
mounted() { mounted() {
this.changeTiming(); this.changeTiming()
}, },
methods: { methods: {
changeTiming() { changeTiming() {
setInterval(() => { setInterval(() => {
this.changeNumber(); this.changeNumber()
}, 3000); }, 3000)
}, },
changeNumber() { changeNumber() {
this.numberData.forEach((item, index) => { this.numberData.forEach((item, index) => {
item.number.number[0] += ++index; item.number.number[0] += ++index
item.number = { ...item.number }; item.number = { ...item.number }
}); })
} }
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
$box-width: 300px;
$box-height: 410px;
#centerLeft1 { #centerLeft1 {
padding: 0.2rem; padding: 16px;
height: 5.125rem; height: $box-height;
min-width: 3.75rem; width: $box-width;
border-radius: 0.0625rem; border-radius: 10px;
.bg-color-black { .bg-color-black {
height: 4.8125rem; height: $box-height - 30px;
border-radius: 0.125rem; border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.chart-box { .dv-dec-3 {
margin-top: 0.2rem; position: relative;
width: 2.125rem; width: 100px;
height: 2.125rem; height: 20px;
.active-ring-name { top: -3px;
padding-top: 0.125rem;
}
} }
.bottom-data { .bottom-data {
.item-box { .item-box {
& > div {
padding-right: 5px;
}
font-size: 14px;
float: right; float: right;
position: relative; position: relative;
width: 50%; width: 50%;
color: #d3d6dd; color: #d3d6dd;
.dv-digital-flop {
width: 120px;
height: 30px;
}
// 金币 // 金币
.coin { .coin {
position: absolute; position: relative;
left: 0.1rem; top: 6px;
top: 0.2125rem; font-size: 20px;
font-size: 0.25rem;
color: #ffc107; color: #ffc107;
} }
.colorYellow { .colorYellow {
color: yellowgreen; color: yellowgreen;
} }
p {
text-align: center;
}
} }
} }
} }
src/views/centerLeft2.vue
+22 -19
View File
@@ -2,12 +2,12 @@
<div id="centerLeft1"> <div id="centerLeft1">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="chart-pie"></icon> <icon name="chart-pie" class="text-icon"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">地图数据</span> <span class="fs-xl text mx-2">地图数据</span>
<dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> <dv-decoration-1 class="dv-dec-1" />
</div> </div>
</div> </div>
<div class="d-flex jc-center"> <div class="d-flex jc-center">
@@ -20,36 +20,39 @@
<script> <script>
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart"; import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
export default { export default {
data() {
return {};
},
components: { components: {
CenterLeft2Chart CenterLeft2Chart
}, },
mounted() {},
methods: {}
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
#centerLeft1 { #centerLeft1 {
padding: 0.2rem; $box-width: 300px;
height: 5.125rem; $box-height: 410px;
min-width: 3.75rem; padding: 16px;
border-radius: 0.0625rem; height: $box-height;
min-width: $box-width;
border-radius: 5px;
.bg-color-black { .bg-color-black {
height: 4.8125rem; height: $box-height - 30px;
border-radius: 0.125rem; border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.dv-dec-1 {
position: relative;
width: 100px;
height: 20px;
top: -3px;
}
.chart-box { .chart-box {
margin-top: 0.2rem; margin-top: 16px;
width: 2.125rem; width: 170px;
height: 2.125rem; height: 170px;
.active-ring-name { .active-ring-name {
padding-top: 0.125rem; padding-top: 10px;
} }
} }
} }
src/views/centerRight1.vue
+35 -28
View File
@@ -2,15 +2,15 @@
<div id="centerRight1"> <div id="centerRight1">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="chart-line"></icon> <icon name="chart-line" class="text-icon"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">任务完成排行榜</span> <span class="fs-xl text mx-2">任务完成排行榜</span>
</div> </div>
</div> </div>
<div class="d-flex jc-center body-box"> <div class="d-flex jc-center body-box">
<dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" /> <dv-scroll-board class="dv-scr-board" :config="config" />
</div> </div>
</div> </div>
</div> </div>
@@ -21,52 +21,59 @@ export default {
data() { data() {
return { return {
config: { config: {
header: ["组件", "分支", "覆盖率"], header: ['组件', '分支', '覆盖率'],
data: [ data: [
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"], ['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"], ['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"], ['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"], ['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"], ['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"], ['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"], ['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"], ['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"], ['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"] ['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
], ],
rowNum: 7, //表格行数 rowNum: 7, //表格行数
headerHeight: 35, headerHeight: 35,
headerBGC: "#0f1325", //表头 headerBGC: '#0f1325', //表头
oddRowBGC: "#0f1325", //奇数行 oddRowBGC: '#0f1325', //奇数行
evenRowBGC: "#171c33", //偶数行 evenRowBGC: '#171c33', //偶数行
index: true, index: true,
columnWidth: [50], columnWidth: [50],
align: ["center"] align: ['center']
}
} }
};
}, },
components: {}, components: {},
mounted() {}, mounted() {},
methods: {} methods: {}
}; }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
$box-height: 410px;
$box-width: 300px;
#centerRight1 { #centerRight1 {
padding: 0.2rem; padding: 16px;
height: 5.125rem; padding-top: 20px;
min-width: 3.75rem; height: $box-height;
border-radius: 0.0625rem; width: $box-width;
border-radius: 5px;
.bg-color-black { .bg-color-black {
height: 4.8125rem; height: $box-height - 30px;
border-radius: 0.125rem; border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.body-box { .body-box {
border-radius: 0.125rem; border-radius: 10px;
overflow: hidden; overflow: hidden;
.dv-scr-board {
width: 270px;
height: 340px;
}
} }
} }
</style> </style>
src/views/centerRight2.vue
+29 -25
View File
@@ -2,14 +2,13 @@
<div id="centerRight2"> <div id="centerRight2">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span>
<icon name="align-left"></icon> <icon name="align-left" class="text-icon"></icon>
</span> </span>
<span class="fs-xl text mx-2">产品销售渠道分析</span> <span class="fs-xl text mx-2">产品销售渠道分析</span>
</div> </div>
<div class="d-flex jc-center body-box" style=" margin-top: 0;"> <div class="d-flex ai-center flex-column body-box">
<dv-capsule-chart :config="config" style="width: 100%;height:2rem" /> <dv-capsule-chart class="dv-cap-chart" :config="config" />
<!-- ---------------------------------------- -->
<centerRight2Chart1 /> <centerRight2Chart1 />
</div> </div>
</div> </div>
@@ -17,7 +16,7 @@
</template> </template>
<script> <script>
import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart"; import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
export default { export default {
data() { data() {
@@ -25,52 +24,57 @@ export default {
config: { config: {
data: [ data: [
{ {
name: "南阳", name: '南阳',
value: 167 value: 167
}, },
{ {
name: "周口", name: '周口',
value: 67 value: 67
}, },
{ {
name: "漯河", name: '漯河',
value: 123 value: 123
}, },
{ {
name: "郑州", name: '郑州',
value: 55 value: 55
}, },
{ {
name: "西峡", name: '西峡',
value: 98 value: 98
} }
] ]
} }
}; }
}, },
components: { centerRight2Chart1 }, components: { centerRight2Chart1 }
mounted() {}, }
methods: {}
};
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
#centerRight2 { #centerRight2 {
padding: 0.0625rem; $box-height: 410px;
height: 5rem; $box-width: 340px;
min-width: 3.75rem; padding: 5px;
border-radius: 0.0625rem; height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black { .bg-color-black {
padding: 0.0625rem; padding: 5px;
height: 5.0625rem; height: $box-height;
border-radius: 0.125rem; width: $box-width;
border-radius: 10px;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.body-box { .body-box {
border-radius: 0.125rem; border-radius: 10px;
overflow: hidden; overflow: hidden;
.dv-cap-chart {
width: 100%;
height: 160px;
}
} }
} }
</style> </style>
src/views/index.vue
+47 -45
View File
@@ -1,54 +1,49 @@
<template> <template>
<div id="index"> <div id="index" ref="appRef">
<dv-full-screen-container class="bg"> <div class="bg">
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host-body"> <div v-else class="host-body">
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<dv-decoration-10 style="width:33.3%;height:.0625rem;" /> <dv-decoration-10 class="dv-dec-10" />
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
<div class="title"> <div class="title">
<span class="title-text">大数据可视化平台</span> <span class="title-text">大数据可视化平台</span>
<dv-decoration-6 <dv-decoration-6
class="title-bototm" class="dv-dec-6"
:reverse="true" :reverse="true"
:color="['#50e3c2', '#67a1e5']" :color="['#50e3c2', '#67a1e5']"
style="width:3.125rem;height:.1rem;"
/> />
</div> </div>
<dv-decoration-8 <dv-decoration-8
class="dv-dec-8"
:reverse="true" :reverse="true"
:color="['#568aea', '#000000']" :color="['#568aea', '#000000']"
style="width:2.5rem;height:.625rem;"
/> />
</div> </div>
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" /> <dv-decoration-10 class="dv-dec-10-s" />
</div> </div>
<!-- 第二行 --> <!-- 第二行 -->
<div class="d-flex jc-between px-2"> <div class="d-flex jc-between px-2">
<div class="d-flex" style="width: 40%"> <div class="d-flex aside-width">
<div <div class="react-left ml-4 react-l-s">
class="react-right ml-4"
style="width: 6.25rem; text-align: left;background-color: #0f1325;"
>
<span class="react-before"></span> <span class="react-before"></span>
<span class="text">数据分析1</span> <span class="text">数据分析1</span>
</div> </div>
<div class="react-right ml-3" style="background-color: #0f1325;"> <div class="react-right ml-3">
<span class="text colorBlue">数据分析2</span> <span class="text">数据分析2</span>
</div> </div>
</div> </div>
<div style="width: 40%" class="d-flex"> <div class="d-flex aside-width">
<div class="react-left bg-color-blue mr-3"> <div class="react-right bg-color-blue mr-3">
<span class="text fw-b">vue-big-screen</span> <span class="text fw-b">vue-big-screen</span>
</div> </div>
<div <div class="react-right mr-4 react-l-s">
class="react-left mr-4"
style="width: 6.25rem; background-color: #0f1325; text-align: right;"
>
<span class="react-after"></span> <span class="react-after"></span>
<span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span> <span class="text"
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -92,28 +87,32 @@
</div> </div>
</div> </div>
</div> </div>
</dv-full-screen-container> </div>
</div> </div>
</template> </template>
<script> <script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js' import { formatTime } from '../utils/index.js'
import centerLeft1 from "./centerLeft1"; import centerLeft1 from './centerLeft1'
import centerLeft2 from "./centerLeft2"; import centerLeft2 from './centerLeft2'
import centerRight1 from "./centerRight1"; import centerRight1 from './centerRight1'
import centerRight2 from "./centerRight2"; import centerRight2 from './centerRight2'
import center from "./center"; import center from './center'
import bottomLeft from "./bottomLeft"; import bottomLeft from './bottomLeft'
import bottomRight from "./bottomRight"; import bottomRight from './bottomRight'
export default { export default {
data () { mixins: [ drawMixin ],
data() {
return { return {
timing: null,
loading: true, loading: true,
dateDay: null, dateDay: null,
dateYear: null, dateYear: null,
dateWeek: null, dateWeek: null,
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
}; }
}, },
components: { components: {
centerLeft1, centerLeft1,
@@ -124,25 +123,28 @@ export default {
bottomLeft, bottomLeft,
bottomRight bottomRight
}, },
mounted () { mounted() {
this.timeFn(); this.timeFn()
this.cancelLoading(); this.cancelLoading()
},
unMounted() {
clearInterval(this.timing)
}, },
methods: { methods: {
timeFn () { timeFn() {
setInterval(() => { this.timing = setInterval(() => {
this.dateDay = formatTime(new Date(), 'HH: mm: ss'); this.dateDay = formatTime(new Date(), 'HH: mm: ss')
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd'); this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
this.dateWeek = this.weekday[new Date().getDay()]; this.dateWeek = this.weekday[new Date().getDay()]
}, 1000) }, 1000)
}, },
cancelLoading () { cancelLoading() {
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false
}, 500); }, 500)
} }
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">