|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <ContentWrap>
|
|
|
+<!-- 顶部标题-->
|
|
|
+ <div class="topTitle">
|
|
|
+ <span class="tab-title">执行计划：CCO-BH-哈哈哈-嘿嘿黑</span>
|
|
|
+ <div class="set-btn" @click="goBack">
|
|
|
+ <img src="../../../assets/images/返回.png" alt=""/>
|
|
|
+ 返回
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<!-- 规则设置-->
|
|
|
+ <div class="custom-tabs-container">
|
|
|
+ <div class="tab-header">
|
|
|
+ <span class="tab-title">规则设置</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-content">
|
|
|
+ <section>
|
|
|
+ <span>启用执行计划：</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="value"
|
|
|
+ size="small"
|
|
|
+ /></section>
|
|
|
+ <section>
|
|
|
+ <span>执行频率单位：</span>
|
|
|
+ <el-radio-group v-model="radio">
|
|
|
+ <el-radio label="day">天</el-radio>
|
|
|
+ <el-radio label="week">周</el-radio>
|
|
|
+ <el-radio label="month">月</el-radio>
|
|
|
+ <el-radio label="year">年</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 天 -->
|
|
|
+ <section v-if="radio === 'day'">
|
|
|
+ <span> 执行频率：</span>每
|
|
|
+ <el-input-number
|
|
|
+ v-model="dayNum"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 天
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 周 -->
|
|
|
+ <section v-else-if="radio === 'week'">
|
|
|
+ <span>执行频率：</span> 每
|
|
|
+ <el-input-number
|
|
|
+ v-model="weekNum"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 周 在
|
|
|
+ <el-select v-model="weekDay" placeholder="选择星期" style="width: 115px">
|
|
|
+ <el-option label="星期一" value="1" />
|
|
|
+ <el-option label="星期二" value="2" />
|
|
|
+ <el-option label="星期三" value="3" />
|
|
|
+ <el-option label="星期四" value="4" />
|
|
|
+ <el-option label="星期五" value="5" />
|
|
|
+ <el-option label="星期六" value="6" />
|
|
|
+ <el-option label="星期日" value="7" />
|
|
|
+ </el-select>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 月 -->
|
|
|
+ <section v-else-if="radio === 'month'">
|
|
|
+ <span>执行频率：</span> 每
|
|
|
+ <el-input-number
|
|
|
+ v-model="monthNum"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 月 第
|
|
|
+ <el-input-number
|
|
|
+ v-model="monthDay"
|
|
|
+ :min="1"
|
|
|
+ :max="31"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 日
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 年 -->
|
|
|
+ <section v-else-if="radio === 'year'">
|
|
|
+ <span>执行频率：</span> 每
|
|
|
+ <el-input-number
|
|
|
+ v-model="yearNum"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 年 第
|
|
|
+ <el-input-number
|
|
|
+ v-model="yearDay"
|
|
|
+ :min="1"
|
|
|
+ :max="365"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ /> 天
|
|
|
+ </section>
|
|
|
+ <section> <span>作业开始时间：</span> <el-time-picker v-model="startTime" placeholder="请选择" /></section>
|
|
|
+ <section> <span>作业预估时长：</span> <el-time-picker v-model="estimatedDuration" placeholder="请选择" /></section>
|
|
|
+ <section>
|
|
|
+ <span> 计划终止：</span>
|
|
|
+ <el-select v-model="select" placeholder="Select" style="width: 115px">
|
|
|
+ <el-option label="Restaurant" value="1" />
|
|
|
+ <el-option label="Order No." value="2" />
|
|
|
+ <el-option label="Tel" value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="endTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />次后
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <span>非工作日：</span>
|
|
|
+ <el-select v-model="select" placeholder="Select" style="width: 115px">
|
|
|
+ <el-option label="Restaurant" value="1" />
|
|
|
+ <el-option label="Order No." value="2" />
|
|
|
+ <el-option label="Tel" value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ class="mx-4"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />工作日
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="btnstyle">
|
|
|
+ <el-button plain>修改</el-button>
|
|
|
+ <el-button type="primary" plain>新建</el-button>
|
|
|
+ <el-button plain>取消</el-button>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </ContentWrap>
|
|
|
+<!-- 预览计划-->
|
|
|
+ <ContentWrap>
|
|
|
+
|
|
|
+ <div class="tab-header">
|
|
|
+ <span class="tab-title">执行计划预览</span>
|
|
|
+ </div>
|
|
|
+<!-- 表格数据-->
|
|
|
+ <div class="tableCon">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="planDate" label="计划日期" width="180" />
|
|
|
+ <el-table-column prop="startTime" label="计划开始时间" width="180" />
|
|
|
+ <el-table-column prop="endTime" label="预计结束时间" />
|
|
|
+ <el-table-column prop="workstationName" label="所属区域" />
|
|
|
+ <el-table-column prop="machineryName" label="设备/工艺" />
|
|
|
+ <el-table-column prop="type" label="作业类型" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </ContentWrap>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const value = ref(true)
|
|
|
+const estimatedDuration = ref()
|
|
|
+const startTime = ref()
|
|
|
+const endTime = ref('')
|
|
|
+const router=useRouter()
|
|
|
+const route=useRoute()
|
|
|
+const radio = ref('month')
|
|
|
+// 各单位下的输入值
|
|
|
+const dayNum = ref(1)
|
|
|
+const weekNum = ref(1)
|
|
|
+const weekDay = ref('')
|
|
|
+const monthNum = ref(1)
|
|
|
+const monthDay = ref(1)
|
|
|
+const yearNum = ref(1)
|
|
|
+const yearDay = ref(1)
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ planDate: '2016-05-03',
|
|
|
+ startTime: '10:23',
|
|
|
+ endTime: '15:23',
|
|
|
+ workstationName: 'CCO-BH',
|
|
|
+ machineryName: '搅拌机-05',
|
|
|
+ type: '换产',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ planDate: '2016-05-03',
|
|
|
+ startTime: '10:23',
|
|
|
+ endTime: '15:23',
|
|
|
+ workstationName: 'CCO-BH',
|
|
|
+ machineryName: '搅拌机-05',
|
|
|
+ type: '换产',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ planDate: '2016-05-03',
|
|
|
+ startTime: '10:23',
|
|
|
+ endTime: '15:23',
|
|
|
+ workstationName: 'CCO-BH',
|
|
|
+ machineryName: '搅拌机-05',
|
|
|
+ type: '换产',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ planDate: '2016-05-03',
|
|
|
+ startTime: '10:23',
|
|
|
+ endTime: '15:23',
|
|
|
+ workstationName: 'CCO-BH',
|
|
|
+ machineryName: '搅拌机-05',
|
|
|
+ type: '换产',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const goBack=()=>{
|
|
|
+ router.push('/sopm/sop')
|
|
|
+ }
|
|
|
+const handleChange = () => {
|
|
|
+ // 可根据需要处理值变更逻辑
|
|
|
+ console.log('改变了执行频率')
|
|
|
+}
|
|
|
+
|
|
|
+console.log(route.query.id,'是否拿到了id')
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.topTitle{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.set-btn {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ border: 1px solid black;
|
|
|
+ border-radius: 6px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ margin:10px 0;
|
|
|
+ img{
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-tabs-container {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+//设置规则
|
|
|
+.tab-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ //background-color: #c81818;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ section{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 15px 0;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ //background: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnstyle{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
