驾驶舱
This commit is contained in:
parent
9c9dba5452
commit
f312be08bf
2
.env.dev
2
.env.dev
@ -1,7 +1,7 @@
|
|||||||
###
|
###
|
||||||
# @Author: zhp
|
# @Author: zhp
|
||||||
# @Date: 2024-04-28 13:42:51
|
# @Date: 2024-04-28 13:42:51
|
||||||
# @LastEditTime: 2024-05-08 08:57:33
|
# @LastEditTime: 2024-05-10 08:42:44
|
||||||
# @LastEditors: zhp
|
# @LastEditors: zhp
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
function __resizeHandler(entries) {
|
function __resizeHandler(entries) {
|
||||||
|
console.log(entries);
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (entry.contentBoxSize) {
|
if (entry.contentBoxSize) {
|
||||||
// manipulate contentBoxSize
|
// manipulate contentBoxSize
|
||||||
@ -32,7 +33,7 @@ export default {
|
|||||||
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
|
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
MIN_WIDTH: 400,
|
MIN_WIDTH: 390,
|
||||||
chart_mixin_chartInstance: null,
|
chart_mixin_chartInstance: null,
|
||||||
chart_mixin_observer: resizeObserver,
|
chart_mixin_observer: resizeObserver,
|
||||||
chart_mixin_options: {
|
chart_mixin_options: {
|
||||||
|
@ -67,7 +67,7 @@ const mutations = {
|
|||||||
state.copilot.energy = payload.data;
|
state.copilot.energy = payload.data;
|
||||||
break;
|
break;
|
||||||
case "efficiency":
|
case "efficiency":
|
||||||
console.log('222222', payload.chipOee)
|
console.log('222222', payload)
|
||||||
state.copilot.efficiency.chipOee = payload.chipOee;
|
state.copilot.efficiency.chipOee = payload.chipOee;
|
||||||
state.copilot.efficiency.transformRate = payload.transformRate;
|
state.copilot.efficiency.transformRate = payload.transformRate;
|
||||||
state.copilot.efficiency.chipRate = payload.chipRate;
|
state.copilot.efficiency.chipRate = payload.chipRate;
|
||||||
@ -81,8 +81,8 @@ const actions = {
|
|||||||
/** 初始化首页数据 */
|
/** 初始化首页数据 */
|
||||||
async initHome({ commit }) {
|
async initHome({ commit }) {
|
||||||
const dataArr = await getHomeInfo();
|
const dataArr = await getHomeInfo();
|
||||||
const targetArr = await getHomeTarget();
|
const targetArr = await getHomeInfo();
|
||||||
const payload = splitCurrentAndPrevious(dataArr, targetArr);
|
const payload = splitCurrentAndPrevious(dataArr.prodOutputResultDO, targetArr.prodTargetDO);
|
||||||
commit("SET_HOME_INFO", payload);
|
commit("SET_HOME_INFO", payload);
|
||||||
},
|
},
|
||||||
/** 初始化驾驶舱数据 */
|
/** 初始化驾驶舱数据 */
|
||||||
@ -98,18 +98,25 @@ const actions = {
|
|||||||
yield: splitCurrentAndPrevious,
|
yield: splitCurrentAndPrevious,
|
||||||
comprehensive: () => null,
|
comprehensive: () => null,
|
||||||
efficiency: splitCurrentAndPreviousA,
|
efficiency: splitCurrentAndPreviousA,
|
||||||
}[source];
|
}[source]
|
||||||
|
console.log(handler)
|
||||||
// 获取产量数据
|
// 获取产量数据
|
||||||
// console.log('qqqqqq',handler)
|
// console.log('qqqqqq',handler)
|
||||||
let { data: factoryList, type } = await fetcher(period);
|
let { data: factoryList, type } = await fetcher(period)
|
||||||
|
console.log(factoryList,type);
|
||||||
let targetList = null;
|
let targetList = null;
|
||||||
if (source === "yield" || source === "efficiency") {
|
if (source === "yield" || source === "efficiency") {
|
||||||
// 获取目标数据
|
// 获取目标数据
|
||||||
let { data } = await fetcher(period, true)
|
let { data } = await fetcher(period, true)
|
||||||
console.log('11111',data)
|
// console.log('11111',data)
|
||||||
targetList = data;
|
targetList = data
|
||||||
}
|
}
|
||||||
const payload = handler(factoryList, targetList);
|
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
|
||||||
|
let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO
|
||||||
|
console.log(factoryList.ProdOutputDO)
|
||||||
|
console.log('ryf',factoryList)
|
||||||
|
const payload = handler(factoryData, targetData)
|
||||||
|
console.log(payload)
|
||||||
commit("SET_COPILOT_INFO", { type, payload });
|
commit("SET_COPILOT_INFO", { type, payload });
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -127,58 +134,61 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
|||||||
|
|
||||||
// 初始数据
|
// 初始数据
|
||||||
const { chipOee, transformRate, chipRate, stdRate } = initA();
|
const { chipOee, transformRate, chipRate, stdRate } = initA();
|
||||||
factoryListResponse = [
|
// factoryListResponse = [
|
||||||
{
|
// {
|
||||||
factory: 0,
|
// factory: 0,
|
||||||
oee: 0.8,
|
// oee: 0.8,
|
||||||
previousYearOee: 0.7,
|
// previousYearOee: 0.7,
|
||||||
componentConversionEfficiency: 0.8,
|
// componentConversionEfficiency: 0.8,
|
||||||
previousYearComponentConversionEfficiency: 0.7,
|
// previousYearComponentConversionEfficiency: 0.7,
|
||||||
glassType: 0,
|
// glassType: 0,
|
||||||
yieldRate: 0.8,
|
// yieldRate: 0.8,
|
||||||
previousYearYieldRate: 0.7,
|
// previousYearYieldRate: 0.7,
|
||||||
chipYieldRate: 0.38,
|
// chipYieldRate: 0.38,
|
||||||
componentYieldRate: 0.73,
|
// componentYieldRate: 0.73,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
factory: 1,
|
// factory: 1,
|
||||||
oee: 0.8,
|
// oee: 0.8,
|
||||||
previousYearOee: 0.7,
|
// previousYearOee: 0.7,
|
||||||
componentConversionEfficiency: 0.8,
|
// componentConversionEfficiency: 0.8,
|
||||||
previousYearComponentConversionEfficiency: 0.7,
|
// previousYearComponentConversionEfficiency: 0.7,
|
||||||
glassType: 1,
|
// glassType: 1,
|
||||||
yieldRate: 0.8,
|
// yieldRate: 0.8,
|
||||||
previousYearYieldRate: 0.7,
|
// previousYearYieldRate: 0.7,
|
||||||
chipYieldRate: 0.38,
|
// chipYieldRate: 0.38,
|
||||||
componentYieldRate: 0.73,
|
// componentYieldRate: 0.73,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
factory: 2,
|
// factory: 2,
|
||||||
oee: 0.8,
|
// oee: 0.8,
|
||||||
previousYearOee: 0.7,
|
// previousYearOee: 0.7,
|
||||||
componentConversionEfficiency: 0.8,
|
// componentConversionEfficiency: 0.8,
|
||||||
previousYearComponentConversionEfficiency: 0.7,
|
// previousYearComponentConversionEfficiency: 0.7,
|
||||||
glassType: 1,
|
// glassType: 1,
|
||||||
yieldRate: 0.8,
|
// yieldRate: 0.8,
|
||||||
previousYearYieldRate: 0.7,
|
// previousYearYieldRate: 0.7,
|
||||||
chipYieldRate: 0.38,
|
// chipYieldRate: 0.38,
|
||||||
componentYieldRate: 0.73,
|
// componentYieldRate: 0.73,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
factory: 3,
|
// factory: 3,
|
||||||
oee: 0.8,
|
// oee: 0.8,
|
||||||
previousYearOee: 0.7,
|
// previousYearOee: 0.7,
|
||||||
componentConversionEfficiency: 0.8,
|
// componentConversionEfficiency: 0.8,
|
||||||
previousYearComponentConversionEfficiency: 0.7,
|
// previousYearComponentConversionEfficiency: 0.7,
|
||||||
glassType: 0,
|
// glassType: 0,
|
||||||
yieldRate: 0.8,
|
// yieldRate: 0.8,
|
||||||
previousYearYieldRate: 0.7,
|
// previousYearYieldRate: 0.7,
|
||||||
chipYieldRate: 0.38,
|
// chipYieldRate: 0.38,
|
||||||
componentYieldRate: 0.73,
|
// componentYieldRate: 0.73,
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
if (factoryListResponse) {
|
if (factoryListResponse) {
|
||||||
for (const factory of factoryListResponse) {
|
for (const factory of factoryListResponse) {
|
||||||
|
if (factory.glassType === 1) {
|
||||||
|
console.log(factory.yieldRate)
|
||||||
|
}
|
||||||
const fId = getFactoryId(factory);
|
const fId = getFactoryId(factory);
|
||||||
// 获取目标值
|
// 获取目标值
|
||||||
if (targetListResponse) {
|
if (targetListResponse) {
|
||||||
@ -222,6 +232,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
|
|||||||
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
|
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
|
||||||
if (factoryListResponse) {
|
if (factoryListResponse) {
|
||||||
for (const factory of factoryListResponse) {
|
for (const factory of factoryListResponse) {
|
||||||
|
|
||||||
const fId = getFactoryId(factory);
|
const fId = getFactoryId(factory);
|
||||||
// 获取目标值
|
// 获取目标值
|
||||||
if (targetListResponse) {
|
if (targetListResponse) {
|
||||||
@ -317,7 +328,6 @@ function initA() {
|
|||||||
};
|
};
|
||||||
// 芯片良率
|
// 芯片良率
|
||||||
const chipRate = deepClone(stdRate);
|
const chipRate = deepClone(stdRate);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
chipOee,
|
chipOee,
|
||||||
transformRate,
|
transformRate,
|
||||||
@ -369,7 +379,7 @@ function random_default(min = 0, max = 1) {
|
|||||||
|
|
||||||
/* 接口 */
|
/* 接口 */
|
||||||
async function getHomeInfo() {
|
async function getHomeInfo() {
|
||||||
const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
|
const { code, data } = await axios.post("ip/prod-output/cockpitData", {
|
||||||
factorys: [],
|
factorys: [],
|
||||||
date: 4,
|
date: 4,
|
||||||
});
|
});
|
||||||
@ -401,14 +411,14 @@ function getUrl(copilot_module) {
|
|||||||
};
|
};
|
||||||
switch (copilot_module) {
|
switch (copilot_module) {
|
||||||
case "yield":
|
case "yield":
|
||||||
url.comparison = "/ip/prod-output/query-by-date";
|
url.comparison = "ip/prod-output/cockpitData";
|
||||||
url.target = "/ip/prod-target/query-by-date";
|
// url.target = "/ip/prod-target/query-by-date";
|
||||||
break;
|
break;
|
||||||
case "energy":
|
case "energy":
|
||||||
break;
|
break;
|
||||||
case "efficiency":
|
case "efficiency":
|
||||||
url.comparison = "/ip/prod-output/query-Rate-List";
|
url.comparison = "ip/prod-output/cockpitDataRate";
|
||||||
url.target = "/ip/prod-target/query-rate-target";
|
// url.target = "/ip/prod-target/query-rate-target";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -418,7 +428,7 @@ function getUrl(copilot_module) {
|
|||||||
async function doFetch(copilot_module = "yield", fetch_target, params) {
|
async function doFetch(copilot_module = "yield", fetch_target, params) {
|
||||||
const url = getUrl(copilot_module);
|
const url = getUrl(copilot_module);
|
||||||
const { code, data } = await axios.post(
|
const { code, data } = await axios.post(
|
||||||
fetch_target ? url.target : url.comparison,
|
url.comparison,
|
||||||
{
|
{
|
||||||
...params,
|
...params,
|
||||||
}
|
}
|
||||||
|
@ -7,13 +7,12 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="copilot-layout" ref="copilot-layout">
|
<div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]">
|
||||||
<CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
|
<CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
|
||||||
|
|
||||||
<YieldCopilot v-if="page == '产量'" :period="period" />
|
<YieldCopilot v-if="page == '产量'" :period="period" />
|
||||||
<EnergyCopilot v-if="page == '综合'" :period="period" />
|
<EnergyCopilot v-if="page == '综合'" :period="period" />
|
||||||
<EfficiencyCopilot v-if="page == '效率'" :period="period" />
|
<EfficiencyCopilot v-if="page == '效率'" :period="period" />
|
||||||
|
|
||||||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -36,8 +35,24 @@ export default {
|
|||||||
return {
|
return {
|
||||||
page: "产量",
|
page: "产量",
|
||||||
period: "日",
|
period: "日",
|
||||||
|
currentsStyles: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
// watch: {
|
||||||
|
// page(val) {
|
||||||
|
// if (val === '产量') {
|
||||||
|
// console.log(val)
|
||||||
|
// this.currentsStyles =
|
||||||
|
// 'height: calc(100% + 38px)'
|
||||||
|
// console.log(this.currentsStyles)
|
||||||
|
// } else {
|
||||||
|
// console.log(val)
|
||||||
|
// this.currentsStyles = 'height:100%+38px'
|
||||||
|
// console.log(this.currentsStyles)
|
||||||
|
// }
|
||||||
|
// immediate: true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
// mounted() {
|
// mounted() {
|
||||||
// document.body.style.minHeight = "1024px";
|
// document.body.style.minHeight = "1024px";
|
||||||
// document.body.style.minWidth = "1550px";
|
// document.body.style.minWidth = "1550px";
|
||||||
@ -54,9 +69,8 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
|
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: calc(100% + 38px);
|
|
||||||
left: -16px;
|
left: -16px;
|
||||||
top: -8px;
|
/* top: -8px; */
|
||||||
width: calc(100% + 30px);
|
width: calc(100% + 30px);
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -65,6 +79,12 @@ export default {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.produce{
|
||||||
|
height: calc(100% + 38px);
|
||||||
|
}
|
||||||
|
.other {
|
||||||
|
height: 100vh + 50px;
|
||||||
|
}
|
||||||
.copilot-footer {
|
.copilot-footer {
|
||||||
/** position: absolute;
|
/** position: absolute;
|
||||||
bottom: 10px; **/
|
bottom: 10px; **/
|
||||||
|
@ -88,7 +88,7 @@ export default {
|
|||||||
function getTemplate(period, dataList) {
|
function getTemplate(period, dataList) {
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
const month = new Date().getMonth() + 1;
|
const month = new Date().getMonth() + 1;
|
||||||
console.log('11111', dataList);
|
// console.log('11111', dataList);
|
||||||
return period == "日" || period == "周"
|
return period == "日" || period == "周"
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-08 15:55:24
|
* @LastEditTime: 2024-05-09 08:44:21
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -53,7 +53,7 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-template-rows: repeat(1, 1fr);
|
grid-template-rows: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.span-2 {
|
.span-2 {
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: BarChartBase.vue
|
filename: BarChartBase.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-10 08:59:28
|
date: 2024-04-10 08:59:28
|
||||||
description:
|
description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 13:22:43
|
* @Date: 2024-05-07 13:22:43
|
||||||
* @LastEditTime: 2024-05-08 15:52:09
|
* @LastEditTime: 2024-05-09 16:22:24
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -38,7 +38,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
vHeight: {
|
vHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 34,
|
default: 36,
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -10,7 +10,9 @@
|
|||||||
<div class="cities">
|
<div class="cities">
|
||||||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" ref="chart"></div>
|
<!-- <div style="flex:1;padding: 0 20%;"> -->
|
||||||
|
<div class="chart" ref="chart"></div>
|
||||||
|
<!-- </div> -->
|
||||||
<div class="legend" v-if="period == '月' || period == '年'">
|
<div class="legend" v-if="period == '月' || period == '年'">
|
||||||
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
|
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
|
||||||
<span class="legend-item__value">{{ lgd.value }}</span>
|
<span class="legend-item__value">{{ lgd.value }}</span>
|
||||||
@ -123,6 +125,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
period() {
|
period() {
|
||||||
|
console.log(this.$store.getters.copilot.efficiency)
|
||||||
this.initOptions(this.options);
|
this.initOptions(this.options);
|
||||||
},
|
},
|
||||||
factoryId() {
|
factoryId() {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-08 14:54:24
|
* @LastEditTime: 2024-05-09 09:04:07
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:04:53
|
* @Date: 2024-05-07 10:04:53
|
||||||
* @LastEditTime: 2024-05-08 15:58:14
|
* @LastEditTime: 2024-05-09 08:56:44
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -73,8 +73,8 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns:repeat(2, 1fr);
|
||||||
grid-template-rows: .5fr .5fr;
|
grid-template-rows: repeat(2, 1fr)
|
||||||
}
|
}
|
||||||
|
|
||||||
.efficiency-copilot > div {
|
.efficiency-copilot > div {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-08 15:29:28
|
* @LastEditTime: 2024-05-09 08:41:11
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -74,7 +74,7 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
/* grid-template-rows: 1fr 1fr; */
|
grid-template-rows: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.energy-copilot > div {
|
.energy-copilot > div {
|
||||||
|
@ -7,7 +7,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="double-ring-chart">
|
<div class="double-ring-chart">
|
||||||
<div ref="chart" class="double-ring-chart__container"></div>
|
<div class="double-ring-chart__container">
|
||||||
|
<div ref="chart" style="height: 90%;"></div>
|
||||||
|
</div>
|
||||||
<!-- style="{ height: vHeight + 'vh' }" -->
|
<!-- style="{ height: vHeight + 'vh' }" -->
|
||||||
<div class="double-ring-chart__legend">
|
<div class="double-ring-chart__legend">
|
||||||
<div v-for="item in legendItems" :key="item.label" class="legend-item">
|
<div v-for="item in legendItems" :key="item.label" class="legend-item">
|
||||||
@ -169,7 +171,10 @@ function calculateItems(period, valueTuple) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.double-ring-chart__container {
|
.double-ring-chart__container {
|
||||||
flex: 1;
|
flex:1;
|
||||||
|
padding: 0 10%;
|
||||||
|
/* margin: 10%; */
|
||||||
|
/* min-width: 300px; */
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,8 +15,8 @@ export default ({
|
|||||||
tooltip: {},
|
tooltip: {},
|
||||||
title: {
|
title: {
|
||||||
text: titleValue,
|
text: titleValue,
|
||||||
left: "49%",
|
left: "44%",
|
||||||
top: "39%",
|
top: "37%",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
@ -37,7 +37,7 @@ export default ({
|
|||||||
type: "pie",
|
type: "pie",
|
||||||
name: "当前目标",
|
name: "当前目标",
|
||||||
radius: ["70%", "85%"],
|
radius: ["70%", "85%"],
|
||||||
center: ["50%", "52%"],
|
center: ["45%", "52%"],
|
||||||
emptyCircleStyle: {
|
emptyCircleStyle: {
|
||||||
color: "#042c5f33",
|
color: "#042c5f33",
|
||||||
},
|
},
|
||||||
@ -46,7 +46,7 @@ export default ({
|
|||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ["70%", "85%"],
|
radius: ["70%", "85%"],
|
||||||
center: ["50%", "52%"],
|
center: ["45%", "52%"],
|
||||||
avoidLabelOvervlap: false,
|
avoidLabelOvervlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -97,7 +97,7 @@ export default ({
|
|||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ["55%", "70%"],
|
radius: ["55%", "70%"],
|
||||||
center: ["50%", "52%"],
|
center: ["45%", "52%"],
|
||||||
avoidLabelOvervlap: false,
|
avoidLabelOvervlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
|
Loading…
Reference in New Issue
Block a user