Compare commits
No commits in common. "06fa7d40b3af3989586497bf2a267b418b284380" and "c600d14f8ff6115b948b6fd8f9a6bee764aaf7f7" have entirely different histories.
06fa7d40b3
...
c600d14f8f
@ -6,34 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-grid-item" style="">
|
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
|
||||||
<div
|
|
||||||
class="pie-chart"
|
|
||||||
ref="pieChart"
|
|
||||||
:data-eqname="value.equipmentName || 'Default'"></div>
|
|
||||||
<div class="data-view">
|
|
||||||
<div class="data-view__item">
|
|
||||||
<!-- <div class="data-view__item__value">111</div> -->
|
|
||||||
<div class="data-view__item__value">{{ textData.workTime }}</div>
|
|
||||||
<div class="data-view__item__title blue">工作时长</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-view__item">
|
|
||||||
<!-- <div class="data-view__item__value">22</div> -->
|
|
||||||
<div class="data-view__item__value">{{ textData.stopTime }}</div>
|
|
||||||
<div class="data-view__item__title green">停机时长</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-view__item">
|
|
||||||
<!-- <div class="data-view__item__value">10</div> -->
|
|
||||||
<div class="data-view__item__value">{{ textData.downTime }}</div>
|
|
||||||
<div class="data-view__item__title purple">故障时长</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-view__item">
|
|
||||||
<!-- <div class="data-view__item__value">100%</div> -->
|
|
||||||
<div class="data-view__item__value">{{ textData.peEfficiency }}</div>
|
|
||||||
<div class="data-view__item__title yellow">速度开动率</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -46,27 +19,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
textData: {
|
|
||||||
workTime: '',
|
|
||||||
downTime: '',
|
|
||||||
stopTime: '',
|
|
||||||
peEfficiency: '',
|
|
||||||
},
|
|
||||||
config: {
|
config: {
|
||||||
title: {
|
|
||||||
text: '产线1', //<=========
|
|
||||||
top: '35%',
|
|
||||||
left: '49%',
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 18,
|
|
||||||
},
|
|
||||||
subtext: '设备', //<=========
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
|
|
||||||
grid: {
|
grid: {
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -77,7 +30,6 @@ export default {
|
|||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
show: false,
|
|
||||||
top: '0%',
|
top: '0%',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -87,70 +39,34 @@ export default {
|
|||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
// 嵌套环形图
|
|
||||||
{
|
{
|
||||||
// 外环
|
name: this.value.equipmentName || 'Default',
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['75%', '90%'],
|
radius: ['40%', '75%'],
|
||||||
center: ['50%', '45%'],
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
|
position: 'center',
|
||||||
},
|
},
|
||||||
data: [
|
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
|
||||||
//<=========
|
name: ['工作时长', '停机时长', '故障时长'][index],
|
||||||
{ name: '工作时长', value: 1048 },
|
value: this.value[v],
|
||||||
{ name: '停机时长', value: 735 },
|
})),
|
||||||
{ name: '故障时长', value: 580 },
|
// data: [
|
||||||
],
|
// { value: 1048, name: 'Search Engine' },
|
||||||
|
// { value: 735, name: 'Direct' },
|
||||||
|
// { value: 580, name: 'Email' },
|
||||||
|
// { value: 484, name: 'Union Ads' },
|
||||||
|
// { value: 300, name: 'Video Ads' },
|
||||||
|
// ],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
// 内环
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
center: ['50%', '45%'],
|
|
||||||
radius: ['60%', '75%'],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
//<=========
|
|
||||||
{ name: '总', value: 3000 },
|
|
||||||
{ name: '', value: 1400 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: this.value.equipmentName || 'Default',
|
|
||||||
// type: 'pie',
|
|
||||||
// radius: ['40%', '75%'],
|
|
||||||
// avoidLabelOverlap: false,
|
|
||||||
// label: {
|
|
||||||
// show: false,
|
|
||||||
// position: 'center',
|
|
||||||
// },
|
|
||||||
// data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
|
|
||||||
// name: ['工作时长', '停机时长', '故障时长'][index],
|
|
||||||
// value: this.value[v],
|
|
||||||
// })),
|
|
||||||
// // data: [
|
|
||||||
// // { value: 1048, name: 'Search Engine' },
|
|
||||||
// // { value: 735, name: 'Direct' },
|
|
||||||
// // { value: 580, name: 'Email' },
|
|
||||||
// // { value: 484, name: 'Union Ads' },
|
|
||||||
// // { value: 300, name: 'Video Ads' },
|
|
||||||
// // ],
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('value', this.value);
|
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
this.chart = echarts.init(this.$refs.pieChart);
|
this.chart = echarts.init(this.$el);
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.chart.setOption(this.config);
|
this.chart.setOption(this.config);
|
||||||
});
|
});
|
||||||
@ -159,120 +75,24 @@ export default {
|
|||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.chart) this.chart.dispose();
|
if (this.chart) this.chart.dispose();
|
||||||
},
|
},
|
||||||
watch: {
|
methods: {},
|
||||||
value: {
|
|
||||||
handler(val) {
|
|
||||||
this.updateConfig(val);
|
|
||||||
if (this.chart) this.chart.setOption(this.config);
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateConfig(item) {
|
|
||||||
const {
|
|
||||||
lineName, // 产线
|
|
||||||
equipmentName, // 设备
|
|
||||||
downTime, // 故障时长(h)
|
|
||||||
stopTime, // 停机时长(h)
|
|
||||||
workTime, // 工作时长(h)
|
|
||||||
peEfficiency, // 速度开动率
|
|
||||||
timeEfficiency, // 时间开动率
|
|
||||||
//===============//
|
|
||||||
sectionName,
|
|
||||||
workRate,
|
|
||||||
stopRate,
|
|
||||||
downRate,
|
|
||||||
realProcSpeed,
|
|
||||||
designProcSpeed,
|
|
||||||
oee,
|
|
||||||
teep,
|
|
||||||
downCount,
|
|
||||||
mtbf,
|
|
||||||
mttr,
|
|
||||||
} = item;
|
|
||||||
this.config.title.text = lineName;
|
|
||||||
this.config.title.subtext = equipmentName;
|
|
||||||
this.config.series[0].data = [
|
|
||||||
{ name: '工作时长', value: workTime },
|
|
||||||
{ name: '停机时长', value: stopTime },
|
|
||||||
{ name: '故障时长', value: downTime },
|
|
||||||
];
|
|
||||||
this.config.series[1].data = [
|
|
||||||
{ name: '速度开动率', value: peEfficiency },
|
|
||||||
{ name: '', value: Math.ceil(peEfficiency) - peEfficiency },
|
|
||||||
];
|
|
||||||
//
|
|
||||||
this.textData = {
|
|
||||||
workTime: +workTime.toFixed(2),
|
|
||||||
stopTime: +stopTime.toFixed(2),
|
|
||||||
downTime: +downTime.toFixed(2),
|
|
||||||
peEfficiency: +peEfficiency.toFixed(2),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.chart-grid-item {
|
|
||||||
padding: 12px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pie-chart {
|
.pie-chart {
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
min-height: 320px;
|
||||||
|
background: #f1f1f1;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-view {
|
.pie-chart::before {
|
||||||
display: flex;
|
content: attr(data-eqname);
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-view__item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-view__item:not(:last-child) {
|
|
||||||
border-right: 1px solid #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-view__item__value {
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 1;
|
||||||
}
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
.data-view__item__title {
|
left: 0;
|
||||||
font-size: 8px;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue {
|
|
||||||
color: #3da8fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
color: #8ef0ab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.purple {
|
|
||||||
color: #6b5cfd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow {
|
|
||||||
color: #ffc72a;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -13,64 +13,46 @@
|
|||||||
ref="search-bar"
|
ref="search-bar"
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
<el-row>
|
<!-- 列表 -->
|
||||||
<el-col class="custom-tabs">
|
<base-table
|
||||||
<el-tabs
|
class="base-table__margin"
|
||||||
v-model="activeName"
|
:table-props="tableProps"
|
||||||
:stretch="true"
|
:table-data="list"
|
||||||
@tab-click="handleTabClick">
|
@emitFun="handleEmitFun">
|
||||||
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
|
<!-- :page="queryParams.pageNo"
|
||||||
<!-- 列表 -->
|
:limit="queryParams.pageSize" -->
|
||||||
<base-table
|
<!-- <method-btn
|
||||||
class="base-table__margin"
|
v-if="tableBtn.length"
|
||||||
:table-props="tableProps"
|
slot="handleBtn"
|
||||||
:page="1"
|
label="操作"
|
||||||
:limit="10"
|
:method-list="tableBtn"
|
||||||
:table-data="list"
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
@emitFun="handleEmitFun"></base-table>
|
</base-table>
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane :label="'\u3000可视化\u3000'" name="graph">
|
|
||||||
<div
|
|
||||||
v-if="activeName == 'graph'"
|
|
||||||
class="graph"
|
|
||||||
style="display: flex; flex-direction: column; position: relative">
|
|
||||||
<div class="blue-title">各设备加工数量</div>
|
|
||||||
<div class="legend">
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="icon blue"></span>
|
|
||||||
<span class="text">工作时长</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="icon green"></span>
|
|
||||||
<span class="text">停机时长</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="icon purple"></span>
|
|
||||||
<span class="text">故障时长</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="icon yellow"></span>
|
|
||||||
<span class="text">速度开动率</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="graph-grid">
|
|
||||||
<div class="bg-grid grid-line">
|
|
||||||
<div class="grid-item" v-for="item in list.length" :key="item"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-grid grid-charts">
|
<!-- 分页组件 -->
|
||||||
<pie-chart
|
<!-- <pagination
|
||||||
v-for="item in list"
|
v-show="total > 0"
|
||||||
:key="item.id"
|
:total="total"
|
||||||
:value="item" />
|
:page.sync="queryParams.pageNo"
|
||||||
<!-- <pie-chart v-for="item in 5" :key="item" :value="item" /> -->
|
:limit.sync="queryParams.pageSize"
|
||||||
</div>
|
@pagination="getList" /> -->
|
||||||
</div>
|
|
||||||
</div>
|
<!-- 对话框(添加 / 修改) -->
|
||||||
</el-tab-pane>
|
<base-dialog
|
||||||
</el-tabs>
|
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'"
|
||||||
</el-col>
|
:dialogVisible="open"
|
||||||
</el-row>
|
:width="visualizationOpen ? '80%' : '700px'"
|
||||||
|
@closed="closed"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<div class="visualization" v-if="visualizationOpen">
|
||||||
|
<pie-chart v-for="item in list" :key="item.id" :value="item" />
|
||||||
|
</div>
|
||||||
|
<div v-if="trendOpen">
|
||||||
|
<h1>查看趋势</h1>
|
||||||
|
</div>
|
||||||
|
</base-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -86,7 +68,6 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'table',
|
|
||||||
open: false,
|
open: false,
|
||||||
visualizationOpen: false,
|
visualizationOpen: false,
|
||||||
trendOpen: false,
|
trendOpen: false,
|
||||||
@ -245,7 +226,7 @@ export default {
|
|||||||
parent: 'dateFilterType',
|
parent: 'dateFilterType',
|
||||||
// 时间段选择
|
// 时间段选择
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
// label: '时间段',
|
label: '时间段',
|
||||||
dateType: 'daterange',
|
dateType: 'daterange',
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
@ -259,7 +240,7 @@ export default {
|
|||||||
parent: 'dateFilterType',
|
parent: 'dateFilterType',
|
||||||
// 日期选择
|
// 日期选择
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
// label: '日期',
|
label: '日期',
|
||||||
dateType: 'date',
|
dateType: 'date',
|
||||||
placeholder: '选择日期',
|
placeholder: '选择日期',
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
@ -274,16 +255,16 @@ export default {
|
|||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// type: 'separate',
|
type: 'separate',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// type: 'button',
|
type: 'button',
|
||||||
// btnName: '设备可视化',
|
btnName: '设备可视化',
|
||||||
// name: 'visualization',
|
name: 'visualization',
|
||||||
// plain: true,
|
plain: true,
|
||||||
// color: 'success',
|
color: 'success',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// type: 'button',
|
// type: 'button',
|
||||||
// btnName: 'OEE',
|
// btnName: 'OEE',
|
||||||
@ -369,6 +350,7 @@ export default {
|
|||||||
params: this.queryParams,
|
params: this.queryParams,
|
||||||
});
|
});
|
||||||
if (code == 0) {
|
if (code == 0) {
|
||||||
|
console.log('data', data);
|
||||||
this.list = data;
|
this.list = data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -411,8 +393,6 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
submitForm() {},
|
submitForm() {},
|
||||||
|
|
||||||
handleTabClick() {},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -422,141 +402,4 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.custom-tabs) {
|
|
||||||
.el-tabs__header {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
transform: translateY(-12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__item {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-title {
|
|
||||||
position: relative;
|
|
||||||
padding: 4px 0;
|
|
||||||
padding-left: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 6px;
|
|
||||||
height: 16px;
|
|
||||||
width: 4px;
|
|
||||||
border-radius: 1px;
|
|
||||||
background: #0b58ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.graph-grid {
|
|
||||||
margin-top: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
// background: #0003;
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
display: grid;
|
|
||||||
place-content: center;
|
|
||||||
grid-template-columns: repeat(4, minmax(280px, 1fr));
|
|
||||||
grid-auto-columns: 280px;
|
|
||||||
grid-auto-rows: 290px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-line::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
width: calc(100% + 2px);
|
|
||||||
height: calc(100% + 2px);
|
|
||||||
display: inline-block;
|
|
||||||
border: 8px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-charts {
|
|
||||||
position: absolute;
|
|
||||||
width: calc(100% - 24px);
|
|
||||||
top: 12px;
|
|
||||||
left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item:not(:first-child) {
|
|
||||||
border-left: 0;
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 12px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend .legend-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend .legend-item .icon {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 1px;
|
|
||||||
margin-right: 4px;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend .legend-item .text {
|
|
||||||
color: #8c8c8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue {
|
|
||||||
background-color: #3da8fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
background-color: #8ef0ab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.purple {
|
|
||||||
background-color: #6b5cfd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow {
|
|
||||||
background-color: #ffc72a;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1390px) {
|
|
||||||
.bg-grid {
|
|
||||||
grid-template-columns: repeat(3, minmax(280px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1190px) {
|
|
||||||
.bg-grid {
|
|
||||||
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
|
||||||
.bg-grid {
|
|
||||||
grid-template-columns: repeat(1, minmax(280px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -9,52 +9,16 @@
|
|||||||
<div style="flex: 1; display: flex; background: #f2f4f9">
|
<div style="flex: 1; display: flex; background: #f2f4f9">
|
||||||
<div
|
<div
|
||||||
class="app-container"
|
class="app-container"
|
||||||
style="
|
style="margin-right: 12px; border-radius: 8px; background: #fff">
|
||||||
margin-right: 12px;
|
<div class="factory-list" style="background: #ccc; height: 36px"></div>
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0;
|
|
||||||
">
|
|
||||||
<div
|
|
||||||
class="factory-list__selector"
|
|
||||||
style="margin: 12px"
|
|
||||||
title="点击切换工厂"
|
|
||||||
@mouseenter="factoryListOpen = true"
|
|
||||||
@mouseleave="factoryListOpen = false">
|
|
||||||
{{ currentFactory?.label || '工厂名称' }}
|
|
||||||
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
|
|
||||||
<ul
|
|
||||||
class="factory-list"
|
|
||||||
v-if="sidebarContent.length"
|
|
||||||
@click.prevent="factoryChangeHandler">
|
|
||||||
<li
|
|
||||||
v-for="fc in sidebarContent"
|
|
||||||
:key="fc.id"
|
|
||||||
:data-value="fc.id"
|
|
||||||
class="factory-list__item"
|
|
||||||
:class="{ 'is-current': fc.id == currentFactory?.id }">
|
|
||||||
{{ fc.label }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div v-else style="color: #0008; width: 128px; text-align: center">
|
|
||||||
- 无 -
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- side bar -->
|
<!-- side bar -->
|
||||||
<div class="side-bar__left" style="width: 240px; height: 100%">
|
<div
|
||||||
|
class="side-bar__left"
|
||||||
|
style="width: 240px; padding: 12px; height: 100%">
|
||||||
<el-tree
|
<el-tree
|
||||||
class="custom-tree-class"
|
:data="sidebarContent"
|
||||||
:data="currentFactory?.children"
|
|
||||||
:props="treeProps"
|
:props="treeProps"
|
||||||
:empty-text="' - 暂无数据 - '"
|
@node-click="handleSidebarItemClick" />
|
||||||
icon-class="custom-icon-class"
|
|
||||||
@node-click="handleSidebarItemClick">
|
|
||||||
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
|
|
||||||
<span class="icon"></span>
|
|
||||||
<span>{{ node.label }}</span>
|
|
||||||
</div> -->
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -70,7 +34,7 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col class="custom-tabs">
|
<el-col class="custom-tabs">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
||||||
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
|
<el-tab-pane label="数据列表" name="table">
|
||||||
<base-table
|
<base-table
|
||||||
v-if="mode == 'table'"
|
v-if="mode == 'table'"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
@ -86,7 +50,7 @@
|
|||||||
@clickBtn="handleTableBtnClick" /> -->
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
</base-table>
|
</base-table>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
|
<el-tab-pane label="柱状图" name="graph">
|
||||||
<div class="graph" style="height: 56vh">
|
<div class="graph" style="height: 56vh">
|
||||||
<!-- graph -->
|
<!-- graph -->
|
||||||
<Graph v-if="list.length" :equipment-list="list" />
|
<Graph v-if="list.length" :equipment-list="list" />
|
||||||
@ -120,16 +84,6 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
factoryListOpen: false,
|
|
||||||
currentFactory: null,
|
|
||||||
factoryList: [
|
|
||||||
{ name: '1', value: 1 },
|
|
||||||
{ name: '2', value: 2 },
|
|
||||||
{ name: '3', value: 3 },
|
|
||||||
{ name: '4', value: 4 },
|
|
||||||
{ name: '5', value: 5 },
|
|
||||||
{ name: '6', value: 6 },
|
|
||||||
],
|
|
||||||
sidebarContent: [
|
sidebarContent: [
|
||||||
// {
|
// {
|
||||||
// id: 'fc1',
|
// id: 'fc1',
|
||||||
@ -330,16 +284,8 @@ export default {
|
|||||||
console.log('handle tab click: ', tab, event);
|
console.log('handle tab click: ', tab, event);
|
||||||
},
|
},
|
||||||
|
|
||||||
factoryChangeHandler(event) {
|
|
||||||
this.factoryListOpen = false;
|
|
||||||
const fcId = event.target.dataset.value;
|
|
||||||
console.log('fc id', fcId);
|
|
||||||
this.handleSidebarItemClick({ id: fcId, type: '工厂' });
|
|
||||||
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSidebarItemClick({ label, id, type }) {
|
handleSidebarItemClick({ label, id, type }) {
|
||||||
console.log('label clicked!', label, id, type);
|
console.log('lable clicked!', label, id, type);
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case '设备':
|
case '设备':
|
||||||
this.queryParams.equipmentId = id;
|
this.queryParams.equipmentId = id;
|
||||||
@ -395,7 +341,6 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.side-bar__left >>> .is-current {
|
.side-bar__left >>> .is-current {
|
||||||
padding: 0;
|
|
||||||
color: #111;
|
color: #111;
|
||||||
background: #f2f4f7;
|
background: #f2f4f7;
|
||||||
}
|
}
|
||||||
@ -424,136 +369,9 @@ export default {
|
|||||||
transform: translateY(-12px);
|
transform: translateY(-12px);
|
||||||
}
|
}
|
||||||
.custom-tabs >>> .el-tabs__item {
|
.custom-tabs >>> .el-tabs__item {
|
||||||
padding-left: 0px !important;
|
padding-left: 8px !important;
|
||||||
padding-right: 0px !important;
|
padding-right: 8px !important;
|
||||||
line-height: 36px !important;
|
line-height: 36px !important;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.factory-list__selector {
|
|
||||||
position: relative;
|
|
||||||
height: 36px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 36px;
|
|
||||||
padding-left: 28px;
|
|
||||||
background: url(../../../assets/images/factory-icon.png) 0 / 10% no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__selector:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0008;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__selector::after {
|
|
||||||
/* content: ''; */
|
|
||||||
position: absolute;
|
|
||||||
top: 16px;
|
|
||||||
right: 12px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
/* background: #5c5c5c; */
|
|
||||||
border-color: #000;
|
|
||||||
border-width: 4px;
|
|
||||||
border-style: solid;
|
|
||||||
border-top-color: transparent;
|
|
||||||
border-right-color: transparent;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
.factory-list__selector:hover::after {
|
|
||||||
/* cursor: pointer; */
|
|
||||||
border-left-color: #0008;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__wrapper {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 32px 10px #0002;
|
|
||||||
border-radius: 8px;
|
|
||||||
top: 36px;
|
|
||||||
left: 90px;
|
|
||||||
/* max-width: 128px; */
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
/* transition: all 0.3s ease-out; */
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__wrapper.open {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list {
|
|
||||||
color: #0008;
|
|
||||||
max-height: 240px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__item {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 8px 64px 8px 16px;
|
|
||||||
/* min-width: 64px; */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__item:hover,
|
|
||||||
.factory-list__item.is-current {
|
|
||||||
background: #e3efff;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.factory-list__item.is-current::after {
|
|
||||||
content: '√';
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tree-class >>> .el-tree-node__content {
|
|
||||||
height: auto !important;
|
|
||||||
padding: 8px 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
|
|
||||||
padding: 8px 18px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content {
|
|
||||||
padding: 8px 24px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom-icon-class {
|
|
||||||
margin-right: 8px;
|
|
||||||
width: 20px;
|
|
||||||
height: 24px;
|
|
||||||
background: url('../../../assets/images/tree-icon-1.png') 100% / contain
|
|
||||||
no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-icon-class.el-tree-node__expand-icon.expanded {
|
|
||||||
transform: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tree-node__children .custom-icon-class {
|
|
||||||
background: url('../../../assets/images/tree-icon-2.png') 100% / contain
|
|
||||||
no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tree-node__children .el-tree-node__children .custom-icon-class {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user