增加桌面自定义快捷菜单
This commit is contained in:
zmrid
parent
f63cdbd7df
commit
1957c4ca66
|
|
@ -0,0 +1,112 @@
|
|||
/*****************************************************************************************
|
||||
** Author:COCO 2022
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
|
||||
import Base_DesktopMenuModelBody from './custom_extend/Base_DesktopMenuModelBody'
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: Base_DesktopMenuModelBody,
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
getFormOption(field) {
|
||||
let option;
|
||||
this.editFormOptions.forEach(x => {
|
||||
x.forEach(item => {
|
||||
if (item.field == field) {
|
||||
option = item;
|
||||
}
|
||||
})
|
||||
})
|
||||
return option;
|
||||
},
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前，
|
||||
//示例：在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon，vue3版本见element ui文档icon(注意不是element puls文档)
|
||||
// type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例：设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
//显示序号(默认隐藏)
|
||||
this.columnIndex = true;
|
||||
this.boxOptions.height = 450;
|
||||
var menuId = this.getFormOption('MenuId');
|
||||
menuId.onChange = (val, item) => {
|
||||
this.http.get('api/menu/getTreeItemById?menuId=' + val, {}, true).then((result) => {
|
||||
console.log("8888", result);
|
||||
this.editFormFields["MenuName"] = result.MenuName;
|
||||
this.editFormFields["MenuUrl"] = result.Url;
|
||||
});
|
||||
};
|
||||
//选择背景颜色
|
||||
this.editFormOptions.forEach(x => {
|
||||
x.forEach(item => {
|
||||
if (item.field == 'Color') {
|
||||
//给编辑表单设置[选择数据]操作,extra具体配置见mesform组件api
|
||||
item.extra = {
|
||||
icon: "el-icon-zoom-out",
|
||||
text: "选择",
|
||||
style: "color:blue;font-size: 14px;cursor: pointer;",
|
||||
click: item => {
|
||||
this.$refs.modelBody.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getRow(color) {
|
||||
this.editFormFields["Color"] = color;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false，则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后，result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象，包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
|
||||
//(1)判断是编辑还是新建操作： this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看：console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<MesBox v-model="model" :lazy="true" title="选择颜色" :height="250" :width="250" :padding="15">
|
||||
<div class="block">
|
||||
<span class="demonstration">有默认值</span>
|
||||
<el-color-picker v-model="color"></el-color-picker>
|
||||
</div>
|
||||
<!-- 设置弹出框的操作按钮 -->
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="addRow()"><i class="el-icon-plus" />添加选择的数据</el-button>
|
||||
<el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</MesBox>
|
||||
</template>
|
||||
<script>
|
||||
import MesBox from "@/components/basic/MesBox.vue";
|
||||
import { thisTypeAnnotation } from "@babel/types";
|
||||
export default {
|
||||
components: {
|
||||
MesBox: MesBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: '#409EFF',
|
||||
model: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.model = true;
|
||||
},
|
||||
addRow() {
|
||||
//回写数据到表单
|
||||
this.$emit("parentCall", ($parent) => {
|
||||
$parent.getRow(this.color);
|
||||
});
|
||||
//关闭当前窗口
|
||||
this.model = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,67 +1,30 @@
|
|||
<template>
|
||||
<MesBox
|
||||
v-model="model"
|
||||
:lazy="true"
|
||||
title="选择数据"
|
||||
:height="700"
|
||||
:width="1500"
|
||||
:padding="15"
|
||||
>
|
||||
<MesBox v-model="model" :lazy="true" title="选择数据" :height="700" :width="1500" :padding="15">
|
||||
<!-- 设置查询条件 -->
|
||||
<div style="padding-bottom: 10px">
|
||||
<span style="margin-right: 20px">产品编码</span>
|
||||
<el-input
|
||||
|
||||
placeholder="请输入产品编码"
|
||||
style="width: 200px"
|
||||
v-model="productCode"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-left:10px"
|
||||
size="medium"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input placeholder="请输入产品编码" style="width: 200px" v-model="productCode" />
|
||||
<el-button type="primary" style="margin-left:10px" size="medium" icon="el-icon-zoom-out" @click="search">搜索
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- mes-table配置的这些属性见MesTable组件api文件 -->
|
||||
<mes-table
|
||||
ref="mytable"
|
||||
:loadKey="true"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:pagination-hide="false"
|
||||
:max-height="700"
|
||||
:url="url"
|
||||
:index="true"
|
||||
:single="true"
|
||||
:defaultLoadPage="defaultLoadPage"
|
||||
@loadBefore="loadTableBefore"
|
||||
@loadAfter="loadTableAfter"
|
||||
></mes-table>
|
||||
<mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
|
||||
:max-height="700" :url="url" :index="true" :single="true" :defaultLoadPage="defaultLoadPage"
|
||||
@loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
|
||||
<!-- 设置弹出框的操作按钮 -->
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="addRow()"
|
||||
>添加选择的数据</el-button
|
||||
>
|
||||
<el-button size="mini" icon="el-icon-close" @click="model = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
<el-button size="mini" type="primary" @click="addRow()"> <i class="el-icon-plus" />添加选择的数据</el-button>
|
||||
<el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</MesBox>
|
||||
</template>
|
||||
<script>
|
||||
</template>
|
||||
<script>
|
||||
import MesBox from "@/components/basic/MesBox.vue";
|
||||
import MesTable from "@/components/basic/MesTable.vue";
|
||||
import { thisTypeAnnotation } from "@babel/types";
|
||||
import { thisTypeAnnotation } from "@babel/types";
|
||||
export default {
|
||||
components: {
|
||||
MesBox: MesBox,
|
||||
|
|
@ -72,21 +35,21 @@ import { thisTypeAnnotation } from "@babel/types";
|
|||
model: false,
|
||||
defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
|
||||
productCode: "", //查询条件字段
|
||||
modelType:"",
|
||||
modelType: "",
|
||||
url: "api/Base_Product/getSelectorDemo",//加载数据的接口
|
||||
columns: [
|
||||
{field:'Product_Id',title:'产品定义主键ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'ProductCode',title:'产品编号',type:'string',sort:true,width:250,align:'left',sort:true},
|
||||
{field:'ProductName',title:'产品名称',type:'string',link:true,sort:true,width:180,require:true,align:'left'},
|
||||
{field:'Unit_Id',title:'库存单位',type:'int',bind:{ key:'unitList',data:[]},width:110,require:true,align:'left'},
|
||||
{field:'ProductStandard',title:'产品规格',type:'string',width:180,align:'left'},
|
||||
{field:'ProductAttribute',title:'产品属性',type:'string',bind:{ key:'productAttr',data:[]},width:180,require:true,align:'left'},
|
||||
{field:'Process_Id',title:'工艺路线',type:'int',bind:{ key:'processLineList',data:[]},width:110,align:'left'},
|
||||
{field:'MaxInventory',title:'最大库存',type:'int',sort:true,width:110,align:'left'},
|
||||
{field:'MinInventory',title:'最小库存',type:'int',sort:true,width:110,align:'left'},
|
||||
{field:'SafeInventory',title:'安全库存',type:'int',sort:true,width:110,align:'left'},
|
||||
{field:'InventoryQty',title:'库存数量',type:'int',sort:true,width:110,align:'left'},
|
||||
{field:'FinishedProduct',title:'成品图',type:'img',width:180,align:'left'}
|
||||
{ field: 'Product_Id', title: '产品定义主键ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
|
||||
{ field: 'ProductCode', title: '产品编号', type: 'string', sort: true, width: 250, align: 'left', sort: true },
|
||||
{ field: 'ProductName', title: '产品名称', type: 'string', link: true, sort: true, width: 180, require: true, align: 'left' },
|
||||
{ field: 'Unit_Id', title: '库存单位', type: 'int', bind: { key: 'unitList', data: [] }, width: 110, require: true, align: 'left' },
|
||||
{ field: 'ProductStandard', title: '产品规格', type: 'string', width: 180, align: 'left' },
|
||||
{ field: 'ProductAttribute', title: '产品属性', type: 'string', bind: { key: 'productAttr', data: [] }, width: 180, require: true, align: 'left' },
|
||||
{ field: 'Process_Id', title: '工艺路线', type: 'int', bind: { key: 'processLineList', data: [] }, width: 110, align: 'left' },
|
||||
{ field: 'MaxInventory', title: '最大库存', type: 'int', sort: true, width: 110, align: 'left' },
|
||||
{ field: 'MinInventory', title: '最小库存', type: 'int', sort: true, width: 110, align: 'left' },
|
||||
{ field: 'SafeInventory', title: '安全库存', type: 'int', sort: true, width: 110, align: 'left' },
|
||||
{ field: 'InventoryQty', title: '库存数量', type: 'int', sort: true, width: 110, align: 'left' },
|
||||
{ field: 'FinishedProduct', title: '成品图', type: 'img', width: 180, align: 'left' }
|
||||
],
|
||||
pagination: {}, //分页配置，见mestable组件api
|
||||
};
|
||||
|
|
@ -104,7 +67,7 @@ import { thisTypeAnnotation } from "@babel/types";
|
|||
//点击搜索
|
||||
this.$refs.mytable.load();
|
||||
},
|
||||
getFieldDicValue(fieldName,fieldValue){
|
||||
getFieldDicValue(fieldName, fieldValue) {
|
||||
this.columns.forEach(item => {
|
||||
if (item.field == fieldName) {
|
||||
var result = item.bind.data.find(val => val.key == fieldValue)
|
||||
|
|
@ -119,13 +82,13 @@ import { thisTypeAnnotation } from "@babel/types";
|
|||
}
|
||||
//回写数据到表单
|
||||
this.$emit("parentCall", ($parent) => {
|
||||
$parent.getRow(rows,this.modelType);
|
||||
$parent.getRow(rows, this.modelType);
|
||||
});
|
||||
//关闭当前窗口
|
||||
this.model = false;
|
||||
},
|
||||
//这里是从api查询后返回数据的方法
|
||||
loadTableAfter(row) {},
|
||||
loadTableAfter(row) { },
|
||||
loadTableBefore(params) {
|
||||
//查询前，设置查询条件
|
||||
if (this.productCode) {
|
||||
|
|
@ -135,5 +98,4 @@ import { thisTypeAnnotation } from "@babel/types";
|
|||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
</script>
|
||||
|
|
@ -314,6 +314,10 @@ let viewgird = [
|
|||
path: '/Quality_OutCheck',
|
||||
name: 'Quality_OutCheck',
|
||||
component: () => import('@/views/quality/quality/Quality_OutCheck.vue')
|
||||
} ,{
|
||||
path: '/Base_DesktopMenu',
|
||||
name: 'Base_DesktopMenu',
|
||||
component: () => import('@/views/custom/custom/Base_DesktopMenu.vue')
|
||||
}]
|
||||
|
||||
export default viewgird
|
||||
|
|
|
|||
|
|
@ -1,25 +1,29 @@
|
|||
<template>
|
||||
<div class="home-contianer">
|
||||
<div>
|
||||
<div class="order-title">
|
||||
<h2>快捷菜单</h2>
|
||||
</div>
|
||||
<div data-v-542f4644 class="ivu-row" style="padding: 15px; background: white">
|
||||
<div v-for="item in topMenu" :key="item.MenuName" class="ivu-col ivu-col-span-6"
|
||||
style="padding-left: 8px; padding-right: 8px" @click="openUrl(item)">
|
||||
<div data-v-542f4644 class="ivu-card" :style="{ background: item.Color }">
|
||||
<div class="icon-left">
|
||||
<i class="el-icon-wallet" />
|
||||
</div>
|
||||
<div class="ivu-card-body">
|
||||
<div class="demo-color-desc">{{ item.MenuName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-title">
|
||||
<h2>数量统计</h2>
|
||||
</div>
|
||||
<div
|
||||
data-v-542f4644
|
||||
class="ivu-row"
|
||||
style="padding: 15px; background: white"
|
||||
>
|
||||
<div
|
||||
v-for="item in topColor"
|
||||
:key="item.ItemName"
|
||||
class="ivu-col ivu-col-span-6"
|
||||
style="padding-left: 8px; padding-right: 8px"
|
||||
>
|
||||
<div
|
||||
data-v-542f4644
|
||||
class="ivu-card"
|
||||
:style="{ background: item.Background }"
|
||||
>
|
||||
<div data-v-542f4644 class="ivu-row" style="padding: 15px; background: white">
|
||||
<div v-for="item in topNumber" :key="item.ItemName" class="ivu-col ivu-col-span-6"
|
||||
style="padding-left: 8px; padding-right: 8px">
|
||||
<div data-v-542f4644 class="ivu-card" :style="{ background: item.Background }">
|
||||
<div class="icon-left">
|
||||
<i class="el-icon-wallet" />
|
||||
</div>
|
||||
|
|
@ -34,11 +38,7 @@
|
|||
<h2>工序信息</h2>
|
||||
</div>
|
||||
<div class="order-range">
|
||||
<div
|
||||
class="order-item"
|
||||
v-for="(item, index) in totalRange"
|
||||
:key="index"
|
||||
>
|
||||
<div class="order-item" v-for="(item, index) in totalRange" :key="index">
|
||||
<div class="total">
|
||||
<div class="number">
|
||||
{{item.ProcessName}}
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<div id="h-chart2"></div>
|
||||
<div id="h-chart3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-contianer">
|
||||
<div class="h-chart">
|
||||
<!-- <div class="h-left-grid">
|
||||
|
|
@ -76,20 +76,11 @@
|
|||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="h-top-center" style="width: 23%" >
|
||||
<div class="n-item" >
|
||||
<div
|
||||
@click="openRouterUrl(item)"
|
||||
class="item"
|
||||
:class="'item' + (index + 1)"
|
||||
v-for="(item, index) in center"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
style="font-size: 30px; padding-bottom: 10px"
|
||||
:class="item.icon"
|
||||
:size="20"
|
||||
></i>
|
||||
<div class="h-top-center" style="width: 23%">
|
||||
<div class="n-item">
|
||||
<div @click="openRouterUrl(item)" class="item" :class="'item' + (index + 1)" v-for="(item, index) in center"
|
||||
:key="index">
|
||||
<i style="font-size: 30px; padding-bottom: 10px" :class="item.icon" :size="20"></i>
|
||||
<br />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
|
@ -98,29 +89,17 @@
|
|||
<!--联系信息-->
|
||||
<div class="h-top-center" style="width: 55%;">
|
||||
<div class="n-item">
|
||||
<div
|
||||
class="item"
|
||||
:class="'item1'"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div class="item" :class="'item1'" style="height: 100%;">
|
||||
联系作者
|
||||
<br />
|
||||
<img style="width: 200px; height: 199px;margin-top: 20px;" src="@/assets/imgs/wechat.jpg">
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="'item2'"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div class="item" :class="'item2'" style="height: 100%;">
|
||||
交流讨论群
|
||||
<br />
|
||||
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/qq.png">
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="'item3'"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div class="item" :class="'item3'" style="height: 100%;">
|
||||
微信小程序
|
||||
<br />
|
||||
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/miniapp.png">
|
||||
|
|
@ -140,26 +119,27 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import * as echarts from "echarts";
|
||||
import "echarts/lib/chart/bar";
|
||||
import "echarts/lib/chart/line";
|
||||
// import * as echarts from "echarts";
|
||||
import "echarts/lib/chart/bar";
|
||||
import "echarts/lib/chart/line";
|
||||
|
||||
import "echarts/lib/chart/pie";
|
||||
import "echarts/lib/component/legend";
|
||||
import "echarts/lib/component/tooltip";
|
||||
import "echarts/lib/component/title";
|
||||
import "echarts/lib/component/grid";
|
||||
let echarts = require("echarts/lib/echarts");
|
||||
import { chart2, chart3 } from "./home/home-chart-options";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
var $chart2;
|
||||
export default {
|
||||
import "echarts/lib/chart/pie";
|
||||
import "echarts/lib/component/legend";
|
||||
import "echarts/lib/component/tooltip";
|
||||
import "echarts/lib/component/title";
|
||||
import "echarts/lib/component/grid";
|
||||
let echarts = require("echarts/lib/echarts");
|
||||
import { chart2, chart3 } from "./home/home-chart-options";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
var $chart2;
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
beginDate: "",
|
||||
endDate: "",
|
||||
topColor: [],
|
||||
topMenu: [], //快捷菜单
|
||||
topNumber: [], //数量统计
|
||||
totalRange: [],
|
||||
titleLeft: "",
|
||||
dateNow: "",
|
||||
|
|
@ -233,13 +213,20 @@ export default {
|
|||
{
|
||||
name: "紧锣密鼓的开发中",
|
||||
desc: "待添加",
|
||||
url:"#",
|
||||
url: "#",
|
||||
icon: "el-icon-s-marketing",
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openUrl(item) {
|
||||
this.$tabs.open({
|
||||
text: item.MenuName,
|
||||
path: item.MenuUrl,
|
||||
query: {}
|
||||
});
|
||||
},
|
||||
getDate() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
|
|
@ -257,21 +244,29 @@ export default {
|
|||
this.endDate = this.beginDate;
|
||||
this.dateNow = this.beginDate;
|
||||
},
|
||||
getTopNumber(){
|
||||
this.topColor = [{"ItemName":"装配工单","Background":"#f2b458","ItemCode":"AssembleWorkOrder","Qty":"2856"},{"ItemName":"生产计划","Background":"rgb(45, 183, 245)","ItemCode":"ProductPlan","Qty":"108223"},{"ItemName":"销售订单","Background":"rgb(25, 190, 107)","ItemCode":"SalesOrder","Qty":"1239203"},{"ItemName":"不良品总数","Background":"rgb(237, 64, 20)","ItemCode":"DefectItem","Qty":"181"},{"ItemName":"良品率","Background":"rgb(84, 110, 122)","ItemCode":"YieldRate","Qty":"100%"},{"ItemName":"销售订单占比","Background":"rgb(45, 183, 245)","ItemCode":"SalesRate","Qty":"40%"}];
|
||||
getTopNumber() {
|
||||
this.topNumber = [{ "ItemName": "装配工单", "Background": "#f2b458", "ItemCode": "AssembleWorkOrder", "Qty": "2856" }, { "ItemName": "生产计划", "Background": "rgb(45, 183, 245)", "ItemCode": "ProductPlan", "Qty": "108223" }, { "ItemName": "销售订单", "Background": "rgb(25, 190, 107)", "ItemCode": "SalesOrder", "Qty": "1239203" }, { "ItemName": "不良品总数", "Background": "rgb(237, 64, 20)", "ItemCode": "DefectItem", "Qty": "181" }, { "ItemName": "良品率", "Background": "rgb(84, 110, 122)", "ItemCode": "YieldRate", "Qty": "100%" }, { "ItemName": "销售订单占比", "Background": "rgb(45, 183, 245)", "ItemCode": "SalesRate", "Qty": "40%" }];
|
||||
},
|
||||
getVersionInfo(){
|
||||
getVersionInfo() {
|
||||
let urlWo = 'api/Sys_VersionInfo/getVersionInfo';
|
||||
//给工序名称重新绑定数据源
|
||||
this.http.get(urlWo, {}, true).then((result) => {
|
||||
this.list = result;
|
||||
});
|
||||
},
|
||||
getTopProcessNumber(){
|
||||
this.totalRange = [{"ProcessName":"成品入库","PlanQty":"1904","GoodQty":"1190","NoGoodQty":"27"},{"ProcessName":"打磨","PlanQty":"1460","GoodQty":"233","NoGoodQty":"4"},{"ProcessName":"焊接","PlanQty":"647","GoodQty":"880","NoGoodQty":"19"},{"ProcessName":"激光切割","PlanQty":"1200","GoodQty":"1199","NoGoodQty":"1"},{"ProcessName":"破洞","PlanQty":"2225","GoodQty":"945","NoGoodQty":"15"},{"ProcessName":"清洗消毒","PlanQty":"1706","GoodQty":"1475","NoGoodQty":"0"},{"ProcessName":"涮涂料","PlanQty":"1410","GoodQty":"510","NoGoodQty":"12"}];
|
||||
getDesktopMenu() {
|
||||
let urlWo = 'api/Base_DesktopMenu/getDesktopMenu';
|
||||
//给工序名称重新绑定数据源
|
||||
this.http.get(urlWo, {}, true).then((result) => {
|
||||
this.topMenu = result;
|
||||
console.log("9999",result);
|
||||
});
|
||||
},
|
||||
getTopProcessNumber() {
|
||||
this.totalRange = [{ "ProcessName": "成品入库", "PlanQty": "1904", "GoodQty": "1190", "NoGoodQty": "27" }, { "ProcessName": "打磨", "PlanQty": "1460", "GoodQty": "233", "NoGoodQty": "4" }, { "ProcessName": "焊接", "PlanQty": "647", "GoodQty": "880", "NoGoodQty": "19" }, { "ProcessName": "激光切割", "PlanQty": "1200", "GoodQty": "1199", "NoGoodQty": "1" }, { "ProcessName": "破洞", "PlanQty": "2225", "GoodQty": "945", "NoGoodQty": "15" }, { "ProcessName": "清洗消毒", "PlanQty": "1706", "GoodQty": "1475", "NoGoodQty": "0" }, { "ProcessName": "涮涂料", "PlanQty": "1410", "GoodQty": "510", "NoGoodQty": "12" }];
|
||||
|
||||
},
|
||||
openRouterUrl(item){
|
||||
openRouterUrl(item) {
|
||||
this.$tabs.open({
|
||||
text: item.title,
|
||||
path: item.url,
|
||||
|
|
@ -281,10 +276,11 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.getDate();
|
||||
this.getDesktopMenu();
|
||||
this.getTopNumber();
|
||||
this.getTopProcessNumber();
|
||||
this.getVersionInfo();
|
||||
this.http.get('api/Base_Process/getAppHomeProcessTop5',{},true).then((result) => {
|
||||
this.http.get('api/Base_Process/getAppHomeProcessTop5', {}, true).then((result) => {
|
||||
let categories = result.map(item => (item.name));
|
||||
let data = result.map(item => (item.data));
|
||||
chart2.xAxis[0].data = categories;
|
||||
|
|
@ -293,12 +289,12 @@ export default {
|
|||
$chart2.setOption(chart2);
|
||||
});
|
||||
|
||||
this.http.get('api/Base_DefectItem/getAppHomeDefectValue',{},true).then((item) => {
|
||||
this.http.get('api/Base_DefectItem/getAppHomeDefectValue', {}, true).then((item) => {
|
||||
let dataDefect = item.map(key => ({ name: key.name, value: key.data }));
|
||||
chart3.series[0].data = dataDefect
|
||||
$chart3 = echarts.init(document.getElementById("h-chart3"));
|
||||
$chart3.setOption(chart3);
|
||||
});
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
let open = (item) => {
|
||||
|
|
@ -320,15 +316,15 @@ export default {
|
|||
destroyed() {
|
||||
$chart2 = null;
|
||||
},
|
||||
};
|
||||
var $chart, $chart2, $chart3;
|
||||
};
|
||||
var $chart, $chart2, $chart3;
|
||||
// window.addEventListener("resize", function () {
|
||||
// $chart2.setOption(chart2);
|
||||
// });
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.home-contianer {
|
||||
.home-contianer {
|
||||
padding: 6px;
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
|
|
@ -342,27 +338,33 @@ var $chart, $chart2, $chart3;
|
|||
|
||||
.h-top {
|
||||
display: flex;
|
||||
|
||||
.h-top-left {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
height: 300px;
|
||||
}
|
||||
.h-top > div {
|
||||
|
||||
.h-top>div {
|
||||
border: 1px solid #e8e7e7;
|
||||
border-radius: 5px;
|
||||
// margin: 6px;
|
||||
}
|
||||
|
||||
.h-top-center {
|
||||
height: 100%;
|
||||
background: white;
|
||||
margin: 0 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item1 .num {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.item2 .num {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
|
@ -372,6 +374,7 @@ var $chart, $chart2, $chart3;
|
|||
height: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
// display: flex;
|
||||
.item {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
|
@ -382,33 +385,40 @@ var $chart, $chart2, $chart3;
|
|||
padding: 47px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.item3,
|
||||
.item6 {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
word-break: break-all;
|
||||
color: #282727;
|
||||
font-size: 30px;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.num:hover {
|
||||
color: #55ce80;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-top-right {
|
||||
// flex: 1;
|
||||
|
||||
|
|
@ -416,48 +426,59 @@ var $chart, $chart2, $chart3;
|
|||
height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
padding: 7px 15px;
|
||||
font-weight: 500;
|
||||
background: #fff;
|
||||
border-bottom: 1px dotted #d4d4d4;
|
||||
}
|
||||
}
|
||||
.task-table {
|
||||
}
|
||||
|
||||
.task-table {
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
.thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
cursor: pointer;
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
padding: 9px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.h-chart {
|
||||
}
|
||||
|
||||
.h-chart {
|
||||
height: 340px;
|
||||
margin: 6px 0px;
|
||||
display: flex;
|
||||
|
||||
.h-left-grid {
|
||||
width: 16%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
display: inline-block;
|
||||
|
||||
.name {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30px 30px;
|
||||
float: left;
|
||||
|
|
@ -465,20 +486,23 @@ var $chart, $chart2, $chart3;
|
|||
height: 33.33333%;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #2b2525;
|
||||
padding: 0px 0 0 40px;
|
||||
line-height: 1.5;
|
||||
margin-top:-10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#h-chart2 {
|
||||
}
|
||||
|
||||
#h-chart2 {
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
padding-top: 10px;
|
||||
|
|
@ -486,8 +510,9 @@ var $chart, $chart2, $chart3;
|
|||
width: 0;
|
||||
flex: 1;
|
||||
margin: 0 7px;
|
||||
}
|
||||
#h-chart3 {
|
||||
}
|
||||
|
||||
#h-chart3 {
|
||||
border-radius: 3px;
|
||||
padding: 10px 10px 0 10px;
|
||||
background: white;
|
||||
|
|
@ -495,38 +520,44 @@ var $chart, $chart2, $chart3;
|
|||
height: 100%;
|
||||
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-card-body {
|
||||
.ivu-card-body {
|
||||
text-align: center;
|
||||
padding: 20px 5px;
|
||||
/* padding-left: 80px; */
|
||||
font-size: 16px;
|
||||
}
|
||||
.demo-color-name {
|
||||
}
|
||||
|
||||
.demo-color-name {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.demo-color-desc {
|
||||
}
|
||||
|
||||
.demo-color-desc {
|
||||
color: white;
|
||||
/* opacity: 0.7; */
|
||||
font-size: 20px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ivu-card {
|
||||
}
|
||||
|
||||
.ivu-card {
|
||||
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ivu-card .icon-left {
|
||||
}
|
||||
|
||||
.ivu-card .icon-left {
|
||||
width: 85px;
|
||||
}
|
||||
.ivu-card .ivu-card-body {
|
||||
}
|
||||
|
||||
.ivu-card .ivu-card-body {
|
||||
flex: 1;
|
||||
}
|
||||
.ivu-card .icon-left {
|
||||
}
|
||||
|
||||
.ivu-card .icon-left {
|
||||
text-align: center;
|
||||
border-right: 1px solid;
|
||||
padding: 8px 0px;
|
||||
|
|
@ -534,57 +565,62 @@ var $chart, $chart2, $chart3;
|
|||
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
}
|
||||
.ivu-row {
|
||||
}
|
||||
|
||||
.ivu-row {
|
||||
border-bottom: 2px dotted #eee;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-row > div {
|
||||
.ivu-row>div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.h5-desc {
|
||||
.h5-desc {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jn-day-total {
|
||||
.jn-day-total {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
|
||||
.date-text {
|
||||
line-height: 36px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.order-title {
|
||||
}
|
||||
|
||||
.order-title {
|
||||
h2 {
|
||||
padding: 7px 15px;
|
||||
font-weight: 500;
|
||||
background: white;
|
||||
border-bottom: 1px dotted #d4d4d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-range {
|
||||
.order-range {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
background: white;
|
||||
display: flex;
|
||||
// flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.order-range .order-item {
|
||||
.order-range .order-item {
|
||||
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
||||
flex: 1;
|
||||
border-radius: 6px;
|
||||
|
|
@ -592,9 +628,9 @@ var $chart, $chart2, $chart3;
|
|||
text-align: center;
|
||||
border: 1px solid #e6e6e6;
|
||||
margin: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-range .total {
|
||||
.order-range .total {
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
|
@ -602,29 +638,32 @@ var $chart, $chart2, $chart3;
|
|||
background: #55ce80;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
}
|
||||
.order-range .number {
|
||||
}
|
||||
|
||||
.order-range .number {
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
.order-range .number:hover {
|
||||
}
|
||||
|
||||
.order-range .number:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.order-range .name {
|
||||
}
|
||||
|
||||
.order-range .name {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-range .date {
|
||||
.order-range .date {
|
||||
padding: 1px 0 5px 0;
|
||||
color: #282727;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.numbers {
|
||||
.numbers {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
|
|
@ -632,32 +671,37 @@ var $chart, $chart2, $chart3;
|
|||
display: flex;
|
||||
|
||||
padding: 20px 0px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
.item > div:first-child {
|
||||
|
||||
.item>div:first-child {
|
||||
word-break: break-all;
|
||||
color: #282727;
|
||||
font-size: 30px;
|
||||
// padding-bottom: 12px;
|
||||
}
|
||||
.item > div:last-child {
|
||||
|
||||
.item>div:last-child {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.number {
|
||||
cursor: pointer;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.number:hover {
|
||||
transform: scale(1.2);
|
||||
color: #03c10b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<p>手机APP移动端管理，无需电脑</p>
|
||||
<p>演示账号：admin 密码:123456</p>
|
||||
<div style="margin-top: 30px" class="link">
|
||||
<a href="http://www.625sc.com/" target="_blank">
|
||||
<span>官网</span></a
|
||||
<a href="https://www.625sc.com/imes/313.html" target="_blank">
|
||||
<span>亮点介绍</span></a
|
||||
>
|
||||
<a href="https://www.625sc.com/imes/" target="_blank">
|
||||
<span>项目介绍</span></a
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<!--
|
||||
*Author：COCO
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*业务请在@/extension/custom/custom/Base_DesktopMenu.js此处编写
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend">
|
||||
</view-grid>
|
||||
</template>
|
||||
<script>
|
||||
import extend from "@/extension/custom/custom/Base_DesktopMenu.js";
|
||||
import { ref, defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const table = ref({
|
||||
key: 'DesktopMenu_Id',
|
||||
footer: "Foots",
|
||||
cnName: '主页菜单配置',
|
||||
name: 'custom/Base_DesktopMenu',
|
||||
url: "/Base_DesktopMenu/",
|
||||
sortName: "DesktopMenu_Id"
|
||||
});
|
||||
const editFormFields = ref({"MenuId":"","MenuUrl":"","MenuName":"","Color":"","Enable":""});
|
||||
const editFormOptions = ref([[{"dataKey":"MenuList","data":[],"title":"菜单","required":true,"field":"MenuId","type":"select"}],
|
||||
[{"title":"路由地址","required":true,"field":"MenuUrl","disabled":true}],
|
||||
[{"title":"菜单名称","required":true,"field":"MenuName","disabled":true}],
|
||||
[{"title":"背景颜色","required":true,"field":"Color","disabled":true}],
|
||||
[{"dataKey":"cq","data":[],"title":"是否启用","required":true,"field":"Enable","type":"switch"}]]);
|
||||
const searchFormFields = ref({"MenuName":""});
|
||||
const searchFormOptions = ref([[{"title":"菜单名称","field":"MenuName","type":"like"}]]);
|
||||
const columns = ref([{field:'DesktopMenu_Id',title:'主页菜单表主键ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'MenuId',title:'菜单',type:'int',bind:{ key:'MenuList',data:[]},width:80,require:true,align:'left',sort:true},
|
||||
{field:'MenuName',title:'菜单名称',type:'string',sort:true,width:180,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'MenuUrl',title:'路由地址',type:'string',link:true,width:120,readonly:true,require:true,align:'left'},
|
||||
{field:'Color',title:'背景颜色',type:'string',width:120,readonly:true,require:true,align:'left'},
|
||||
{field:'Enable',title:'是否启用',type:'byte',bind:{ key:'cq',data:[]},width:110,require:true,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',sort:true,width:110,align:'left',sort:true},
|
||||
{field:'CreateID',title:'创建人编号',type:'int',width:80,hidden:true,align:'left'},
|
||||
{field:'Creator',title:'创建人',type:'string',width:130,align:'left'},
|
||||
{field:'Modifier',title:'修改人',type:'string',width:130,align:'left'},
|
||||
{field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left',sort:true},
|
||||
{field:'ModifyID',title:'修改人编号',type:'int',width:80,hidden:true,align:'left'}]);
|
||||
const detail = ref({
|
||||
cnName: "#detailCnName",
|
||||
table: "#detailTable",
|
||||
columns: [],
|
||||
sortName: "",
|
||||
key: ""
|
||||
});
|
||||
return {
|
||||
table,
|
||||
extend,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue