Merge branch 'dev' of http://110.41.163.243:9980/kd-aiot/kd-aiot-frontend-aps into dev

src/views/materialPlan/components/detail/material.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="pane-box">
+    <HeaderTitle title="物料信息表"> </HeaderTitle>
+    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
+    </ele-pro-table>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: '80'
+          },
+          {
+            prop: 'name',
+            label: '编码'
+          },
+          {
+            prop: 'name',
+            label: '名称'
+          },
+          {
+            prop: 'name',
+            label: '类型'
+          },
+          {
+            prop: 'name',
+            label: '单位'
+          },
+          {
+            prop: 'name',
+            label: '需求数量'
+          },
+          {
+            prop: 'name',
+            label: '领用数量'
+          },
+          {
+            prop: 'name',
+            label: '投入数量'
+          },
+          {
+            prop: 'name',
+            label: '退还数量'
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/materialPlan/components/detail/plan.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="pane-box">
+    <HeaderTitle title="生产信息"> </HeaderTitle>
+    <el-descriptions :column="5" border>
+      <el-descriptions-item label="计划编号">计划编号</el-descriptions-item>
+      <el-descriptions-item label="物料名称">物料名称</el-descriptions-item>
+      <el-descriptions-item label="物料编码">物料编码</el-descriptions-item>
+      <el-descriptions-item label="牌号">牌号</el-descriptions-item>
+      <el-descriptions-item label="型号">型号</el-descriptions-item>
+      <el-descriptions-item label="生产版本">生产版本</el-descriptions-item>
+      <el-descriptions-item label="产线">产线</el-descriptions-item>
+      <el-descriptions-item label="工艺路线名称"
+        >工艺路线名称</el-descriptions-item
+      >
+      <el-descriptions-item label="工艺路线版本"
+        >工艺路线版本</el-descriptions-item
+      >
+      <el-descriptions-item label="生产重量">生产重量</el-descriptions-item>
+      <el-descriptions-item label="要求交付日期"
+        >要求交付日期</el-descriptions-item
+      >
+      <el-descriptions-item label="创建时间">创建时间</el-descriptions-item>
+      <el-descriptions-item label="计划备注" :span="2"
+        >计划备注</el-descriptions-item
+      >
+    </el-descriptions>
+    <div class="progress-wrapper">
+      <div class="progress-item">
+        <div class="label"> 以生产重量 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(0, 191, 191, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+      <div class="progress-item">
+        <div class="label"> 已完成工单 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(2, 125, 180, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+    </div>
+
+    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
+    </ele-pro-table>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            align: 'center',
+            width: '80'
+          },
+          {
+            prop: 'name',
+            label: '工单号'
+          },
+          {
+            prop: 'name',
+            label: '生产重量'
+          },
+          {
+            prop: 'name',
+            label: '设备编码'
+          },
+          {
+            prop: 'name',
+            label: '设备名称'
+          },
+          {
+            prop: 'name',
+            label: '计划开始时间'
+          },
+          {
+            prop: 'name',
+            label: '实际开始时间'
+          },
+          {
+            prop: 'name',
+            label: '执行人'
+          },
+          {
+            prop: 'name',
+            label: '报工时间'
+          },
+          {
+            prop: 'name',
+            label: '生产周期'
+          },
+          {
+            prop: 'name',
+            label: '状态'
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .progress-wrapper {
+    padding: 10px 0;
+    .progress-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      .label {
+        width: 180px;
+      }
+      .el-progress {
+        flex: 1;
+      }
+    }
+  }
+</style>

src/views/materialPlan/components/materialPlan-search.vue

@@ -0,0 +1,140 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="80px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+        <el-form-item label="计划编码:">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+        <el-form-item label="物料编码:">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+        <el-form-item label="牌号:" label-width="80px">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }">
+        <el-form-item label="要求交付日期:" label-width="100px">
+          <el-date-picker
+            v-model="where.time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+        <el-form-item label="计划状态:" label-width="80px">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 7, md: 12 } : { span: 7 }">
+        <el-form-item label="创建时间:">
+          <el-date-picker
+            v-model="where.time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 7, md: 12 } : { span: 7 }">
+        <el-form-item label="发布时间:">
+          <el-date-picker
+            v-model="where.time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
+            >重置</el-button
+          >
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data () {
+      // 默认表单数据
+      const defaultWhere = {
+        staus: '',
+        code: '',
+        time: [],
+        executeUserName: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere },
+        treeData: []
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive () {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created () {},
+    methods: {
+      /* 搜索 */
+      search () {
+        const where = this.where;
+
+        if (where.time?.length) {
+          where.startTime = where.time[0];
+          where.endTime = where.time[1];
+        }
+
+        this.$emit('search', where);
+      },
+      /*  重置 */
+      reset () {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .ele-form-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+</style>

src/views/materialPlan/components/plan-view.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="description">
+      <div class="label">方案说明</div>
+      <div class="content">
+        <template v-for="(item, index) in rules">
+          <template v-for="(itm, idx) in item.list">
+            <template v-if="!itm.lastDisabled">
+              <div class="tag" :key="index + '' + idx">{{ itm.label }}</div>
+            </template>
+          </template>
+        </template>
+      </div>
+      <div class="operate">
+        <el-button type="primary" plain>发布当前方案</el-button>
+        <el-button type="primary">保存</el-button>
+      </div>
+    </div>
+
+    <div class="display-box">
+      <el-button type="primary" plain size="small">添加工单</el-button>
+      <el-button type="primary" plain size="small">删除</el-button>
+      <div class="items">
+        <span class="label">累计工单条数</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">累计成型数量</span>
+        14pcs
+      </div>
+      <div class="items">
+        <span class="label">累计成型重量</span>
+        14kg
+      </div>
+      <div class="items">
+        <span class="label">设备数量</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">成型剂需求</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">混合料需求</span>
+        14条
+      </div>
+    </div>
+
+    <el-table :data="tableData">
+      <el-table-column type="index" label="序号"></el-table-column>
+      <el-table-column label="工单号" prop=""></el-table-column>
+      <el-table-column label="成型数量" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="成型重量" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始日期" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="班次" prop="">
+        <template v-slot="{ row }">
+          <el-select v-model="row.ba">
+            <el-option></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备编码" prop=""></el-table-column>
+      <el-table-column label="设备名称" prop=""></el-table-column>
+      <el-table-column label="可执行人" prop=""></el-table-column>
+      <el-table-column label="操作" prop="">
+        <template v-slot="{ row }">
+          <el-link type="danger">删除</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column type="selection"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        tableData: [],
+        rules: [
+          {
+            type: 'radio',
+            value: '',
+            list: [
+              { label: '多设备优先', value: 0 },
+              { label: '多班次优先', value: 1 }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+
+            list: [
+              { label: '设备产能优先', value: 0 },
+              { label: '最早开始时间优先', value: 1 },
+              { label: '开始时间优先', value: 2, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+            list: [
+              { label: '非空闲设备可用', value: 0 },
+              { label: '检修设备可用', value: 1 },
+              { label: '检修设备优先', value: 1, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'radio',
+            value: '',
+            list: [{ label: '末单均衡', value: 0 }]
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .description {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border: 1px solid rgba(215, 215, 215, 1);
+    background-color: rgba(242, 242, 242, 1);
+    .label {
+      margin-right: 20px;
+    }
+    .content {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .tag {
+        padding: 5px 10px;
+        background-color: rgba(202, 249, 130, 1);
+        border-radius: 20px;
+
+        & + .tag {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .display-box {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+
+    .items {
+      margin-left: 30px;
+      .label {
+        font-weight: bold;
+      }
+    }
+  }
+</style>

src/views/materialPlan/detail.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="page-title">
+        <el-page-header @back="$router.go(-1)" content="计划详情">
+        </el-page-header>
+      </div>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="计划信息" name="plan">
+          <plan />
+        </el-tab-pane>
+        <el-tab-pane label="物料信息表" name="material">
+          <material />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import plan from './components/detail/plan.vue';
+  import material from './components/detail/material.vue';
+  export default {
+    components: { plan, material },
+    data () {
+      return {
+        activeName: 'plan'
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .pane-box {
+    padding: 20px 0;
+  }
+</style>

src/views/materialPlan/index.vue

@@ -1 +1,246 @@
-<template></template>
+<template>
+  <div class="ele-body">
+    <el-card shadow="never" v-loading="loading">
+      <materialPlan-search @search="reload" ref="searchRef">
+      </materialPlan-search>
+      <el-button type="primary" style="margin: 20px 0">创建计划</el-button>
+      <el-tabs v-model="activeName" type="card" @tab-click="handleTabChange">
+        <el-tab-pane label="未发布" name="first"></el-tab-pane>
+        <el-tab-pane label="已发布" name="second"></el-tab-pane>
+      </el-tabs>
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :key="activeName"
+        :columns="columns"
+        :datasource="datasource"
+        :cache-key="`${activeName}materialPlanTable`"
+      >
+        <template v-slot:code="{ row }">
+          <el-link type="primary" :underline="false" @click="goDetail(row)">
+            222222
+          </el-link>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-truck"
+            @click="handleOrderPublish(row)"
+          >
+            发布工单
+          </el-link>
+          <el-link type="primary" :underline="false" icon="el-icon-truck">
+            重新发布
+          </el-link>
+          <el-link type="primary" :underline="false" icon="el-icon-edit">
+            修改计划
+          </el-link>
+          <el-link type="primary" :underline="false" icon="el-icon-edit">
+            删除
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import materialPlanSearch from './components/materialPlan-search.vue';
+  export default {
+    components: {
+      materialPlanSearch
+    },
+    data () {
+      return {
+        activeName: 'first',
+
+        // 加载状态
+        loading: false,
+        pageType: 'add',
+        dialogTitle: '',
+        isBindPlan: false
+      };
+    },
+    computed: {
+      // 表格列配置
+      columns () {
+        return [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            slot: 'code',
+            prop: 'code',
+            action: 'code',
+            label: '计划编号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planCode',
+            label: '编号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planCode',
+            label: '物料名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planName',
+            label: '牌号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'equiCode',
+            label:
+              this.activeName === 'second'
+                ? '计划生产重量（KG）'
+                : '生产重量（KG）',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          ...(this.activeName === 'second'
+            ? [
+                {
+                  prop: 'code',
+                  label: '以生产重量（KG）',
+                  align: 'center',
+                  showOverflowTooltip: true,
+                  minWidth: 110
+                }
+              ]
+            : []),
+          {
+            prop: 'equiName',
+            label: '生产版本',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'executeUserName',
+            label: '工艺版本',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planFinishTime',
+            label: '要求交付日期',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          ...(this.activeName === 'second'
+            ? [
+                {
+                  prop: 'code',
+                  label: '实际完成时间',
+                  align: 'center',
+                  showOverflowTooltip: true,
+                  minWidth: 110
+                }
+              ]
+            : []),
+          {
+            prop: 'acceptTime',
+            label: '状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'finishTime',
+            label: '创建人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'sj',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          ...(this.activeName === 'second'
+            ? [
+                {
+                  prop: 'code',
+                  label: '发布时间',
+                  align: 'center',
+                  showOverflowTooltip: true,
+                  minWidth: 110
+                }
+              ]
+            : []),
+          ...(this.activeName === 'first'
+            ? [
+                {
+                  columnKey: 'action',
+                  label: '操作',
+                  width: 350,
+                  align: 'center',
+                  resizable: false,
+                  fixed: 'right',
+                  slot: 'action',
+                  showOverflowTooltip: true
+                }
+              ]
+            : [])
+        ];
+      }
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource ({ page, limit, where, order }) {
+        return [{}];
+        // return getWorkOrderList({
+        //   pageNum: page,
+        //   size: limit,
+        //   ...where,
+        //   type: 3
+        // });
+      },
+      // 发布工单
+      handleOrderPublish (row) {
+        this.$router.push({
+          path: '/materialPlan/workOrderPublish'
+        });
+      },
+      handleTabChange () {
+        this.$refs.searchRef.reset();
+      },
+
+      /* 刷新表格 */
+      reload (where) {
+        this.$refs.table.reload({ page: 1, where });
+      },
+
+      goDetail (row) {
+        this.$router.push({
+          path: '/materialPlan/detail'
+        });
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped></style>

src/views/materialPlan/workOrderPublish.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="page-title">
+        <el-page-header @back="$router.go(-1)" content="发布工单">
+        </el-page-header>
+      </div>
+
+      <el-descriptions title="" :column="6" border>
+        <el-descriptions-item label="计划编号"
+          >kooriookami</el-descriptions-item
+        >
+        <el-descriptions-item label="计划类型"
+          >18100000000</el-descriptions-item
+        >
+        <el-descriptions-item label="产品编码">苏州市</el-descriptions-item>
+        <el-descriptions-item label="牌号">苏州市</el-descriptions-item>
+        <el-descriptions-item label="型号">苏州市</el-descriptions-item>
+        <el-descriptions-item label="生产版本">苏州市</el-descriptions-item>
+        <el-descriptions-item label="工艺路线名称">苏州市</el-descriptions-item>
+        <el-descriptions-item label="工艺路线版本">苏州市</el-descriptions-item>
+        <el-descriptions-item label="产品数量">苏州市</el-descriptions-item>
+        <el-descriptions-item label="产品重量">苏州市</el-descriptions-item>
+        <el-descriptions-item label="要求成型数量">苏州市</el-descriptions-item>
+        <el-descriptions-item label="要求成型重量">苏州市</el-descriptions-item>
+      </el-descriptions>
+
+      <div class="rules-box">
+        <div class="rule-label">工单生成规则</div>
+        <div class="rule-wrapper">
+          <div class="content">
+            <div class="select-box" v-for="(item, index) in rules" :key="index">
+              <el-radio-group v-model="item.value" v-if="item.type === 'radio'">
+                <el-radio
+                  v-for="(itm, idx) in item.list"
+                  :key="idx"
+                  :label="itm.label"
+                ></el-radio>
+              </el-radio-group>
+              <el-checkbox-group v-model="item.value" v-else>
+                <el-checkbox
+                  v-for="(itm, idx) in item.list"
+                  :key="idx"
+                  :label="itm.label"
+                  :disabled="
+                    itm.lastDisabled
+                      ? item.value.length < item.list.length - 1
+                      : false
+                  "
+                ></el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="btn-box">
+            <el-tooltip
+              placement="top-start"
+              title="标题"
+              width="200"
+              trigger="hover"
+              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
+            >
+              <el-button type="text" icon="el-icon-question"></el-button>
+            </el-tooltip>
+            <el-button type="primary" plain>一键生成方案</el-button>
+          </div>
+        </div>
+      </div>
+
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="默认" name="first"
+          ><planView key="first"
+        /></el-tab-pane>
+        <el-tab-pane
+          v-for="(item, index) in planList"
+          :label="item.label"
+          :name="index"
+          ><planView :key="index"
+        /></el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import planView from './components/plan-view';
+  export default {
+    components: { planView },
+    data () {
+      return {
+        activeName: 'first',
+        planList: [],
+        rules: [
+          {
+            type: 'radio',
+            value: '',
+            list: [
+              { label: '多设备优先', value: 0 },
+              { label: '多班次优先', value: 1 }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+
+            list: [
+              { label: '设备产能优先', value: 0 },
+              { label: '最早开始时间优先', value: 1 },
+              { label: '开始时间优先', value: 2, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+            list: [
+              { label: '非空闲设备可用', value: 0 },
+              { label: '检修设备可用', value: 1 },
+              { label: '检修设备优先', value: 1, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'radio',
+            value: '',
+            list: [{ label: '末单均衡', value: 0 }]
+          }
+        ]
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .rules-box {
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    .rule-label {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .rule-wrapper {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .content {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0 10px;
+
+        .select-box {
+          border: 1px solid #ccc;
+          padding: 5px 10px;
+          margin: 0 10px 10px 0;
+        }
+      }
+
+      .btn-box {
+        display: flex;
+        justify-content: space-between;
+        width: 160px;
+      }
+    }
+  }
+</style>

src/views/productionPlan/components/detail/gant copy.vue

@@ -1,159 +0,0 @@
-<template>
-  <v-chart ref="saleChartRef" style="height: 520px" :option="saleChartOption" />
-</template>
-
-<script>
-  import { use } from 'echarts/core';
-  import * as graphic from 'echarts/lib/util/graphic';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { CustomChart } from 'echarts/charts';
-  import {
-    GridComponent,
-    TooltipComponent,
-    TitleComponent,
-    DataZoomComponent
-  } from 'echarts/components';
-  import VChart from 'vue-echarts';
-  import { getSaleroomList } from '@/api/dashboard/analysis';
-
-  // 按需加载 echarts
-  use([
-    CanvasRenderer,
-    CustomChart,
-    TitleComponent,
-    GridComponent,
-    TooltipComponent,
-    DataZoomComponent
-  ]);
-
-  export default {
-    components: { VChart },
-    data () {
-      return {
-        // 图表配置
-        saleChartOption: {},
-        data: [],
-        dataCount: 10,
-        startTime: +new Date(),
-        categories: ['categoryA', 'categoryB', 'categoryC'],
-        types: [
-          { name: 'JS Heap', color: '#7b9ce1' },
-          { name: 'Documents', color: '#bd6d6c' },
-          { name: 'Nodes', color: '#75d874' },
-          { name: 'Listeners', color: '#e0bc78' },
-          { name: 'GPU Memory', color: '#dc77dc' },
-          { name: 'GPU', color: '#72b362' }
-        ]
-      };
-    },
-    created () {
-      this.init();
-    },
-    methods: {
-      init () {
-        this.categories.forEach((category, index) => {
-          var baseTime = this.startTime;
-          for (var i = 0; i < this.dataCount; i++) {
-            var typeItem =
-              this.types[Math.round(Math.random() * (this.types.length - 1))];
-            var duration = Math.round(Math.random() * 10000);
-            this.data.push({
-              name: typeItem.name,
-              value: [index, baseTime, (baseTime += duration), duration],
-              itemStyle: {
-                normal: {
-                  color: typeItem.color
-                }
-              }
-            });
-            baseTime += Math.round(Math.random() * 2000);
-          }
-        });
-
-        this.saleChartOption = {
-          tooltip: {
-            formatter: function (params) {
-              return (
-                params.marker + params.name + ': ' + params.value[3] + ' ms'
-              );
-            }
-          },
-          title: {
-            text: 'Profile',
-            left: 'center'
-          },
-          dataZoom: [
-            {
-              type: 'slider',
-              filterMode: 'weakFilter',
-              showDataShadow: false,
-              top: 400,
-              labelFormatter: ''
-            },
-            {
-              type: 'inside',
-              filterMode: 'weakFilter'
-            }
-          ],
-          grid: {
-            height: 300
-          },
-          xAxis: {
-            min: this.startTime,
-            scale: true,
-            axisLabel: {
-              formatter: (val) => {
-                return Math.max(0, val - this.startTime) + ' ms';
-              }
-            }
-          },
-          yAxis: {
-            data: this.categories
-          },
-          series: [
-            {
-              type: 'custom',
-              renderItem: this.renderItem,
-              itemStyle: {
-                opacity: 0.8
-              },
-              encode: {
-                x: [1, 2],
-                y: 0
-              },
-              data: this.data
-            }
-          ]
-        };
-      },
-      renderItem (params, api) {
-        let categoryIndex = api.value(0);
-        let start = api.coord([api.value(1), categoryIndex]);
-        let end = api.coord([api.value(2), categoryIndex]);
-        let height = api.size([0, 1])[1] * 0.6;
-        let rectShape = graphic.clipRectByRect(
-          {
-            x: start[0],
-            y: start[1] - height / 2,
-            width: end[0] - start[0],
-            height: height
-          },
-          {
-            x: params.coordSys.x,
-            y: params.coordSys.y,
-            width: params.coordSys.width,
-            height: params.coordSys.height
-          }
-        );
-        return (
-          rectShape && {
-            type: 'rect',
-            transition: ['shape'],
-            shape: rectShape,
-            style: api.style()
-          }
-        );
-      }
-    }
-  };
-</script>

src/views/productionPlan/index.vue

@@ -240,6 +240,9 @@
       goDetail (row) {
         row.title = '工单详情';
         row.tabLabel = '工单信息';
+        this.$router.push({
+          path: '/productionPlan/detail'
+        });
       }
     }
   };