Skip to content

V
vue3portal
Commit eca45725 authored by 左玲玲's avatar 左玲玲 😬
Browse files
Options

1848

parent 61149b86
Hide whitespace changes
Inline Side-by-side
Showing with 823 additions and 171 deletions
src/api/api.js
View file @ eca45725
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 08:54:29 * @Date: 2023-08-10 08:54:29
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-11 14:48:08 * @LastEditTime: 2023-08-16 11:34:55
* @FilePath: \vue3portal\src\api\api.js * @FilePath: \vue3portal\src\api\api.js
* @Description: * @Description:
* *
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
import request from "./request"; import request from "./request";
//获取token //获取token
export async function tokens(params) { export async function tokens(params) {
return request(`mesc/oauth/token?grant_type=password&client_id=portal1&client_secret=portal@2022&username=root&password=Nangao@2022`, { return request(`mesc/oauth/token?grant_type=password&client_id=portal1&client_secret=portal@2022&username=DMGG&password=admin123`, {
method: 'POST', method: 'POST',
data: params, data: params,
}); });
......
src/assets/less/main.less
View file @ eca45725
...@@ -64,47 +64,4 @@ body { ...@@ -64,47 +64,4 @@ body {
} }
&::-webkit-scrollbar-button {} &::-webkit-scrollbar-button {}
}
.home {
.el-tabs__item {
color: #fff !important;
margin: 0 !important;
padding: 0 12px !important;
border: none !important;
&.is-active {
background: transparent !important;
border: none !important;
color: #fff !important;
background-color: rgb(1, 91, 133) !important;
}
}
.el-tabs--border-card {
background: transparent !important;
border: none !important;
display: flex;
.el-tabs__content {
padding: 0 !important;
width: 100%;
height: 100%;
>div {
}
}
}
.el-tabs__header {
background: transparent !important;
border: none !important;
.el-tabs__nav-prev,
.el-tabs__nav-next{
>.el-icon{
font-size: 22px !important;
color: #17d3d8 !important;
}
}
}
} }
\ No newline at end of file
src/pages/layouts/components/Energy.vue 0 → 100644
View file @ eca45725
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:03:32
* @FilePath: \vue3portal\src\pages\layouts\components\Energy.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
const props = defineProps({
lineoptions: {
type: Object,
default: {}
},
datas: {
type: Object,
default: {}
}
});
const state = reactive({
chartOption: {}
});
const flag = ref(false);
const processData = () => {
const { areaStyle, smooth, showLegend } = props.lineoptions;
const { legend, xAxis, data } = props.datas ?? {};
let processedData = [];
legend?.forEach((item, i) => {
processedData.push({
name: legend[i],
type: 'line',
label: {
show: false,
position: 'insideRight'
},
smooth:true,
areaStyle,
data: data[i],
yAxisIndex:i
})
});
state.chartOption.series = processedData;
state.chartOption.xAxis.data = xAxis;
state.chartOption.legend.data = legend;
}
const processOption = () => {
state.chartOption = {
color: ['#40b0d8','#7575f0'],
tooltip: {
trigger: 'axis'
},
grid: {
top: '16%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []
},
yAxis: [
{
type: 'value',
name: '度',
nameTextStyle: {
color: "#47c1eb"
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '吨',
nameTextStyle: {
color: "#47c1eb"
},
splitLine: {
show: false
}
}
],
series: []
}
processData();
}
watch(() => props.datas, (newValue, oldValue) => {
flag.value = true;
processOption();
nextTick(() => {
flag.value = false;
})
}, { immediate: true, deep: true });
</script>
<template>
<echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
src/pages/layouts/components/Line.vue 0 → 100644
View file @ eca45725
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:02:38
* @FilePath: \vue3portal\src\pages\layouts\components\Line.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
const props = defineProps({
lineoptions: {
type: Object,
default: {}
},
datas: {
type: Object,
default: {}
}
});
const state = reactive({
chartOption: {}
});
const flag = ref(false);
const processData = () => {
const { areaStyle, smooth, showLegend,showSymbol,legendoptions } = props.lineoptions;
const { legend, xAxis, data } = props.datas ?? {};
let processedData = [];
legend?.forEach((item, i) => {
processedData.push({
name: legend[i],
type: 'line',
label: {
show: false,
position: 'insideRight'
},
smooth,
areaStyle: areaStyle ? areaStyle?.[i] : null,
data: data[i],
showSymbol
})
});
state.chartOption.series = processedData;
state.chartOption.xAxis.data = xAxis;
state.chartOption.legend.data = showLegend ? legend : [];
}
const processOption = () => {
state.chartOption = {
color: props.lineoptions.colors,
tooltip: {
trigger: 'axis'
},
grid: {
top: '16%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
data: [],
...(props.lineoptions.legendoptions ?? {})
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value',
name: props.lineoptions.unit,
nameTextStyle: {
color: "#47c1eb"
},
splitLine: {
show: false
}
},
series: []
}
processData();
}
watch(() => props.datas, (newValue, oldValue) => {
flag.value = true;
processOption();
nextTick(() => {
flag.value = false;
})
}, { immediate: true, deep: true });
</script>
<template>
<echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
src/pages/layouts/components/Produce.vue 0 → 100644
View file @ eca45725
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 17:57:44
* @FilePath: \vue3portal\src\pages\layouts\components\Produce.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
const props = defineProps({
lineoptions: {
type: Object,
default: {}
},
datas: {
type: Object,
default: {}
}
});
const state = reactive({
chartOption: {}
});
const flag = ref(false);
const processData = () => {
const { areaStyle, smooth, showLegend } = props.lineoptions;
const { legend, xAxis, data } = props.datas ?? {};
let processedData = [];
legend?.forEach((item, i) => {
let el = i == legend?.length - 1 ? {
name: legend[i],
type: 'line',
label: {
show: false,
position: 'insideRight'
},
smooth,
areaStyle,
data: data[i],
yAxisIndex: 1
} : {
name: legend[i],
type: 'bar',
label: {
show: false,
position: 'insideRight'
},
data: data[i],
barWidth:6
}
processedData.push(el)
});
state.chartOption.series = processedData;
state.chartOption.xAxis.data = xAxis;
state.chartOption.legend.data = legend;
}
const processOption = () => {
state.chartOption = {
color: ["#EB9750", "#9DFABD", "#61B6F7"],
tooltip: {
trigger: 'axis'
},
grid: {
top: '16%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []
},
yAxis: [
{
type: 'value',
name: '数量',
nameTextStyle: {
color: "#47c1eb"
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '%',
nameTextStyle: {
color: "#47c1eb"
},
splitLine: {
show: false
}
}
],
series: []
}
processData();
}
watch(() => props.datas, (newValue, oldValue) => {
flag.value = true;
processOption();
nextTick(() => {
flag.value = false;
})
}, { immediate: true, deep: true });
</script>
<template>
<echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
src/pages/layouts/components/Scrolltable.vue 0 → 100644
View file @ eca45725
<template>
<div class="swh">
<div class="ptable">
<div :style="{ '--borderc': colors.borderc }" class="theader">
<div v-for="(it, i) in columns" class="hd" :key="i" :title="it.title" :style="{
width: it.width ? it.width + 'px' : 'auto',
flex: it.width ? 'none' : 1,
}">
{{ it.title }}
</div>
</div>
<div :style="{ '--thumbcolor': colors.thumbcolor }" class="tbody">
<div v-for="(it, i) in dataSource" class="br" :key="i">
<div v-for="( item, j ) in columns" class="bd" :style="{
width: item.width ? item.width + 'px' : 'auto',
flex: item.width ? 'none' : 1,
}">
<div v-if="item.render" :key="j">{{ item.render(_, it) }}</div>
<div v-if="!item.render" :key="j" :title="it[item.key]">
{{ it[item.key] }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
columns: {
type: Object,
default: []
},
dataSource: {
type: Object,
default: []
},
colors: {
type: Object,
default: {}
},
})
</script>
<style lang="less" scoped>
.ptable {
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
display: flex;
flex-direction: column;
.theader {
background: transparent;
color: #fff;
background: var(--borderc);
display: flex;
overflow: hidden;
flex-shrink: 0;
width: 100%;
.hd {
padding: 4px;
flex: 1;
}
}
.tbody {
flex: 1;
overflow-y: auto;
width: 100%;
.br {
display: flex;
overflow: hidden;
&:nth-child(odd) {
background: transparent !important;
}
&:nth-child(even) {
background: transparent !important;
}
.bd {
flex: 1;
padding: 4px;
color: #fff;
display: -webkit-box;
//width: 100%;
overflow: hidden;
font-size: 14px !important;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
}
}
}
.tbody::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.tbody::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: none;
background: var(--thumbcolor);
}
.tbody::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: none;
border-radius: 0;
background: transparent;
}
}
</style>
src/pages/layouts/components/Systems.vue 0 → 100644
View file @ eca45725
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 09:00:42
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:30:31
* @FilePath: \vue3portal\src\pages\layouts\components\Systems.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div v-for="item in datas" :key="item.key">
<div @click="handleclick(item)" :class="['itembox',item.catalogue==1 ? 'menufa' : 'menuch']" :style="{cursor:item.url ? 'pointer':'default'}">{{ item.title }}</div>
<div v-if="item?.children?.length" class="rowflex flexbox">
<Systems :datas="item?.children"></Systems>
</div>
</div>
</template>
<script setup>
// 接收父组件传递的数据，递归时传递 children
const props = defineProps({
datas: {
type: Object,
required: true,
}
});
const handleclick= (it)=>{
if(it.url){
window.open(it.url,"_self");
}
}
</script>
<style lang="less" scoped>
.itembox {
height: 34px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 20px;
border-radius: 6px;
&.menufa {
// background-color: #015b85;
margin-bottom: 15px;
margin-top: 5px;
font-size: 16px;
position: relative;
padding-left: 18px;
&::before{
content: '';
position: absolute;
left: 0;
top: 9px;
height: 18px;
width: 4px;
background-color: rgb(0, 89, 255);
border-radius: 4px;
}
}
&.menuch{
// background: #01aefe;
margin-bottom: 10px;
color: rgba(255,255,255,0.7);
}
}
.flexbox {
flex-wrap: wrap;
}
</style>
\ No newline at end of file
src/pages/layouts/components/elsheader.vue
View file @ eca45725
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 17:03:11 * @Date: 2023-08-10 17:03:11
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-15 15:13:21 * @LastEditTime: 2023-08-16 16:21:16
* @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue * @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue
* @Description: * @Description:
* *
......
src/pages/layouts/components/elsmain.vue
View file @ eca45725
<template> <template>
<div class="mainbox home"> <div class="mainbox">
<div class="set1 colflex leftbox"> <div class="set1 colflex leftbox">
<div class="box2"> <div class="box3">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }"></aYinTechBorderA1> <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }"></aYinTechBorderA1>
</div> </div>
<div class="box2">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '设备开动率' }"></aYinTechBorderA1>
</div>
<div class="box3"> <div class="box3">
<aYinTechBorderB3 :config="tableconfig"> <aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }">
<panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办</panelTitleA1> <div class="pad12 swh" style="padding-top: 24px;">
</aYinTechBorderB3> <Produce :datas="produce" :lineoptions="produceoptions"></Produce>
</div>
</aYinTechBorderA1>
</div> </div>
<div class="box2"> <div class="box3">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }"></aYinTechBorderA1> <aYinTechBorderA1 :config="{ ...leftConfig, title: '质量合格率趋势', titleWidth: 120 }">
<div class="pad12 swh" style="padding-top: 24px;">
<Line :datas="quality" :lineoptions="qualityoptions"></Line>
</div>
</aYinTechBorderA1>
</div> </div>
</div> </div>
<div class="set2 colflex" style="justify-content: space-between;"> <div class="set2 colflex" style="gap: 12px;">
<div class="middlebox"> <div class="middlebox">
<aYinTechBorderB4 :config="systemconfig"> <aYinTechBorderB4 :config="systemconfig">
<div class="pad12 swh rowflex" style="gap:12px"> <div class="pad12 swh rowflex" style="gap:12px">
...@@ -27,45 +30,61 @@ ...@@ -27,45 +30,61 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tabcontent"> <div class="tabcontent scrollbar">
{{ activeitem.appName }} <Systems v-if="activeitem?.menuList?.length" :datas="activeitem.menuList"></Systems>
</div> </div>
</div> </div>
</aYinTechBorderB4> </aYinTechBorderB4>
</div> </div>
<div class="box1 rowflex" style="gap:10px"> <div class="box3 rowflex" style="gap: 12px;">
<div class="item5 counter-item"></div> <div style="flex:1;height: 100%;">
<div class="item5 counter-item"></div> <aYinTechBorderB4 :config="config">
<div class="item5 counter-item"></div> <panelTitleA1 :config="{ ...titleconfig }">设备开动率</panelTitleA1>
<div class="item5 counter-item"></div> <div class="pad12 swh" style="padding-top: 24px;">
<div class="item5 counter-item"></div> <Line :datas="runRate" :lineoptions="ratelineoptions"></Line>
</div> </div>
<div class="box3"> </aYinTechBorderB4>
<aYinTechBorderA1 :config="config"> </div>
<panelTitleA1 :config="{ ...titleconfig }">仓库使用趋势</panelTitleA1> <div style="flex:1;height: 100%;">
</aYinTechBorderA1> <aYinTechBorderB3 :config="config">
<panelTitleA1 :config="{ ...titleconfig }">能耗使用趋势</panelTitleA1>
<div class="pad12 swh" style="padding-top: 34px;">
<Energy :datas="energy"></Energy>
</div>
</aYinTechBorderB3>
</div>
</div> </div>
</div> </div>
<div class="set1 colflex leftbox"> <div class="set1 colflex leftbox">
<div class="box2"> <div class="box3">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '能耗统计' }"></aYinTechBorderA1> <aYinTechBorderB3 :config="tableconfig">
</div> <panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办</panelTitleA1>
<div class="box2"> <div class="pad12 swh" style="padding-top: 40px;">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '能耗趋势' }"></aYinTechBorderA1> <Scrolltable :dataSource="taskData" :columns="taskColumns" :colors="taskColors" ></Scrolltable>
</div>
</aYinTechBorderB3>
</div> </div>
<div class="box3"> <div class="box3">
<aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3> <aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3>
</div> </div>
<div class="box2"> <div class="box3">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '质量合格率趋势', titleWidth: 120 }"></aYinTechBorderA1> <aYinTechBorderA1 :config="{ ...rightConfig, title: '仓库使用趋势', titleWidth: 120 }">
<div class="pad12 swh" style="padding-top: 24px;">
<Line :datas="store" :lineoptions="storeoptions"></Line>
</div>
</aYinTechBorderA1>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { postFetch } from "@/api/doFetch"; import { postFetch } from "@/api/doFetch";
import Systems from "./Systems.vue";
import Line from "./Line.vue";
import Energy from "./Energy.vue";
import Produce from "./Produce.vue";
import Scrolltable from "./Scrolltable.vue";
const state = reactive({ const state = reactive({
leftConfig: { leftConfig: {
backgroundColor: $c.bll9, backgroundColor: $c.bll9,
...@@ -109,15 +128,110 @@ const state = reactive({ ...@@ -109,15 +128,110 @@ const state = reactive({
decorationColor: $c.cyl5 decorationColor: $c.cyl5
}, },
menus: [], menus: [],
activeitem: {} activeitem: {},
runRate: {},
energy: {},
quality: {},
store: {},
produce: {},
taskData: []
}); });
const { leftConfig, rightConfig, systemconfig, config, tableconfig, titleconfig, menus, activeitem } = toRefs(state); const { leftConfig, rightConfig, systemconfig, config, tableconfig, titleconfig, menus, activeitem, runRate, energy, quality, store, produce, taskData } = toRefs(state);
let timer = null;
const ratelineoptions = {
showLegend: false,
unit: "%",
colors: ['#23B3F7'],
areaStyle: [
{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#23B3F7' // 0% 处的颜色
}, {
offset: .9, color: '#23B3F700' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
]
},
qualityoptions = {
showLegend: true,
unit: "%",
colors: ['#ffb6b9', '#e0f9b5', '#3d84a8'],
legendoptions: {
right: 20
},
showSymbol: true
},
storeoptions = {
showLegend: true,
colors: ['#5a92af', '#f3f798', '#fc5c9c', '#f2910a'],
legendoptions: {
left: 20
},
showSymbol: true
},
produceoptions = {
showLegend: true,
legendoptions: {
right: 20
}
},
taskColumns = [
{
title: '任务类型',
dataIndex: 'taskTypeName',
key: 'taskTypeName'
},
{
title: '任务单号',
dataIndex: 'taskNo',
key: 'taskNo',
search: false
},
{
title: '任务状态',
dataIndex: 'taskStatusName',
key: 'taskStatusName',
search: false,
width:72
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 150
},
],
taskColors = {
borderc: "rgba(165, 214, 63, 0.2)",
thumbcolor: "rgba(72, 208, 127, 1)"
};
onMounted(() => { onMounted(() => {
// timer = setInterval(() => {
getData(); getData();
// }, 1000)
});
onUnmounted(() => {
clearInterval(timer);
}) })
function getData() { function getData() {
queryAppAndMenus(); queryAppAndMenus();
deviceRunRate();
energyTrend();
qualityRate();
storeUsed();
produceData();
toDoTaskOrder();
} }
//应用 //应用
...@@ -130,27 +244,116 @@ function queryAppAndMenus() { ...@@ -130,27 +244,116 @@ function queryAppAndMenus() {
}) })
}; };
//设备开动率
function deviceRunRate() {
postFetch({ url: "/index/deviceRunRate", params: {} }).then(res => {
if (res.code == "0000") {
let legend = ['设备开动率'],
xAxis = res?.data?.dataList?.map(it => it.name),
data = res?.data?.dataList?.map(it => it.value);
runRate.value = {
legend,
xAxis,
data: [data]
}
}
})
}
//用水用电
function energyTrend() {
postFetch({ url: "/index/energyTrend", params: {} }).then(res => {
if (res.code == "0000") {
let legend = ['电', '水'],
xAxis = res?.data?.dataList?.map(it => it.name),
data = [
res?.data?.dataList?.map(it => it.electricity) ?? [],
res?.data?.dataList?.map(it => it.water) ?? [],
]
energy.value = {
legend,
xAxis,
data
}
}
})
}
//质量合格率
function qualityRate() {
postFetch({ url: "/index/qualityRate", params: {} }).then(res => {
if (res.code == "0000") {
let legend = ['首检', '过程检', '终检'],
xAxis = res?.data?.dataList?.map(it => it.name),
data = [
res?.data?.dataList?.map(it => it.first) ?? [],
res?.data?.dataList?.map(it => it.process) ?? [],
res?.data?.dataList?.map(it => it.last) ?? [],
]
quality.value = {
legend,
xAxis,
data
}
}
})
}
//仓库使用趋势
function storeUsed() {
postFetch({ url: "/index/storeUsed", params: {} }).then(res => {
if (res.code == "0000") {
let legend = ['收货', '入库', '出库', '库存'],
xAxis = res?.data?.dataList?.map(it => it.name),
data = [
res?.data?.dataList?.map(it => it.receive) ?? [],
res?.data?.dataList?.map(it => it.inStore) ?? [],
res?.data?.dataList?.map(it => it.outStore) ?? [],
res?.data?.dataList?.map(it => it.stock) ?? [],
]
store.value = {
legend,
xAxis,
data
}
}
})
}
//生产数据
function produceData() {
postFetch({ url: "/index/produceData", params: {} }).then(res => {
if (res.code == "0000") {
let legend = ['排程数', '实际完成数', '完成率'],
xAxis = res?.data?.dataList?.map(it => it.name),
data = [
res?.data?.dataList?.map(it => it.value) ?? [],
res?.data?.dataList?.map(it => it.finish) ?? [],
res?.data?.dataList?.map(it => it.rate) ?? []
]
produce.value = {
legend,
xAxis,
data
}
}
})
}
//任务待办
function toDoTaskOrder() {
postFetch({ url: "/index/toDoTaskOrder", params: {} }).then(res => {
if (res.code == "0000") {
taskData.value = res?.data?.dataList ?? [];
}
})
}
const handleClick = (it) => { const handleClick = (it) => {
activeitem.value = it; activeitem.value = it;
}; };
// const loop = (data) => {
// data.map(item => {
// if (item.children) {
// return (
// <template>1123</template>
// )
// }
// return (
// <template>789</template>
// )
// })
// };
// const RecursiveTreeNode = computed(() => {
// return <template>11</template>
// })
watch(() => activeitem.value, (newValue, oldValue) => {
console.log(newValue);
});
...@@ -163,6 +366,49 @@ watch(() => activeitem.value, (newValue, oldValue) => { ...@@ -163,6 +366,49 @@ watch(() => activeitem.value, (newValue, oldValue) => {
display: flex; display: flex;
gap: 18px; gap: 18px;
.content-wrap {
.por;
text-align: center;
width: 50%;
.decoFrameA2 {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto;
.slot-wrap {
.i {
font-size: 28px
}
}
}
.block-title {
.ff("cn1");
.fc(@cbl3);
font-size: 16px;
line-height: 1;
.unit {
display: block;
font-size: 12px;
}
}
.numbers {
display: inline-block;
text-align: center;
line-height: 1;
font-size: 28px;
margin-top: 10px;
.ff("en0");
position: relative;
vertical-align: text-top;
.fc(@cbl3);
}
}
.leftbox { .leftbox {
gap: 15px; gap: 15px;
} }
...@@ -184,79 +430,7 @@ watch(() => activeitem.value, (newValue, oldValue) => { ...@@ -184,79 +430,7 @@ watch(() => activeitem.value, (newValue, oldValue) => {
.middlebox { .middlebox {
width: 100%; width: 100%;
height: 500px; height: 618px;
}
.item5 {
height: 100%;
flex: 1;
}
.counter-item {
.bdl(@blA15, 3px);
.bdFilter;
.bgc(fade(@blA17, 70%));
display: inline-block;
height: 100%;
padding: 10px;
position: relative;
.icon {
.fc(var(--font-normal));
font-size: 32px;
z-index: 1;
.poa;
left: 5px;
top: 50%;
.fixc("y");
width: 50px;
height: 58px;
line-height: 60px;
text-align: center;
}
.name {
.fc(var(--font-normal));
font-size: 16px;
.ff("cn1");
z-index: 1;
.por;
.unit {
font-size: 12px;
}
}
.content {
.fc(var(--font-normal));
margin: 10px 0;
.num {
font-size: 24px;
.por;
font-weight: bold;
.ff("en0");
.fc(var(--font-normal));
.dt-scroll-digital {
text-align: center;
}
.plus {
.poa;
left: 101%;
top: -5px;
font-size: 12px;
.fc(var(--font-normal));
font-weight: normal;
.ff("arial");
}
}
}
&:last-child {
margin: 0;
}
} }
.pad12 { .pad12 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment