yxt_group
/
supervise
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页面

master
liupopo 2 years ago
parent
3d10767f11
commit
db06ef0d74
29 changed files with 20816 additions and 725 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      docs/databases/table_create_rms.sql
  2. 4
      docs/databases/table_create_storehouse.sql
  3. 1
      supervise-business-ui/package.json
  4. BIN
      supervise-business-ui/src/assets/images/cgsp.png
  5. 510
      supervise-business-ui/src/views/index.vue
  6. 1
      supervise-crm-ui/package.json
  7. BIN
      supervise-crm-ui/src/assets/images/cgsp.png
  8. 452
      supervise-crm-ui/src/views/index.vue
  9. 4
      supervise-customer-ui/.env.development
  10. 1
      supervise-message-ui/package.json
  11. 376
      supervise-message-ui/src/views/index.vue
  12. 1
      supervise-organizational-ui/package.json
  13. 402
      supervise-organizational-ui/src/views/index.vue
  14. BIN
      supervise-report-ui/src/assets/images/cgsp.png
  15. 505
      supervise-report-ui/src/views/index.vue
  16. 1
      supervise-risk-ui/package.json
  17. BIN
      supervise-risk-ui/src/assets/images/cgsp.png
  18. 444
      supervise-risk-ui/src/views/index.vue
  19. 17468
      warehousing-system/project_web/package-lock.json
  20. 3
      warehousing-system/project_web/package.json
  21. BIN
      warehousing-system/project_web/src/assets/images/cgsp.png
  22. 4
      warehousing-system/project_web/src/router/index.js
  23. 427
      warehousing-system/project_web/src/views/index8.vue
  24. 1
      yxt-portal-ui/package.json
  25. BIN
      yxt-portal-ui/src/assets/images/cgsp.png
  26. 409
      yxt-portal-ui/src/views/index.vue
  27. 1
      yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/package.json
  28. BIN
      yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/src/assets/images/cgsp.png
  29. 388
      yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/src/views/index.vue

138
docs/databases/table_create_rms.sql
View File

@ -0,0 +1,138 @@
DROP TABLE IF EXISTS `risk_alarm`;
CREATE TABLE `risk_alarm` (
`id` BIGINT(32) NOT NULL AUTO_INCREMENT COMMENT 'ID，唯一编号',
`sid` VARCHAR(64) NOT NULL COMMENT 'sid',
`createTime` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '记录创建时间',
`remarks` varchar(255) DEFAULT NULL COMMENT '备注信息',
`treatmentStatus` INT(11) NOT NULL DEFAULT '0' COMMENT '风险处理状态：0=待处理，1=处理中，2=已办结',
`indicatorSid` varchar(64) DEFAULT NULL COMMENT '风险指标Sid',
`indicatorCode` varchar(100) DEFAULT NULL COMMENT '风险指标代码',
`indicatorName` varchar(100) DEFAULT NULL COMMENT '风险指标名称',
`risk` int(11) DEFAULT NULL COMMENT '风险处理状态0.待处理1.处理中2.完成',
`riskTriggerTime` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '风险触发时间',
`riskEliminationDegree` int(11) DEFAULT NULL COMMENT '风险消除程度0.未消除1.已消除',
`customerSid` varchar(64) DEFAULT NULL COMMENT '客户Sid',
`riskInPositionNum` int(11) DEFAULT NULL COMMENT '风险处于位置1.主体2.供应商3.仓库4.门店',
`riskInPositionSid` varchar(64) DEFAULT NULL COMMENT '风险处于位置Sid',
`riskDegreeName` varchar(100) DEFAULT NULL COMMENT '风险程度名称',
`riskDegreeCode` varchar(100) DEFAULT NULL COMMENT '风险程度代码',
`isEnable` INT(32) NOT NULL DEFAULT '1' COMMENT '记录是否可用，1:可用，0:不可用',
`isDelete` INT(32) NOT NULL DEFAULT '0' COMMENT '记录是否被删除，0:未删除，1:已经删除',
`remarks` VARCHAR(255) NULL DEFAULT NULL COMMENT '备注信息',
`sid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'sid',
`lockVersion` int(0) NULL DEFAULT 0 COMMENT '版本锁',
`createTime` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
`modifyTime` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '修改时间',
`isEnable` int(0) NULL DEFAULT 1 COMMENT '是否可用：1可用，0不可用',
`state` int(0) NULL DEFAULT 1 COMMENT '状态',
`isDelete` int(0) NULL DEFAULT 0 COMMENT '是否删除：0未删除，1已删除',
`remarks` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',
`createBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人sid',
`updateBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '修改人sid',
`address` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '位置',
`squareMeasure` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '面积',
`floorHeight` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '层高',
`properties` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '性质',
`contacts` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '联系人',
`price` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '价格',
`housingResources` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '房源',
`telephone` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '电话',
`province` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '省',
`city` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '市',
`county` varchar(100) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '区',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_croatian_ci COMMENT = '仓库位置信息' ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
DROP TABLE IF EXISTS `loan_bank_information`;
CREATE TABLE `loan_bank_information` (
`id` int(0) NOT NULL AUTO_INCREMENT,
`sid` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NOT NULL COMMENT 'ids',
`bankName` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '银行名称',
`bankAbbreviation` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '银行简称',
`address` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '地址',
`province` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '省',
`city` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '市',
`county` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '区',
`contacts` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '联系人',
`telephone` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '电话',
`psid` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT '0' COMMENT '上级sid',
`lockVersion` int(0) NULL DEFAULT 0 COMMENT '版本锁',
`createTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
`modifyTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '修改时间',
`isEnable` int(0) NULL DEFAULT 1 COMMENT '是否可用：1可用，0不可用',
`state` int(0) NULL DEFAULT 1 COMMENT '状态',
`isDelete` int(0) NULL DEFAULT 0 COMMENT '是否删除：0未删除，1已删除',
`remarks` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',
`createBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人sid',
`updateBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '修改人sid',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 22 CHARACTER SET = utf8 COLLATE = utf8_croatian_ci COMMENT = '贷款银行信息' ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
DROP TABLE IF EXISTS `enterprise_information`;
CREATE TABLE `enterprise_information` (
`id` int(0) NOT NULL AUTO_INCREMENT,
`sid` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NOT NULL COMMENT 'ids',
`enterpriseName` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '企业名称',
`enterpriseAbbreviation` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '企业简称',
`bankAccount` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '银行账户',
`accountNumber` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '账号',
`openingBankName` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '开户行',
`juridicalPerson` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '法人',
`businessLicenseNumber` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '营业执照号',
`address` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '地址',
`province` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '省',
`city` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '市',
`county` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '区',
`contacts` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '联系人',
`telephone` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '电话',
`lockVersion` int(0) NULL DEFAULT 0 COMMENT '版本锁',
`createTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
`modifyTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '修改时间',
`isEnable` int(0) NULL DEFAULT 1 COMMENT '是否可用：1可用，0不可用',
`state` int(0) NULL DEFAULT 1 COMMENT '状态',
`isDelete` int(0) NULL DEFAULT 0 COMMENT '是否删除：0未删除，1已删除',
`remarks` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',
`createBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人sid',
`updateBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '修改人sid',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = utf8 COLLATE = utf8_croatian_ci COMMENT = '企业信息' ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
DROP TABLE IF EXISTS `bank_manager`;
CREATE TABLE `bank_manager` (
`id` int(0) NOT NULL AUTO_INCREMENT,
`sid` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL,
`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '姓名',
`telephone` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '电话',
`post` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '职务',
`bankSid` varchar(255) CHARACTER SET utf8 COLLATE utf8_croatian_ci NULL DEFAULT NULL COMMENT '银行sid',
`lockVersion` int(0) NULL DEFAULT 0 COMMENT '版本锁',
`createTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
`modifyTime` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '修改时间',
`isEnable` int(0) NULL DEFAULT 1 COMMENT '是否可用：1可用，0不可用',
`state` int(0) NULL DEFAULT 1 COMMENT '状态',
`isDelete` int(0) NULL DEFAULT 0 COMMENT '是否删除：0未删除，1已删除',
`remarks` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',
`createBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人sid',
`updateBySid` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '修改人sid',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_croatian_ci COMMENT = '银行负责人信息' ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;

4
docs/databases/table_create_storehouse.sql
View File

@ -29,7 +29,7 @@ CREATE TABLE `sh_storehouse` (
`address` VARCHAR(100) DEFAULT NULL COMMENT '详细地址',
`acreage` VARCHAR(100) DEFAULT NULL COMMENT '库房面积',
`storeyHeight` VARCHAR(100) DEFAULT NULL COMMENT '库房面积',
`storeyHeight` VARCHAR(100) DEFAULT NULL COMMENT '层高',
`monthlyPrice` VARCHAR(100) DEFAULT NULL COMMENT '月租金',
`attributeCodes` VARCHAR(100) DEFAULT NULL COMMENT '库房性质编码组，多个性质以逗号(,)分隔',
`attributeNames` VARCHAR(100) DEFAULT NULL COMMENT '库房性质名称组，多个性质以逗号(,)分隔，如：电商仓库,物流仓储,厂房',
@ -37,7 +37,7 @@ CREATE TABLE `sh_storehouse` (
`linkerName` VARCHAR(100) DEFAULT NULL COMMENT '联系人姓名',
`linkerPhone` VARCHAR(100) DEFAULT NULL COMMENT '联系人电话',
`picUrl` VARCHAR(100) DEFAULT NULL COMMENT '图片访问url',
`picUrl` VARCHAR(1024) DEFAULT NULL COMMENT '图片访问url',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB COMMENT='库房信息表';

1
supervise-business-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

BIN
supervise-business-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

510
supervise-business-ui/src/views/index.vue
View File

@ -1,43 +1,497 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
<!-- <div class="index_top_right">{{ info.notice }}</div> -->
</div>
<div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">采购已完成分类</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">直接采购</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">委托采购</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">调拨采购</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">秘密采购</span>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">采购处理中</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in newMessageList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;"
>{{
item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">采购已处理</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in larmCenterList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;"
>{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
</div>
<div class="index_content">
<!-- <div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥27608927.45</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">当月销售商品收到现金</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥1244255.22</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">其他与营业活动有关的现金</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥636449.84</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">分销商进货额</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥3822945.45</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">实际发货额</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
</div> -->
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">工作进度</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">处理状态</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[待处理]到货不积极影响生产',
date: '2023-01-01'
}, {
sid: '2',
name: '[待处理]到货后不合格处理',
date: '2023-01-01'
}, {
sid: '3',
name: '[待处理]质量不符合标准',
date: '2023-01-01'
}, {
sid: '4',
name: '[待处理]供应商无预警涨价',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '[已处理]供货商不按时交货',
date: '2023-01-01'
}, {
sid: '2',
name: '[已处理]供应商质量不稳定，物料经常出现质量问题',
date: '2023-01-01'
}, {
sid: '3',
name: '[已处理]货物不对板',
date: '2023-01-01'
}, {
sid: '4',
name: '[已处理]包装不当',
date: '2023-01-01'
}
]
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['采购申请', '工作种类']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '次',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '采购申请',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 次'
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '工作种类',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 个'
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
}
]
})
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '处理状态',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
'value': 50,
'name': '已处理'
},
{
'value': 40,
'name': '待处理'
}
]
}]
})
}
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

1
supervise-crm-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

BIN
supervise-crm-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

452
supervise-crm-ui/src/views/index.vue
View File

@ -1,43 +1,439 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
<!-- <div class="index_top_right">{{ info.notice }}</div> -->
</div>
<div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">所属行业</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">金融业</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">农业</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">畜牧业</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">医药健康</span>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">授信额度</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">短期授信（5-10）</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">中长期授信（10-20）</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">长期授信（20-50）</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">循环授信</span>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">项目类型</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">新建项目</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">扩建项目</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">改建项目</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">迁建项目</span>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">企业所属地</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">河北省石家庄市</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">北京市海淀区</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">东北辽宁省</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<span style="font-weight: 500;margin-left: 10px;">天津市河北区</span>
</div>
</div>
</div>
<div class="index_content">
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">企业数量统计</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">项目种类</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
import * as echarts from 'echarts'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正',
date: '2023-06-12'
}, {
sid: '2',
name: '[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正',
date: '2023-06-12'
}, {
sid: '3',
name: '[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正',
date: '2023-06-12'
}, {
sid: '4',
name: '[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正',
date: '2023-06-12'
}],
larmCenterList: [{
sid: '1',
name: '[岗位调整]由2023年6月12号起， 聂风 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '2',
name: '[岗位调整]由2023年6月12号起， 冷拧 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '3',
name: '[岗位调整]由2023年6月12号起， 冷枫 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '4',
name: '[岗位调整]由2023年6月12号起， 邹好好 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}
]
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['企业数量']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '个数/个',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '企业数量',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 个'
}
},
data: [
20, 20, 20, 20, 60, 70, 90
]
}
]
})
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '项目种类',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
'value': 20,
'name': '新建项目'
},
{
'value': 15,
'name': '扩建项目'
},
{
'value': 30,
'name': '改建项目'
},
{
'value': 20,
'name': '迁建项目'
}
]
}]
})
}
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

4
supervise-customer-ui/.env.development
View File

@ -2,8 +2,8 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = '/api/service'
VUE_APP_BASE_API = '/api'
## 配置测试和本地开发时的 接口地址
##VUE_APP_URL = "http://8.130.39.13:8112"
VUE_APP_URL = "http://192.168.1.193:8112"
VUE_APP_URL = "http://127.0.0.1:8112"

1
supervise-message-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

376
supervise-message-ui/src/views/index.vue
View File

@ -1,43 +1,363 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
</div>
<div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">未读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in newMessageList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;"
>{{
item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">已读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in larmCenterList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;"
>{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
</div>
<div class="index_content">
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">消息回复</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">消息状态</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[消息]您的订单已经审核完毕等待放款。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '仓库于2023年3月3日产生1级风险。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2**3189帐户回款231234元。',
date: '2023-01-01'
}
]
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: true,
readOnly: true
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['回复率']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '速度/秒',
min: 1,
max: 120,
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '回复速度',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 秒'
}
},
data: [
60, 50, 40, 50, 54, 62, 45
]
}
]
})
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: true
},
// 下载图标
saveAsImage: {
show: true
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '消息状态',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 6
},
data: [
{
'value': 907,
'name': '已读'
},
{
'value': 907,
'name': '未读'
}
]
}]
})
}
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

1
supervise-organizational-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

402
supervise-organizational-ui/src/views/index.vue
View File

@ -1,43 +1,389 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
<!-- <div class="index_top_right">{{ info.notice }}</div> -->
</div>
<div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">员工变动</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in newMessageList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;"
>{{
item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">岗位调整</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in larmCenterList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;"
>{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
</div>
<div class="index_content">
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">银行数量统计</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">岗位员工占比</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正',
date: '2023-06-12'
}, {
sid: '2',
name: '[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正',
date: '2023-06-12'
}, {
sid: '3',
name: '[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正',
date: '2023-06-12'
}, {
sid: '4',
name: '[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正',
date: '2023-06-12'
}],
larmCenterList: [{
sid: '1',
name: '[岗位调整]由2023年6月12号起， 聂风 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '2',
name: '[岗位调整]由2023年6月12号起， 冷拧 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '3',
name: '[岗位调整]由2023年6月12号起， 冷枫 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}, {
sid: '4',
name: '[岗位调整]由2023年6月12号起， 邹好好 由原岗位调动至采购部岗位工作',
date: '2023-06-12'
}
]
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['银行数量']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '个数/个',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '银行数量',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 个'
}
},
data: [
20, 20, 20, 20, 60, 70, 90
]
}
]
})
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '岗位占比',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
'value': 20,
'name': '采购部'
},
{
'value': 15,
'name': '销售部'
},
{
'value': 30,
'name': '开发部'
},
{
'value': 20,
'name': '运维部'
}
]
}]
})
}
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

BIN
supervise-report-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

505
supervise-report-ui/src/views/index.vue
View File

@ -1,33 +1,436 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
<!-- <div class="index_top_right">{{info.notice}}</div> -->
</div>
<div class="index_content">
<div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥27608927.45</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">当月销售商品收到现金</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥1244255.22</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">其他与营业活动有关的现金</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥636449.84</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">分销商进货额</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥3822945.45</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">实际发货额</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
</div>
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">销售报表</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">在途商品</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
<!-- <div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">快捷操作</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<span style="font-weight: 500;margin-left: 10px;">销售报表</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<span style="font-weight: 500;margin-left: 10px;">销售汇总日报表</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<span style="font-weight: 500;margin-left: 10px;">在途商品管理表</span>
</div>
<div style="display: flex;align-items: center; margin-top: 10px;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<span style="font-weight: 500;margin-left: 10px;">在途商品汇总统计表</span>
</div>
</div>
<div style="flex: 0.1;"></div> -->
<!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">最新消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)">
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div> -->
<!-- <div style="flex: 0.1;"></div> -->
<!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">警报中心</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)">
<span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;">{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div> -->
<!-- </div> -->
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[消息]您的订单已经审核完毕等待放款。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '仓库于2023年3月3日产生1级风险。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2**3189帐户回款231234元。',
date: '2023-01-01'
}
]
}
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['分销商进货额', '实际发货额']
},
xAxis: [{
type: 'category',
data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '人民币/万元',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '百分比%',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '分销商进货额',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 万元'
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '实际发货额',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 万元'
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
}
]
})
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '在途商品',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
'value': 2313123,
'name': '订单总额'
},
{
'value': 4359354,
'name': '实际到货价值'
},
{
'value': 2313123,
'name': '在途货价值'
},
{
'value': 2313123,
'name': '超出价值'
}
]
}]
})
}
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
@ -36,8 +439,68 @@
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
background: radial-gradient(#fff, #f5f7f4, #fff);
}
canvas {
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 60px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

1
supervise-risk-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

BIN
supervise-risk-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

444
supervise-risk-ui/src/views/index.vue
View File

@ -1,43 +1,431 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
</div>
<!-- <div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">未读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)">
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{
item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
<div style="flex: 0.1;"></div>
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">已读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)">
<span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;">{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
</div> -->
<div class="index_content">
<div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥276027.45</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">订单货物</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥57892.22</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">销售情况</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥789252.65</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">采购订单</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥406255.65</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">用款管理</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
</div>
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">风险统计</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">风险种类</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[消息]您的订单已经审核完毕等待放款。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '仓库于2023年3月3日产生1级风险。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2**3189帐户回款231234元。',
date: '2023-01-01'
}
]
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: true,
readOnly: true
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['回复率']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '条',
min: 1,
max: 120,
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '条数',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + '条'
}
},
data: [
60, 50, 40, 50, 54, 62, 45
]
}
]
})
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: true
},
// 下载图标
saveAsImage: {
show: true
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '风险种类',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 6
},
data: [
{
'value': 8,
'name': '自然风险'
},
{
'value': 9,
'name': '社会风险'
},
{
'value': 10,
'name': '经济风险'
},
{
'value': 11,
'name': '政治风险'
}
]
}]
})
}
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

17468
warehousing-system/project_web/package-lock.json
View File

File diff suppressed because it is too large

3
warehousing-system/project_web/package.json
View File

@ -32,7 +32,8 @@
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1",
"sass-loader": "^13.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^10.1.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11"
}

BIN
warehousing-system/project_web/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
warehousing-system/project_web/src/router/index.js
View File

@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Index from '../views/index8.vue'
import Product from '../components/initial_value/product.vue'
import Storehouse from '../components/initial_value/storehouse.vue'
import Supplier from '../components/initial_value/supplier.vue'
@ -32,8 +33,9 @@ const routes = [
{
path: '/home',
component: Home,
redirect: '/product',
redirect: '/index',
children: [
{ path: '/index', component: Index },
{ path: '/product', component: Product },
{ path: '/storehouse', component: Storehouse },
{ path: '/supplier', component: Supplier },

427
warehousing-system/project_web/src/views/index8.vue
View File

@ -0,0 +1,427 @@
<template>
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
</div>
<!-- <div class="index_top_right">{{ info.notice }}</div> -->
</div>
<div class="index_bottom">
<div style="flex: 0.1;"></div>
</div>
<div class="index_content">
<div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">506</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">供应商</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">121</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">仓库</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">624</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">商品种类</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">￥50905.96</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">货区价值</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
</div>
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">商品统计</span>
<div id="main1" ref="main1" class="middle">
</div>
</div>
<div style="flex: 0.1;"></div>
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">仓库分区占比</span>
<div id="main2" ref="main2" class="middle">
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import * as echarts from 'echarts';
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: "",
notice: "通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]"
},
newMessageList: [{
sid: "1",
name: "[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正",
date: "2023-06-12"
}, {
sid: "2",
name: "[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正",
date: "2023-06-12"
}, {
sid: "3",
name: "[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正",
date: "2023-06-12"
}, {
sid: "4",
name: "[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正",
date: "2023-06-12"
}],
larmCenterList: [{
sid: "1",
name: "[岗位调整]由2023年6月12号起， 聂风 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}, {
sid: "2",
name: "[岗位调整]由2023年6月12号起， 冷拧 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}, {
sid: "3",
name: "[岗位调整]由2023年6月12号起， 冷枫 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}, {
sid: "4",
name: "[岗位调整]由2023年6月12号起， 邹好好 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}
]
}
},
mounted() {
this.drawLine1();
this.drawLine2();
},
methods: {
show() {
this.drawLine1();
this.drawLine2();
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['出库商品', '入库商品']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '个数/个',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '出库商品',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 个';
}
},
data: [
20, 20, 20, 20, 60, 70, 90
]
},
{
name: '入库商品',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 个';
}
},
data: [
30, 30, 30, 50, 50, 50, 60
]
},
]
});
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'));
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: "item"
},
series: [{
name: '仓库分区占比',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
"value": 20,
"name": "河北仓库"
},
{
"value": 15,
"name": "北京仓库"
},
{
"value": 30,
"name": "天津仓库"
},
{
"value": 20,
"name": "东北仓库"
}
]
}]
})
},
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

1
yxt-portal-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "0.18.1",
"bpmn-js": "^9.2.2",
"core-js": "^3.19.3",
"echarts": "^5.4.2",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",

BIN
yxt-portal-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

409
yxt-portal-ui/src/views/index.vue
View File

@ -1,47 +1,398 @@
<template>
<div class="imgDemo">
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
</div>
<div class="index_content">
<div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">13</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">角色分类</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">121</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">功能数量</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">624</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">组织职员</span>
</div>
</div>
</div>
<div style="flex: 0.3;"></div>
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">509</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">组织资源</span>
</div>
</div>
</div>
</div>
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">工作流数量统计</span>
<div id="main1" ref="main1" class="middle">
</div>
</div>
<div style="flex: 0.1;"></div>
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">角色占比</span>
<div id="main2" ref="main2" class="middle">
</div>
</div>
</div>
</div>
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
import * as echarts from 'echarts';
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: "",
notice: "通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]"
},
newMessageList: [{
sid: "1",
name: "[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正",
date: "2023-06-12"
}, {
sid: "2",
name: "[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正",
date: "2023-06-12"
}, {
sid: "3",
name: "[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正",
date: "2023-06-12"
}, {
sid: "4",
name: "[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正",
date: "2023-06-12"
}],
larmCenterList: [{
sid: "1",
name: "[岗位调整]由2023年6月12号起， 聂风 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}, {
sid: "2",
name: "[岗位调整]由2023年6月12号起， 冷拧 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
export default {
name: '',
data() {
return {
token: ''
}, {
sid: "3",
name: "[岗位调整]由2023年6月12号起， 冷枫 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}, {
sid: "4",
name: "[岗位调整]由2023年6月12号起， 邹好好 由原岗位调动至采购部岗位工作",
date: "2023-06-12"
}
},
methods: {
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
]
}
},
mounted() {
this.drawLine1();
this.drawLine2();
},
methods: {
show() {
this.drawLine1();
this.drawLine2();
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['工作流数量']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '个数/个',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '工作流数量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 个';
}
},
data: [
20, 20, 20, 20, 60, 70, 90
]
}
]
});
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'));
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: "item"
},
series: [{
name: '角色占比',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
"value": 20,
"name": "超级管理员"
},
{
"value": 15,
"name": "客户管理员"
},
{
"value": 30,
"name": "普通管理员"
},
{
"value": 20,
"name": "普通用户"
}
]
}]
})
},
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
canvas {
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

1
yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0",
"bpmn-js": "^9.2.2",
"core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4",
"element-ui": "^2.15.6",
"js-cookie": "2.2.0",

BIN
yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

388
yxt_supervise/supervise-dispatchcenter/supervise-dispatchcenter-ui/src/views/index.vue
View File

@ -1,33 +1,317 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
<!-- <div class="index_top_right">{{info.notice}}</div> -->
</div>
<div class="index_content">
<div class="index_content_top">
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">506</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">客户信息</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">121</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">仓库</span>
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">624</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">运维任务</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
<div style="flex: 0.3;" />
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
<div style="display: flex;flex-direction: column; margin-left: 10px;">
<span style="font-size: 20px;">509</span>
<div style="margin-top: 10px;">
<span style="font-size: 14px;color: #999;">工单运维</span>
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
</div>
</div>
</div>
</div>
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">运维统计</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">工作占比</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
</div>
</template>
</div>
<script>
import {login1} from '@/api/system/user/login.js'
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token:''
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[消息]您的订单已经审核完毕等待放款。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '仓库于2023年3月3日产生1级风险。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2**3189帐户回款231234元。',
date: '2023-01-01'
}
]
}
},
methods:{
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: false,
readOnly: false
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['运维任务']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '任务/次',
min: 0,
max: 90,
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '运维任务',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 次'
}
},
data: [
69, 71, 52, 28, 61, 32, 52
]
}
]
})
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '工作占比',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
'value': 30,
'name': '已完成巡视'
},
{
'value': 30,
'name': '运维任务'
},
{
'value': 40,
'name': '工单任务'
}
]
}]
})
}
}
}
</script>
@ -36,8 +320,70 @@
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff);
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
canvas {
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

Write Preview
Loading…
Cancel
Save