fix: 修改项目适配方案，使用scale缩放进行适配
This commit is contained in:
MTrun
+5
-7
@@ -4,13 +4,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #020308;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// 颜色
|
||||
$colors: (
|
||||
"primary": #db9e3f,
|
||||
"primary": #1A5CD7,
|
||||
"info-1": #4394e4,
|
||||
"info": #4b67af,
|
||||
"white": #ffffff,
|
||||
@@ -11,6 +11,7 @@ $colors: (
|
||||
"dark": #222222,
|
||||
"black-1": #171823,
|
||||
"black": #000000,
|
||||
"icon": #5cd9e8
|
||||
);
|
||||
|
||||
// 字体大小
|
||||
@@ -86,12 +87,12 @@ $spacing-directions: (
|
||||
b: bottom,
|
||||
l: left,
|
||||
);
|
||||
$spacing-base-size: 0.2rem;
|
||||
$spacing-base-size: 0.5rem;
|
||||
$spacing-sizes: (
|
||||
0: 0,
|
||||
1: 0.25,
|
||||
2: 0.5,
|
||||
3: 1,
|
||||
4: 1.5,
|
||||
5: 3,
|
||||
1: 0.5,
|
||||
2: 1,
|
||||
3: 1.5,
|
||||
4: 2,
|
||||
5: 2.5,
|
||||
);
|
||||
|
||||
+65
-29
@@ -1,56 +1,88 @@
|
||||
#index {
|
||||
color: #d3d6dd;
|
||||
background-color: #000000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: left top;
|
||||
overflow: hidden;
|
||||
|
||||
.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-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
width: 6.25rem;
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.title-text {
|
||||
font-size: 0.3rem;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.title-bototm {
|
||||
.dv-dec-6 {
|
||||
position: absolute;
|
||||
bottom: -0.375rem;
|
||||
bottom: -30px;
|
||||
left: 50%;
|
||||
width: 250px;
|
||||
height: 8px;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// 第二行
|
||||
.aside-width {
|
||||
width: 40%;
|
||||
}
|
||||
.react-r-s,
|
||||
.react-l-s {
|
||||
background-color: #0f1325;
|
||||
}
|
||||
|
||||
// 平行四边形
|
||||
.react-left {
|
||||
cursor: pointer;
|
||||
font-size: 0.225rem;
|
||||
width: 3.75rem;
|
||||
height: 0.625rem;
|
||||
line-height: 0.625rem;
|
||||
.react-right {
|
||||
&.react-l-s {
|
||||
text-align: right;
|
||||
width: 500px;
|
||||
}
|
||||
font-size: 18px;
|
||||
width: 300px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
transform: skewX(-45deg);
|
||||
|
||||
.react-after {
|
||||
position: absolute;
|
||||
right: -0.3125rem;
|
||||
right: -25px;
|
||||
top: 0;
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #0f1325;
|
||||
transform: skewX(45deg);
|
||||
}
|
||||
@@ -61,21 +93,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.react-right {
|
||||
cursor: pointer;
|
||||
font-size: 0.225rem;
|
||||
width: 3.75rem;
|
||||
height: 0.625rem;
|
||||
line-height: 0.625rem;
|
||||
.react-left {
|
||||
&.react-l-s {
|
||||
width: 500px;
|
||||
text-align: left;
|
||||
}
|
||||
font-size: 18px;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
transform: skewX(45deg);
|
||||
background-color: #0f1325;
|
||||
|
||||
.react-before {
|
||||
position: absolute;
|
||||
left: -0.3125rem;
|
||||
left: -25px;
|
||||
top: 0;
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #0f1325;
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
@@ -87,7 +123,7 @@
|
||||
}
|
||||
|
||||
.body-box {
|
||||
margin-top: 0.2rem;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -99,7 +135,7 @@
|
||||
|
||||
// 底部数据
|
||||
.bototm-box {
|
||||
margin-top: 0.125rem;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@@ -4,12 +4,10 @@
|
||||
|
||||
<script>
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
import resizeMixins from "@/utils/resizeMixins";
|
||||
import '../map/fujian.js'
|
||||
|
||||
export default {
|
||||
name: 'echart',
|
||||
mixins: [resizeMixins],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
|
||||
@@ -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"] = {}));
|
||||
@@ -4,7 +4,7 @@
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
height="6.25rem"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="6rem"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<Echart
|
||||
:options="options"
|
||||
:id="id"
|
||||
height="1.25rem"
|
||||
width="1.5rem"
|
||||
height="100px"
|
||||
width="100px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="2.75rem"
|
||||
width="3.25rem"
|
||||
height="220px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,7 +62,7 @@ export default {
|
||||
{
|
||||
name: "通过率统计",
|
||||
type: "pie",
|
||||
radius: [10, 60],
|
||||
radius: [10, 50],
|
||||
roseType: "area",
|
||||
center: ["50%", "40%"],
|
||||
data: newData.seriesData
|
||||
|
||||
@@ -10,14 +10,14 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
xData: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
|
||||
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
||||
seriesData: [
|
||||
{ value: 10, name: "rose1" },
|
||||
{ value: 5, name: "rose2" },
|
||||
{ value: 15, name: "rose3" },
|
||||
{ value: 25, name: "rose4" },
|
||||
{ value: 20, name: "rose5" },
|
||||
{ value: 35, name: "rose6" }
|
||||
{ value: 10, name: "data1" },
|
||||
{ value: 5, name: "data2" },
|
||||
{ value: 15, name: "data3" },
|
||||
{ value: 25, name: "data4" },
|
||||
{ value: 20, name: "data5" },
|
||||
{ value: 35, name: "data6" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
id="centreLeft2Chart"
|
||||
ref="centreLeft2ChartRef"
|
||||
:options="options"
|
||||
height="4.5rem"
|
||||
width="4.125rem"
|
||||
height="360px"
|
||||
width="330px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
@@ -224,57 +224,65 @@ export default {
|
||||
reSelectMapRandomArea() {
|
||||
const length = 9;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
let index = Math.floor(Math.random() * length);
|
||||
while (index === this.preSelectMapIndex || index >= length) {
|
||||
index = Math.floor(Math.random() * length);
|
||||
}
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: this.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
this.preSelectMapIndex = index;
|
||||
});
|
||||
},
|
||||
handleMapRandomSelect() {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
const _self = this;
|
||||
setTimeout(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, 0);
|
||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
||||
map.on('mouseover', function (params) {
|
||||
clearInterval(_self.intervalId);
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
let index = Math.floor(Math.random() * length);
|
||||
while (index === this.preSelectMapIndex || index >= length) {
|
||||
index = Math.floor(Math.random() * length);
|
||||
}
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: _self.preSelectMapIndex,
|
||||
dataIndex: this.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: params.dataIndex,
|
||||
dataIndex: index,
|
||||
});
|
||||
_self.preSelectMapIndex = params.dataIndex;
|
||||
});
|
||||
// 移出区域重新随机选中地图区域，并开启定时器
|
||||
map.on('globalout', function () {
|
||||
_self.reSelectMapRandomArea();
|
||||
_self.startInterval();
|
||||
});
|
||||
this.startInterval();
|
||||
this.preSelectMapIndex = index;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
handleMapRandomSelect() {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
const _self = this;
|
||||
setTimeout(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, 0);
|
||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
||||
map.on('mouseover', function (params) {
|
||||
clearInterval(_self.intervalId);
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: _self.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: params.dataIndex,
|
||||
});
|
||||
_self.preSelectMapIndex = params.dataIndex;
|
||||
});
|
||||
// 移出区域重新随机选中地图区域，并开启定时器
|
||||
map.on('globalout', function () {
|
||||
_self.reSelectMapRandomArea();
|
||||
_self.startInterval();
|
||||
});
|
||||
this.startInterval();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreRight2Chart1"
|
||||
height="2.60rem"
|
||||
width="100%"
|
||||
height="200px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
@@ -42,6 +42,7 @@ export default {
|
||||
indicator: newData.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
radius: ["0%", "65%"],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
|
||||
@@ -50,13 +50,6 @@ export default {
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
</script>
|
||||
+6
-13
@@ -3,8 +3,8 @@ import App from './App.vue';
|
||||
import router from './router';
|
||||
import store from './store';
|
||||
import dataV from '@jiaminghi/data-view';
|
||||
Vue.use(dataV);
|
||||
|
||||
// 引入全局css
|
||||
import './assets/scss/style.scss';
|
||||
// 按需引入vue-awesome图标
|
||||
import Icon from 'vue-awesome/components/Icon';
|
||||
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/align-left.js';
|
||||
|
||||
// 全局注册图标
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
// 适配flex
|
||||
import '@/common/flexible.js';
|
||||
|
||||
// 引入全局css
|
||||
import './assets/scss/style.scss';
|
||||
|
||||
|
||||
//引入echart
|
||||
//4.x 引用方式
|
||||
import echarts from 'echarts'
|
||||
@@ -30,9 +20,12 @@ import echarts from 'echarts'
|
||||
//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
|
||||
//import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
// 全局注册
|
||||
Vue.component('icon', Icon);
|
||||
Vue.use(dataV);
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
},
|
||||
}
|
||||
+19
-22
@@ -2,8 +2,8 @@
|
||||
<div id="bottomLeft">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
<span>
|
||||
<icon name="chart-bar" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">数据统计图</span>
|
||||
@@ -17,39 +17,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
|
||||
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
BottomLeftChart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 520px;
|
||||
$box-width: 100%;
|
||||
#bottomLeft {
|
||||
padding: 0.3rem 0.2rem;
|
||||
height: 6.5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 20px 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 6.0625rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 35px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+18
-20
@@ -2,8 +2,8 @@
|
||||
<div id="bottomRight">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-area"></icon>
|
||||
<span>
|
||||
<icon name="chart-area" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
||||
@@ -22,40 +22,38 @@
|
||||
<script>
|
||||
import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
BottomRightChart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" class>
|
||||
$box-height: 520px;
|
||||
$box-width: 100%;
|
||||
#bottomRight {
|
||||
padding: 0.2rem 0.2rem 0;
|
||||
height: 6.5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 14px 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 6.1875rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
} //下滑线动态
|
||||
}
|
||||
//下滑线动态
|
||||
.decoration2 {
|
||||
position: absolute;
|
||||
right: 0.125rem;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+112
-64
@@ -1,32 +1,47 @@
|
||||
<template>
|
||||
<div id="center">
|
||||
<div class="up">
|
||||
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
|
||||
<p class="ml-3 colorBlue fw-b">{{item.title}}</p>
|
||||
<div
|
||||
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>
|
||||
<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 class="down">
|
||||
<div class="ranking bg-color-black">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="align-left"></icon>
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
|
||||
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||
</div>
|
||||
<div class="percent">
|
||||
<div class="item bg-color-black">
|
||||
<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 class="item bg-color-black">
|
||||
<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 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>
|
||||
@@ -34,152 +49,174 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CenterChart from "@/components/echart/center/centerChartRate";
|
||||
import CenterChart from '@/components/echart/center/centerChartRate'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
titleItem: [
|
||||
{
|
||||
title: "今年累计任务建次数",
|
||||
title: '今年累计任务建次数',
|
||||
number: {
|
||||
number: [120],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "本月累计任务次数",
|
||||
title: '本月累计任务次数',
|
||||
number: {
|
||||
number: [18],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今日累计任务次数",
|
||||
title: '今日累计任务次数',
|
||||
number: {
|
||||
number: [2],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年失败任务次数",
|
||||
title: '今年失败任务次数',
|
||||
number: {
|
||||
number: [14],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年成功任务次数",
|
||||
title: '今年成功任务次数',
|
||||
number: {
|
||||
number: [106],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年达标任务个数",
|
||||
title: '今年达标任务个数',
|
||||
number: {
|
||||
number: [100],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
ranking: {
|
||||
data: [
|
||||
{
|
||||
name: "周口",
|
||||
name: '周口',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: "南阳",
|
||||
name: '南阳',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: "西峡",
|
||||
name: '西峡',
|
||||
value: 78
|
||||
},
|
||||
{
|
||||
name: "驻马店",
|
||||
name: '驻马店',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: "新乡",
|
||||
name: '新乡',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡2",
|
||||
name: '新乡2',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡3",
|
||||
name: '新乡3',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡4",
|
||||
name: '新乡4',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡5",
|
||||
name: '新乡5',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡6",
|
||||
name: '新乡6',
|
||||
value: 80
|
||||
},
|
||||
}
|
||||
],
|
||||
carousel: "single",
|
||||
unit: "人"
|
||||
carousel: 'single',
|
||||
unit: '人'
|
||||
},
|
||||
water: {
|
||||
data: [24, 45],
|
||||
shape: "roundRect",
|
||||
formatter: "{value}%",
|
||||
shape: 'roundRect',
|
||||
formatter: '{value}%',
|
||||
waveNum: 3
|
||||
},
|
||||
// 通过率和达标率的组件复用数据
|
||||
rate: [
|
||||
{
|
||||
id: "centerRate1",
|
||||
id: 'centerRate1',
|
||||
tips: 60,
|
||||
colorData: {
|
||||
textStyle: "#3fc0fb",
|
||||
textStyle: '#3fc0fb',
|
||||
series: {
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
color: ['#00bcd44a', 'transparent'],
|
||||
dataColor: {
|
||||
normal: "#03a9f4",
|
||||
shadowColor: "#97e2f5"
|
||||
normal: '#03a9f4',
|
||||
shadowColor: '#97e2f5'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "centerRate2",
|
||||
id: 'centerRate2',
|
||||
tips: 40,
|
||||
colorData: {
|
||||
textStyle: "#67e0e3",
|
||||
textStyle: '#67e0e3',
|
||||
series: {
|
||||
color: ["#faf3a378", "transparent"],
|
||||
color: ['#faf3a378', 'transparent'],
|
||||
dataColor: {
|
||||
normal: "#ff9800",
|
||||
shadowColor: "#fcebad"
|
||||
normal: '#ff9800',
|
||||
shadowColor: '#fcebad'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CenterChart
|
||||
// centerChart1,
|
||||
// centerChart2
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -192,26 +229,33 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
.item {
|
||||
border-radius: 0.0625rem;
|
||||
padding-top: 0.2rem;
|
||||
margin-top: 0.1rem;
|
||||
border-radius: 6px;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
width: 32%;
|
||||
height: 0.875rem;
|
||||
height: 70px;
|
||||
.dv-dig-flop {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.down {
|
||||
padding: 0.07rem 0.05rem;
|
||||
padding: 6px 4px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 3.1875rem;
|
||||
height: 255px;
|
||||
justify-content: space-between;
|
||||
.bg-color-black {
|
||||
border-radius: 0.0625rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ranking {
|
||||
padding: 0.125rem;
|
||||
padding: 10px;
|
||||
width: 59%;
|
||||
.dv-scr-rank-board {
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
.percent {
|
||||
width: 40%;
|
||||
@@ -219,17 +263,21 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 1.5rem;
|
||||
height: 120px;
|
||||
span {
|
||||
margin-top: 0.0875rem;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.water {
|
||||
width: 100%;
|
||||
.dv-wa-le-po {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+73
-42
@@ -2,12 +2,12 @@
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
<span>
|
||||
<icon name="chart-bar" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<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 class="d-flex jc-center">
|
||||
@@ -15,13 +15,17 @@
|
||||
</div>
|
||||
<!-- 4个主要的数据 -->
|
||||
<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">
|
||||
<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>
|
||||
<p class="text" style="text-align: center;">
|
||||
{{item.text}}
|
||||
{{ item.text }}
|
||||
<span class="colorYellow">(件)</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -31,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
|
||||
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -40,99 +44,126 @@ export default {
|
||||
number: {
|
||||
number: [15],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "今日构建总量"
|
||||
text: '今日构建总量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [1144],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "总共完成数量"
|
||||
text: '总共完成数量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [361],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "正在编译数量"
|
||||
text: '正在编译数量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [157],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "未通过数量"
|
||||
text: '未通过数量'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CenterLeft1Chart
|
||||
},
|
||||
mounted() {
|
||||
this.changeTiming();
|
||||
this.changeTiming()
|
||||
},
|
||||
methods: {
|
||||
changeTiming() {
|
||||
setInterval(() => {
|
||||
this.changeNumber();
|
||||
}, 3000);
|
||||
this.changeNumber()
|
||||
}, 3000)
|
||||
},
|
||||
changeNumber() {
|
||||
this.numberData.forEach((item, index) => {
|
||||
item.number.number[0] += ++index;
|
||||
item.number = { ...item.number };
|
||||
});
|
||||
item.number.number[0] += ++index
|
||||
item.number = { ...item.number }
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-width: 300px;
|
||||
$box-height: 410px;
|
||||
|
||||
#centerLeft1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 10px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
.dv-dec-3 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.bottom-data {
|
||||
.item-box {
|
||||
& > div {
|
||||
padding-right: 5px;
|
||||
}
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
color: #d3d6dd;
|
||||
.dv-digital-flop {
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
}
|
||||
// 金币
|
||||
.coin {
|
||||
position: absolute;
|
||||
left: 0.1rem;
|
||||
top: 0.2125rem;
|
||||
font-size: 0.25rem;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
font-size: 20px;
|
||||
color: #ffc107;
|
||||
}
|
||||
.colorYellow {
|
||||
color: yellowgreen;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+22
-19
@@ -2,12 +2,12 @@
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-pie"></icon>
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<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 class="d-flex jc-center">
|
||||
@@ -20,36 +20,39 @@
|
||||
<script>
|
||||
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
CenterLeft2Chart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#centerLeft1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
$box-width: 300px;
|
||||
$box-height: 410px;
|
||||
padding: 16px;
|
||||
height: $box-height;
|
||||
min-width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.dv-dec-1 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+36
-29
@@ -2,15 +2,15 @@
|
||||
<div id="centerRight1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-line"></icon>
|
||||
<span>
|
||||
<icon name="chart-line" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">任务完成排行榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -21,52 +21,59 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
header: ["组件", "分支", "覆盖率"],
|
||||
header: ['组件', '分支', '覆盖率'],
|
||||
data: [
|
||||
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"],
|
||||
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"],
|
||||
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"],
|
||||
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"],
|
||||
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"],
|
||||
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"],
|
||||
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"],
|
||||
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"],
|
||||
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"],
|
||||
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"]
|
||||
['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
|
||||
['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
||||
['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
||||
['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
||||
['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
||||
['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
||||
['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
||||
['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
||||
['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
||||
['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
|
||||
],
|
||||
rowNum: 7, //表格行数
|
||||
headerHeight: 35,
|
||||
headerBGC: "#0f1325", //表头
|
||||
oddRowBGC: "#0f1325", //奇数行
|
||||
evenRowBGC: "#171c33", //偶数行
|
||||
headerBGC: '#0f1325', //表头
|
||||
oddRowBGC: '#0f1325', //奇数行
|
||||
evenRowBGC: '#171c33', //偶数行
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ["center"]
|
||||
align: ['center']
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 410px;
|
||||
$box-width: 300px;
|
||||
#centerRight1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 16px;
|
||||
padding-top: 20px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.body-box {
|
||||
border-radius: 0.125rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.dv-scr-board {
|
||||
width: 270px;
|
||||
height: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+30
-26
@@ -2,14 +2,13 @@
|
||||
<div id="centerRight2">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="align-left"></icon>
|
||||
<span>
|
||||
<icon name="align-left" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
||||
</div>
|
||||
<div class="d-flex jc-center body-box" style=" margin-top: 0;">
|
||||
<dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
|
||||
<!-- ---------------------------------------- -->
|
||||
<div class="d-flex ai-center flex-column body-box">
|
||||
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||
<centerRight2Chart1 />
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
|
||||
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -25,52 +24,57 @@ export default {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: "南阳",
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: "周口",
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: "漯河",
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: "郑州",
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: "西峡",
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
components: { centerRight2Chart1 },
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
components: { centerRight2Chart1 }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#centerRight2 {
|
||||
padding: 0.0625rem;
|
||||
height: 5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
$box-height: 410px;
|
||||
$box-width: 340px;
|
||||
padding: 5px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
padding: 0.0625rem;
|
||||
height: 5.0625rem;
|
||||
border-radius: 0.125rem;
|
||||
padding: 5px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.body-box {
|
||||
border-radius: 0.125rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.dv-cap-chart {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+48
-46
@@ -1,54 +1,49 @@
|
||||
<template>
|
||||
<div id="index">
|
||||
<dv-full-screen-container class="bg">
|
||||
<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 style="width:33.3%;height:.0625rem;" />
|
||||
<dv-decoration-10 class="dv-dec-10" />
|
||||
<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">
|
||||
<span class="title-text">大数据可视化平台</span>
|
||||
<dv-decoration-6
|
||||
class="title-bototm"
|
||||
class="dv-dec-6"
|
||||
:reverse="true"
|
||||
:color="['#50e3c2', '#67a1e5']"
|
||||
style="width:3.125rem;height:.1rem;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-8
|
||||
class="dv-dec-8"
|
||||
:reverse="true"
|
||||
:color="['#568aea', '#000000']"
|
||||
style="width:2.5rem;height:.625rem;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
|
||||
<dv-decoration-10 class="dv-dec-10-s" />
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="d-flex jc-between px-2">
|
||||
<div class="d-flex" style="width: 40%">
|
||||
<div
|
||||
class="react-right ml-4"
|
||||
style="width: 6.25rem; text-align: left;background-color: #0f1325;"
|
||||
>
|
||||
<div class="d-flex aside-width">
|
||||
<div class="react-left ml-4 react-l-s">
|
||||
<span class="react-before"></span>
|
||||
<span class="text">数据分析1</span>
|
||||
</div>
|
||||
<div class="react-right ml-3" style="background-color: #0f1325;">
|
||||
<span class="text colorBlue">数据分析2</span>
|
||||
<div class="react-right ml-3">
|
||||
<span class="text">数据分析2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 40%" class="d-flex">
|
||||
<div class="react-left bg-color-blue mr-3">
|
||||
<div class="d-flex aside-width">
|
||||
<div class="react-right bg-color-blue mr-3">
|
||||
<span class="text fw-b">vue-big-screen</span>
|
||||
</div>
|
||||
<div
|
||||
class="react-left mr-4"
|
||||
style="width: 6.25rem; background-color: #0f1325; text-align: right;"
|
||||
>
|
||||
<div class="react-right mr-4 react-l-s">
|
||||
<span class="react-after"></span>
|
||||
<span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
|
||||
<span class="text"
|
||||
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,28 +87,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "../utils/drawMixin";
|
||||
import { formatTime } from '../utils/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 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 {
|
||||
data () {
|
||||
mixins: [ drawMixin ],
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
};
|
||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
centerLeft1,
|
||||
@@ -124,27 +123,30 @@ export default {
|
||||
bottomLeft,
|
||||
bottomRight
|
||||
},
|
||||
mounted () {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
mounted() {
|
||||
this.timeFn()
|
||||
this.cancelLoading()
|
||||
},
|
||||
unMounted() {
|
||||
clearInterval(this.timing)
|
||||
},
|
||||
methods: {
|
||||
timeFn () {
|
||||
setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), 'HH: mm: ss');
|
||||
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
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)
|
||||
},
|
||||
cancelLoading () {
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
this.loading = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../assets/scss/index.scss';
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user