增加桌面自定义快捷菜单
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>
|
<template>
|
||||||
<MesBox
|
<MesBox v-model="model" :lazy="true" title="选择数据" :height="700" :width="1500" :padding="15">
|
||||||
v-model="model"
|
|
||||||
:lazy="true"
|
|
||||||
title="选择数据"
|
|
||||||
:height="700"
|
|
||||||
:width="1500"
|
|
||||||
:padding="15"
|
|
||||||
>
|
|
||||||
<!-- 设置查询条件 -->
|
<!-- 设置查询条件 -->
|
||||||
<div style="padding-bottom: 10px">
|
<div style="padding-bottom: 10px">
|
||||||
<span style="margin-right: 20px">产品编码</span>
|
<span style="margin-right: 20px">产品编码</span>
|
||||||
<el-input
|
<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">搜索
|
||||||
placeholder="请输入产品编码"
|
</el-button>
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<!-- mes-table配置的这些属性见MesTable组件api文件 -->
|
<!-- mes-table配置的这些属性见MesTable组件api文件 -->
|
||||||
<mes-table
|
<mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
|
||||||
ref="mytable"
|
:max-height="700" :url="url" :index="true" :single="true" :defaultLoadPage="defaultLoadPage"
|
||||||
:loadKey="true"
|
@loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
|
||||||
: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>
|
<template #footer>
|
||||||
<div>
|
<div>
|
||||||
<el-button
|
<el-button size="mini" type="primary" @click="addRow()"> <i class="el-icon-plus" />添加选择的数据</el-button>
|
||||||
size="mini"
|
<el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
|
||||||
type="primary"
|
|
||||||
icon="el-icon-plus"
|
|
||||||
@click="addRow()"
|
|
||||||
>添加选择的数据</el-button
|
|
||||||
>
|
|
||||||
<el-button size="mini" icon="el-icon-close" @click="model = false"
|
|
||||||
>关闭</el-button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</MesBox>
|
</MesBox>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import MesBox from "@/components/basic/MesBox.vue";
|
import MesBox from "@/components/basic/MesBox.vue";
|
||||||
import MesTable from "@/components/basic/MesTable.vue";
|
import MesTable from "@/components/basic/MesTable.vue";
|
||||||
import { thisTypeAnnotation } from "@babel/types";
|
import { thisTypeAnnotation } from "@babel/types";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MesBox: MesBox,
|
MesBox: MesBox,
|
||||||
|
|
@ -72,21 +35,21 @@ import { thisTypeAnnotation } from "@babel/types";
|
||||||
model: false,
|
model: false,
|
||||||
defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
|
defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
|
||||||
productCode: "", //查询条件字段
|
productCode: "", //查询条件字段
|
||||||
modelType:"",
|
modelType: "",
|
||||||
url: "api/Base_Product/getSelectorDemo",//加载数据的接口
|
url: "api/Base_Product/getSelectorDemo",//加载数据的接口
|
||||||
columns: [
|
columns: [
|
||||||
{field:'Product_Id',title:'产品定义主键ID',type:'int',width:110,hidden:true,readonly:true,require:true,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: '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: '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: '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: 'ProductStandard', title: '产品规格', type: 'string', width: 180, align: 'left' },
|
||||||
{field:'ProductAttribute',title:'产品属性',type:'string',bind:{ key:'productAttr',data:[]},width:180,require:true,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: '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: 'MaxInventory', title: '最大库存', type: 'int', sort: true, width: 110, align: 'left' },
|
||||||
{field:'MinInventory',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: 'SafeInventory', title: '安全库存', type: 'int', sort: true, width: 110, align: 'left' },
|
||||||
{field:'InventoryQty',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: 'FinishedProduct', title: '成品图', type: 'img', width: 180, align: 'left' }
|
||||||
],
|
],
|
||||||
pagination: {}, //分页配置，见mestable组件api
|
pagination: {}, //分页配置，见mestable组件api
|
||||||
};
|
};
|
||||||
|
|
@ -104,7 +67,7 @@ import { thisTypeAnnotation } from "@babel/types";
|
||||||
//点击搜索
|
//点击搜索
|
||||||
this.$refs.mytable.load();
|
this.$refs.mytable.load();
|
||||||
},
|
},
|
||||||
getFieldDicValue(fieldName,fieldValue){
|
getFieldDicValue(fieldName, fieldValue) {
|
||||||
this.columns.forEach(item => {
|
this.columns.forEach(item => {
|
||||||
if (item.field == fieldName) {
|
if (item.field == fieldName) {
|
||||||
var result = item.bind.data.find(val => val.key == fieldValue)
|
var result = item.bind.data.find(val => val.key == fieldValue)
|
||||||
|
|
@ -119,13 +82,13 @@ import { thisTypeAnnotation } from "@babel/types";
|
||||||
}
|
}
|
||||||
//回写数据到表单
|
//回写数据到表单
|
||||||
this.$emit("parentCall", ($parent) => {
|
this.$emit("parentCall", ($parent) => {
|
||||||
$parent.getRow(rows,this.modelType);
|
$parent.getRow(rows, this.modelType);
|
||||||
});
|
});
|
||||||
//关闭当前窗口
|
//关闭当前窗口
|
||||||
this.model = false;
|
this.model = false;
|
||||||
},
|
},
|
||||||
//这里是从api查询后返回数据的方法
|
//这里是从api查询后返回数据的方法
|
||||||
loadTableAfter(row) {},
|
loadTableAfter(row) { },
|
||||||
loadTableBefore(params) {
|
loadTableBefore(params) {
|
||||||
//查询前，设置查询条件
|
//查询前，设置查询条件
|
||||||
if (this.productCode) {
|
if (this.productCode) {
|
||||||
|
|
@ -135,5 +98,4 @@ import { thisTypeAnnotation } from "@babel/types";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -314,6 +314,10 @@ let viewgird = [
|
||||||
path: '/Quality_OutCheck',
|
path: '/Quality_OutCheck',
|
||||||
name: 'Quality_OutCheck',
|
name: 'Quality_OutCheck',
|
||||||
component: () => import('@/views/quality/quality/Quality_OutCheck.vue')
|
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
|
export default viewgird
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="home-contianer">
|
<div class="home-contianer">
|
||||||
<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 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">
|
<div class="order-title">
|
||||||
<h2>数量统计</h2>
|
<h2>数量统计</h2>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div data-v-542f4644 class="ivu-row" style="padding: 15px; background: white">
|
||||||
data-v-542f4644
|
<div v-for="item in topNumber" :key="item.ItemName" class="ivu-col ivu-col-span-6"
|
||||||
class="ivu-row"
|
style="padding-left: 8px; padding-right: 8px">
|
||||||
style="padding: 15px; background: white"
|
<div data-v-542f4644 class="ivu-card" :style="{ background: item.Background }">
|
||||||
>
|
|
||||||
<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 class="icon-left">
|
<div class="icon-left">
|
||||||
<i class="el-icon-wallet" />
|
<i class="el-icon-wallet" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -34,11 +38,7 @@
|
||||||
<h2>工序信息</h2>
|
<h2>工序信息</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-range">
|
<div class="order-range">
|
||||||
<div
|
<div class="order-item" v-for="(item, index) in totalRange" :key="index">
|
||||||
class="order-item"
|
|
||||||
v-for="(item, index) in totalRange"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="total">
|
<div class="total">
|
||||||
<div class="number">
|
<div class="number">
|
||||||
{{item.ProcessName}}
|
{{item.ProcessName}}
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
<div id="h-chart2"></div>
|
<div id="h-chart2"></div>
|
||||||
<div id="h-chart3"></div>
|
<div id="h-chart3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-contianer">
|
<div class="home-contianer">
|
||||||
<div class="h-chart">
|
<div class="h-chart">
|
||||||
<!-- <div class="h-left-grid">
|
<!-- <div class="h-left-grid">
|
||||||
|
|
@ -76,20 +76,11 @@
|
||||||
<div class="desc">{{ item.desc }}</div>
|
<div class="desc">{{ item.desc }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="h-top-center" style="width: 23%" >
|
<div class="h-top-center" style="width: 23%">
|
||||||
<div class="n-item" >
|
<div class="n-item">
|
||||||
<div
|
<div @click="openRouterUrl(item)" class="item" :class="'item' + (index + 1)" v-for="(item, index) in center"
|
||||||
@click="openRouterUrl(item)"
|
:key="index">
|
||||||
class="item"
|
<i style="font-size: 30px; padding-bottom: 10px" :class="item.icon" :size="20"></i>
|
||||||
: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 />
|
<br />
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -98,29 +89,17 @@
|
||||||
<!--联系信息-->
|
<!--联系信息-->
|
||||||
<div class="h-top-center" style="width: 55%;">
|
<div class="h-top-center" style="width: 55%;">
|
||||||
<div class="n-item">
|
<div class="n-item">
|
||||||
<div
|
<div class="item" :class="'item1'" style="height: 100%;">
|
||||||
class="item"
|
|
||||||
:class="'item1'"
|
|
||||||
style="height: 100%;"
|
|
||||||
>
|
|
||||||
联系作者
|
联系作者
|
||||||
<br />
|
<br />
|
||||||
<img style="width: 200px; height: 199px;margin-top: 20px;" src="@/assets/imgs/wechat.jpg">
|
<img style="width: 200px; height: 199px;margin-top: 20px;" src="@/assets/imgs/wechat.jpg">
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="item" :class="'item2'" style="height: 100%;">
|
||||||
class="item"
|
|
||||||
:class="'item2'"
|
|
||||||
style="height: 100%;"
|
|
||||||
>
|
|
||||||
交流讨论群
|
交流讨论群
|
||||||
<br />
|
<br />
|
||||||
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/qq.png">
|
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/qq.png">
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="item" :class="'item3'" style="height: 100%;">
|
||||||
class="item"
|
|
||||||
:class="'item3'"
|
|
||||||
style="height: 100%;"
|
|
||||||
>
|
|
||||||
微信小程序
|
微信小程序
|
||||||
<br />
|
<br />
|
||||||
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/miniapp.png">
|
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/miniapp.png">
|
||||||
|
|
@ -140,26 +119,27 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// import * as echarts from "echarts";
|
// import * as echarts from "echarts";
|
||||||
import "echarts/lib/chart/bar";
|
import "echarts/lib/chart/bar";
|
||||||
import "echarts/lib/chart/line";
|
import "echarts/lib/chart/line";
|
||||||
|
|
||||||
import "echarts/lib/chart/pie";
|
import "echarts/lib/chart/pie";
|
||||||
import "echarts/lib/component/legend";
|
import "echarts/lib/component/legend";
|
||||||
import "echarts/lib/component/tooltip";
|
import "echarts/lib/component/tooltip";
|
||||||
import "echarts/lib/component/title";
|
import "echarts/lib/component/title";
|
||||||
import "echarts/lib/component/grid";
|
import "echarts/lib/component/grid";
|
||||||
let echarts = require("echarts/lib/echarts");
|
let echarts = require("echarts/lib/echarts");
|
||||||
import { chart2, chart3 } from "./home/home-chart-options";
|
import { chart2, chart3 } from "./home/home-chart-options";
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
var $chart2;
|
var $chart2;
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
beginDate: "",
|
beginDate: "",
|
||||||
endDate: "",
|
endDate: "",
|
||||||
topColor: [],
|
topMenu: [], //快捷菜单
|
||||||
|
topNumber: [], //数量统计
|
||||||
totalRange: [],
|
totalRange: [],
|
||||||
titleLeft: "",
|
titleLeft: "",
|
||||||
dateNow: "",
|
dateNow: "",
|
||||||
|
|
@ -233,13 +213,20 @@ export default {
|
||||||
{
|
{
|
||||||
name: "紧锣密鼓的开发中",
|
name: "紧锣密鼓的开发中",
|
||||||
desc: "待添加",
|
desc: "待添加",
|
||||||
url:"#",
|
url: "#",
|
||||||
icon: "el-icon-s-marketing",
|
icon: "el-icon-s-marketing",
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
openUrl(item) {
|
||||||
|
this.$tabs.open({
|
||||||
|
text: item.MenuName,
|
||||||
|
path: item.MenuUrl,
|
||||||
|
query: {}
|
||||||
|
});
|
||||||
|
},
|
||||||
getDate() {
|
getDate() {
|
||||||
var date = new Date();
|
var date = new Date();
|
||||||
var year = date.getFullYear();
|
var year = date.getFullYear();
|
||||||
|
|
@ -257,21 +244,29 @@ export default {
|
||||||
this.endDate = this.beginDate;
|
this.endDate = this.beginDate;
|
||||||
this.dateNow = this.beginDate;
|
this.dateNow = this.beginDate;
|
||||||
},
|
},
|
||||||
getTopNumber(){
|
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%"}];
|
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';
|
let urlWo = 'api/Sys_VersionInfo/getVersionInfo';
|
||||||
//给工序名称重新绑定数据源
|
//给工序名称重新绑定数据源
|
||||||
this.http.get(urlWo, {}, true).then((result) => {
|
this.http.get(urlWo, {}, true).then((result) => {
|
||||||
this.list = result;
|
this.list = result;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getTopProcessNumber(){
|
getDesktopMenu() {
|
||||||
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"}];
|
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({
|
this.$tabs.open({
|
||||||
text: item.title,
|
text: item.title,
|
||||||
path: item.url,
|
path: item.url,
|
||||||
|
|
@ -281,10 +276,11 @@ export default {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getDate();
|
this.getDate();
|
||||||
|
this.getDesktopMenu();
|
||||||
this.getTopNumber();
|
this.getTopNumber();
|
||||||
this.getTopProcessNumber();
|
this.getTopProcessNumber();
|
||||||
this.getVersionInfo();
|
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 categories = result.map(item => (item.name));
|
||||||
let data = result.map(item => (item.data));
|
let data = result.map(item => (item.data));
|
||||||
chart2.xAxis[0].data = categories;
|
chart2.xAxis[0].data = categories;
|
||||||
|
|
@ -293,12 +289,12 @@ export default {
|
||||||
$chart2.setOption(chart2);
|
$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 }));
|
let dataDefect = item.map(key => ({ name: key.name, value: key.data }));
|
||||||
chart3.series[0].data = dataDefect
|
chart3.series[0].data = dataDefect
|
||||||
$chart3 = echarts.init(document.getElementById("h-chart3"));
|
$chart3 = echarts.init(document.getElementById("h-chart3"));
|
||||||
$chart3.setOption(chart3);
|
$chart3.setOption(chart3);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let open = (item) => {
|
let open = (item) => {
|
||||||
|
|
@ -320,15 +316,15 @@ export default {
|
||||||
destroyed() {
|
destroyed() {
|
||||||
$chart2 = null;
|
$chart2 = null;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
var $chart, $chart2, $chart3;
|
var $chart, $chart2, $chart3;
|
||||||
// window.addEventListener("resize", function () {
|
// window.addEventListener("resize", function () {
|
||||||
// $chart2.setOption(chart2);
|
// $chart2.setOption(chart2);
|
||||||
// });
|
// });
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.home-contianer {
|
.home-contianer {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -342,27 +338,33 @@ var $chart, $chart2, $chart3;
|
||||||
|
|
||||||
.h-top {
|
.h-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.h-top-left {
|
.h-top-left {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
.h-top > div {
|
|
||||||
|
.h-top>div {
|
||||||
border: 1px solid #e8e7e7;
|
border: 1px solid #e8e7e7;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
// margin: 6px;
|
// margin: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-top-center {
|
.h-top-center {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: white;
|
background: white;
|
||||||
margin: 0 6px;
|
margin: 0 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.item1 .num {
|
.item1 .num {
|
||||||
padding-top: 28px;
|
padding-top: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item2 .num {
|
.item2 .num {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -372,6 +374,7 @@ var $chart, $chart2, $chart3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
// display: flex;
|
// display: flex;
|
||||||
.item {
|
.item {
|
||||||
border-right: 1px solid #e5e5e5;
|
border-right: 1px solid #e5e5e5;
|
||||||
|
|
@ -382,33 +385,40 @@ var $chart, $chart2, $chart3;
|
||||||
padding: 47px 0;
|
padding: 47px 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:hover {
|
.item:hover {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:last-child {
|
.item:last-child {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item3,
|
.item3,
|
||||||
.item6 {
|
.item6 {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
color: #282727;
|
color: #282727;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
transition: transform 0.8s;
|
transition: transform 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num:hover {
|
.num:hover {
|
||||||
color: #55ce80;
|
color: #55ce80;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-top-right {
|
.h-top-right {
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
|
|
||||||
|
|
@ -416,48 +426,59 @@ var $chart, $chart2, $chart3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3 {
|
.h3 {
|
||||||
padding: 7px 15px;
|
padding: 7px 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1px dotted #d4d4d4;
|
border-bottom: 1px dotted #d4d4d4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.task-table {
|
|
||||||
|
.task-table {
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.thead {
|
.thead {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid #f3f3f3;
|
||||||
padding: 9px 8px;
|
padding: 9px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover {
|
tr:hover {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.h-chart {
|
|
||||||
|
.h-chart {
|
||||||
height: 340px;
|
height: 340px;
|
||||||
margin: 6px 0px;
|
margin: 6px 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.h-left-grid {
|
.h-left-grid {
|
||||||
width: 16%;
|
width: 16%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: white;
|
background: white;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:hover {
|
.item:hover {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
padding: 30px 30px;
|
padding: 30px 30px;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -465,20 +486,23 @@ var $chart, $chart2, $chart3;
|
||||||
height: 33.33333%;
|
height: 33.33333%;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
border-right: 1px solid #eee;
|
border-right: 1px solid #eee;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #2b2525;
|
color: #2b2525;
|
||||||
padding: 0px 0 0 40px;
|
padding: 0px 0 0 40px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-top:-10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#h-chart2 {
|
|
||||||
|
#h-chart2 {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: white;
|
background: white;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
|
@ -486,8 +510,9 @@ var $chart, $chart2, $chart3;
|
||||||
width: 0;
|
width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0 7px;
|
margin: 0 7px;
|
||||||
}
|
}
|
||||||
#h-chart3 {
|
|
||||||
|
#h-chart3 {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 10px 10px 0 10px;
|
padding: 10px 10px 0 10px;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -495,38 +520,44 @@ var $chart, $chart2, $chart3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ivu-card-body {
|
.ivu-card-body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 5px;
|
padding: 20px 5px;
|
||||||
/* padding-left: 80px; */
|
/* padding-left: 80px; */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.demo-color-name {
|
|
||||||
|
.demo-color-name {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.demo-color-desc {
|
|
||||||
|
.demo-color-desc {
|
||||||
color: white;
|
color: white;
|
||||||
/* opacity: 0.7; */
|
/* opacity: 0.7; */
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
.ivu-card {
|
|
||||||
|
.ivu-card {
|
||||||
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.ivu-card .icon-left {
|
|
||||||
|
.ivu-card .icon-left {
|
||||||
width: 85px;
|
width: 85px;
|
||||||
}
|
}
|
||||||
.ivu-card .ivu-card-body {
|
|
||||||
|
.ivu-card .ivu-card-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.ivu-card .icon-left {
|
|
||||||
|
.ivu-card .icon-left {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-right: 1px solid;
|
border-right: 1px solid;
|
||||||
padding: 8px 0px;
|
padding: 8px 0px;
|
||||||
|
|
@ -534,57 +565,62 @@ var $chart, $chart2, $chart3;
|
||||||
|
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.ivu-row {
|
|
||||||
|
.ivu-row {
|
||||||
border-bottom: 2px dotted #eee;
|
border-bottom: 2px dotted #eee;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ivu-row > div {
|
.ivu-row>div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h5-desc {
|
.h5-desc {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.jn-day-total {
|
.jn-day-total {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
.date-text {
|
.date-text {
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.order-title {
|
|
||||||
|
.order-title {
|
||||||
h2 {
|
h2 {
|
||||||
padding: 7px 15px;
|
padding: 7px 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: white;
|
background: white;
|
||||||
border-bottom: 1px dotted #d4d4d4;
|
border-bottom: 1px dotted #d4d4d4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-range {
|
.order-range {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
background: white;
|
background: white;
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
// flex-direction: row-reverse;
|
// flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-range .order-item {
|
.order-range .order-item {
|
||||||
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
@ -592,9 +628,9 @@ var $chart, $chart2, $chart3;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
margin: 7px;
|
margin: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-range .total {
|
.order-range .total {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -602,29 +638,32 @@ var $chart, $chart2, $chart3;
|
||||||
background: #55ce80;
|
background: #55ce80;
|
||||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
.order-range .number {
|
|
||||||
|
.order-range .number {
|
||||||
transition: transform 0.8s;
|
transition: transform 0.8s;
|
||||||
}
|
}
|
||||||
.order-range .number:hover {
|
|
||||||
|
.order-range .number:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
.order-range .name {
|
|
||||||
|
.order-range .name {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-range .date {
|
.order-range .date {
|
||||||
padding: 1px 0 5px 0;
|
padding: 1px 0 5px 0;
|
||||||
color: #282727;
|
color: #282727;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.numbers {
|
.numbers {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
|
|
@ -632,32 +671,37 @@ var $chart, $chart2, $chart3;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
padding: 20px 0px;
|
padding: 20px 0px;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-right: 1px solid #e5e5e5;
|
border-right: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
.item > div:first-child {
|
|
||||||
|
.item>div:first-child {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
color: #282727;
|
color: #282727;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
// padding-bottom: 12px;
|
// padding-bottom: 12px;
|
||||||
}
|
}
|
||||||
.item > div:last-child {
|
|
||||||
|
.item>div:last-child {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:last-child {
|
.item:last-child {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number {
|
.number {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.8s;
|
transition: transform 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number:hover {
|
.number:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
color: #03c10b !important;
|
color: #03c10b !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,8 +22,8 @@
|
||||||
<p>手机APP移动端管理，无需电脑</p>
|
<p>手机APP移动端管理，无需电脑</p>
|
||||||
<p>演示账号：admin 密码:123456</p>
|
<p>演示账号：admin 密码:123456</p>
|
||||||
<div style="margin-top: 30px" class="link">
|
<div style="margin-top: 30px" class="link">
|
||||||
<a href="http://www.625sc.com/" target="_blank">
|
<a href="https://www.625sc.com/imes/313.html" target="_blank">
|
||||||
<span>官网</span></a
|
<span>亮点介绍</span></a
|
||||||
>
|
>
|
||||||
<a href="https://www.625sc.com/imes/" target="_blank">
|
<a href="https://www.625sc.com/imes/" target="_blank">
|
||||||
<span>项目介绍</span></a
|
<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