sgc/mes-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.evo-techina.com/sgc/mes-vue

Browse Source
This commit is contained in:
shaoleiliu-netizen123 2026-07-16 11:28:10 +08:00
commit 3c02f65a44
4 changed files with 1063 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/index.ts
View File

@ -22,6 +22,12 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/register/index.vue'),
meta: { title: '注册', requiresAuth: false }
},
{
path: '/proterminal',
name: 'proterminal',
component: () => import('@/views/proterminal/index.vue'),
meta: { title: '生产终端',requiresAuth: true }
},
{
path: '/',
name: 'Layout',

40
src/views/biz/flowingAround/index.vue
View File

@ -112,7 +112,7 @@
</template>
<script setup lang="ts">
import { ref, reactive, h, onMounted } from 'vue'
import { ref, reactive, h, onMounted, computed } from 'vue'
import { NButton, NSpace, NIcon, NUpload, useMessage, useDialog, type DataTableColumns, type UploadCustomRequestOptions } from 'naive-ui'
import { SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline, EyeOutline, DownloadOutline } from '@vicons/ionicons5'
import { flowingAroundApi, type FlowingAround } from '@/api/flowingAround'
@ -421,11 +421,39 @@ async function handleImportUpload({ file }: UploadCustomRequestOptions) {
}
const flowingAroundTypeOptions = ref<{ label: string; value: any }[]>([])
const confirmResultOptions = ref<{ label: string; value: any }[]>([
{label: "待确认", value: "待确认"},
{label: "同意", value: "同意"},
{label: "拒绝", value: "拒绝"},
])
const confirmResultOptions = computed<any[]>(() => {
const baseOptions: any[] = [
{label: "待确认", value: "待确认"},
{label: "同意", value: "同意"},
]
//当 formData.businessCode !== 'mes_quality_testing' 时，才追加“拒绝”选项
console.log(formData.businessCode)
if (formData.businessCode !== 'mes_quality_testing') {
baseOptions.push( {label: "拒绝", value: "拒绝"},)
}
return baseOptions
})
// const directionOptions = computed<any[]>(() => {
// const baseOptions: any[] = [
// { label: t('account.进账'), value: '进账' },
// { label: t('account.出账'), value: '出账' },
// ]
// // 当 accountType === 'currency' 时，才追加“冻结”选项
// // if (formRegulationData.accountType === 'currency') {
// // baseOptions.push({ label: t('account.冻结'), value: '冻结' })
// // baseOptions.push({ label: t('account.解冻'), value: '解冻' })
// // }
// return baseOptions
// })
// 加载字典选项
async function loadDictOptions() {

72
src/views/proterminal/circle.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="progress-container">
<svg viewBox="0 0 120 120">
<circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
<circle ref="progress" class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
stroke-dasharray="339.292" stroke-dashoffset="339.292" />
</svg>
<span ref="label" class="label">0%</span>
</div>
</template>
<script setup lang="ts">
import {ref , onMounted } from 'vue'
const props = withDefaults(defineProps<{
percent:any
}>(), {
percent:0
})
//设置圆形
let progress = ref()
let label = ref()
function setProgress(percent:any) {
//圆形进度
const circle:any = progress.value //document.querySelector('.progress')
const labels:any = label.value //document.getElementById('label')
const radius = 54
const circumference = 2 * Math.PI * radius
const clamped = Math.min(100, Math.max(0, percent))
const offset = circumference - (clamped / 100) * circumference
circle.style.strokeDashoffset = offset
labels.textContent = clamped + '%'
}
onMounted(() => {
setProgress(props.percent)
})
</script>
<style lang="scss" scoped>
.progress-container {
display: inline-block;
position: relative;
width: 90px;
height: 90px;
}
.progress-container svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.progress-container .bg {
stroke: #e6e6e6;
}
.progress-container .progress {
stroke: #4caf50;
stroke-linecap: round;
transition: stroke-dashoffset 0.6s ease;
}
.progress-container .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
color: #c5c5c5;
}
</style>

951
src/views/proterminal/index.vue Normal file
View File

@ -0,0 +1,951 @@
<template>
<div v-if="islogin" class="conten">
<!-- <template v-if="tablet">
平板
</template> -->
<div class="head">
<div style="box-sizing: border-box;padding: 5px;">
<div class="mbx">
<div>钣金车间</div>
<n-icon :component="ArrowRedoOutline" size="20" />
<div>激光切割</div>
<n-icon :component="ArrowRedoOutline" size="20" />
<div>激光切割01</div>
</div>
<n-icon :component="BuildSharp" size="20" color="#ccc" />
<div style="display: flex;align-items: center;padding-left: 10px;">
<img src="../../assets/images/qiyelogo.png" width="40" height="40" style="border-radius: 50%;" />
<div style="padding: 0 10px;">张三三</div>
<div style="padding: 2px 5px;border-radius: 5px;font-size: 12px;background: #bd6d07;">工段长</div>
</div>
</div>
<div>
<n-button v-if="isfullscr" ghost style="margin-right: 20px;color: #fff;" @click="exitFullscreen">
<template #icon>
<n-icon>
<Contract />
</n-icon>
</template>
退出全屏
</n-button>
<n-button v-else ghost style="margin-right: 20px;color: #fff;" @click="requestFullscreen">
<template #icon>
<n-icon>
<Contract />
</n-icon>
</template>
全屏
</n-button>
<n-button ghost style="margin-right: 20px;color: #fff;">
<template #icon>
<n-icon>
<Sync />
</n-icon>
</template>
刷新
</n-button>
<n-button ghost style="color: #fff;" @click="islogin = false">
<template #icon>
<n-icon>
<SwapHorizontalOutline />
</n-icon>
</template>
切换工位
</n-button>
</div>
</div>
<div class="total">
<div>
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="20">
<BarChartOutline />
</n-icon>
<div style="padding-left: 8px;">工单数</div>
</div>
<div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">50</div>
</div>
<div>
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="25">
<ShapesOutline />
</n-icon>
<div style="padding-left: 8px;">计划/已报</div>
</div>
<div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">50/20</div>
</div>
<div>
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="22">
<TimerSharp />
</n-icon>
<div style="padding-left: 8px;">合格数</div>
</div>
<div style="font-size: 34px;color: #bd6d07;line-height: 45px;color:#f3f3f3;">40</div>
</div>
<div>
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="22">
<LogoWebComponent />
</n-icon>
<div style="padding-left: 8px;">不良品</div>
</div>
<div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">10</div>
</div>
<div>
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="22">
<LayersOutline />
</n-icon>
<div style="padding-left: 8px;">合格率</div>
</div>
<div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">80%</div>
</div>
</div>
<n-grid x-gap="20" style="padding: 20px;">
<n-gi :span="5" class="mocz">
<div style="display: flex;align-items: center;justify-content: space-between;padding:8px 12px;">
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="22">
<DiceOutline />
</n-icon>
<div style="padding-left: 8px;">工单列表</div>
</div>
<div style="font-size: 14px;color:#b7b7b7;">共 40 项</div>
</div>
<div style="padding: 20px;border: 2px dashed #afafaf;border-left: none;border-right: none;">
<n-grid x-gap="10">
<n-gi :span="10">
<n-select
v-model:value="queryparam.type"
:options="typeopt"
remote
@update:value=""
/>
</n-gi>
<n-gi :span="14">
<n-input-group>
<n-input :style="{ width: '100%' }" placeholder="请输入编号或产品" />
<n-button style="color:#dfdfdf;">
<template #icon>
<n-icon size="22">
<Search />
</n-icon>
</template>
</n-button>
</n-input-group>
</n-gi>
</n-grid>
</div>
<div style="height: 450px;padding: 20px;overflow-y: auto;">
<div v-for="n in 20" @click="getgd(n)" class="gditem" :class="{gdactv:gdindex == n}">
<div style="display: flex;align-items: center;justify-content: space-between;font-size: 24px;">
<div>GD123456789100{{ n }}</div>
<div style="margin-left: 10px;padding: 4px 10px;border-radius: 10px;font-size: 12px;background: #bd6d07;">生产中</div>
</div>
<div style="font-size: 16px;color: #b7b7b7;">内包含页单玻门无底柜</div>
<div style="color: #b7b7b7;">C128(500×600×800)AS</div>
<div style="color: #b7b7b7;">07-10 08:00 至 08-25 13:00</div>
<div style="display: flex;width: 100%;align-items: center;">
<div style="flex: 1;position: relative;margin-right: 10px;height: 6px;background: #afafaf;">
<div style="position: absolute;width: 45%;height: 6px;background: #007f5b;"></div>
</div>
<div>45%</div>
</div>
</div>
</div>
</n-gi>
<n-gi :span="14" class="mocz" style="padding:5px 15px;">
<n-tabs
type="line"
tab-style="color: #ccc;"
default-value="gdcz"
size="large"
animated
pane-wrapper-style="margin: 0 -4px"
pane-style="color:#fff;padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
>
<n-tab-pane name="gdcz">
<template #tab>
<n-icon size="22">
<PrismSharp />
</n-icon>
<div style="padding-left: 4px;">工单操作</div>
</template>
<div style="padding: 15px;border: 2px solid #186170;border-radius: 10px;background: #244962;">
<div style="color: #ccc;">正在执行</div>
<div style="display: flex;align-items: center;padding-bottom: 10px;">
<div style="font-size: 30px;">GB123456789001</div>
<div style="padding: 2px 6px;border-radius: 8px;background: #896024;">内包含页单玻门无底柜 C128(500×600×800)AS</div>
</div>
<div style="display: flex;align-items: center;overflow-x: auto;">
<div @click="gxtab(1)" :class="{gonxactv:gonxindex == 1}" style="box-sizing: border-box;width: 120px;padding: 10px 0;text-align: center;">
<!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
<div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
</div> -->
<!-- <div class="progress-container">
<svg viewBox="0 0 120 120">
<circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
<circle class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
stroke-dasharray="339.292" stroke-dashoffset="339.292" />
</svg>
<span class="label" id="label">0%</span>
</div> -->
<circlebom :percent="100" />
<div>饮水机外壳加工</div>
</div>
<div @click="gxtab(2)" :class="{gonxactv:gonxindex == 2}" style="width: 120px;padding: 10px 0;text-align: center;">
<!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
<div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
</div> -->
<circlebom :percent="20" />
<div>进检</div>
</div>
<div @click="gxtab(3)" :class="{gonxactv:gonxindex == 3}" style="width: 120px;padding: 10px 0;text-align: center;">
<!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
<div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
</div> -->
<div class="progress-container">
<svg viewBox="0 0 120 120">
<circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
<circle class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
stroke-dasharray="339.292" stroke-dashoffset="339.292" />
</svg>
<span class="label" id="label">0%</span>
</div>
<div>进检</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;padding: 20px;border: 1px solid #ccc;border-radius: 10px;">
<div style="display: flex;align-items: center;">
<!-- <div style="display: flex;align-items: center;">
<div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">工序名称</div>
<div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">拆解</div>
</div> -->
<div style="display: flex;align-items: center;">
<div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">状态</div>
<div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">待执行</div>
</div>
<div style="display: flex;align-items: center;margin-left: 30px;">
<div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">完成进度</div>
<div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">30%</div>
</div>
<div style="display: flex;align-items: center;margin-left: 30px;">
<div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">质检</div>
<div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">15</div>
</div>
</div>
<div>
<n-button
ghost
style="margin-right: 20px;color: #fff;"
size="large"
@click="guizds"
>
<template #icon>
<n-icon>
<DocumentTextOutline />
</n-icon>
</template>
作业指导书
</n-button>
<n-button ghost style="margin-right: 20px;color: #fff;" size="large">
<template #icon>
<n-icon>
<PricetagsOutline />
</n-icon>
</template>
报工参数
</n-button>
<n-button ghost style="color: #fff;" size="large">
<template #icon>
<n-icon>
<ScanCircleOutline />
</n-icon>
</template>
工序检验
</n-button>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;padding: 20px;border: 1px solid #ccc;border-radius: 10px;">
<n-form
ref="baogformRef"
:model="baogdata"
:rules="baogrules"
label-placement="left"
label-width="auto"
:inline="true"
size="large"
:style="{
marginTop:'20px'
}"
>
<n-form-item label="合格数" label-style="color:#fff;">
<n-input v-model:value="baogdata.qualified" placeholder="请输入合格数" />
</n-form-item>
<n-form-item label="不合格数" label-style="color:#fff;">
<n-input v-model:value="baogdata.unqualified" placeholder="请输入不合格数" />
</n-form-item>
<n-form-item label="总数" label-style="color:#fff;">
<n-input v-model:value="baogdata.total" disabled placeholder="" />
</n-form-item>
<n-button
type="success"
size="large"
@click="confireport"
>
确认报工
</n-button>
</n-form>
</div>
</div>
</n-tab-pane>
<n-tab-pane name="wend">
<template #tab>
<n-icon size="22">
<ReaderSharp />
</n-icon>
<div style="padding-left: 4px;">文档</div>
</template>
<n-tabs
type="bar"
tab-style="color: #ccc;"
default-value="zyzds"
size="large"
animated
pane-wrapper-style="margin: 0 -4px"
pane-style="color:#fff;padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
>
<n-tab-pane name="zyzds" tab="作业指导书">
<!-- <template #tab>
<n-icon size="22">
<Planet />
</n-icon>
<div style="padding-left: 4px;">在制品跟踪</div>
</template> -->
作业指导书
</n-tab-pane>
<n-tab-pane name="tuzhi" tab="图纸">
<div style="display: flex;width:100%;height: 450px;flex-wrap: wrap;overflow-y: auto;">
<div v-for="n in 4" style="margin: 0 7px 15px;">
<n-image
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" width="160" height="180px" style="border-radius: 10px 10px 0 0;"
/>
<!-- <img src="../../assets/images/qiyelogo.png" width="160" height="180px" style="border-radius: 10px 10px 0 0;" /> -->
<div style="width: 160px;height: 40px;margin-top: -8px;line-height: 40px;border-radius: 0 0 10px 10px;text-align: center;background: #186170;">机械图纸.png</div>
</div>
<!-- <n-image-group show-toolbar-tooltip>
<n-space>
<n-image
width="100"
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
/>
<n-image
width="100"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
</n-space>
</n-image-group> -->
</div>
</n-tab-pane>
<n-tab-pane name="code" tab="代码">
<!-- <template #tab>
<n-icon size="22">
<Planet />
</n-icon>
<div style="padding-left: 4px;">在制品跟踪</div>
</template> -->
代码
</n-tab-pane>
</n-tabs>
</n-tab-pane>
<n-tab-pane name="zzpgz" tab="在制品跟踪">
<template #tab>
<n-icon size="22">
<Planet />
</n-icon>
<div style="padding-left: 4px;">在制品跟踪</div>
</template>
在制品跟踪
</n-tab-pane>
</n-tabs>
</n-gi>
<n-gi :span="5" class="mocz">
<div style="display: flex;align-items: center;justify-content: space-between;padding:8px 12px;border-bottom: 2px dashed #afafaf;">
<div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
<n-icon size="22">
<HourglassOutline />
</n-icon>
<div style="padding-left: 8px;">操作记录</div>
</div>
<!-- <div style="font-size: 14px;color:#b7b7b7;">共 40 项</div> -->
</div>
<div style="height: 520px;padding:20px;overflow-y: auto;">
<div v-for="n in 10" style="margin-bottom: 18px;padding: 12px;border:1px solid #afafaf;border-radius:10px;background:#2d475c;">
<div style="display: flex;align-items: center;justify-content: space-between;font-size: 16px;">
<div>张三三</div>
<div>2026-06-28 14:50:30</div>
</div>
<div style="font-size: 20px;">暂停</div>
</div>
</div>
</n-gi>
</n-grid>
<div style="display: flex;align-items: center;justify-content: center;">
<div class="mybtn">
<n-icon size="28">
<Power />
</n-icon>
<div>开始</div>
</div>
<div class="mybtn" style="margin-left: 20px;background: #1e2a40;border: 1px solid #afafaf;">
<n-icon size="32">
<StopCircleOutline />
</n-icon>
<div>暂停</div>
</div>
<!-- <n-button ghost size="large" style="color: #fff;">
<template #icon size="100">
<n-icon>
<Contract />
</n-icon>
</template>
开始
</n-button>
<n-button ghost style="margin-right: 20px;color: #fff;">
<template #icon>
<n-icon>
<Sync />
</n-icon>
</template>
暂停
</n-button> -->
</div>
</div>
<div v-else class="conten">
<div class="head">
<div style="box-sizing: border-box;padding: 5px;">
<!-- <n-icon :component="BuildSharp" size="20" color="#ccc" /> -->
<div style="display: flex;align-items: center;padding-left: 10px;">
<n-icon :component="PersonOutline" size="25" color="#ccc" />
<div style="padding: 0 10px;">未登录</div>
</div>
</div>
<div>
<n-button v-if="isfullscr" ghost style="margin-right: 20px;color: #fff;" @click="exitFullscreen">
<template #icon>
<n-icon>
<Contract />
</n-icon>
</template>
退出全屏
</n-button>
<n-button v-else ghost style="margin-right: 20px;color: #fff;" @click="requestFullscreen">
<template #icon>
<n-icon>
<Contract />
</n-icon>
</template>
全屏
</n-button>
</div>
</div>
<div style="position: absolute;top: 50%;left: 50%;width: 400px;height: 580px;padding: 20px;transform: translate(-50%,-50%);border-radius: 20px;border: 1px #b7b7b7 solid;background: #1e2a40;">
<div style="width: 100%;padding:10px 20px;text-align: center;">
<!-- <img src="../../assets/logo/logo1.png" width="110" height="50" /> -->
<n-icon size="40" color="#00a2ff">
<EarthOutline />
</n-icon>
<div>
<div style="font-size: 21px;">请绑定当前终端所属工位</div>
<div style="font-size: 12px;color: #b7b7b7;">绑定后，终端将自动显示该工位的生产任务</div>
</div>
</div>
<n-form
ref="loginformRef"
:model="logindata"
:rules="loginrules"
label-placement="top"
label-width="auto"
size="large"
:style="{
marginTop:'20px'
}"
>
<n-form-item label="所属车间" label-style="color:#fff;" path="workshop">
<n-select
v-model:value="logindata.workshop"
remote
placeholder="请选择车间"
:options="workshoplist"
/>
</n-form-item>
<n-form-item label="所属工段" label-style="color:#fff;" path="section">
<n-select
:disabled="logindata.workshop?false:true"
v-model:value="logindata.section"
placeholder="请选择工段"
:options="workshoplist"
/>
</n-form-item>
<n-form-item label="所属工位" label-style="color:#fff;" path="workstation">
<n-select
:disabled="logindata.section?false:true"
v-model:value="logindata.workstation"
placeholder="请选择工位"
:options="workshoplist"
/>
</n-form-item>
<n-button
:disabled="logindata.workstation?false:true"
type="info"
style="width: 100%;margin-top: 20px;"
size="large"
@click="loginhand"
>
确 认 绑 定
</n-button>
</n-form>
</div>
</div>
<!--作业指导书-->
<n-modal
v-model:show="guidanpop"
title="作业指导书"
preset="card"
style="width: 500px"
:mask-closable="false"
>
<div style="min-height: 400px;">作业指导书</div>
<!-- <template #footer>
<n-space justify="end">
<n-button @click="guidanpop = false">取消</n-button>
</n-space>
</template> -->
</n-modal>
</template>
<script setup lang="ts">
import {
ref,
reactive,
h,
onMounted,
render,
watch,
} from 'vue'
import {
NButton,
NDropdown,
NIcon,
NSpace,
NPagination,
NGrid,
NGi,
NTag,
useMessage,
//useDialog,
type FormInst,
} from 'naive-ui'
import {
PrismOutline,
ArrowRedoSharp,
ArrowRedoOutline,
BuildSharp,
Contract,
Sync,
SwapHorizontalOutline,
BarChartOutline,
LayersOutline,
DiceOutline,
Search,
PrismSharp,
ReaderSharp,
Planet,
PersonOutline,
EarthOutline,
DocumentTextOutline,
PricetagsOutline,
ScanCircleOutline,
HourglassOutline,
Power,
StopCircleOutline,
ShapesOutline,
LogoWebComponent,
TimerSharp
} from '@vicons/ionicons5'
import Circlebom from './circle.vue'
import { useUserStore } from '@/stores/user'
import { dictDataApi } from '@/api/org'
import {
disworlist,
editdiswor,
transfer,
pauseresume,
//workload
} from '@/api/production'
import { submitLogApi } from '@/api/submitLog'
import { SysUser, userApi } from '@/api/system'
import { label } from 'three/tsl'
//const dialog = useDialog()
//是否平板
let tablet = ref(false)
//全屏
let isfullscr = ref(false)
//浏览器全屏
function requestFullscreen() {
document.documentElement.requestFullscreen()
isfullscr.value = true
}
//退出全屏
function exitFullscreen() {
document.exitFullscreen()
isfullscr.value = false
}
const message = useMessage()
const userStore = useUserStore()
let queryparam = reactive<any>({
type:1,
id:''
})
const typeopt = reactive<any>([
{
label: '全部',
value: 1
},
{
label: '只看本机台',
value: 2
},
{
label: '只看当前用户',
value: 3
}
])
//报工
let baogformRef = ref()
let baogdata = reactive<any>({
qualified:'', //合格数
unqualified:'', //不合格数
total:'' //总数
})
let baogrules = {
qualified: [
{
required: true,
trigger: ['blur', 'input'],
message: '请输入合格数'
}
],
unqualified:[
{
required: true,
trigger: ['blur', 'input'],
message: '请输入不合格数'
}
]
}
watch(() => baogdata.qualified,(v:any) => {
baogdata.qualified = v.replace(/[^\d]/g,'').replace(/^0+(?=\d)/, '')
baogdata.total = baogdata.qualified*1 + baogdata.unqualified*1
})
watch(() => baogdata.unqualified,(v:any) => {
baogdata.unqualified = v.replace(/[^\d]/g,'').replace(/^0+(?=\d)/, '')
baogdata.total = baogdata.qualified*1 + baogdata.unqualified*1
})
//确认报工
function confireport() {
baogformRef.value?.validate((e:any) => {
if (!e) {
message.success('操作成功')
}
})
}
//工单切换
let gdindex = ref<any>(0)
function getgd(i:any){
gdindex.value = i
}
//工序切换
let gonxindex = ref<any>(0)
function gxtab(i:any) {
gonxindex.value = i
}
//作业指导书
let guidanpop = ref(false)
function guizds() {
guidanpop.value = true
}
//登录
let islogin = ref(false)
let logindata = reactive({
workshop:'', //所属车间
section:'', //所属工段
workstation:'' //所属工位
})
let loginrules = {
// workshop: [
// {
// required: true,
// trigger: ['blur', 'input'],
// message: '请选择所属车间'
// }
// ],
// section: [
// {
// required: true,
// trigger: ['blur', 'input'],
// message: '请选择所属工段'
// }
// ],
// workstation: [
// {
// required: true,
// trigger: ['blur', 'input'],
// message: '请选择所属工位'
// }
// ]
}
const loginformRef =ref()
let workshoplist = [
{
label:'一车间',
value:'1'
},
{
label:'二车间',
value:'2'
},
{
label:'三车间',
value:'3'
}
]
function loginhand() {
loginformRef.value?.validate((e:any) => {
if (!e) {
message.success('绑定成功')
islogin.value = true
}
})
}
onMounted(() => {
// getlist()
// getUserList()
// loadDictOptions()
//workload()
// 初始显示 0%
//setProgress(50)
window.addEventListener('resize', () => {
const width = window.innerWidth
if(width < 1024){
tablet.value = true
}else{
tablet.value = false
}
// if (width < 768) {
// console.log('手机模式')
// } else if (width < 1024) {
// console.log('平板模式')
// } else {
// console.log('桌面模式')
// }
})
//监听是否全屏 fullscreenchange
window.addEventListener('resize', () => {
if(window.innerHeight === screen.height){
isfullscr.value = true
}else{
isfullscr.value = false
}
})
})
</script>
<style scoped>
/deep/.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border{
/* background-color:#1b3752; */
border:1px solid #817e7e;
/* color: #fff; */
}
</style>
<style scoped lang="scss">
.conten{
/* width: 100vw; */
height: 100vh;
color: #fff;
background: linear-gradient(45deg, #010b1a 0%, #45679b 100%);
.head{
display: flex;
height: 70px;
padding-right:10px;
justify-content: space-between;
background:#041b3f; //linear-gradient(0deg, #31558f 0%, #152d52 100%);
>div{
display: flex;
align-items: center;
.mbx{
display: flex;
align-items: center;
font-size: 18px;
>div{
//margin-right: 20px;
padding:5px 10px;
//border: 1px dashed #ccc;
//background: #2c4970;
}
}
}
}
.total{
padding: 20px;
display: flex;
justify-content:space-between;
>div{
box-sizing: border-box;
width: 19%;
height: 100px;
padding:10px 15px;
border: 4px double #d4d4d4;
// border: 4px solid;
// border-image: linear-gradient(
// 135deg,
// #f0f0f0,
// #8a8a8a,
// #595959,
// #b6b4b4
// ) 1;
border-radius: 10px;
}
}
.mocz{
width: 100%;
height: 600px;
//border-radius: 30px;
border: 3px solid;
border-image: linear-gradient(
135deg,
#d3d2d2,
#8a8a8a,
#868686,
#b6b4b4
) 1;
.gditem{
box-sizing: border-box;
width: 100%;
margin-bottom: 15px;
padding: 10px;
background: #2d475c;
border-radius: 10px;
}
.gdactv{
background: #0c5207;
}
// box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);
}
.gonxactv{
border: 2px solid #d18610;border-radius: 10px;
}
.mybtn{
box-sizing:border-box;
display: flex;
width: 120px;
height: 60px;
align-items: center;
justify-content: center;
line-height: 60px;
border-radius: 10px;
font-size: 20px;
background: #007f5b;
cursor: pointer;
}
}
.progress-container {
display: inline-block;
position: relative;
width: 90px;
height: 90px;
}
.progress-container svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.progress-container .bg {
stroke: #e6e6e6;
}
.progress-container .progress {
stroke: #4caf50;
stroke-linecap: round;
transition: stroke-dashoffset 0.6s ease;
}
.progress-container .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
color: #c5c5c5;
}
</style>