大屏BI添加与优化V0.1
This commit is contained in:
@@ -1,8 +1,14 @@
|
||||
<!-- 今日工单 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">今日巡检任务</div>
|
||||
<el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
|
||||
<el-table
|
||||
height="300"
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
ref="tableRef"
|
||||
highlight-current-row
|
||||
@mouseover.native="clearScroll"
|
||||
@mouseleave.native="createScroll">
|
||||
<el-table-column prop="taskName" label="任务名称" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="type" label="任务类型" align="center">
|
||||
<template #default="scope">
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '本月任务统计',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -94,7 +94,8 @@ function updateData() {
|
||||
if (res.code === 200) {
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<!-- 今日工单 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">今日维修任务</div>
|
||||
<el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
|
||||
<el-table
|
||||
height="300"
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
ref="tableRef"
|
||||
highlight-current-row
|
||||
@mouseover.native="clearScroll"
|
||||
@mouseleave.native="createScroll">
|
||||
<el-table-column prop="repairOrder" label="维修单号" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="type" label="类型" align="center">
|
||||
<template #default="scope">
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
const options = {
|
||||
title: {
|
||||
text: '本月故障类型',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
legend: {
|
||||
@@ -87,7 +87,8 @@ function updateData() {
|
||||
// }
|
||||
// })
|
||||
options.series = res.data
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
// console.log(res.data.title.text, res.data)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '本月故障趋势',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -97,7 +97,8 @@ function updateData() {
|
||||
if (res.code === 200) {
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '今日故障类型统计',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -97,7 +97,8 @@ function updateData() {
|
||||
if (res.code === 200) {
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '本月任务完成时间统计(分)',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -97,7 +97,8 @@ function updateData() {
|
||||
if (res.code === 200) {
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '本月人员响应时间统计(分)',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -98,7 +98,8 @@ function updateData() {
|
||||
console.log(res.data)
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = defineProps({
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '本月维修统计',
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
@@ -97,7 +97,8 @@ function updateData() {
|
||||
if (res.code === 200) {
|
||||
options.xAxis.data = res.data.xData
|
||||
options.series = res.data.seriesData
|
||||
chart.value.setOption(options)
|
||||
chart.value?.setOption(options)
|
||||
chart.value?.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,137 +1,150 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="back" @click="$router.go(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<kbFullScreenBox>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="header">
|
||||
<kbHeader>设备TPM实时看板</kbHeader>
|
||||
</div>
|
||||
<kbGap></kbGap>
|
||||
<kbGap></kbGap>
|
||||
<div class="body">
|
||||
<kbCountBox>
|
||||
<div class="top" dv-bg>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">启用设备</div>
|
||||
<div class="num-value">{{ numData.useDeviceTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">停用设备</div>
|
||||
<div class="num-value">{{ numData.unUseDeviceTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总任务数</div>
|
||||
<div class="num-value">{{ numData.taskTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">任务完成数</div>
|
||||
<div class="num-value">{{ numData.finishTaskTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总报修数</div>
|
||||
<div class="num-value">{{ numData.repairTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总完成数</div>
|
||||
<div class="num-value">{{ numData.finishRepairTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</kbCountBox>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>今日巡检任务</kbTitle>
|
||||
<chart1></chart1>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月任务统计</kbTitle>
|
||||
<chart2></chart2>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>今日维修任务</kbTitle>
|
||||
<chart3></chart3>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月故障类型</kbTitle>
|
||||
<chart4></chart4>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月故障趋势</kbTitle>
|
||||
<chart5></chart5>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>今日故障趋势</kbTitle>
|
||||
<chart6></chart6>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月任务完成时间统计（分）</kbTitle>
|
||||
<chart7></chart7>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月人员响应时间统计（分）</kbTitle>
|
||||
<chart8></chart8>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<div>
|
||||
<kbTitle>本月维修统计</kbTitle>
|
||||
<chart9></chart9>
|
||||
</div>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<logo></logo>
|
||||
<kbTime></kbTime>
|
||||
</div>
|
||||
<div class="header">
|
||||
<kbHeader>TPM实时看板</kbHeader>
|
||||
</div>
|
||||
<div class="body">
|
||||
<dv-border-box8 class="box8" :dur="5">
|
||||
<div class="top" dv-bg>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">启用设备</div>
|
||||
<div class="num-value">{{ numData.useDeviceTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">停用设备</div>
|
||||
<div class="num-value">{{ numData.unUseDeviceTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总任务数</div>
|
||||
<div class="num-value">{{ numData.taskTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">任务完成数</div>
|
||||
<div class="num-value">{{ numData.finishTaskTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总报修数</div>
|
||||
<div class="num-value">{{ numData.repairTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">总完成数</div>
|
||||
<div class="num-value">{{ numData.finishRepairTotal }} 个</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</dv-border-box8>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart1></chart1>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart2></chart2>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart3></chart3>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart4></chart4>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart5></chart5>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart6></chart6>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart7></chart7>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart8></chart8>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart9></chart9>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</kbFullScreenBox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/// ================ 基础组件导入 ======================
|
||||
import kbHeader from './components/kbHeader.vue'
|
||||
import kbTime from './components/kbTime.vue'
|
||||
import logo from './components/logo.vue'
|
||||
import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
|
||||
import kbGap from '../可视化素材包/components/kbGap.vue'
|
||||
import kbHeader from '../可视化素材包/components/kbHeader.vue'
|
||||
import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
|
||||
import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
|
||||
import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
|
||||
import kbTitle from '../可视化素材包/components/kbTitle.vue'
|
||||
/// ================================================
|
||||
|
||||
/// ================== 图表组件导入 ======================
|
||||
|
||||
@@ -60,6 +60,8 @@ body {
|
||||
}
|
||||
.top-box {
|
||||
margin: 20px;
|
||||
padding-top: 1vh;
|
||||
padding-bottom: 1vh;
|
||||
/* height: 40px; */
|
||||
background-color: rgba(60, 232, 248, 0.1);
|
||||
border: 1px solid #a9aabc;
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="back" @click="back">
|
||||
<el-icon>
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<kbLogo></kbLogo>
|
||||
<kbTime></kbTime>
|
||||
</div>
|
||||
<div class="header">
|
||||
<kbHeader>车间订单进度看板</kbHeader>
|
||||
</div>
|
||||
@@ -71,8 +62,6 @@ const { proxy } = getCurrentInstance()
|
||||
/// ================ 基础组件导入 ======================
|
||||
import kbGap from '../可视化素材包/components/kbGap.vue'
|
||||
import kbHeader from '../可视化素材包/components/kbHeader.vue'
|
||||
import kbTime from '../可视化素材包/components/kbTime.vue'
|
||||
import kbLogo from '../可视化素材包/components/kbLogo.vue'
|
||||
import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
|
||||
import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
|
||||
import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
|
||||
@@ -125,7 +114,6 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
@import './index.css';
|
||||
|
||||
.box8 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
<!-- 今日工单 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">昨日IQC列表</div>
|
||||
<el-table
|
||||
height="300"
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
ref="tableRef"
|
||||
highlight-current-row
|
||||
@mouseover.native="clearScroll"
|
||||
@mouseleave.native="createScroll">
|
||||
<el-table-column prop="lineCode" label="炉号" />
|
||||
<el-table-column prop="defectDesciption" label="工序" />
|
||||
<el-table-column prop="defectDesciption" label="描述" />
|
||||
<el-table-column prop="defectQuantity" label="数量" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { proxy } = getCurrentInstance()
|
||||
import { getMoudle02 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
function getList() {
|
||||
getMoudle02().then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
dataList.value = data
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
handleQuery()
|
||||
// 自动获取数据
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
|
||||
// 自动滚动
|
||||
let timer2 = null
|
||||
let tableRef = ref(null)
|
||||
|
||||
const clearScroll = () => {
|
||||
clearInterval(timer2)
|
||||
timer2 = null
|
||||
}
|
||||
const createScroll = () => {
|
||||
clearScroll()
|
||||
// 拿到 table
|
||||
const _table = tableRef.value.layout.table.refs
|
||||
// // 拿到可以滚动的元素
|
||||
const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
|
||||
timer2 = setInterval(() => {
|
||||
tableWrapper.scrollTop += 1
|
||||
// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
|
||||
if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
|
||||
tableWrapper.scrollTop = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
createScroll()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearScroll()
|
||||
clearSearchTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './table.css';
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
default: '35vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
@@ -32,14 +32,8 @@ let options = {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
data: [],
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
@@ -61,8 +55,16 @@ let options = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
data: [1, 2, 3, 4, 5, 6, 7]
|
||||
type: 'line',
|
||||
data: [],
|
||||
label: {
|
||||
position: 'outside',
|
||||
formatter: '{b}%',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
fontSize: '2vh',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -86,16 +88,20 @@ function updateData() {
|
||||
options.xAxis.data = res.data.xAxis.data
|
||||
let _series = res.data.series
|
||||
_series.forEach((item) => {
|
||||
item.type = 'line'
|
||||
// item.stack = 'group'
|
||||
// item.emphasis = { focus: 'series' }
|
||||
// item.label = {
|
||||
// show: true,
|
||||
// position: 'inside',
|
||||
// textBorderColor: '#fff',
|
||||
// textBorderWidth: 0,
|
||||
// formatter: '{c}',
|
||||
// color: '#fff'
|
||||
// }
|
||||
item.itemStyle = {
|
||||
color: 'green'
|
||||
}
|
||||
item.label = {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
formatter: '{b}%',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
options.series = _series
|
||||
chart.value?.setOption(options)
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
<!-- 今日工单 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">昨日IPQC列表</div>
|
||||
<el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
|
||||
<el-table-column prop="lineCode" label="产线" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="defectDesciption" label="描述" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="defectQuantity" label="数量" :show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { proxy } = getCurrentInstance()
|
||||
import { getMoudle05 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
function getList() {
|
||||
getMoudle05().then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
dataList.value = data
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
handleQuery()
|
||||
// 自动获取数据
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
|
||||
// 自动滚动
|
||||
let timer2 = null
|
||||
let tableRef = ref(null)
|
||||
|
||||
const clearScroll = () => {
|
||||
clearInterval(timer2)
|
||||
timer2 = null
|
||||
}
|
||||
const createScroll = () => {
|
||||
clearScroll()
|
||||
// 拿到 table
|
||||
const _table = tableRef.value.layout.table.refs
|
||||
// // 拿到可以滚动的元素
|
||||
const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
|
||||
timer2 = setInterval(() => {
|
||||
tableWrapper.scrollTop += 1
|
||||
// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
|
||||
if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
|
||||
tableWrapper.scrollTop = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
createScroll()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearScroll()
|
||||
clearSearchTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './table.css';
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!-- 今日工单 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">昨日FQC列表</div>
|
||||
<el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
|
||||
<el-table-column prop="lineCode" label="产线" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="defectDesciption" label="描述" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="defectQuantity" label="数量" :show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { proxy } = getCurrentInstance()
|
||||
import { getMoudle08 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
function getList() {
|
||||
getMoudle08().then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
dataList.value = data
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
handleQuery()
|
||||
// 自动获取数据
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
|
||||
// 自动滚动
|
||||
let timer2 = null
|
||||
let tableRef = ref(null)
|
||||
|
||||
const clearScroll = () => {
|
||||
clearInterval(timer2)
|
||||
timer2 = null
|
||||
}
|
||||
const createScroll = () => {
|
||||
clearScroll()
|
||||
// 拿到 table
|
||||
const _table = tableRef.value.layout.table.refs
|
||||
// // 拿到可以滚动的元素
|
||||
const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
|
||||
timer2 = setInterval(() => {
|
||||
tableWrapper.scrollTop += 1
|
||||
// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
|
||||
if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
|
||||
tableWrapper.scrollTop = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
createScroll()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearScroll()
|
||||
clearSearchTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './table.css';
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
default: '40vh'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
@@ -47,15 +47,15 @@ const options = {
|
||||
name: '参数1',
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: ['50%', '80%'],
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
label: {
|
||||
position: 'outside',
|
||||
formatter: '{b}\n{d}%',
|
||||
formatter: '{b}-{c}\n{d}%',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
fontSize: 24,
|
||||
fontSize: '2vh',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
default: '40vh'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
@@ -47,15 +47,15 @@ const options = {
|
||||
name: '参数1',
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: ['50%', '80%'],
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
label: {
|
||||
position: 'outside',
|
||||
formatter: '{b}\n{d}%',
|
||||
formatter: '{b}-{c}\n{d}%',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
fontSize: 24,
|
||||
fontSize: '2vh',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import theme from '../theme/qc.json'
|
||||
echarts.registerTheme('theme', theme)
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
echarts.use([CanvasRenderer])
|
||||
const { proxy } = getCurrentInstance()
|
||||
const chartRef = ref(null)
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
height: 200,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '缺陷数',
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ value: 1048, name: '模块1' },
|
||||
{ value: 735, name: '模块2' },
|
||||
{ value: 580, name: '模块3' },
|
||||
{ value: 484, name: '模块4' },
|
||||
{ value: 300, name: '模块5' }
|
||||
],
|
||||
label: {
|
||||
position: 'outside',
|
||||
formatter: '{b}-{c}\n{d}%',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const chart = ref(null)
|
||||
function initChart() {
|
||||
chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
|
||||
chart.value.setOption(options)
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', () => {
|
||||
chart.value?.resize()
|
||||
})
|
||||
})
|
||||
/// ============ 修改数据 ===========
|
||||
import { getMoudle09 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
function updateData() {
|
||||
getMoudle09().then((res) => {
|
||||
if (res.code === 200) {
|
||||
options.title = res.data.title
|
||||
let _series = res.data.series
|
||||
// _series.forEach((item) => {
|
||||
// item.label = {
|
||||
// // 设置label在扇区内部
|
||||
// position: 'inner',
|
||||
// // 自定义显示格式，{b}表示名称，{d}表示百分比
|
||||
// formatter: '{b}\n{d}%'
|
||||
// }
|
||||
// })
|
||||
options.series = _series
|
||||
chart.value.setOption(options)
|
||||
// console.log(res.data.title.text, res.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
function handleQuery() {
|
||||
updateData()
|
||||
}
|
||||
handleQuery()
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearSearchTimer()
|
||||
})
|
||||
/// ==========================================
|
||||
</script>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import theme from '../theme/qc.json'
|
||||
echarts.registerTheme('theme', theme)
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
echarts.use([CanvasRenderer])
|
||||
const { proxy } = getCurrentInstance()
|
||||
const chartRef = ref(null)
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 图例
|
||||
legend: {
|
||||
data: ['缺陷数']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '缺陷数',
|
||||
type: 'line',
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chart = ref(null)
|
||||
function initChart() {
|
||||
chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
|
||||
chart.value.setOption(options)
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', () => {
|
||||
chart.value?.resize()
|
||||
})
|
||||
})
|
||||
/// ============ 修改数据 ===========
|
||||
import { getMoudle04 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
function updateData() {
|
||||
getMoudle04().then((res) => {
|
||||
if (res.code === 200) {
|
||||
options.title = res.data.title
|
||||
options.xAxis.data = res.data.xAxis.data
|
||||
options.series = res.data.series
|
||||
chart.value.setOption(options)
|
||||
// console.log(res.data.title.text, res.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
function handleQuery() {
|
||||
updateData()
|
||||
}
|
||||
handleQuery()
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearSearchTimer()
|
||||
})
|
||||
/// ==========================================
|
||||
</script>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import theme from '../theme/qc.json'
|
||||
echarts.registerTheme('theme', theme)
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
echarts.use([CanvasRenderer])
|
||||
const { proxy } = getCurrentInstance()
|
||||
const chartRef = ref(null)
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
title: {
|
||||
text: '前7日IPQC缺陷数量直方图',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 图例
|
||||
legend: {
|
||||
data: ['缺陷数']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '缺陷数',
|
||||
type: 'line',
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chart = ref(null)
|
||||
function initChart() {
|
||||
chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
|
||||
chart.value.setOption(options)
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', () => {
|
||||
chart.value?.resize()
|
||||
})
|
||||
})
|
||||
/// ============ 修改数据 ===========
|
||||
import { getMoudle07 } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
function updateData() {
|
||||
getMoudle07().then((res) => {
|
||||
if (res.code === 200) {
|
||||
options.title = res.data.title
|
||||
options.xAxis.data = res.data.xAxis.data
|
||||
options.series = res.data.series
|
||||
chart.value.setOption(options)
|
||||
}
|
||||
})
|
||||
}
|
||||
function handleQuery() {
|
||||
updateData()
|
||||
}
|
||||
handleQuery()
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
timer1 = null
|
||||
}
|
||||
const createSearchTimer = () => {
|
||||
clearSearchTimer()
|
||||
timer1 = setInterval(() => {
|
||||
handleQuery()
|
||||
}, 1000 * 60 * 5)
|
||||
}
|
||||
onMounted(() => {
|
||||
createSearchTimer()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearSearchTimer()
|
||||
})
|
||||
/// ==========================================
|
||||
</script>
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
default: '35vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
@@ -39,7 +39,7 @@ let options = {
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
data: [],
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
@@ -62,7 +62,7 @@ let options = {
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
data: [1, 2, 3, 4, 5, 6, 7]
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -88,14 +88,15 @@ function updateData() {
|
||||
_series.forEach((item) => {
|
||||
item.stack = 'group'
|
||||
item.emphasis = { focus: 'series' }
|
||||
// item.label = {
|
||||
// show: true,
|
||||
// position: 'inside',
|
||||
// textBorderColor: '#fff',
|
||||
// textBorderWidth: 0,
|
||||
// formatter: '{c}',
|
||||
// color: '#fff'
|
||||
// }
|
||||
item.label = {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 0,
|
||||
formatter: '{c}',
|
||||
fontSize: '2vh',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
options.series = _series
|
||||
chart.value?.setOption(options)
|
||||
|
||||
@@ -21,13 +21,38 @@ body {
|
||||
border: 2px solid #a9aabc;
|
||||
}
|
||||
.screen {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 20px; /* Default padding */
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #eeeeee;
|
||||
background-color: rgba(32, 163, 250, 0.2);
|
||||
}
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.screen {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.screen {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.screen {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.screen {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
.screen .header {
|
||||
/* width: 100%;
|
||||
height: 100px;
|
||||
@@ -41,12 +66,6 @@ body {
|
||||
font-weight: 700;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.screen .back {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,109 +1,67 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="back" @click="$router.go(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<kbLogo></kbLogo>
|
||||
<kbTime></kbTime>
|
||||
</div>
|
||||
<div class="header">
|
||||
<kbHeader>车间质量看板</kbHeader>
|
||||
</div>
|
||||
<div class="body">
|
||||
<el-row :gutter="5">
|
||||
<!-- <el-col :span="24">
|
||||
<dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart1></chart1>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col> -->
|
||||
<!-- <el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart2></chart2>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart3></chart3>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<kbFullScreenBox>
|
||||
<div class="screen">
|
||||
<div class="header">
|
||||
<kbHeader>车间质量看板</kbHeader>
|
||||
</div>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<kbTitle>本周异常分布比例饼图</kbTitle>
|
||||
<chart4></chart4>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbCountBox>
|
||||
<div class="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-for="(value, key, index) in topData" :key="index" style="margin-bottom: 10px">
|
||||
<kbNumBox class="num-item">
|
||||
<div class="num-title">{{ topTitleOptions[index] }}</div>
|
||||
<div class="num-value">{{ value }}</div>
|
||||
</kbNumBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</kbCountBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月异常分布Top10比例饼图</kbTitle>
|
||||
<chart5></chart5>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="8">
|
||||
<dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart7></chart7>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
><dv-border-box12 class="box">
|
||||
<div>
|
||||
<chart8></chart8>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col> -->
|
||||
|
||||
<el-col :span="24">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月异常柱状图</kbTitle>
|
||||
<chart9></chart9>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月合格率趋势图</kbTitle>
|
||||
<chart10></chart10>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="body">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<kbChartBox>
|
||||
<kbTitle>本周异常分布比例饼图</kbTitle>
|
||||
<chart4></chart4>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<kbCountBox>
|
||||
<div class="top">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="12" v-for="(value, key, index) in topData" :key="index" style="margin-bottom: 10px">
|
||||
<div class="qc-num-item-box">
|
||||
<kbNumBox>
|
||||
<div class="qc-num-item-title">{{ topTitleOptions[index] }}</div>
|
||||
<div :class="`qc-num-item-value ${changeUpDownValue(topTitleOptions[index], value)}`">{{ value }}</div>
|
||||
</kbNumBox>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</kbCountBox>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月异常分布比例饼图</kbTitle>
|
||||
<chart5></chart5>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月异常柱状图</kbTitle>
|
||||
<chart9></chart9>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<kbChartBox>
|
||||
<kbTitle>本月合格率趋势图</kbTitle>
|
||||
<chart10></chart10>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</kbFullScreenBox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/// ================ 基础组件导入 ======================
|
||||
import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
|
||||
import kbGap from '../可视化素材包/components/kbGap.vue'
|
||||
import kbHeader from '../可视化素材包/components/kbHeader.vue'
|
||||
import kbTime from '../可视化素材包/components/kbTime.vue'
|
||||
import kbLogo from '../可视化素材包/components/kbLogo.vue'
|
||||
import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
|
||||
import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
|
||||
import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
|
||||
@@ -111,15 +69,8 @@ import kbTitle from '../可视化素材包/components/kbTitle.vue'
|
||||
/// ================================================
|
||||
|
||||
/// ================== 图表组件导入 ======================
|
||||
// import barChart1 from './charts/BarChart.vue'
|
||||
// import chart1 from './charts/chart1.vue'
|
||||
// import chart2 from './charts/chart2.vue'
|
||||
// import chart3 from './charts/chart3.vue'
|
||||
import chart4 from './charts/chart4.vue'
|
||||
import chart5 from './charts/chart5.vue'
|
||||
// import chart6 from './charts/chart6.vue'
|
||||
// import chart7 from './charts/chart7.vue'
|
||||
// import chart8 from './charts/chart8.vue'
|
||||
import chart9 from './charts/chart9.vue'
|
||||
import chart10 from './charts/chart10.vue'
|
||||
/// ====================================================
|
||||
@@ -129,7 +80,16 @@ const { proxy } = getCurrentInstance()
|
||||
|
||||
/// =================== 获取工单数据 ======================
|
||||
import { getTopData } from '@/api/smartScreen/QualityScreen/index.js'
|
||||
const topTitleOptions = ref(['本月质量异常数', '本周质量异常数', '本月合格率', '本周合格率'])
|
||||
const topTitleOptions = ref([
|
||||
'本月质量异常数',
|
||||
'本周质量异常数',
|
||||
'本月合格率',
|
||||
'本周合格率',
|
||||
'本月合格率同比增长',
|
||||
'本周合格率同比增长',
|
||||
'本月订单数',
|
||||
'本周订单数'
|
||||
])
|
||||
const topData = ref({})
|
||||
function initData() {
|
||||
getTopData().then((res) => {
|
||||
@@ -137,6 +97,17 @@ function initData() {
|
||||
})
|
||||
}
|
||||
initData()
|
||||
|
||||
function changeUpDownValue(title, value) {
|
||||
if (title.includes('同比增长')) {
|
||||
if (value.includes('-')) {
|
||||
return 'down'
|
||||
} else {
|
||||
return 'up'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let timer1 = null
|
||||
const clearSearchTimer = () => {
|
||||
clearInterval(timer1)
|
||||
@@ -159,44 +130,56 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
@import './index.css';
|
||||
.box8 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.top {
|
||||
height: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
.num-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.qc-num-item-box {
|
||||
padding-top: 1vh;
|
||||
padding-left: 4vh;
|
||||
padding-right: 4vh;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.num-title {
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
.qc-num-item-title {
|
||||
color: #ffffff; /* 白色 */
|
||||
font-size: 3vh;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 阴影效果 */
|
||||
-webkit-text-stroke: 1px #000; /* 描边效果 */
|
||||
}
|
||||
.num-value {
|
||||
width: 100%;
|
||||
font-size: 40px;
|
||||
|
||||
.qc-num-item-value {
|
||||
color: #ffd700; /* 数字颜色：金色 */
|
||||
font-size: 3vh;
|
||||
font-weight: 800;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text; /* 仅将背景应用于文本 */
|
||||
-webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
|
||||
color: transparent; /* 兼容非WebKit浏览器 */
|
||||
background-image: linear-gradient(65deg, #0072ff 0%, #00eaff 50%, #01aaff 100%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 阴影效果 */
|
||||
}
|
||||
.qc-num-item-value.up::before {
|
||||
content: '\25B2'; /* 向上的三角形 */
|
||||
color: #66ff33;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.qc-num-item-value.up {
|
||||
color: #66ff33;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.qc-num-item-value.down::before {
|
||||
content: '\25BC'; /* 向下的三角形 */
|
||||
color: #ff3300;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.qc-num-item-value.down {
|
||||
color: #ff3300;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
{
|
||||
"color": [
|
||||
"#c1232b",
|
||||
"#27727b",
|
||||
"#fcce10",
|
||||
"#e87c25",
|
||||
"#b5c334",
|
||||
"#fe8463",
|
||||
"#9bca63",
|
||||
"#fad860",
|
||||
"#f3a43b",
|
||||
"#60c0dd",
|
||||
"#d7504b",
|
||||
"#c6e579",
|
||||
"#f4e001",
|
||||
"#f0805a",
|
||||
"#26c0c0",
|
||||
"#d851cc",
|
||||
"#b91dd8",
|
||||
"#2418ea",
|
||||
"#696969",
|
||||
"#060606",
|
||||
"#9c3f3f"
|
||||
"#FF4444",
|
||||
"#0077CC",
|
||||
"#FFAA00",
|
||||
"#00A874",
|
||||
"#A020F0",
|
||||
"#FF6B6B",
|
||||
"#00CED1",
|
||||
"#FFD700",
|
||||
"#FF69B4",
|
||||
"#32CD32",
|
||||
"#8A2BE2",
|
||||
"#FF6347",
|
||||
"#1E90FF",
|
||||
"#7CFC00",
|
||||
"#FF1493",
|
||||
"#00FF7F",
|
||||
"#9400D3",
|
||||
"#FF8C00",
|
||||
"#00FF00",
|
||||
"#4B0082",
|
||||
"#FF0000"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
default: '30vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
default: '30vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
default: '30vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
default: '40vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
|
||||
@@ -18,7 +18,7 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
default: '40vh'
|
||||
}
|
||||
})
|
||||
let options = {
|
||||
|
||||
@@ -1,29 +1,22 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="back" @click="$router.go(-1)">
|
||||
<el-icon>
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<kbLogo></kbLogo>
|
||||
<kbTime></kbTime>
|
||||
</div>
|
||||
<div class="header">
|
||||
<kbHeader>车间生产看板</kbHeader>
|
||||
</div>
|
||||
<kbGap></kbGap>
|
||||
<div class="body">
|
||||
<kbCountBox>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(value, key, index) in orderData" :key="index">
|
||||
<kbNumBox class="num-item">
|
||||
<div class="num-title">{{ orderTitleList[index] }}</div>
|
||||
<div class="num-value">{{ value }}</div>
|
||||
</kbNumBox>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4">
|
||||
<kbFullScreenBox>
|
||||
<div class="screen">
|
||||
<div class="background"></div>
|
||||
<div class="header">
|
||||
<kbHeader>车间生产看板</kbHeader>
|
||||
</div>
|
||||
<kbGap></kbGap>
|
||||
<kbGap></kbGap>
|
||||
<div class="body">
|
||||
<kbCountBox>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(value, key, index) in orderData" :key="index">
|
||||
<kbNumBox class="num-item">
|
||||
<div class="num-title">{{ orderTitleList[index] }}</div>
|
||||
<div class="num-value">{{ value }}</div>
|
||||
</kbNumBox>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4">
|
||||
<div class="num-item">
|
||||
<div class="num-title">今日物料领用</div>
|
||||
<div class="num-value">{{ orderData.materialRequisitionQuantity }} 个</div>
|
||||
@@ -53,52 +46,51 @@
|
||||
<div class="num-value">{{ orderData.groupQuantity }} 组</div>
|
||||
</div>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</kbCountBox>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart1></chart1>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart2></chart2>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart3></chart3>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</kbCountBox>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart1></chart1>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart2></chart2>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<kbChartBox>
|
||||
<chart3></chart3>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="24">
|
||||
<kbChartBox>
|
||||
<chart4></chart4>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="24">
|
||||
<kbChartBox>
|
||||
<chart5></chart5>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="12">
|
||||
<kbChartBox>
|
||||
<chart4></chart4>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<kbChartBox>
|
||||
<chart5></chart5>
|
||||
</kbChartBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<kbGap></kbGap>
|
||||
<el-row :gutter="5"> </el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</kbFullScreenBox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/// ================ 基础组件导入 ======================
|
||||
import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
|
||||
import kbGap from '../可视化素材包/components/kbGap.vue'
|
||||
import kbHeader from '../可视化素材包/components/kbHeader.vue'
|
||||
import kbTime from '../可视化素材包/components/kbTime.vue'
|
||||
import kbLogo from '../可视化素材包/components/kbLogo.vue'
|
||||
import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
|
||||
import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
|
||||
import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
|
||||
@@ -173,7 +165,6 @@ onUnmounted(() => {
|
||||
|
||||
.num-item {
|
||||
/* border: #0072ff 1px solid; */
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
@@ -183,7 +174,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.num-title {
|
||||
font-size: 30px;
|
||||
font-size: 3vh;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -191,7 +182,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.num-value {
|
||||
font-size: 40px;
|
||||
font-size: 4vh;
|
||||
font-weight: 800;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-carousel class="main-box border" height="100%" :autoplay="true" :interval="30000">
|
||||
<el-carousel class="main-box" height="100%" :autoplay="true" :interval="10000">
|
||||
<el-carousel-item :key="1">
|
||||
<OrderScreen style="height: 100%"></OrderScreen>
|
||||
</el-carousel-item>
|
||||
@@ -9,6 +9,9 @@
|
||||
<el-carousel-item :key="3">
|
||||
<QualityScreen style="height: 100%"></QualityScreen>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item :key="4">
|
||||
<DeviceScreen style="height: 100%"></DeviceScreen>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +19,7 @@
|
||||
import { default as OrderScreen } from '@/views/SmartScreen/OrderScreen/index'
|
||||
import { default as ReportScreen } from '@/views/SmartScreen/ReportScreen/index'
|
||||
import { default as QualityScreen } from '@/views/SmartScreen/QualityScreen/index'
|
||||
import { default as DeviceScreen } from '@/views/SmartScreen/DeviceScreen/index'
|
||||
// 设备大屏
|
||||
// import { default as AndonFullScreen } from '@/views/andonManagement/analysis/fullscreen/index'
|
||||
// Andon大屏
|
||||
@@ -28,4 +32,28 @@ const { proxy } = getCurrentInstance()
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.el-carousel__item {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.el-carousel__item {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-carousel__item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.el-carousel__item {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
25
src/views/SmartScreen/可视化素材包/components/kbBack.vue
Normal file
25
src/views/SmartScreen/可视化素材包/components/kbBack.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="kb-back" @click="handlerBack">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
function handlerBack() {
|
||||
proxy.$router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kb-back {
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
font-size: 2vh;
|
||||
color: #eeeeee;
|
||||
z-index: 200;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="box-item"><slot></slot></div>
|
||||
<div class="kb-chart-box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="kb-chart-box-item"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-chart-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -30,12 +30,9 @@ const props = defineProps({
|
||||
background-image: url('../3-组件背景图/41.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-item {
|
||||
margin: 10px;
|
||||
.kb-chart-box-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="box-item"><slot></slot></div>
|
||||
<div class="kb-count-box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="kb-count-box-item"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-count-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -30,8 +30,7 @@ const props = defineProps({
|
||||
background-image: url('../3-组件背景图/41.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-item {
|
||||
margin: 20px;
|
||||
.kb-count-box-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: '思源黑体';
|
||||
|
||||
60
src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue
Normal file
60
src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="kb-fullScreenBox">
|
||||
<div class="kb-background"></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
|
||||
// const { proxy } = getCurrentInstance()
|
||||
// function setRem() {
|
||||
// const designWidth = 1920 // 设计稿宽度（如 1920px）
|
||||
// const baseSize = 100 // 根字体基准值（1rem = 100px 时，设计稿 1920px 对应 19.2rem）
|
||||
// const html = document.documentElement
|
||||
// const width = window.innerWidth
|
||||
// const rem = (width / designWidth) * baseSize
|
||||
// html.style.fontSize = `${rem}px` // 动态计算根字体大小
|
||||
// }
|
||||
// window.addEventListener('resize', setRem)
|
||||
// setRem() // 初始化
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kb-fullScreenBox {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.kb-fullScreenBox::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* 在父组件中限制 slot 内容的尺寸 */
|
||||
.kb-fullScreenBox > :deep(*) {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.kb-background {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
/* background: url('./background/2.png') no-repeat; */
|
||||
background-size: 100% 100%;
|
||||
-webkit-filter: brightness(0.1);
|
||||
filter: brightness(0.1);
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="box"></div>
|
||||
<div class="kb-gap-box"></div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-gap-box {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
height: 1vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,47 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<span class="title"><slot></slot></span>
|
||||
<div class="kb-header-box">
|
||||
<div class="kb-util-box">
|
||||
<kbBack></kbBack>
|
||||
<kbLogo></kbLogo>
|
||||
<kbTime></kbTime>
|
||||
</div>
|
||||
<div class="kb-header">
|
||||
<span class="kb-header-title"><slot></slot></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
<script setup>
|
||||
import kbTime from './kbTime.vue'
|
||||
import kbLogo from './kbLogo.vue'
|
||||
import kbBack from './kbBack.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
.kb-header-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 10vh;
|
||||
}
|
||||
.kb-util-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.kb-header {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 100%;
|
||||
background-image: url('../2-大标题背景图/7.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 48px;
|
||||
.kb-header-title {
|
||||
font-size: 5vh;
|
||||
font-weight: 600;
|
||||
font-family: '思源黑体';
|
||||
background-clip: text; /* 标准属性 */
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="row-box">
|
||||
<img class="logo" :src="imgUrl" />
|
||||
<span class="text">北泽阀门(昆山)有限公司</span>
|
||||
<div class="kb-logo-box">
|
||||
<div class="kb-row-box">
|
||||
<img class="kb-logo-icon" :src="imgUrl" />
|
||||
<span class="kb-logo-text">北泽阀门(昆山)有限公司</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,28 +12,30 @@ import imgUrl from '@/assets/logo/logo.png'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-logo-box {
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 15px;
|
||||
top: 3vh;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.row-box {
|
||||
.kb-row-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.kb-logo-icon {
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.text {
|
||||
.kb-logo-text {
|
||||
margin-left: 10px;
|
||||
text-align: center;
|
||||
/* line-height: 25px; */
|
||||
font-size: 36px;
|
||||
font-size: 4vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="box-item"><slot></slot></div>
|
||||
<div class="kb-count-num-box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="kb-count-num-box-item"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-count-num-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -30,11 +30,9 @@ const props = defineProps({
|
||||
background-image: url('../5-图标/6指标卡1文字背景.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-item {
|
||||
margin: 10px;
|
||||
.kb-count-num-box-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 60px;
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<span class="span">{{ datetime }}</span>
|
||||
<div class="kb-time-box">
|
||||
<span>{{ datetime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,14 +20,13 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
.kb-time-box {
|
||||
float: left;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 15px;
|
||||
right: 5%;
|
||||
top: 3vh;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.span {
|
||||
font-size: 36px;
|
||||
font-size: 4vh;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="title-box" :style="`width:${props.width};height:${props.height}`">
|
||||
<div class="kb-title-box" :style="`width:${props.width};height:${props.height}`">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -21,9 +21,8 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title-box {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
.kb-title-box {
|
||||
padding-left: 1vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -31,7 +30,7 @@ const props = defineProps({
|
||||
justify-content: start;
|
||||
background-image: url('../4-组件标题背景图/左上背景.png');
|
||||
background-size: 100% 100%;
|
||||
font-size: 24px;
|
||||
font-size: 3vh;
|
||||
font-weight: 600;
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user