配料用料统计提交

src/components/CreatePlan/ChooseMaterial.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-dialog
+    title="选择物料"
+    :visible.sync="materialdialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    width="60%"
+  >
+    <div>
+      <el-row>
+		<el-col :span="24" class="topsearch">
+			<el-form >
+			  <el-row>
+          <el-col :span="6">
+            <el-input
+              v-model="searchKey"
+              placeholder="输入设备编码或名称"
+              size="small"
+            ></el-input>
+          </el-col>
+          <el-col :span="6" style="margin-left:10px">
+             <el-button type="primary" size="small" @click="searchByKeyWords">搜索</el-button>
+             <el-button size="small" @click="reset">重置</el-button>
+          </el-col>
+			  </el-row>
+			</el-form>
+		</el-col>
+        <el-col :span="6" class="tree_col">
+          <AssetTree
+            @handleNodeClick="handleNodeClick"
+            @setRootId="setRootId"
+            :type="'5'"
+            :paramsType="'type'"
+            ref="treeList"
+          />
+        </el-col>
+        <el-col :span="18" class="table_col">
+          <el-table
+            :data="tableData"
+            height="450"
+            @row-click="single"
+          >
+            <el-table-column label="物品编码" prop="code" width="200"></el-table-column>
+            <el-table-column label="物品名称" prop="name"></el-table-column>
+            <el-table-column label="牌号" prop="classificationUrl"></el-table-column>
+            <el-table-column label="选择" align="center">
+               <template slot-scope="scope">
+            	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
+               </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination">
+            <el-pagination
+              background
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              :page-size="pagination.size"
+              :current-page.sync="pagination.page"
+              @current-change="handleCurrent"
+              @size-change="handleSize"
+            >
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="btns">
+      <el-button type="primary" size="small" @click="selected">选择</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import AssetTree from '@/components/AssetTree';
+export default {
+  components: {
+    AssetTree
+  },
+  data () {
+    return {
+      materialdialog: false,
+      tableData: [
+		  {id:1,name:'122',model:'型号1'},
+		  {id:2,name:'222',model:'型号2'}
+	  ],
+      pagination: {
+        page: 1,
+        size: 10
+      },
+	  total: 0,
+	    searchKey:null,
+	    current:null,
+	    rootId:null,
+		radio: '',
+    }
+  },
+  watch: {
+
+  },
+  methods: {
+	open(){
+		this.materialdialog = true
+	},
+	handleNodeClick (info) {
+	  this.current = info
+	},
+	// 获取根节点id
+	setRootId(id){
+	  this.rootId = id
+	},
+    handleClose () {
+      this.materialdialog = false
+	  this.radio = ''
+    },
+
+    handleCurrent (page) {
+      this.pagination.page = page
+    },
+    handleSize (size) {
+      this.pagination.page = 1
+      this.pagination.size = size
+    },
+    // 弹窗 - 按关键字搜索
+    searchByKeyWords () {
+
+    },
+    // 重置
+    reset(){
+    },
+	// 单击获取id
+	single (row) {
+	     this.radio = row.id;
+	},
+	selected(){
+		
+	}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree_col {
+  border: 1px solid #eee;
+  padding: 10px 0;
+  box-sizing: border-box;
+  height: 500px;
+  overflow: auto;
+}
+.table_col {
+  padding-left: 10px;
+  ::v-deep .el-table th.el-table__cell {
+    background: #f2f2f2;
+  }
+}
+.pagination {
+  text-align: right;
+  padding: 10px 0;
+}
+.btns {
+  text-align: center;
+  padding: 10px 0;
+}
+.topsearch{
+	margin-bottom:15px;
+}
+</style>

src/components/CreatePlan/CreateBatch.vue

@@ -0,0 +1,160 @@
+<template>
+  <ele-modal
+    :visible.sync="visible"
+    title="创建配料计划"
+    width="45vw"
+    append-to-body
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+		<el-row :gutter="15">
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="选择物料:" prop="wl">
+			     <el-input readonly v-model="form.wl" @click.native="chooseMateriel"/>
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="生产版本:" prop="version">
+			    <el-input readonly v-model="form.version"  @click.native="chooseVersion"/>
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="牌号:">
+				 <el-input disabled v-model="form.brand" />
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="工艺路线名称:">
+			  	<el-input disabled v-model="form.road" />
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="要求交付日期:" prop="date">
+			    <el-date-picker
+				   style="width: 100%;"
+				   v-model="form.date"
+				   type="date"
+				   placeholder="选择日期"
+				   value-format="yyyy-MM-dd">
+				 </el-date-picker>
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="工艺路线版本:" prop="roadV">
+			       <el-select v-model="form.roadV" placeholder="请选择">
+			         <el-option
+					   style="width: 100%;"
+			           v-for="item in options"
+			           :key="item.value"
+			           :label="item.label"
+			           :value="item.value">
+			         </el-option>
+			       </el-select>
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="生产重量:" prop="weight">
+			     <el-input clearable v-model="form.weight">
+					 <template slot="append">KG</template>
+				 </el-input>
+			  </el-form-item>
+			</el-col>
+			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+			  <el-form-item label="计划备注:">
+			     <el-input clearable v-model="form.remrk"/>
+			  </el-form-item>
+			</el-col>
+		</el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="save" :loading="loading">
+        确定
+      </el-button>
+    </template>
+	
+	<!-- 选择物料 -->
+	<ChooseMaterial ref="chooseRef"></ChooseMaterial>
+	<!-- 选择生产版本 -->
+	<ProductionVersion ref="versionRef"></ProductionVersion>
+  </ele-modal>
+</template>
+
+<script>
+	import ChooseMaterial from '@/components/CreatePlan/ChooseMaterial.vue'
+	import ProductionVersion from '@/components/CreatePlan/ProductionVersion.vue'
+	export default {
+		components: {
+			ChooseMaterial,
+			ProductionVersion
+		},
+    data() {
+      return {
+        visible: false,
+		loading:false,
+		form:{},
+	// 表单验证规则
+		rules: {
+			wl: [{required: true,message: '请选择物料',trigger: 'change'}],
+			version: [{required: true,message: '请选择生产版本',trigger: 'change'}],
+			date:[{required: true,message: '请选择交付日期',trigger: 'change'}],
+			roadV:[{required: true,message: '请选择工艺路线版本',trigger: 'change'}],
+			weight:[{required: true,message: '请输入生产重量',trigger: 'blur'}]
+		},
+		options:[]
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created(){
+    },
+    methods: {
+	  open () {
+	    this.visible = true;
+	  },
+      cancel () {
+		this.form = {}
+		this.$refs.form.clearValidate();
+        this.visible = false;
+      },
+	  addEquipment(){
+		  this.$refs.equipmentRefs.open()
+	  }, 
+	  /* 保存编辑 */
+	  save() {
+	    this.$refs.form.validate((valid) => {
+	      if (!valid) {
+	        return false;
+	      }
+	    });
+	  },
+	  
+	  chooseMateriel(){
+	  	this.$refs.chooseRef.open()
+	  },
+	  
+	  chooseVersion(){
+		  this.$refs.versionRef.open()
+	  }
+	  
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .basic-details-title{
+	  margin:10px 0
+  }
+  .add-product{
+	  width:100%;
+	  display:flex;
+	  align-items:center;
+	  justify-content:flex-end;
+	  font-size:30px;
+	  color:#1890ff;
+	  margin:10px 0;
+	  cursor: pointer;
+  }
+</style>

src/views/saleOrder/components/ProductionVersion.vue → src/components/CreatePlan/ProductionVersion.vue

@@ -50,7 +50,7 @@ export default {
 			{id:2,name:'222',model:'型号2'}
 		],
 		loading:false,
-	    radio: '',
+	      radio: '',
       };
     },
     computed: {
@@ -63,7 +63,7 @@ export default {
 	  },
       cancel () {
         this.visible = false;
-		this.radio = ''
+	     	this.radio = ''
       },
 	  // 单击获取id
 	  single (row) {

src/views/materialStatistics/components/DetailDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog
+    title="生产工单详情"
+    :visible.sync="orderdialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    width="60%"
+  >
+    <div>
+        <el-descriptions title="" :column="5" size="medium" border>
+          <el-descriptions-item>
+            <template slot="label"> 生产工单号 </template>
+            1222222222222
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产计划编号 </template>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 产品编码 </template>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 产品名称 </template>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 牌号 </template>
+          </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 产品重量 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 欠交物料编码 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 欠交物料名称 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 欠交重量 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 工单开始时间 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 配料计划编号 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 计划生产重量 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 排产时间 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 计划交付时间 </template>
+		  </el-descriptions-item>
+		  <el-descriptions-item>
+		    <template slot="label"> 实际完成时间 </template>
+		  </el-descriptions-item>
+        </el-descriptions>
+    </div>
+    <div class="btns">
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      orderdialog: false
+    }
+  },
+
+  watch: {
+
+  },
+  methods: {
+	open(){
+		this.orderdialog = true
+	},	
+    handleClose () {
+      this.orderdialog = false
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree_col {
+  border: 1px solid #eee;
+  padding: 10px 0;
+  box-sizing: border-box;
+  height: 500px;
+  overflow: auto;
+}
+.table_col {
+  padding-left: 10px;
+  ::v-deep .el-table th.el-table__cell {
+    background: #f2f2f2;
+  }
+}
+.pagination {
+  text-align: right;
+  padding: 10px 0;
+}
+.btns {
+  text-align: center;
+  padding: 10px 0;
+}
+.topsearch{
+	margin-bottom:15px;
+}
+</style>

src/views/materialStatistics/components/MaterialDialog.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-dialog
+    title="选择物料"
+    :visible.sync="equipmentdialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    width="60%"
+  >
+    <div>
+      <el-row>
+		<el-col :span="24" class="topsearch">
+			<el-form >
+			  <el-row>
+          <el-col :span="6">
+            <el-input
+              v-model="searchKey"
+              placeholder="输入设备编码或名称"
+              size="small"
+            ></el-input>
+          </el-col>
+          <el-col :span="6" style="margin-left:10px">
+             <el-button type="primary" size="small" @click="searchByKeyWords">搜索</el-button>
+             <el-button size="small" @click="reset">重置</el-button>
+          </el-col>
+			  </el-row>
+			</el-form>
+		</el-col>
+        <el-col :span="6" class="tree_col">
+          <AssetTree
+            @handleNodeClick="handleNodeClick"
+            @setRootId="setRootId"
+            :type="'5'"
+            :paramsType="'type'"
+            ref="treeList"
+          />
+        </el-col>
+        <el-col :span="18" class="table_col">
+          <el-table
+            :data="tableData"
+            height="450"
+            highlight-current-row
+            @row-click="single"
+          >
+            <el-table-column label="物品编码" prop="code" width="200"></el-table-column>
+            <el-table-column label="物品名称" prop="name"></el-table-column>
+            <el-table-column label="牌号" prop="classificationUrl"></el-table-column>
+            <el-table-column label="选择" align="center">
+               <template slot-scope="scope">
+            	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
+               </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination">
+            <el-pagination
+              background
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="pagination.total"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              :page-size="pagination.size"
+              :current-page.sync="pagination.page"
+              @current-change="handleCurrent"
+              @size-change="handleSize"
+            >
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="btns">
+      <el-button type="primary" size="small" @click="selected">选择</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import AssetTree from '@/components/AssetTree';
+export default {
+  components: {
+    AssetTree
+  },
+  data () {
+    return {
+      equipmentdialog: false,
+      tableData: [],
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+	  total: 0,
+	  searchKey:null,	  
+	  current:null,
+	  rootId:null,
+	  radio: '',
+    }
+  },
+
+  watch: {
+
+  },
+  methods: {
+	open(){
+		this.equipmentdialog = true
+	},
+	handleNodeClick (info) {
+	  this.current = info
+	},
+	// 获取根节点id
+	setRootId(id){
+	  this.rootId = id
+	},
+	// 单击获取id
+	single (row) {
+	     this.radio = row.id;
+	},
+	
+    handleClose () {
+      this.equipmentdialog = false
+    },
+
+    handleCurrent (page) {
+      this.pagination.page = page
+      // this._getList(this.params)
+    },
+    handleSize (size) {
+      this.pagination.page = 1
+      this.pagination.size = size
+      // this._getList(this.params)
+    },
+	searchByKeyWords(){
+		
+	},
+	selected(){
+		
+	},
+	reset(){
+		
+	}
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree_col {
+  border: 1px solid #eee;
+  padding: 10px 0;
+  box-sizing: border-box;
+  height: 500px;
+  overflow: auto;
+}
+.table_col {
+  padding-left: 10px;
+  ::v-deep .el-table th.el-table__cell {
+    background: #f2f2f2;
+  }
+}
+.pagination {
+  text-align: right;
+  padding: 10px 0;
+}
+.btns {
+  text-align: center;
+  padding: 10px 0;
+}
+.topsearch{
+	margin-bottom:15px;
+}
+</style>

src/views/materialStatistics/components/collect-card.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-card shadow="never" body-style="padding: 0 0 20px 0;">
+    <el-row>
+      <el-col v-bind="styleResponsive ? { lg: 10, md: 10 } : { span: 10 }">
+          <div class="ele-page-header ele-cell">
+				<div class="ele-cell header-round">
+					<div class="round-left"></div>
+					<div class="round-left round-right"></div>
+				</div>
+				<div class="ele-page-title">欠交配料汇总</div>
+          </div>
+          <el-table
+            :data="tableData"
+            class="table"
+            border
+          >    
+          	  <el-table-column label="序号" align="center" type="index"  width="55">
+          	  </el-table-column>
+          	  <el-table-column label="物料编码" align="center" width="100" show-overflow-tooltip>
+          	  </el-table-column>
+          	  <el-table-column label="物料名称" align="center"  width="120">
+          	  </el-table-column>
+          	  <el-table-column label="物料类型" align="center">
+          	  </el-table-column>
+          	  <el-table-column label="牌号" align="center">
+          	  </el-table-column>
+          	  <el-table-column label="欠交数量(KG)" align="center" width="120">
+          	  </el-table-column>
+          </el-table>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 14, md: 14 } : { span: 14 }">
+        <div class="demo-monitor-title">
+          <div class="ele-page-header ele-cell">
+				<div class="ele-cell header-round">
+					<div class="round-left"></div>
+					<div class="round-left round-right"></div>
+				</div>
+				<div class="ele-page-title">本月班组物料投入占比</div>
+          </div>
+          <div class="title-unit">单位：吨</div>
+        </div>
+        <div class="circle"> 
+			<div class="circle-item">
+				<div class="item-progress">
+					<el-progress
+					  type="circle"
+					  :percentage="80"
+					  :show-text="false"
+					  :width="140"
+					  :stroke-width="10"
+					  :color="'#0099ff'"
+					/>
+					<div class="progress-num" style="color: #0099ff;">80%</div>
+				</div>
+				<div class="circle-word">4,034.5</div>
+				<div class="circle-word">挤压</div>
+			</div>
+			<div class="circle-item">
+				<div class="item-progress">
+					<el-progress
+					  type="circle"
+					  :percentage="70"
+					  :show-text="false"
+					  :width="140"
+					  :stroke-width="10"
+					  :color="'#8167f5'"
+					/>
+					<div class="progress-num" style="color: #8167f5;">70%</div>
+				</div>
+				<div class="circle-word">4,034.5</div>
+				<div class="circle-word">模压</div>
+			</div>
+			<div class="circle-item">
+				<div class="item-progress">
+					<el-progress
+					  type="circle"
+					  :percentage="60"
+					  :show-text="false"
+					  :width="140"
+					  :stroke-width="10"
+					  :color="'#70b603'"
+					/>
+					<div class="progress-num" style="color: #70b603;">60%</div>
+				</div>
+				<div class="circle-word">4,034.5</div>
+				<div class="circle-word">等静压</div>
+			</div>
+		</div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+		tableData:[],
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {
+		
+    },
+    methods: {
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+	.ele-page-header{
+		border: none;
+		.round-left{
+			 width: 16px;
+			 height: 16px;
+			 border-radius: 50%;
+			 background: #1891FF;
+		}
+		.round-right{
+			 opacity: 0.5;
+			 margin: 0 10px 0 -5px;
+		}
+	}
+  /* 小标题 */
+  .demo-monitor-title {
+    display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.title-name{
+		font-size: 16px;
+		font-weight: bold;
+		color: #000;
+	}
+	.title-unit{
+		margin-right: 15px;
+	}
+  }
+
+  /* 排名 item */
+  .demo-monitor-rank-item {
+    padding: 0 20px;
+    line-height: 20px;
+    margin-top: 18px;
+  }
+  .table{
+	  margin-left: 20px;
+  }
+  .circle{
+	  width: 100%;
+	  display: flex;
+	  align-items: center;
+	  justify-content: space-around;
+	  margin: 20px auto 0;
+	  .item-progress{
+		  position: relative;
+		  .progress-num{
+			  position: absolute;
+			  top: 50%;
+			  left: 50%;
+			  transform: translate(-50%, -50%);
+			  font-size: 20px;
+			  font-weight: bold;
+		  }
+	  }
+	  .circle-word{
+		 text-align: center;
+		 font-size: 18px;
+		  margin-top: 15px;
+	  }
+  }
+</style>

src/views/materialStatistics/components/material-card.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-card shadow="never" body-style="padding: 0;">
+    <el-row>
+      <el-col v-bind="styleResponsive ? { lg: 16, md: 16 } : { span: 16 }">
+        <div class="demo-monitor-title">
+          <div class="title-name">年度配料/用料比</div>
+          <div class="title-unit">单位：吨</div>
+        </div>
+        <v-chart
+          ref="dosingChart"
+          style="height: 300px;margin: 10px auto;"
+          :option="dosingChartOption"
+        />
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
+        <div class="demo-monitor-title">
+          <div class="title-name">年度用料同比</div>
+          <div class="title-unit">单位：吨</div>
+        </div>
+        <v-chart
+          ref="materialChart"
+          style="height: 300px;margin: 10px auto;"
+          :option="materialOption"
+        />
+      </el-col>
+    </el-row>
+	<el-divider />
+  </el-card>
+</template>
+
+<script>
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart } from 'echarts/charts';
+  import { GridComponent, TooltipComponent , LegendComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getSaleroomList } from '@/api/dashboard/analysis';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+
+  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent,LegendComponent]);
+
+  export default {
+    components: { VChart },
+    mixins: [echartsMixin(['dosingChart','materialChart'])],
+    data() {
+      return {
+        // 销售量趋势数据
+        saleroomData1: [],
+        // 访问量趋势数据
+        saleroomData2: [],
+        // 柱状图配置
+        dosingChartOption: {},
+		materialOption:{}
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {
+      this.getSaleroomData();
+    },
+    methods: {
+      /* 获取销售量数据 */
+      getSaleroomData() {
+        getSaleroomList()
+          .then((data) => {
+            this.saleroomData1 = data.list1;
+            this.saleroomData2 = data.list2;
+            this.onSaleTypeChange();
+          })
+          .catch((e) => {
+            // this.$message.error(e.message);
+          });
+      },
+
+      /* 销售量tab选择改变事件 */
+      onSaleTypeChange() {
+        const data = this.saleroomData1
+        this.dosingChartOption = {
+          tooltip: {
+            trigger: 'axis'
+          },
+		  legend: {
+		    data: ['配料', '用料'],
+		    right: 20
+		  },
+          xAxis: [
+            {
+              type: 'category',
+              data: data.map((d) => d.month)
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            { 
+			  name: '配料',
+              type: 'bar',
+              data: data.map((d) => d.value)
+            },
+			{
+			  name: '用料',
+			  type: 'bar',
+			  data: data.map((d) => d.value+100)
+			}
+          ]
+        };
+		this.materialOption= {
+		  color: ['#015478', '#8080FF'],
+          tooltip: {
+            trigger: 'axis'
+          },
+		  legend: {
+		    data: ['本年用料', '上年用料'],
+		    right: 20
+		  },
+          xAxis: [
+            {
+              type: 'category',
+              data: data.map((d) => d.month)
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            { 
+			  name: '本年用料',
+              type: 'bar',
+              data: data.map((d) => d.value)
+            },
+			{
+			  name: '上年用料',
+			  type: 'bar',
+			  data: data.map((d) => d.value+100)
+			}
+          ]
+        };
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+	.ele-page-header{
+		border: none;
+	}
+  /* 小标题 */
+  .demo-monitor-title {
+    padding: 0 20px;
+    margin: 15px 0 5px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.title-name{
+		font-size: 16px;
+		font-weight: bold;
+		color: #000;
+	}
+  }
+
+  /* 排名 item */
+  .demo-monitor-rank-item {
+    padding: 0 20px;
+    line-height: 20px;
+    margin-top: 18px;
+  }
+</style>

src/views/materialStatistics/components/order-card.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="order-body">
+    <el-row>
+      <el-col v-bind="styleResponsive ? { lg: 16, md: 16 } : { span: 16 }">
+         <el-form class="search-form">
+			 <el-row :gutter="24">
+				 <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+				   <el-form-item label="生产工单号:" label-width="110px">
+				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
+				   </el-form-item>
+				 </el-col>
+				 <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+				   <el-form-item label="物料编码:"  label-width="75px">
+				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
+				   </el-form-item>
+				 </el-col>
+				 <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
+				   <el-form-item label="牌号:"  label-width="45px">
+				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
+				   </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
+				         style="width: 100%;"
+				     	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: 12, md: 12 } : { span: 12 }">
+				   <el-form-item label="" label-width="25px">
+				      <div class="ele-form-actions">
+						  <el-link @click="goOrder" type="success">已排产工单</el-link>
+						  <el-button type="success" @click="createPlan">创建计划</el-button>
+					  </div>
+				   </el-form-item>
+				 </el-col>
+			 </el-row>
+		 </el-form>
+		 <el-table
+		   :data="tableData"
+		   class="table"
+		   border
+		 >    
+		      <el-table-column align="center" type="selection" width="55">
+		      </el-table-column>
+		 	  <el-table-column label="序号" align="center" type="index"  width="55">
+		 	  </el-table-column>
+		 	  <el-table-column label="生产工单号" align="center" width="100" show-overflow-tooltip>
+				  <template slot-scope="scope">
+				    <el-link @click="openDetail(scope.row)">{{ scope.row.code }}</el-link>
+				  </template>
+		 	  </el-table-column>
+		 	  <el-table-column label="工单开始时间" align="center"  width="120">
+		 	  </el-table-column>
+		 	  <el-table-column label="产品编码" align="center">
+		 	  </el-table-column>
+		 	  <el-table-column label="牌号" align="center">
+		 	  </el-table-column>
+		 	  <el-table-column label="物料编码" align="center">
+		 	  </el-table-column>
+		 	  <el-table-column label="物料名称" align="center" width="120">
+		 	  </el-table-column>
+		 	  <el-table-column label="欠交数量(KG)" align="center" width="120">
+		 	  </el-table-column>
+		 	  <el-table-column label="物料要求完成时间" align="center" width="180">
+		 	  </el-table-column>
+		 	  <el-table-column label="生产班组" align="center" width="120">
+		 	  </el-table-column>
+		 </el-table>
+		 <div class="pagination_wrapper">
+		   <el-pagination
+		     background
+		     layout="total, sizes, prev, pager, next, jumper"
+		     :total="total"
+		     :page-sizes="[10, 15, 20, 30, 50, 100]"
+		     :page-size.sync="pagination.size"
+		     :current-page.sync="pagination.page"
+		     @current-change="handleCurrentChange"
+		     @size-change="handleSizeChange"
+		   >
+		   </el-pagination>
+		 </div>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
+           <div class="top-title">
+			   <div class="ele-page-header ele-cell">
+					<div class="ele-cell header-round">
+						<div class="round-left"></div>
+						<div class="round-left round-right"></div>
+					</div>
+					<div class="ele-page-title">本年度用料TOP10</div>
+			   </div>
+			   <div class="top-unit">单位：吨</div>
+		   </div>
+		   <div class="top-list">
+			   <div class="list-item" v-for="(item,index) in 10" :key="index">
+				   <div class="item-index" :style="index<3?'background: #eda54e;':''">
+					   <span>NO.{{index+1}}</span>
+					   <div class="index-arrow" :style="index<3?'border-top: 15px solid #eda54e;':''"></div>
+				   </div>
+				   <div class="item-name">AR31</div>
+				   <div class="item-number">268.25</div>
+				   <div class="item-progress">
+					   <el-progress
+					     :percentage="78"
+					     :show-text="false"
+					     :stroke-width="10"
+					     color="#13c2c2"
+					   />
+				   </div>
+			   </div>
+		   </div>
+      </el-col>
+    </el-row>
+	<el-divider />
+	
+	<!-- 创建计划弹窗 -->
+	<CreateBatch ref="createRef"></CreateBatch>
+	<!-- 工单详情 -->
+	<DetailDialog ref="orderDetail"></DetailDialog>
+  </div>
+</template>
+
+<script>
+  import CreateBatch from '@/components/CreatePlan/CreateBatch.vue'
+  import DetailDialog from './DetailDialog.vue'
+  export default {
+	  components:{
+		  CreateBatch,
+		  DetailDialog
+	  },
+    data() {
+      return {
+         where:{},
+		 tableData:[
+			 {code:'123445555',name:'测试数据',id:1}
+		 ],
+		 pagination:{
+			 page:1,
+			 size:10
+		 },
+		 total:0
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {
+      
+    },
+    methods: {
+	  createPlan(){
+		  this.$refs.createRef.open()
+	  },
+      goOrder(){
+		 this.$router.push({
+			 path:'/materialStatistics/outputOrder'
+		 }) 
+	  },
+	  openDetail(row){
+		  this.$refs.orderDetail.open(row)
+	  },
+      // 分页器方法
+      handleCurrentChange (page) {
+        this.pagination.page = page
+        // this.getList()
+      },
+      handleSizeChange (size) {
+        this.pagination.size = size
+        this.pagination.page = 1
+        // this.getList()
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+	.ele-page-header{
+		border: none;
+	}
+	.order-body{
+		background: #fff;
+		padding: 20px 0;
+	}
+    .ele-form-actions{
+		display:flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+	.search-form .el-row .el-col{
+		padding-left: 8px!important;
+		padding-right: 8px!important;
+	}
+	.table{
+		margin: 0 0 0 10px;
+		width: 100%;
+		// height: 300px;
+	}
+	.pagination_wrapper{
+		margin:10px auto
+	}
+	.top-title{
+		display:flex;
+		align-items:center;
+		justify-content:space-between;
+		.round-left{
+			 width: 16px;
+			 height: 16px;
+			 border-radius: 50%;
+			 background: #1891FF;
+		}
+		.round-right{
+			 opacity: 0.5;
+			 margin: 0 10px 0 -5px;
+		}
+		.top-unit{
+			margin-right: 15px;
+		}
+	}
+	.top-list{
+		width: 100%;
+		margin:10px 0 0 30px;
+		.list-item{
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-bottom: 20px;
+		}
+		.item-index{
+			width: 50px;
+			height: 22px;
+			border-radius: 4px;
+			background: #66bafa;
+			color: #fff;
+			line-height: 22px;
+			text-indent: 6px;
+			display: flex;
+			align-items: center;
+			position: relative;
+			.index-arrow{
+				width: 0;
+				height: 0;
+				border-top: 15px solid #66bafa; 
+				border-left: 15px solid transparent; 
+				transform: rotate(45deg);
+				position: absolute;
+				right: -7px;
+				top: 4px;
+			}
+		}
+
+		.item-name{
+			width: 60px;
+			margin: 0 10px 0 20px;
+		}
+		.item-number{
+			width: 60px;
+		}
+		.item-progress{
+			width: 160px;
+			box-sizing: border-box;
+			margin-left: 15px;
+		}
+	}
+</style>

src/views/materialStatistics/index.vue

@@ -1 +1,137 @@
-<template></template>
+<template>
+  <div class="ele-body">
+	<div class="body-top">
+		<div class="ele-page-header ele-cell">
+			<div class="ele-cell header-round">
+				<div class="round-left"></div>
+				<div class="round-left round-right"></div>
+			</div>
+			<div class="ele-page-title">物料统计</div>
+		</div>
+		<el-form label-width="90px">
+			<el-row :gutter="15">
+				<el-col :span="6">
+				  <el-form-item label-width="0px">
+				     <el-input @click.native="chooseMateriel" v-model="form.ddh"/>
+				  </el-form-item>
+				</el-col>
+				<el-col :span="8">
+				  <el-form-item label="生产版本:">
+				       <el-select v-model="form.version" placeholder="请选择">
+				         <el-option
+				           v-for="item in options"
+				           :key="item.value"
+				           :label="item.label"
+				           :value="item.value">
+				         </el-option>
+				       </el-select>
+				  </el-form-item>
+				</el-col>
+				<el-col :span="8">
+				  <el-form-item label="年份:">
+				     <el-select v-model="form.year" placeholder="请选择">
+				       <el-option
+				         v-for="item in yearsList"
+				         :key="item.value"
+				         :label="item.label"
+				         :value="item.value">
+				       </el-option>
+				     </el-select>
+				  </el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+    <!-- 物料统计 -->
+	<material-card />
+	<!-- 待配料生产工单 -->
+	<div class="ele-page-header ele-cell">
+		<div class="ele-cell header-round">
+			<div class="round-left"></div>
+			<div class="round-left round-right"></div>
+		</div>
+		<div class="ele-page-title">待配料生产工单</div>
+	</div>
+	<order-card />
+	<!-- 欠交配料汇总 -->
+	<collect-card />
+	<!-- 选择物料弹窗 -->
+	<MaterialDialog ref="equipmentRefs"></MaterialDialog>
+  </div>
+</template>
+
+<script>
+  import MaterialDialog from './components/MaterialDialog.vue'
+  import MaterialCard from './components/material-card.vue';
+  import OrderCard from './components/order-card.vue';
+  import CollectCard from './components/collect-card.vue';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    mixins: [dictMixins],
+    components: {
+		MaterialDialog,
+		MaterialCard,
+		OrderCard,
+		CollectCard
+    },
+    data () {
+      return {
+         loading:false,
+		 form:{},
+		 options:[],
+		 yearsList:[],
+		 saleChartOption: {}
+      };
+    },
+    computed: {
+    },
+    created () {
+      this.initYears()
+    },
+    methods: {
+		chooseMateriel(){
+			this.$refs.equipmentRefs.open()
+		},
+		
+		//设置日期列表
+		initYears(){
+			var myDate = new Date;
+			var year = myDate.getFullYear();//获取当前年
+			this.initSelectYear(year)
+		},
+		initSelectYear(year){
+			this.yearsList = [];
+			for(let i=0;i<10;i++){
+			   this.yearsList.push({value:(year - i),label:(year - i)+ "年"});
+			}
+		}
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+	.body-top{
+		display: flex;
+		align-items:center; 
+		justify-content:flex-start;
+		background: #fff;
+	}
+	.body-top .el-form{
+		margin-left: -15px;
+	}
+	.body-top .el-form .el-form-item{
+		margin-bottom: 0;
+	}
+     .round-left{
+		 width: 16px;
+		 height: 16px;
+		 border-radius: 50%;
+		 background: #1891FF;
+	 }
+	 .round-right{
+		 opacity: 0.5;
+		 margin: 0 10px 0 -5px;
+	 }
+</style>
+
+

src/views/materialStatistics/outputOrder.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+		<div class="body-title">
+			<div class="title-left">配料用料统计/ 已排产工单</div>
+			<div class="title-right">
+				<el-button @click="cancel">返回</el-button>
+			</div>
+		</div>
+		<el-form ref="form" :model="form" label-width="90px" class="formbox">
+			<el-row :gutter="24">
+				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
+				  <el-form-item label="计划编号:" label-width="75px">
+				    <el-input v-model="form.edition"></el-input>
+				  </el-form-item>
+				</el-col>
+				<el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
+				  <el-form-item label="生产工单号:">
+				     <el-input v-model="form.edition"></el-input>
+				  </el-form-item>
+				</el-col>
+				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
+				  <el-form-item label="物料编码:">
+				     <el-input v-model="form.productline"></el-input>
+				  </el-form-item>
+				</el-col>
+				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
+				  <el-form-item label="牌号:" label-width="50px">
+				     <el-input v-model="form.brand"></el-input>
+				  </el-form-item>
+				</el-col>
+				<el-col v-bind="styleResponsive ? { lg: 7, md: 12 } : { span: 7 }">
+				  <el-form-item label="要求完成时间:" label-width="100px">
+				    <el-date-picker
+				        style="width: 100%;"
+				    	v-model="form.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-row>
+		</el-form>
+		<el-table
+		  :data="tableData"
+		  border
+		>
+		  <el-table-column label="序号" align="center" width="60">
+				<template slot-scope="scope">
+					<span>{{ scope.$index + 1 }}</span>
+				</template>
+		  </el-table-column>
+		  <el-table-column label="生产工单号" align="center" prop="name" width="120">
+		  </el-table-column>
+		  <el-table-column label="工单开始时间" align="center" prop="name"  width="150">
+		  </el-table-column>
+		  <el-table-column label="产品编码" align="center" prop="model">
+		  </el-table-column>
+		  <el-table-column label="牌号" align="center" prop="model">
+		  </el-table-column>
+		  <el-table-column label="物料编码" align="center" prop="model">
+		  </el-table-column>
+		  <el-table-column label="物料名称" align="center" prop="model">
+		  </el-table-column>
+		  <el-table-column label="欠交数量(KG)" align="center" prop="model" width="150">
+		  </el-table-column>
+		  <el-table-column label="生产班组" align="center" prop="measuringUnit">
+		  </el-table-column>
+		  <el-table-column label="配料计划编号" align="center" prop="measuringUnit" width="150">
+		  </el-table-column>
+		  <el-table-column label="排产时间" align="center" prop="measuringUnit">
+		  </el-table-column>
+		  <el-table-column label="计划生产数量KG)" align="center" prop="measuringUnit"  width="170">
+		  </el-table-column>
+		  <el-table-column label="已生产数量(KG)" align="center" prop="measuringUnit" width="150">
+		  </el-table-column>
+		  <el-table-column label="计划交付时间" align="center" prop="measuringUnit" width="150">
+		  </el-table-column>
+		  <el-table-column label="计划状态" align="center" prop="measuringUnit">
+		  </el-table-column>
+		</el-table>
+		<div class="pagination_wrapper">
+		  <el-pagination
+		    background
+		    layout="total, sizes, prev, pager, next, jumper"
+		    :total="total"
+		    :page-sizes="[10, 15, 20, 30, 50, 100]"
+		    :page-size.sync="pagination.size"
+		    :current-page.sync="pagination.page"
+		    @current-change="handleCurrentChange"
+		    @size-change="handleSizeChange"
+		  >
+		  </el-pagination>
+		</div>
+    </el-card>
+  </div>
+</template>
+<script>
+  export default {
+    components: {
+    },
+    data () {
+      return {
+         form:{},
+		 tableData:[],
+		 pagination:{
+			 page:1,
+			 size:10
+		 },
+		 total:0
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+	methods: {
+       cancel(){
+		   this.$router.go(-1)
+	   },
+	   // 分页器方法
+	   handleCurrentChange (page) {
+	     this.pagination.page = page
+	     // this.getList()
+	   },
+	   handleSizeChange (size) {
+	     this.pagination.size = size
+	     this.pagination.page = 1
+	     // this.getList()
+	   },
+    }
+  };
+</script>
+<style lang="scss" scoped>
+	.ele-body{
+		background: #fff;
+	}
+	.body-title{
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.title-left{
+		font-size: 20px;
+		color: #333;
+	}
+	.formbox{
+		margin: 20px auto;
+	}
+	.row-intro{
+		border-bottom: 1px dashed #ccc;
+	}
+	.sort-wrap {
+	  i {
+	    font-size: 30px;
+	    cursor: pointer;
+	  }
+	  .el-icon-caret-top {
+	    color: red;
+	  }
+	  .el-icon-caret-bottom {
+	    color: #157a2c;
+	  }
+	}
+	.add-product{
+		  width:100%;
+		  display:flex;
+		  align-items:center;
+		  justify-content:flex-end;
+		  font-size:30px;
+		  color:#1890ff;
+		  margin:10px 0;
+		  cursor: pointer;
+	}
+	.pagination_wrapper{
+		margin: 15px auto;
+	}
+</style>

src/views/saleOrder/components/order-search.vue

@@ -194,8 +194,8 @@
 </script>
 <style lang="scss" scoped>
     .ele-form-actions{
-		display:flex;
-		align-items: center;
-		justify-content: flex-end;
+			display:flex;
+			align-items: center;
+			justify-content: flex-end;
 	}
 </style>

src/views/saleOrder/salesToProduction.vue

@@ -184,7 +184,7 @@
 </template>
 <script>
   import AdditionalOrder from './components/AdditionalOrder.vue';
-  import ProductionVersion from './components/ProductionVersion.vue'
+  import ProductionVersion from '@/components/CreatePlan/ProductionVersion.vue'
   export default {
     components: {
 		AdditionalOrder,