chore: 初始化北汽福田看板前端项目

This commit is contained in:
yexingqiang
2026-05-29 13:44:02 +08:00
commit 907a0103f8
40 changed files with 6316 additions and 0 deletions

3
.env.development Normal file
View File

@@ -0,0 +1,3 @@
ENV = 'development'
VITE_BASE_URL = 'http://localhost:10081'
VITE_CONFIG_URL = './public/config.js'

3
.env.production Normal file
View File

@@ -0,0 +1,3 @@
ENV = 'production'
VITE_BASE_URL = 'http://127.0.0.1:10081'
VITE_CONFIG_URL = './config.js'

70
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,70 @@
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
env: {
browser: true,
node: true,
es6: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'vue/no-setup-props-destructure': 'off',
'vue/script-setup-uses-vars': 'error',
'vue/no-reserved-component-names': 'off',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'no-unused-vars': 'off',
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always'
},
svg: 'always',
math: 'always'
}
],
'vue/multi-word-component-names': 'off',
'vue/no-v-html': 'off',
'vue/require-toggle-inside-transition': 'off'
}
})

26
.gitignore vendored Normal file
View File

@@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.zip
*.local
vite.config.js.timestamp-*.mjs
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

20
index.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="/vite.svg" rel="icon" type="image/svg+xml" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>生产看板</title>
<script type="text/javascript">
document.write("<script src='/public/config.js?v=" + new Date().getTime() + "'><\/script>");
</script>
</head>
<body>
<div id="app"></div>
<script src="/src/main.js" type="module"></script>
</body>
</html>

3818
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "vue3-view",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@vant/compat": "^1.0.1",
"axios": "^1.7.7",
"element-plus": "^2.8.6",
"js-cookie": "^3.0.5",
"path": "^0.12.7",
"pinia": "^2.2.5",
"rollup-plugin-copy": "^3.5.0",
"tdesign-vue-next": "^1.10.3",
"vue": "^3.5.12",
"vue-clock2": "^1.1.5",
"vue-cookies": "^1.8.4",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"sass": "^1.80.5",
"vite": "^5.4.10"
}
}

19
prettier.config.js Normal file
View File

@@ -0,0 +1,19 @@
export default {
printWidth: 100, // 一行最多多少字符
tabWidth: 2, // 缩进的宽度2 个空格
useTabs: false, // 是否使用制表符,不使用制表符,使用空格
semi: false, // 语句结尾是否使用分号
bracketSpacing: true, // 大括号 {} 中开始和结束是否要空格true — { foo: 1 }false — {foo: 1}
trailingComma: 'none', // 数组或对象或参数的最后一项是否尾随逗号none — 没有尾随逗号all — 尽可能使用尾随逗号es5 — 在 ES5 中有效的尾随逗号对象、数组等TypeScript 和 Flow 类型参数中的尾随逗号。
arrowParens: 'always', // 只有一个参数的箭头函数是否带括号always — 始终带括号avoid — 不带括号
proseWrap: 'always', // 什么对代码进行折行always — 如果超过 printWidth 指定的一行最多字符宽度则进行折行never — 将每块代码块展开成一行preserve — 什么都不做,保持原样。
htmlWhitespaceSensitivity: 'strict', // 根据显示样式决定 html 要不要折行
endOfLine: 'auto', // 每行的结束符(回车符、换行符),取值请参考 https://www.prettier.cn/docs/options.html#end-of-line
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的@prettier
requirePragma: false,
// 不需要自动在文件开头插入@prettier
insertPragma: false,
}

BIN
public/TopLogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

3
public/config.js Normal file
View File

@@ -0,0 +1,3 @@
window.g = {
API_WEB_URL: 'http://localhost:10030',
};

1
public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

56
src/App.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<t-loading :loading="isLoading" size="large" text="加载中(大)...">
<router-view/>
</t-loading>
</template>
<script setup>
import {useAppStore} from "@/store/app.js";
import {storeToRefs} from "pinia";
const store = useAppStore();
// storeToRefs 响应式解构赋值 pinia
const {isLoading} = storeToRefs(store);
</script>
<style lang="scss">
// 定义的全局变量
body {
margin: 0px;
}
/*修改提示框样式 更醒目*/
.el-message-box {
// 标题
.el-message-box__title {
font-size: 35px;
font-weight: 700;
color: rgb(255, 143, 0);
}
// 提示文本
.el-message-box__message p {
font-size: 24px;
line-height: 40px;
}
// icon图标
.el-message-box__status {
font-size: 40px;
}
.el-message-box__btns {
justify-content: space-evenly;
.el-button {
width: 48%;
height: 6vh;
font-size: 1.6rem;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/font/DS-DIGI.TTF Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

4
src/assets/font/font.css Normal file
View File

@@ -0,0 +1,4 @@
@font-face{
font-family:electronicFont;
src:url(./DS-DIGIT.TTF)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

BIN
src/assets/image/Robot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

BIN
src/assets/image/image4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 329 B

View File

@@ -0,0 +1,50 @@
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
<el-button type="primary">21321312</el-button>
<t-button disabled loading>确定</t-button>
<t-button variant="dashed" ghost>幽灵按钮</t-button>
<icon name="cps-icon-home-sheep" url="https://tdesign.gtimg.com/icon/default-demo/index.js" size="2em" />
123
</template>
<script setup>
import { ref } from 'vue'
import { Icon } from 'tdesign-icons-vue-next';
defineProps({
msg: String,
})
const count = ref(0)
</script>
<style lang="scss" scoped>
.read-the-docs {
color: #888;
}
</style>

47
src/main.js Normal file
View File

@@ -0,0 +1,47 @@
import {createApp} from 'vue'
import App from './App.vue'
//ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// TDesign
import TDesign from 'tdesign-vue-next'
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css'
// pinia
import {createPinia} from 'pinia'
//router
import router from './router/index.js'
//crud
import curdVue3 from './utils/curdVue3'
// el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 提供全局方法
app.use(ElementPlus, {
locale: zhCn,
})
app.use(TDesign)
const pinia = createPinia() // 创建 Pinia 实例
app.use(pinia)
app.use(curdVue3)
app.use(router)
app.provide('CreateData', app.config.globalProperties.CreateData)
app.provide('ExecDatabase', app.config.globalProperties.ExecDatabase)
app.provide('ExecDatabaseByParam', app.config.globalProperties.ExecDatabaseByParam)
// app.provide('ExecWritePLC', app.config.globalProperties.ExecWritePLC)
// app.provide('ExecReadPLC', app.config.globalProperties.ExecReadPLC)
// app.provide('ExecIMESAPI', app.config.globalProperties.ExecIMESAPI)
app.mount('#app')
// useRouteGuard(); // 使用路由守卫

27
src/router/index.js Normal file
View File

@@ -0,0 +1,27 @@
import {createRouter, createWebHashHistory} from "vue-router";
// cookies
// 创建routes
const routes = [
{
// 重定向
path: "/home",
redirect: "/",
},
{
//前台首页
path: "/",
name: "root",
component: () => import("@/views/index.vue"),
children: [],
}
];
//History路由模型
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes,
});
export default router;

View File

@@ -0,0 +1,76 @@
import { inject } from 'vue';
import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";
import Cookies from "vue-cookies";
export function useRouteGuard() {
const router = useRouter();
const CreateData = inject('CreateData');
const ExecDatabase = inject('ExecDatabase');
let userId = Cookies.get('userId')
// 防止首次或者刷新界面路由失效
let registerRouteFresh = true
router.beforeEach(async (to, from, next) => {
if (registerRouteFresh) {
if(userId !== ''){
// 获取权限列表
var param = []
param[0] = ['userId', userId]
var Data = CreateData('11', '基础表_权限模块_查询', param)
ExecDatabase(Data).then(response => {
if(response.data.length > 0){
routerData.value.userRouterList = response.data
// 创建动态路由列表
const dynamicRoutes = dynamicRouter(response.data);
dynamicRoutes.forEach((route) => {
// 检查是否已存在该路由,避免重复添加
if (!router.hasRoute(route.name)) {
router.addRoute('root', route);
}
});
}else{
ElMessage.warning('该角色未分配角色模块,请先进行分配!')
}
next({ ...to, replace: true })
registerRouteFresh = false
})
}else{
next({ ...to, replace: true })
registerRouteFresh = false
}
} else {
if (to.meta.title) {
window.document.title = to.meta.title;
}
next()
}
})
// 递归替换引入component
function dynamicRouter(routerList) {
const list = [];
routerList.forEach((route) => {
const routeItem = {
path: '/' + route.path,
name:route.path,
meta: {
title: route.权限模块,
},
component: async () => {
try {
const component = await import(`@/views/${route.path}/index.vue`);
console.log(component)
return component.default || component;
} catch (error) {
console.error('引入路由组件失败,请确认地址是否配置正确:', error);
return null;
}
},
};
list.push(routeItem);
});
return list;
}
}

28
src/store/app.js Normal file
View File

@@ -0,0 +1,28 @@
import {defineStore} from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useAppStore = defineStore('AppData', {
// 其它配置项
state: () => {
return {
user: {
AID: '',
name: '',
classes: '',
teamGroup: '',
role: '',
userName: '',
password: '',
opName: '',
},
isLoading: false,
routerData: {
userRouterList: [],
nowRouterPath: '',
nowRouterTitle: '',
selected: false,
},
};
},
})

15
src/utils/auth.js Normal file
View File

@@ -0,0 +1,15 @@
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}

435
src/utils/curd.js Normal file
View File

@@ -0,0 +1,435 @@
import { ExcelDownLoad } from '@/utils/request'
import request from '@/utils/request'
import Cookie from 'js-cookie'
import { type } from './tool' // type判断传入值的类型比typeof更详细
export default {
exportExcel_NPOI(param) {
console.log(param, 1)
download(`${ExcelDownLoad}?param=${param}`)
},
// 用于生成传通讯服务器参数。
// 传入参数
// 1type11查询12增删改必须
// 2name存储过程名必须
// 3data存储过程参数名和对应值例如
// param[0] = ['工艺计划流水号', this.工艺计划流水号] 输入参数
// param[1] = ['PageCurrent', '1111', 'int', '1'] output参数
// 数组里四个分别对应存储过程参数名必须存储过程参数值必须参数类型若是output必须参数是否为output0否1是
// 4pageSizepageList分页使用可选
CreateData(type, name, data, pageSize, pageList) {
var param_Str = ''
var param_array = []
if (type === '7') {
data.map(v => {
pageSize.map(h => {
const val = h.toString()
if (!v[val]) {
this.$set(v, val, '')
}
})
})
param_Str = data
} else {
if (data !== undefined) {
for (let i = 0; i < data.length; i++) {
param_array.push({
name: data[i][0],
value: data[i][1],
type: data[i][2],
output: data[i][3]
})
}
param_Str = JSON.stringify(param_array)
}
}
var obj = []
obj[0] = {}
obj[0].type = type
obj[0].name = name
obj[0].param = param_Str
obj[0].pageSize = pageSize
obj[0].pageList = pageList
obj[0].UserID = Cookie.get('username')
obj[0].ModularID = ''//this.$router.currentRoute.path
console.log(obj[0], 'obj[0]')
var numn = JSON.stringify(obj[0])
return numn
},
// 新通讯11/12---<
ExecDatabase(data) {
return request({
url: '',
method: 'post',
data: data
})
},
// 高精原CreateData
// Vue.prototype.CreateData = function(type, name, data, pageSize, pageList) {
// var paramStr = ''
// var paramarray = []
// if (data !== undefined) {
// for (let i = 0; i < data.length; i++) {
// paramarray.push({
// name: data[i][0],
// value: data[i][1],
// type: data[i][2],
// output: data[i][3]
// })
// }
// paramStr = JSON.stringify(paramarray)
// }
// var obj = []
// obj[0] = {}
// obj[0].type = type
// obj[0].name = name
// obj[0].param = paramStr
// obj[0].pageSize = pageSize
// obj[0].pageList = pageList
// var numn = JSON.stringify(obj[0])
// return numn
// }
// 用于打开增加框,方法能重置表单,并使表单内容回到初始化状态。
// 传入参数
// 1表单名称字符串形式如'form',必须
// 2) 打开表单后需要做什么,可以传数组[this.dialogvisiale = false fetchData],也可以传回调函数function() { this.dialogvisiale = false } 可选
addForm(form, callback) {
if (type(form) === 'string') {
if (this.$refs[form]) { // 判断是否需要重置表单,如果需要重置表单
this.$refs[form].resetFields()
}
if (type(callback) === 'array') { // 判断传入是否为数组,如果是遍历数组,遇到函数将函数体变成函数执行,其余正常执行
if (callback && callback.length !== 0) {
for (let i = 0, len = callback.length; i < len; i++) {
typeof callback[i] === 'function' ? callback[i]() : callback[i]
}
}
} else if (type(callback) === 'function') { // 判断传入是否为回调函数
callback.call(this) // 回调函数执行需将this改为该组件
}
this[form] = Object.assign(this.$data[form], this.$options.data()[form]) // 将表单中的数据变为初始状态。其中,this.$options.data是所有初始化的数据this.$data是目前的数据
} else {
console.error('传入参数错误')
}
},
// 用于打开编辑框,方法能自动传入行的数据到对应的表单中,并将表单中所有纯数字转成int。前提是行的名称需跟表单名称一样。
// 传入参数
// 1) 编辑这一行的row
// 2表单名称字符串形式如'form'
// 3) 打开编辑需要做什么,同样是[] 和 function
editForm(row, form, callback) {
if (type(row) === 'object' && type(form) === 'string') {
if (this.$refs[form]) { // 判断是否需要重置表单
this.$refs[form].resetFields()
}
const isNum = /^[0-9]+$/ // 正则表达式,是否全都为纯数字
for (const prop in this[form]) { // 遍历表单当表单和row中属性名一样时表单row中的属性赋值给form
isNum.lastIndex = 0 // 正则每一次匹配后的索引归0否则循环会造成问题
isNum.exec(row[prop]) ? this[form][prop] = parseInt(row[prop]) : this[form][prop] = row[prop] // 通过正则匹配数字当匹配成功后将字符串转为int。当然你也不用担心空转成NaN,因为''匹配通不过!
}
if (type(callback) === 'array') { // 这部分处理与打开表单相同
if (callback && callback.length !== 0) {
for (let i = 0, len = callback.length; i < len; i++) {
typeof callback[i] === 'function' ? callback[i]() : callback[i]
}
}
} else if (type(callback) === 'function') {
callback.call(this)
}
} else {
console.error('传入参数错误')
}
},
// 用于获取下拉框中的数据
// 传入参数
// 1请求数据函数引用如getXXX必须
// 2数组的实行名称['XXXX名称', 'XXXX代码'],必须
// 3需要用哪个数组接收这个结果字符串形式。如在组件也需要用this.select,传入值就为'select',必须
// 4) 请求函数传入的参数,可选
getSelect(requestData, select, carrier, param) {
if (type(requestData) === 'function' && type(select) === 'array' && type(carrier) === 'string') {
if (type(param) === 'array') {
requestData(...param).then(response => { // 这个方法没什么难度,不注释了
this[carrier] = []
for (let i = 0, len = response.data.length; i < len; i++) {
if (select.length === 2) {
this[carrier].push({
label: response.data[i][select[0]],
value: response.data[i][select[1]]
})
} else {
this[carrier].push({
value: response.data[i][select[0]]
})
}
}
})
} else {
requestData(param).then(response => { // 这个方法没什么难度,不注释了
this[carrier] = []
for (let i = 0, len = response.data.length; i < len; i++) {
if (select.length === 2) {
this[carrier].push({
label: response.data[i][select[0]],
value: response.data[i][select[1]]
})
} else {
this[carrier].push({
value: response.data[i][select[0]]
})
}
}
})
}
} else {
console.error('参数传递错误')
}
},
// 普通获取数据
// 传入参数
// 1) 请求数据函数引用如getXXX必须
// 2) 需要用哪个数组接收这个结果字符串形式。如在组件也需要用this.select,传入值就为'select',必须
// 3) 请求函数传入的参数,可选
getData(requestData, carrier, param) {
if (type(requestData) === 'function' && type(carrier) === 'string') {
if (type(param) === 'undefined') {
requestData(param).then(response => {
const data = response.data
this[carrier] = data
})
} else {
let Param = []
if (type(param) !== 'array') {
Param.push(param)
} else {
Param = param
}
requestData(...Param).then(response => {
const data = response.data
this[carrier] = data
})
}
} else {
console.error('传入参数错误')
}
},
// 获取表格数据,将表格中的年月日时分秒,转换成年月日
// 传入参数
// 1请求数据函数引用如getXXX必须
// 2请求的参数可选
// 3接受值数组一般是['table','total','loading']顺序不能变
getTable(requestData, param, e) {
requestData(...param).then(response => {
const data = response.data.rows
this[e[0]] = []
this[e[1]] = 0
if (data && data.length > 0) {
const isTime = /^\d{4}([-\/.])\d{1,2}\1\d{1,2}/ // 判断是否是时间的正则表达式
for (let i = 0, len = data.length; i < len; i++) { // 循环得到每一条数据
for (const prop in data[i]) { // 循环每一条的每一项
isTime.lastIndex = 0 // 正则每一次指针复位
if (isTime.test(data[i][prop])) { // 判断是否是时间,如果是切割
data[i][prop] = data[i][prop].split(' ')[0]
}
}
}
this[e[0]] = data
this[e[1]] = parseInt(response.data.total)
} else {
this[e[0]] = []
// console.log('暂无数据')
}
}).then(() => {
this[e[2]] = false
})
},
// 添加表格数据
// 传入参数
// 1) 请求数据函数引用如getXXX必须
// 2) 请求的参数,可选
// 3) 验证的表单名称,必须
// 4) 回调函数,必须
addTable(requestData, param, form, callback) {
if (type(callback) === 'function' && type(requestData) === 'function' && type(form) === 'string') {
console.log(this.$refs[form])
this.$refs[form].validate((valid) => {
console.log(valid)
if (valid) {
requestData(...param).then(response => {
if (response.data[0].result === '1') {
this.$message.success('增加成功')
callback.call(this)
} else { this.$message.error('增加失败') }
})
} else {
console.error('error submit!!')
return false
}
})
} else {
console.error('参数传递错误')
}
},
// 编辑表格数据
// 传入参数
// 1) 请求数据函数引用如getXXX必须
// 2) 请求的参数,可选
// 3) 验证的表单名称,必须
// 4) 回调函数,必须
editTable(requestData, param, form, callback) {
if (type(callback) === 'function' && type(requestData) === 'function' && type(form) === 'string') {
this.$refs[form].validate((valid) => {
if (valid) {
requestData(...param).then(response => {
if (response.data[0].result === '1') {
this.$message.success('修改成功')
callback.call(this) // 回调函数修正this指向组件本身
} else { this.$message.error('修改失败') }
})
} else {
console.error('error submit!!')
return false
}
})
} else {
console.error('参数传递错误')
}
},
// 删除表格数据
// 传入参数
// 1) 请求数据函数引用如getXXX必须
// 2) id传入删除条件必须
// 3) 回调函数,必须
deleteRow(requestData, id, callback) {
if (type(callback) === 'function' && type(requestData) === 'function') {
if (this.tableData && this.tableData.length === 1 && this.pageCurrent > 1) { // 判断删除的是否是最后一页最后一行,如果是且不是第一页,页数减一
this.pageCurrent--
}
this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
requestData(id).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
callback.call(this) // 回调函数修正this指向组件本身
} else { this.$message.error('数据占用') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
} else {
console.error('参数传递错误')
}
},
// 设置字段宽度
setColumnWidth(str) {
let columnWidth = 0
if (str === '日期') {
columnWidth = 90
} else if (str === '订单编号' || str === '领料单号' || str === '调拨单号' || str === '订单号' || str === '机床名称') {
columnWidth = 140
} else if (str === '合同编号' || str === '补货单号') {
columnWidth = 140
} else if (str === '产品名称' || str === '部件名称') {
columnWidth = 110
} else if (str === '序号') {
columnWidth = 60
} else if (str === '单位') {
columnWidth = 60
} else if (str === '数量' || str === '库存') {
columnWidth = 80
} else if (str === '单价') {
columnWidth = 90
} else if (str === '金额') {
columnWidth = 120
} else if (str === '状态' || str === '类型' || str === '选入' || str === '选出') {
columnWidth = 80
} else if (str === '付款方式') {
columnWidth = 100
} else if (str === '买方' || str === '买方名称') {
columnWidth = 150
} else if (str === '外协厂家' || str === '调入仓库' || str === '调出仓库') {
columnWidth = 150
} else if (str === '姓名') {
columnWidth = 80
} else if (str === '日期时间') {
columnWidth = 140
} else if (str === '工序') {
columnWidth = 80
} else if (str === '物料名称' || str === '工件名称' || str === '零件名称') {
columnWidth = 140
} else if (str === '图号或型号' || str === '规格' || str === '零件图号' || str === '图号' || str === '图号/型号') {
columnWidth = 120
} else if (str === '物料编码' || str === '物料编号') {
columnWidth = 120
} else if (str === '材料') {
columnWidth = 80
} else if (str === '仓位' || str === '库位') {
columnWidth = 90
} else if (str === '品名/规格/型号') {
columnWidth = 140
} else if (str === '备注') {
columnWidth = 120
} else if (str === '工序名称') {
columnWidth = 150
} else if (str === '工序说明') {
columnWidth = 300
} else if (str === '加工工时M' || str === '加工时长H' || str === '加工时长M') {
columnWidth = 90
} else if (str === '加工设备') {
columnWidth = 130
} else if (str === '产品详情' || str === '详情') {
columnWidth = 340
} else if (str === '最低库存') {
columnWidth = 110
} else if (str === '本次到货数' || str === '本次入库' || str === '补货数') {
columnWidth = 100
} else {
columnWidth = 110
}
return columnWidth
}
}
function download(url) {
getBlob(url, function(blob, filename) {
console.log(blob, filename, 2)
saveAs(blob, filename)
})
}
function getBlob(url, cb) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (xhr.status === 200) {
const name = xhr.getResponseHeader('content-disposition').split('=')[1]
var filename = decodeURIComponent(name)
cb(xhr.response, filename)
}
}
xhr.send()
}
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
var link = document.createElement('a')
var body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
// fix Firefox
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
}

133
src/utils/curdVue3.js Normal file
View File

@@ -0,0 +1,133 @@
import request from '@/utils/request'
import Cookie from 'js-cookie'
export default {
install(app) {
app.config.globalProperties.CreateData = function (type, name, data, pageSize, pageList) {
var param_Str = ''
var param_array = []
if (type === '7') {
data.map(v => {
pageSize.map(h => {
const val = h.toString()
if (!v[val]) {
this.$set(v, val, '')
}
})
})
param_Str = data
} else {
if (data !== undefined) {
for (let i = 0; i < data.length; i++) {
param_array.push({
name: data[i][0],
value: data[i][1],
type: data[i][2],
output: data[i][3]
})
}
param_Str = JSON.stringify(param_array)
}
}
var obj = []
obj[0] = {}
obj[0].type = type
obj[0].name = name
obj[0].param = param_Str
obj[0].pageSize = pageSize
obj[0].pageList = pageList
obj[0].UserID = Cookie.get('username')
obj[0].ModularID = ''//this.$router.currentRoute.path
var numn = JSON.stringify(obj[0])
return numn
}
app.config.globalProperties.ExecDatabase = function (data) {
return request({
url: '',
method: 'post',
data: data
})
}
app.config.globalProperties.ExecDatabaseByParam = function (type, name, data, pageSize, pageList) {
var param_Str = ''
var param_array = []
if (type === '7') {
data.map(v => {
pageSize.map(h => {
const val = h.toString()
if (!v[val]) {
this.$set(v, val, '')
}
})
})
param_Str = data
} else {
if (data !== undefined) {
for (let i = 0; i < data.length; i++) {
param_array.push({
name: data[i][0],
value: data[i][1],
type: data[i][2],
output: data[i][3]
})
}
param_Str = JSON.stringify(param_array)
}
}
var obj = []
obj[0] = {}
obj[0].type = type
obj[0].name = name
obj[0].param = param_Str
obj[0].pageSize = pageSize
obj[0].pageList = pageList
obj[0].UserID = Cookie.get('username')
obj[0].ModularID = ''//this.$router.currentRoute.path
var numn = JSON.stringify(obj[0])
return request({
url: '',
method: 'post',
data: numn
})
}
// app.config.globalProperties.ExecWritePLC = function (opName, tagTypeCodeID, value) {
// return request({
// url: window.g.API_MES_URL + '/api/imes/Web_WritePLC',
// method: 'post',
// data: {
// tagTypeCodeID: tagTypeCodeID,
// OPName: opName,
// tagValue: value,
// }
// }).catch(function (error) {
// // 如果接口调用失败,弹出错误弹窗
// ElMessage.error('写入PLC数据接口失败: ' + error.message)
// });
// }
// app.config.globalProperties.ExecReadPLC = function (opName, tagTypeCodeID) {
// return request({
// url: window.g.API_MES_URL + '/api/imes/Web_ReadPLC',
// method: 'post',
// data: {
// tagTypeCodeID: tagTypeCodeID,
// OPName: opName,
// }
// }).catch(function (error) {
// // 如果接口调用失败,弹出错误弹窗
// ElMessage.error('读取PLC数据接口失败: ' + error.message)
// });
// }
// app.config.globalProperties.ExecIMESAPI = function (apiName, param) {
// return request({
// url: window.g.API_MES_URL + '/api/imes/' + apiName,
// method: 'post',
// data: param
// }).catch(function (error) {
// // 如果接口调用失败,弹出错误弹窗
// ElMessage.error('调用MES' + apiName + '接口失败: ' + error.message)
// });
// }
}
}

96
src/utils/index.js Normal file
View File

@@ -0,0 +1,96 @@
/**
* Created by jiachenpan on 16/11/18.
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (('' + time).length === 10) time = parseInt(time) * 1000
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
export function formatTime(time, option) {
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
function zeroFill(i) {
if (i >= 0 && i <= 9) {
return '0' + i
} else {
return i
}
}
export function getNowDAY() { // 默认显示今天
// 获取当前时间
const date = new Date()
const month = zeroFill(date.getMonth() + 1)
const day = zeroFill(date.getDate())
const time = date.getFullYear() + '-' + month + '-' + day
return time
}
export function get90DAY() { // 3个月显示今天
var Data = new Date()
Data.setTime(Data.getTime() - 3600 * 1000 * 24 * 90)
const month = zeroFill(Data.getMonth() + 1)
const day = zeroFill(Data.getDate())
const time = Data.getFullYear() + '-' + month + '-' + day
return time
}

104
src/utils/mqtt.js Normal file
View File

@@ -0,0 +1,104 @@
import { v4 as uuid } from 'uuid'
import mqtt from 'mqtt'
export { Mqtt }
class Mqtt {
constructor(config) {
this.connection = {
host: config.host,
port: config.port,
endpoint: config.endpoint || '/mqtt',
clean: config.clean || true,
connectTimeout: config.connectTimeout || 4000,
reconnectPeriod: config.reconnectPeriod || 4000,
clientId: config.clientId || uuid(),
username: config.username || '',
password: config.password || ''
}
this.client = {
connected: false
}
}
// 创建连接
createConnection() {
// 连接字符串, 通过协议指定使用的连接方式
// ws 未加密 WebSocket 连接
// wss 加密 WebSocket 连接
// mqtt 未加密 TCP 连接
// mqtts 加密 TCP 连接
// wxs 微信小程序连接
// alis 支付宝小程序连接
const { host, port, endpoint, ...options } = this.connection
const connectUrl = `ws://${host}:${port}${endpoint}`
try {
this.client = mqtt.connect(connectUrl, options)
} catch (error) {
// 连接错位、
this.connectError(error)
}
}
connectError(error) {
console.log('mqtt.connect error', error)
}
// 订阅主题
doSubscribe(subscription) {
const { topic, qos } = subscription
let subscribeSuccess = false
this.client.subscribe(topic, { qos }, (error, res) => {
if (error) {
subscribeSuccess = false
console.log('Subscribe to topics error', error)
} else {
subscribeSuccess = true
console.log('Subscribe to topics res', res)
}
})
return subscribeSuccess
}
// 取消订阅
doUnSubscribe(subscription) {
const { topic } = subscription
let unSubscribeSuccess = false
this.client.unsubscribe(topic, error => {
if (error) {
unSubscribeSuccess = false
console.log('Unsubscribe error', error)
} else {
unSubscribeSuccess = true
}
})
return unSubscribeSuccess
}
// 发送消息
doPublish(publish) {
const { topic, qos, payload } = publish
let doPublishSuccess = false
this.client.publish(topic, payload, qos, error => {
if (error) {
doPublishSuccess = false
console.log('Publish error', error)
} else {
doPublishSuccess = true
}
})
return doPublishSuccess
}
// 断开连接
destroyConnection() {
let destroyConnectionSuccess = false
if (this.client.connected) {
try {
this.client.end()
this.client = {
connected: false
}
destroyConnectionSuccess = true
console.log('Successfully disconnected!')
} catch (error) {
destroyConnectionSuccess = false
console.log('Disconnect failed', error.toString())
}
}
return destroyConnectionSuccess
}
}

35
src/utils/request.js Normal file
View File

@@ -0,0 +1,35 @@
import axios from 'axios'
// import store from '@/store'
import {ElMessage} from 'element-plus' // 引入Element Plus的消息提示组件
const name_config = `OP8888`
// import.meta.env.VITE_BASE_URL
console.log(window.g)
const request_config = window.g.API_WEB_URL + `/submit/MESCommonBase.ashx`
export const name = name_config
const service = axios.create({
baseURL: request_config,
timeout: 1000 * 5 // 请求超时时间
})
// && config.data.name !== '菜单系统模块_通知信息_查询数据' && config.data.name !== '菜单系统模块_首页信息_查询数据1' && config.data.name !== '菜单系统模块_首页信息_查询数据2'
service.interceptors.request.use(config => {
return config
}, error => {
if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
ElMessage({
message: '请求超时,请稍后再试。',
type: 'error',
duration: 5000
})
} else {
ElMessage({
message: '请求失败,请稍后再试。',
type: 'error',
duration: 5000
})
}
return Promise.reject(error)
})
export default service

90
src/utils/setMethods.js Normal file
View File

@@ -0,0 +1,90 @@
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
// eslint-disable-next-line
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
// eslint-disable-next-line
return time_str
}
/**
* Parse the json to excel
* tableJson 导出数据 ; filenames导出表的名字; autowidth表格宽度自动 true or false; bookTypes xlsx & csv & txt
* @param {(Object)} tableJson
* @param {string} filenames
* @param {boolean} autowidth
* @param {string} bookTypes
*/
export function json2excel(tableJson, filenames, autowidth, bookTypes) {
import('@/vendor/Export2Excel').then(excel => {
var tHeader = []
var dataArr = []
var sheetnames = []
for (var i in tableJson) {
tHeader.push(tableJson[i].tHeader)
dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
sheetnames.push(tableJson[i].sheetName)
}
console.log(dataArr, 9191)
excel.export_json_to_excel2({
header: tHeader,
data: dataArr,
sheetname: sheetnames,
filename: filenames,
autoWidth: autowidth,
bookType: bookTypes
})
})
}
// 数据过滤,时间过滤
function formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
})
)
}

361
src/utils/tool.js Normal file
View File

@@ -0,0 +1,361 @@
// 数组去重
export function arrayUnique(arr) {
arr.filter((element, index, arr) => {
return arr.indexOf(element) === index
})
}
// 数组去重,数组中值是对象
export function arrayUnique2(arr, name) {
const hash = {}
return arr.reduce(function (item, next) {
hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
return item
}, [])
}
// 时间转时间戳
export function timeToStamp(time) {
const date = new Date(time)
return date.getTime()
}
// 数组的深度拷贝
export function arrDeepCopy(arr) {
const newArr = []
for (const prop in arr) newArr[prop] = typeof arr[prop] === 'object' ? arrDeepCopy(arr[prop]) : arr[prop]
return newArr
}
// 对象的深度拷贝
export function objDeepCopy(obj) {
const newObj = {}
for (const prop in obj) newObj[prop] = typeof obj[prop] === 'object' ? objDeepCopy(obj[prop]) : obj[prop]
return newObj
}
function zeroFill(i) {
if (i >= 0 && i <= 9) {
return '0' + i
} else {
return i
}
}
// 获取当前时间(yyyy-mm-dd hh:mm:ss)
export function getNowTime() {
const date = new Date()
const month = zeroFill(date.getMonth() + 1)
const day = zeroFill(date.getDate())
const hour = zeroFill(date.getHours())
const minute = zeroFill(date.getMinutes())
const second = zeroFill(date.getSeconds())
const time = date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
return time
}
export function getNowTime2() {
const date66 = new Date()
const month66 = zeroFill(date66.getMonth() + 1)
const day66 = zeroFill(date66.getDate())
const date = date66.getFullYear() + '-' + month66 + '-' + day66
// var date = '2019-3-31'
var arr = date.split('-')
var year = arr[0] // 获取当前日期的年份
var month = arr[1] // 获取当前日期的月份
var day = arr[2] // 获取当前日期的日
// var days = new Date(year, month, 0)
// days = days.getDate() // 获取当前日期中月的天数
var year2 = year
var month2 = parseInt(month) - 1
if (month2 === 0) {
year2 = parseInt(year2) - 1
month2 = 12
}
var day2 = day
var days2 = new Date(year2, month2, 0)
days2 = days2.getDate()
if (day2 > days2) {
day2 = days2
}
if (month2 < 10) {
month2 = '0' + month2
}
var t2 = year2 + '-' + month2 + '-' + day2
return t2
}
// 获取当前时间(yyyy-mm-dd)
export function getNowShotTime() {
const date = new Date()
const month = zeroFill(date.getMonth() + 1)
const day = zeroFill(date.getDate())
const time = date.getFullYear() + '-' + month + '-' + day
return time
}
// 获取当前时间(yyyy/mm/dd)
export function getNowShotTime1() {
const date = new Date()
const month = zeroFill(date.getMonth() + 1)
const day = zeroFill(date.getDate())
const time = date.getFullYear() + '/' + month + '/' + day
return time
}
// 获取当前0晨
export function getNowTime1() {
const date = new Date()
const month = zeroFill(date.getMonth() + 1)
const year = zeroFill(date.getFullYear())
const day = zeroFill(date.getDate())
let hour = zeroFill(date.getHours())
hour = hour < 10 ? ('0' + hour) : hour
let minute = zeroFill(date.getMinutes())
minute = minute < 10 ? ('0' + minute) : minute
let second = zeroFill(date.getSeconds())
second = second < 10 ? ('0' + second) : second
// const hour = '00'
// const minute = '00'
// const second = '00'
const time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
return time
}
export function getNowTime3(date) {
const month = zeroFill2(date.getMonth() + 1)
const day = zeroFill(date.getDate())
return date.getFullYear() + '-' + month + '-' + day
}
function zeroFill2(i) {
if (i >= 0 && i <= 9) {
if (i === 0) {
return '01'
} else {
return '0' + i
}
} else {
return i
}
}
// 工时统计上个月26-本月25
export function getTime26() {
const date = new Date()
const day = date.getDate()
if (day >= 25) {
var month = zeroFill(date.getMonth() + 1)
if (month === 0) {
month = 12
const day = 26
const time = date.getFullYear() - 1 + '-' + month + '-' + day
return time
} else {
const day = 26
const time = date.getFullYear() + '-' + month + '-' + day
return time
}
} else {
var month2 = zeroFill(date.getMonth() + 1) - 1
if (month2 === 0) {
month2 = 12
const day = 26
const time = date.getFullYear() - 1 + '-' + month2 + '-' + day
return time
} else {
const day = 26
const time = date.getFullYear() + '-' + month2 + '-' + day
return time
}
}
}
export function getTime25() {
const date = new Date()
const day = date.getDate()
if (day >= 25) {
const month = zeroFill(date.getMonth() + 2)
const day2 = 25
const time = date.getFullYear() + '-' + month + '-' + day2
return time
} else {
const month = zeroFill(date.getMonth() + 1)
const day2 = 25
const time = date.getFullYear() + '-' + month + '-' + day2
return time
}
}
// 判断类型
export function type(target) {
const ret = typeof (target)
const template = {
'[object Array]': 'array',
'[object Object]': 'object',
'[object String]': 'string - object',
'[object Number]': 'Number - object',
'[object Boolean]': 'Boolean - object'
}
if (target === null) {
return 'null'
}
if (ret === 'object') {
const str = Object.prototype.toString.call(target)
return template[str]
} else {
return ret
}
}
export function SectionToChinese(section) {
const chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const chnUnitChar = ['', '十', '百', '千']
let strIns = ''
let chnStr = ''
let unitPos = 0
let zero = true
while (section > 0) {
const v = section % 10
if (v === 0) {
if (!zero) {
zero = true
chnStr = chnNumChar[v] + chnStr
}
} else {
zero = false
strIns = chnNumChar[v]
strIns += chnUnitChar[unitPos]
chnStr = strIns + chnStr
}
unitPos++
section = Math.floor(section / 10)
}
return chnStr
}
export function sleep(time) {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
export function groupBy(datas, keys) {
const list = datas || []
const groups = []
const result = []
list.forEach(v => {
const key = {}
keys.forEach(k => {
key[k] = v[k]
})
let group = groups.find(v => {
return v._key === JSON.stringify(key)
})
if (!group) {
group = {
_key: JSON.stringify(key),
key: key
}
groups.push(group)
}
group.data1 = group.data1 || 0
group.key.数量 = group.data1 += v.数量
group.data2 = group.data2 || ''
group.key.机床图号_组号 = group.data2 += (v.机床图号 || '') + '-' + (v.组号 ? v.组号.split('组')[0] : '') + '<br/>'
group.data3 = group.data3 || 0
group.key.合计 = group.data3 += v.合计
})
groups.map(v => {
result.push(v.key)
})
return result
}
// 去除js浮点加法bug
export function numAdd(arg1, arg2) {
var r1, r2, m
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
// 去除js浮点减法bug
export function numSubtract(arg1, arg2) {
var r1, r2, m, n
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
n = (r1 >= r2) ? r1 : r2
return ((arg1 * m - arg2 * m) / m).toFixed(n)
}
// 去除js浮点乘法bug
export function numMultiply(arg1, arg2) {
var m = 0
var s1 = arg1.toString()
var s2 = arg2.toString()
try {
m += s1.split('.')[1].length
} catch (e) {
console.log(e)
}
try {
m += s2.split('.')[1].length
} catch (e) {
console.log(e)
}
return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
}
// 去除js浮点除法bug
export function numDivide(arg1, arg2) {
var t1 = 0
var t2 = 0
var r1, r2
try {
t1 = arg1.toString().split('.')[1].length
} catch (e) {
console.log(e)
}
try {
t2 = arg2.toString().split('.')[1].length
} catch (e) {
console.log(e)
}
r1 = Math.Number(arg1.toString().replace('.', ''))
r2 = Math.Number(arg2.toString().replace('.', ''))
return (r1 / r2) * Math.pow(10, t2 - t1)
}
export function base64ImgtoFile(dataurl, filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}

32
src/utils/validate.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* Created by jiachenpan on 16/11/18.
*/
export function isvalidUsername(str) {
const user = /^[0-9]{5,7}$/
return true
}
/* 合法uri*/
export function validateURL(textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母*/
export function validateLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母*/
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}

248
src/views/404.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img
class="pic-404__parent"
src="@/assets/404_images/404.png"
alt="404"
/>
<img
class="pic-404__child left"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child mid"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child right"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">
版权所有
<a class="link-type" href="https://wallstreetcn.com" target="_blank"
>华尔街见闻</a
>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">
请检查您输入的网址是否正确请点击以下按钮返回主页或者发送错误报告
</div>
<a href="/" class="bullshit__return-home">返回首页</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Page404",
computed: {
message() {
return "网管说这个页面你不能进......";
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404-container {
transform: translate(-50%, -50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>

434
src/views/index.vue Normal file
View File

@@ -0,0 +1,434 @@
<template>
<div class="container"
:style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
<div class="topBar">
<div style="color: #e5ff00;font-size: 60px;">装配线生产进度</div>
<div style="display: flex;margin: 20px 0;">
<div class="name">今日计划</div>
<div class="value">{{ GJData.今日计划 }}</div>
<div class="name">&nbsp;&nbsp;&nbsp;&nbsp;总装上线</div>
<div class="value">{{ GJData.总装上线 }}</div>
<div class="name">&nbsp;&nbsp;&nbsp;&nbsp;超欠产</div>
<div class="value">{{ GJData.超欠产 }}</div>
</div>
<div style="display: flex;">
<div class="name">当前/标准JPH</div>
<div class="value">{{ GJData.当前JPH }} /{{ GJData.标准JPH }}</div>
<div class="name">&nbsp;&nbsp;&nbsp;&nbsp;装配下线/完工</div>
<div class="value">{{ GJData.总装下线 }}</div>
</div>
</div>
<div class="datetime">
<div class="time-text">
{{ nowDateTime.year + '/' + nowDateTime.month + '/' + nowDateTime.day }} <br>
{{ nowDateTime.hour + ':' + nowDateTime.minute + ':' + nowDateTime.second }} <br>
{{ nowDateTime.dayOfWeek }}
</div>
<div class="clock-wrapper">
<svg class="clock" viewBox="0 0 100 100">
<!-- 时钟外圈 -->
<circle class="clock-face" cx="50" cy="50" r="45" />
<!-- 时钟刻度 -->
<template v-for="n in 12" :key="n">
<line
class="hour-mark"
:x1="50 + 40 * Math.sin((n * 30 * Math.PI) / 180)"
:y1="50 - 40 * Math.cos((n * 30 * Math.PI) / 180)"
:x2="50 + 35 * Math.sin((n * 30 * Math.PI) / 180)"
:y2="50 - 35 * Math.cos((n * 30 * Math.PI) / 180)"
/>
</template>
<!-- 时针 -->
<line
class="hour-hand"
x1="50"
y1="50"
:x2="50 + 25 * Math.sin((hourDegrees * Math.PI) / 180)"
:y2="50 - 25 * Math.cos((hourDegrees * Math.PI) / 180)"
/>
<!-- 分针 -->
<line
class="minute-hand"
x1="50"
y1="50"
:x2="50 + 35 * Math.sin((minuteDegrees * Math.PI) / 180)"
:y2="50 - 35 * Math.cos((minuteDegrees * Math.PI) / 180)"
/>
<!-- 秒针 -->
<line
class="second-hand"
x1="50"
y1="50"
:x2="50 + 40 * Math.sin((secondDegrees * Math.PI) / 180)"
:y2="50 - 40 * Math.cos((secondDegrees * Math.PI) / 180)"
/>
<!-- 中心点 -->
<circle class="center-point" cx="50" cy="50" r="2" />
</svg>
</div>
</div>
<div class="table">
<table>
<tr>
<td style="color: #e5ff00;">订单</td>
<td style="color: #e5ff00;">零件号</td>
<td style="color: #e5ff00;">计划数量</td>
<td style="color: #e5ff00;">总装上线</td>
<td style="color: #e5ff00;">总装下线</td>
<td style="color: #e5ff00;">测试上线</td>
<td style="color: #e5ff00;">测试下线</td>
</tr>
<tr v-for="(item, index) in MachineToolList" :key="index">
<td>{{ item.订单号 }}</td>
<td>{{ item.零件号 }}</td>
<td>{{ item.计划数量 }}</td>
<td>{{ item.总装上线 }}</td>
<td>{{ item.总装下线 }}</td>
<td>{{ item.测试上线 }}</td>
<td>{{ item.测试下线 }}</td>
</tr>
</table>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right" style="display: flex;">
<div class="marquee">
<div class="marquee-content">
{{ GJData.滚动消息 }}
</div>
</div>
<div class="name">累计产量:</div>
<div class="value">{{ GJData.累计产量 }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { inject, onMounted, reactive, ref, onUnmounted, computed } from 'vue'
import axios from "axios";
import { ElMessage, ElMessageBox } from 'element-plus'
const ExecDatabaseByParam = inject('ExecDatabaseByParam')
const lineNo = ref('')
const style = reactive({
width: '1920',
height: '1080',
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
})
const nowDateTime = reactive({
year: '',
month: '',
day: '',
hour: '',
minute: '',
second: '',
dayOfWeek: '',
})
const GJData = reactive({
今日计划: '',
总装上线: '',
超欠产: '',
当前JPH: '',
标准JPH: '',
总装上线: '',
累计产量: '',
滚动消息: ''
})
const MachineToolList = reactive([])
var timer1 = null;
var timer2 = null;
onMounted(() => {
setScale()
// echarts图表自适应
window.addEventListener('resize', () => {
setScale()
})
getData()
getData1()
timer1 = setInterval(() => {
getData()
getData1()
}, 1000 * 5)
timer2 = setInterval(() => {
getNowTime()
}, 1000)
})
// 关闭页面销毁定时器
onUnmounted(() => {
clearInterval(timer1)
clearInterval(timer2)
})
const getData1 = async () => {
var param = []
let response = await ExecDatabaseByParam('11', 'TV_生产计划_今日_查询', param)
MachineToolList.length = 0
if (response.data.length >= 0) {
MachineToolList.push(...response.data)
console.log(MachineToolList)
}
}
const getData = async () => {
var param = []
let response = await ExecDatabaseByParam('11', 'TV_关键数据_今日_查询', param)
if (response.data.length > 0) {
GJData.今日计划 = response.data[0].今日计划
GJData.总装上线 = response.data[0].总装上线
GJData.超欠产 = response.data[0].超欠产
GJData.当前JPH = response.data[0].当前JPH
GJData.标准JPH = response.data[0].标准JPH
GJData.总装下线 = response.data[0].总装下线
GJData.累计产量 = response.data[0].累计产量
GJData.滚动消息 = response.data[0].滚动消息
}
}
const getNowTime = () => {
const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const date = new Date()
nowDateTime.year = date.getFullYear()
nowDateTime.month = zeroFill(date.getMonth() + 1)
nowDateTime.day = zeroFill(date.getDate())
nowDateTime.hour = zeroFill(date.getHours())
nowDateTime.minute = zeroFill(date.getMinutes())
nowDateTime.second = zeroFill(date.getSeconds())
nowDateTime.dayOfWeek = weekday[date.getDay()]
function zeroFill(i) {
if (i >= 0 && i <= 9) {
return '0' + i
} else {
return i
}
}
}
const setScale = async () => {
let scale = getScale()
style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
}
const getScale = () => {
const w = window.innerWidth / style.width
const h = window.innerHeight / style.height
return { x: w, y: h }
}
// 计算指针角度
const hourDegrees = computed(() => {
const hours = parseInt(nowDateTime.hour)
const minutes = parseInt(nowDateTime.minute)
return (hours % 12 + minutes / 60) * 30
})
const minuteDegrees = computed(() => {
const minutes = parseInt(nowDateTime.minute)
const seconds = parseInt(nowDateTime.second)
return minutes * 6 + seconds / 10
})
const secondDegrees = computed(() => {
return parseInt(nowDateTime.second) * 6
})
</script>
<style lang="scss" scoped>
* {
font-size: 44px; // 全局默认文字大小
letter-spacing: 1px;
color: #fff;
}
// 晶体管字体
@font-face {
font-family: electronicFont;
src: url('/src/assets/font/DS-DIGI.TTF')
}
// 看板自适应大小
.container {
position: fixed;
left: 50%;
top: 50%;
transition: 0.3s;
transform-origin: 0 0;
// 以上是自适应大小部分 以下自定义部分
background-color: #000002;
}
.topBar {
position: fixed;
top: 100px;
left: 60px;
font-weight: 700;
.name {
color: #dc0000;
}
.value {
color: #4fe2bd;
}
}
.datetime {
position: fixed;
right: 60px;
top: 60px;
display: flex;
align-items: flex-start;
gap: 30px;
z-index: 100;
.time-text {
text-align: center;
color: #dc0000;
font-weight: 700;
font-size: 44px;
}
.clock-wrapper {
position: relative;
width: 180px;
height: 180px;
margin-top: -10px;
}
.clock-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
}
.table {
width: 98%;
margin: 0 auto;
position: fixed;
top: 350px;
left: 20px;
height: 626px;
overflow: auto;
border: 2px solid #dc0000;
table {
width: 100%;
border-collapse: collapse;
text-align: center;
td {
border: 2px solid #dc0000;
color: #28af36;
height: 60px;
font-size: 40px;
}
}
}
.bottom {
position: fixed;
bottom: 20px;
.marquee {
width: 1500px;
}
.name {
margin-left: 20px;
color: #dc0000;
font-weight: 700;
}
.value {
color: #4fe2bd;
font-weight: 700;
}
}
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee-content {
color: #e5ff00 !important;
display: inline-block;
padding-left: 100%;
/* 初始位置 */
animation: marquee 10s linear infinite;
/* 动画名称,持续时间,速度曲线,循环次数 */
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
/* 滚动整个元素宽度 */
}
}
.clock-wrapper {
width: 180px;
height: 180px;
margin-top: -10px;
.clock {
width: 100%;
height: 100%;
}
.clock-face {
fill: transparent;
stroke: #e5ff00;
stroke-width: 2;
}
.hour-mark {
stroke: #e5ff00;
stroke-width: 2;
}
.hour-hand {
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
}
.minute-hand {
stroke: #ffffff;
stroke-width: 2;
stroke-linecap: round;
}
.second-hand {
stroke: #ff0000;
stroke-width: 1;
stroke-linecap: round;
}
.center-point {
fill: #ff0000;
}
}
</style>

48
vite.config.js Normal file
View File

@@ -0,0 +1,48 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from "node:url";
import copy from 'rollup-plugin-copy'
import { resolve } from 'path'
// https://vite.dev/config/
export default defineConfig({
base: './',
plugins: [
vue()
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
define: {
'process.env': {}
},
// 完全禁用默认的 public 目录处理
publicDir: false,
build: {
// 清空输出目录时保留自定义拷贝的文件
emptyOutDir: true,
rollupOptions: {
plugins: [
copy({
targets: [
{
src: 'public/**/*', // 复制整个 public 目录
dest: 'dist/public' // 输出到 dist/public
}
],
hook: 'writeBundle', // 在构建完成后执行
copyOnce: true // 仅拷贝一次
})
]
}
},
})