微调
This commit is contained in:
guanj
@@ -1,298 +1,313 @@
|
||||
import type { AxiosRequestConfig, Method } from 'axios'
|
||||
import axios from 'axios'
|
||||
import { ElLoading, ElMessage, ElNotification, type LoadingOptions } from 'element-plus'
|
||||
import { refreshToken } from '@/api/user-boot/user'
|
||||
import router from '@/router/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { set } from 'lodash'
|
||||
|
||||
window.requests = []
|
||||
window.tokenRefreshing = false
|
||||
const pendingMap = new Map()
|
||||
const loadingInstance: LoadingInstance = {
|
||||
target: null,
|
||||
count: 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据运行环境获取基础请求URL
|
||||
*/
|
||||
export const getUrl = (): string => {
|
||||
return '/api'
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建`Axios`
|
||||
* 默认开启`reductDataFormat(简洁响应)`,返回类型为`ApiPromise`
|
||||
* 关闭`reductDataFormat`,返回类型则为`AxiosPromise`
|
||||
*/
|
||||
function createAxios<Data = any, T = ApiPromise<Data>>(
|
||||
axiosConfig: AxiosRequestConfig,
|
||||
options: Options = {},
|
||||
loading: LoadingOptions = {}
|
||||
): T {
|
||||
const adminInfo = useAdminInfo()
|
||||
|
||||
const Axios = axios.create({
|
||||
baseURL: getUrl(),
|
||||
timeout: 1000 * 60 * 5,
|
||||
headers: {},
|
||||
responseType: 'json'
|
||||
})
|
||||
|
||||
options = Object.assign(
|
||||
{
|
||||
CancelDuplicateRequest: true, // 是否开启取消重复请求, 默认为 true
|
||||
loading: false, // 是否开启loading层效果, 默认为false
|
||||
reductDataFormat: true, // 是否开启简洁的数据结构响应, 默认为true
|
||||
showErrorMessage: true, // 是否开启接口错误信息展示,默认为true
|
||||
showCodeMessage: true, // 是否开启code不为1时的信息提示, 默认为true
|
||||
showSuccessMessage: false, // 是否开启code为1时的信息提示, 默认为false
|
||||
anotherToken: '' // 当前请求使用另外的用户token
|
||||
},
|
||||
options
|
||||
)
|
||||
|
||||
// 请求拦截
|
||||
Axios.interceptors.request.use(
|
||||
config => {
|
||||
// if(config.url?.substring(0, 13)=='/advance-boot'){
|
||||
// config.url=config.url?.slice(13)
|
||||
// config.baseURL='/hzj'
|
||||
// }
|
||||
// 取消重复请求
|
||||
|
||||
if (
|
||||
!(
|
||||
config.url == '/system-boot/file/upload' ||
|
||||
config.url == '/harmonic-boot/grid/getAssessOverview' ||
|
||||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData'
|
||||
)
|
||||
)
|
||||
removePending(config)
|
||||
|
||||
options.CancelDuplicateRequest && addPending(config)
|
||||
// 创建loading实例
|
||||
if (options.loading) {
|
||||
loadingInstance.count++
|
||||
if (loadingInstance.count === 1) {
|
||||
loadingInstance.target = ElLoading.service(loading)
|
||||
}
|
||||
}
|
||||
// 自动携带token
|
||||
if (config.headers) {
|
||||
const token = adminInfo.getToken()
|
||||
if (token) {
|
||||
;(config.headers as anyObj).Authorization = token
|
||||
} else {
|
||||
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
|
||||
}
|
||||
}
|
||||
if (config.url == '/user-boot/user/generateSm2Key' || config.url == '/pqs-auth/oauth/token') {
|
||||
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截
|
||||
Axios.interceptors.response.use(
|
||||
response => {
|
||||
removePending(response.config)
|
||||
options.loading && closeLoading(options) // 关闭loading
|
||||
if (
|
||||
response.data.code === 'A0000' ||
|
||||
response.data.type === 'application/json' ||
|
||||
Array.isArray(response.data) ||
|
||||
response.data.size
|
||||
// ||
|
||||
// response.data.type === 'application/octet-stream' ||
|
||||
// response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
) {
|
||||
return options.reductDataFormat ? response.data : response
|
||||
} else if (response.data.code == 'A0202') {
|
||||
if (!window.tokenRefreshing) {
|
||||
window.tokenRefreshing = true
|
||||
return refreshToken()
|
||||
.then(res => {
|
||||
adminInfo.setToken(res.data.access_token, 'auth')
|
||||
window.requests.forEach(cb => cb(res.data.access_token))
|
||||
window.requests = []
|
||||
|
||||
return Axios(response.config)
|
||||
})
|
||||
.catch(err => {
|
||||
adminInfo.removeToken()
|
||||
router.push({ name: 'login' })
|
||||
return Promise.reject(err)
|
||||
})
|
||||
.finally(() => {
|
||||
window.tokenRefreshing = false
|
||||
})
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
// 用函数形式将 resolve 存入，等待刷新后再执行
|
||||
window.requests.push((token: string) => {
|
||||
response.headers.Authorization = `${token}`
|
||||
resolve(Axios(response.config))
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (response.data.code == 'A0024') {
|
||||
// 登录失效
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: response.data.message
|
||||
})
|
||||
adminInfo.removeToken()
|
||||
router.push({ name: 'login' })
|
||||
return Promise.reject(response.data)
|
||||
} else {
|
||||
if (options.showCodeMessage) {
|
||||
if (response.config.url == '/access-boot/device/wlRegister') {
|
||||
setTimeout(() => {
|
||||
ElMessage.error(response.data.message || '未知错误')
|
||||
}, 6000)
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '未知错误')
|
||||
}
|
||||
}
|
||||
return Promise.reject(response.data)
|
||||
}
|
||||
},
|
||||
error => {
|
||||
error.config && removePending(error.config)
|
||||
options.loading && closeLoading(options) // 关闭loading
|
||||
return Promise.reject(error) // 错误继续返回给到具体页面
|
||||
}
|
||||
)
|
||||
return Axios(axiosConfig) as T
|
||||
}
|
||||
|
||||
export default createAxios
|
||||
|
||||
/**
|
||||
* 关闭Loading层实例
|
||||
*/
|
||||
function closeLoading(options: Options) {
|
||||
if (options.loading && loadingInstance.count > 0) loadingInstance.count--
|
||||
if (loadingInstance.count === 0) {
|
||||
loadingInstance.target.close()
|
||||
loadingInstance.target = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 储存每个请求的唯一cancel回调, 以此为标识
|
||||
*/
|
||||
function addPending(config: AxiosRequestConfig) {
|
||||
const pendingKey = getPendingKey(config)
|
||||
config.cancelToken =
|
||||
config.cancelToken ||
|
||||
new axios.CancelToken(cancel => {
|
||||
if (!pendingMap.has(pendingKey)) {
|
||||
pendingMap.set(pendingKey, cancel)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除重复的请求
|
||||
*/
|
||||
function removePending(config: AxiosRequestConfig) {
|
||||
const pendingKey = getPendingKey(config)
|
||||
if (pendingMap.has(pendingKey)) {
|
||||
const cancelToken = pendingMap.get(pendingKey)
|
||||
cancelToken(pendingKey)
|
||||
pendingMap.delete(pendingKey)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成每个请求的唯一key
|
||||
*/
|
||||
function getPendingKey(config: AxiosRequestConfig) {
|
||||
let { data } = config
|
||||
const { url, method, params, headers } = config
|
||||
if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
|
||||
return [
|
||||
url,
|
||||
method,
|
||||
headers && (headers as anyObj).Authorization ? (headers as anyObj).Authorization : '',
|
||||
headers && (headers as anyObj)['ba-user-token'] ? (headers as anyObj)['ba-user-token'] : '',
|
||||
JSON.stringify(params),
|
||||
JSON.stringify(data)
|
||||
].join('&')
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据请求方法组装请求数据/参数
|
||||
*/
|
||||
export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) {
|
||||
if (method == 'GET') {
|
||||
return {
|
||||
params: data
|
||||
}
|
||||
} else if (method == 'POST') {
|
||||
if (paramsPOST) {
|
||||
return { params: data }
|
||||
} else {
|
||||
return { data: data }
|
||||
}
|
||||
}
|
||||
}
|
||||
// 适配器, 用于适配不同的请求方式
|
||||
export function baseRequest(url, value = {}, method = 'post', options = {}) {
|
||||
url = sysConfig?.API_URL + url
|
||||
if (method === 'post') {
|
||||
return service.post(url, value, options)
|
||||
} else if (method === 'get') {
|
||||
return service.get(url, { params: value, ...options })
|
||||
} else if (method === 'formdata') {
|
||||
// form-data表单提交的方式
|
||||
return service.post(url, qs.stringify(value), {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
...options
|
||||
})
|
||||
} else {
|
||||
// 其他请求方式，例如：put、delete
|
||||
return service({
|
||||
method: method,
|
||||
url: url,
|
||||
data: value,
|
||||
...options
|
||||
})
|
||||
}
|
||||
}
|
||||
// 模块内的请求, 会自动加上模块的前缀
|
||||
export const moduleRequest =
|
||||
moduleUrl =>
|
||||
(url, ...arg) => {
|
||||
return baseRequest(moduleUrl + url, ...arg)
|
||||
}
|
||||
|
||||
interface LoadingInstance {
|
||||
target: any
|
||||
count: number
|
||||
}
|
||||
|
||||
interface Options {
|
||||
// 是否开启取消重复请求, 默认为 true
|
||||
CancelDuplicateRequest?: boolean
|
||||
// 是否开启loading层效果, 默认为false
|
||||
loading?: boolean
|
||||
// 是否开启简洁的数据结构响应, 默认为true
|
||||
reductDataFormat?: boolean
|
||||
// 是否开启code不为A0000时的信息提示, 默认为true
|
||||
showCodeMessage?: boolean
|
||||
// 是否开启code为0时的信息提示, 默认为false
|
||||
showSuccessMessage?: boolean
|
||||
// 当前请求使用另外的用户token
|
||||
anotherToken?: string
|
||||
}
|
||||
import type { AxiosRequestConfig, Method } from 'axios'
|
||||
import axios from 'axios'
|
||||
import { ElLoading, ElMessage, ElNotification, type LoadingOptions } from 'element-plus'
|
||||
import { refreshToken } from '@/api/user-boot/user'
|
||||
import router from '@/router/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
window.requests = []
|
||||
window.tokenRefreshing = false
|
||||
let loginExpireTimer:any=null
|
||||
const pendingMap = new Map()
|
||||
const loadingInstance: LoadingInstance = {
|
||||
target: null,
|
||||
count: 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据运行环境获取基础请求URL
|
||||
*/
|
||||
export const getUrl = (): string => {
|
||||
return '/api'
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建`Axios`
|
||||
* 默认开启`reductDataFormat(简洁响应)`,返回类型为`ApiPromise`
|
||||
* 关闭`reductDataFormat`,返回类型则为`AxiosPromise`
|
||||
*/
|
||||
function createAxios<Data = any, T = ApiPromise<Data>>(
|
||||
axiosConfig: AxiosRequestConfig,
|
||||
options: Options = {},
|
||||
loading: LoadingOptions = {}
|
||||
): T {
|
||||
const adminInfo = useAdminInfo()
|
||||
|
||||
const Axios = axios.create({
|
||||
baseURL: getUrl(),
|
||||
timeout: 1000 * 60 * 5,
|
||||
headers: {},
|
||||
responseType: 'json'
|
||||
})
|
||||
|
||||
options = Object.assign(
|
||||
{
|
||||
CancelDuplicateRequest: true, // 是否开启取消重复请求, 默认为 true
|
||||
loading: false, // 是否开启loading层效果, 默认为false
|
||||
reductDataFormat: true, // 是否开启简洁的数据结构响应, 默认为true
|
||||
showErrorMessage: true, // 是否开启接口错误信息展示,默认为true
|
||||
showCodeMessage: true, // 是否开启code不为1时的信息提示, 默认为true
|
||||
showSuccessMessage: false, // 是否开启code为1时的信息提示, 默认为false
|
||||
anotherToken: '' // 当前请求使用另外的用户token
|
||||
},
|
||||
options
|
||||
)
|
||||
|
||||
// 请求拦截
|
||||
Axios.interceptors.request.use(
|
||||
config => {
|
||||
// if(config.url?.substring(0, 13)=='/advance-boot'){
|
||||
// config.url=config.url?.slice(13)
|
||||
// config.baseURL='/hzj'
|
||||
// }
|
||||
// 取消重复请求
|
||||
|
||||
if (
|
||||
!(
|
||||
config.url == '/system-boot/file/upload' ||
|
||||
config.url == '/harmonic-boot/grid/getAssessOverview' ||
|
||||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData'
|
||||
)
|
||||
)
|
||||
removePending(config)
|
||||
|
||||
options.CancelDuplicateRequest && addPending(config)
|
||||
// 创建loading实例
|
||||
if (options.loading) {
|
||||
loadingInstance.count++
|
||||
if (loadingInstance.count === 1) {
|
||||
loadingInstance.target = ElLoading.service(loading)
|
||||
}
|
||||
}
|
||||
// 自动携带token
|
||||
if (config.headers) {
|
||||
const token = adminInfo.getToken()
|
||||
if (token) {
|
||||
;(config.headers as anyObj).Authorization = token
|
||||
} else {
|
||||
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
|
||||
}
|
||||
}
|
||||
if (config.url == '/user-boot/user/generateSm2Key' || config.url == '/pqs-auth/oauth/token') {
|
||||
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截
|
||||
Axios.interceptors.response.use(
|
||||
response => {
|
||||
removePending(response.config)
|
||||
options.loading && closeLoading(options) // 关闭loading
|
||||
if (
|
||||
response.data.code === 'A0000' ||
|
||||
response.data.type === 'application/json' ||
|
||||
Array.isArray(response.data) ||
|
||||
response.data.size
|
||||
// ||
|
||||
// response.data.type === 'application/octet-stream' ||
|
||||
// response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
) {
|
||||
return options.reductDataFormat ? response.data : response
|
||||
} else if (response.data.code == 'A0202') {
|
||||
if (!window.tokenRefreshing) {
|
||||
window.tokenRefreshing = true
|
||||
return refreshToken()
|
||||
.then(res => {
|
||||
adminInfo.setToken(res.data.access_token, 'auth')
|
||||
window.requests.forEach(cb => cb(res.data.access_token))
|
||||
window.requests = []
|
||||
|
||||
return Axios(response.config)
|
||||
})
|
||||
.catch(err => {
|
||||
adminInfo.removeToken()
|
||||
router.push({ name: 'login' })
|
||||
return Promise.reject(err)
|
||||
})
|
||||
.finally(() => {
|
||||
window.tokenRefreshing = false
|
||||
})
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
// 用函数形式将 resolve 存入，等待刷新后再执行
|
||||
window.requests.push((token: string) => {
|
||||
response.headers.Authorization = `${token}`
|
||||
resolve(Axios(response.config))
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (response.data.code == 'A0024') {
|
||||
// // 登录失效
|
||||
// 清除上一次的定时器
|
||||
if (loginExpireTimer) {
|
||||
clearTimeout(loginExpireTimer)
|
||||
}
|
||||
loginExpireTimer = setTimeout(() => {
|
||||
ElNotification({
|
||||
type: 'error',
|
||||
message: response.data.message
|
||||
})
|
||||
adminInfo.removeToken()
|
||||
router.push({ name: 'login' })
|
||||
loginExpireTimer = null // 执行后清空定时器
|
||||
}, 100) // 可根据实际情况调整延迟时间
|
||||
return Promise.reject(response.data)
|
||||
// // 登录失效
|
||||
// ElMessage({
|
||||
// type: 'error',
|
||||
// message: response.data.message
|
||||
// })
|
||||
// adminInfo.removeToken()
|
||||
// router.push({ name: 'login' })
|
||||
// return Promise.reject(response.data)
|
||||
} else {
|
||||
if (options.showCodeMessage) {
|
||||
if (response.config.url == '/access-boot/device/wlRegister') {
|
||||
setTimeout(() => {
|
||||
ElMessage.error(response.data.message || '未知错误')
|
||||
}, 6000)
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '未知错误')
|
||||
}
|
||||
}
|
||||
return Promise.reject(response.data)
|
||||
}
|
||||
},
|
||||
error => {
|
||||
error.config && removePending(error.config)
|
||||
options.loading && closeLoading(options) // 关闭loading
|
||||
return Promise.reject(error) // 错误继续返回给到具体页面
|
||||
}
|
||||
)
|
||||
return Axios(axiosConfig) as T
|
||||
}
|
||||
|
||||
export default createAxios
|
||||
|
||||
/**
|
||||
* 关闭Loading层实例
|
||||
*/
|
||||
function closeLoading(options: Options) {
|
||||
if (options.loading && loadingInstance.count > 0) loadingInstance.count--
|
||||
if (loadingInstance.count === 0) {
|
||||
loadingInstance.target.close()
|
||||
loadingInstance.target = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 储存每个请求的唯一cancel回调, 以此为标识
|
||||
*/
|
||||
function addPending(config: AxiosRequestConfig) {
|
||||
const pendingKey = getPendingKey(config)
|
||||
config.cancelToken =
|
||||
config.cancelToken ||
|
||||
new axios.CancelToken(cancel => {
|
||||
if (!pendingMap.has(pendingKey)) {
|
||||
pendingMap.set(pendingKey, cancel)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除重复的请求
|
||||
*/
|
||||
function removePending(config: AxiosRequestConfig) {
|
||||
const pendingKey = getPendingKey(config)
|
||||
if (pendingMap.has(pendingKey)) {
|
||||
const cancelToken = pendingMap.get(pendingKey)
|
||||
cancelToken(pendingKey)
|
||||
pendingMap.delete(pendingKey)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成每个请求的唯一key
|
||||
*/
|
||||
function getPendingKey(config: AxiosRequestConfig) {
|
||||
let { data } = config
|
||||
const { url, method, params, headers } = config
|
||||
if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
|
||||
return [
|
||||
url,
|
||||
method,
|
||||
headers && (headers as anyObj).Authorization ? (headers as anyObj).Authorization : '',
|
||||
headers && (headers as anyObj)['ba-user-token'] ? (headers as anyObj)['ba-user-token'] : '',
|
||||
JSON.stringify(params),
|
||||
JSON.stringify(data)
|
||||
].join('&')
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据请求方法组装请求数据/参数
|
||||
*/
|
||||
export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) {
|
||||
if (method == 'GET') {
|
||||
return {
|
||||
params: data
|
||||
}
|
||||
} else if (method == 'POST') {
|
||||
if (paramsPOST) {
|
||||
return { params: data }
|
||||
} else {
|
||||
return { data: data }
|
||||
}
|
||||
}
|
||||
}
|
||||
// 适配器, 用于适配不同的请求方式
|
||||
export function baseRequest(url, value = {}, method = 'post', options = {}) {
|
||||
url = sysConfig?.API_URL + url
|
||||
if (method === 'post') {
|
||||
return service.post(url, value, options)
|
||||
} else if (method === 'get') {
|
||||
return service.get(url, { params: value, ...options })
|
||||
} else if (method === 'formdata') {
|
||||
// form-data表单提交的方式
|
||||
return service.post(url, qs.stringify(value), {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
...options
|
||||
})
|
||||
} else {
|
||||
// 其他请求方式，例如：put、delete
|
||||
return service({
|
||||
method: method,
|
||||
url: url,
|
||||
data: value,
|
||||
...options
|
||||
})
|
||||
}
|
||||
}
|
||||
// 模块内的请求, 会自动加上模块的前缀
|
||||
export const moduleRequest =
|
||||
moduleUrl =>
|
||||
(url, ...arg) => {
|
||||
return baseRequest(moduleUrl + url, ...arg)
|
||||
}
|
||||
|
||||
interface LoadingInstance {
|
||||
target: any
|
||||
count: number
|
||||
}
|
||||
|
||||
interface Options {
|
||||
// 是否开启取消重复请求, 默认为 true
|
||||
CancelDuplicateRequest?: boolean
|
||||
// 是否开启loading层效果, 默认为false
|
||||
loading?: boolean
|
||||
// 是否开启简洁的数据结构响应, 默认为true
|
||||
reductDataFormat?: boolean
|
||||
// 是否开启code不为A0000时的信息提示, 默认为true
|
||||
showCodeMessage?: boolean
|
||||
// 是否开启code为0时的信息提示, 默认为false
|
||||
showSuccessMessage?: boolean
|
||||
// 当前请求使用另外的用户token
|
||||
anotherToken?: string
|
||||
}
|
||||
|
||||
@@ -1,273 +1,281 @@
|
||||
<template>
|
||||
<TableHeader ref="refheader" :showSearch="false">
|
||||
<template #select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox-group style="width: 150px" v-model.trim="checkList">
|
||||
<el-checkbox label="稳态" :value="0" />
|
||||
<el-checkbox label="暂态" :value="1" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
|
||||
<el-button :icon="Back" @click="go(-1)">返回</el-button>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<!-- 设备补召 -->
|
||||
<div class=" current_device" v-loading="loading">
|
||||
|
||||
<div class="current_body" ref="tbodyRef">
|
||||
<vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
|
||||
:style="{ height: tableHeight }" @radio-change="radioChangeEvent">
|
||||
<vxe-column type="radio" width="60">
|
||||
<template #header>
|
||||
<vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="status" title="补召进度">
|
||||
<template #default="{ row }">
|
||||
<div class="finish" v-if="row.status == 100">
|
||||
<SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
|
||||
</div>
|
||||
<el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''"
|
||||
:format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
|
||||
striped-flow />
|
||||
|
||||
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="startTime" title="起始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue'
|
||||
import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
|
||||
import { SuccessFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Back,
|
||||
Setting, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import mqtt from 'mqtt'
|
||||
defineOptions({
|
||||
name: 'supplementaryRecruitment'
|
||||
})
|
||||
const checkList: any = ref([])
|
||||
// const props = defineProps(['lineId'])
|
||||
const { go } = useRouter() // 路由
|
||||
const selectRow: any = ref(null)
|
||||
const loading = ref(false)
|
||||
const dirList = ref([])
|
||||
const route: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
|
||||
const getMakeUpDataList = (row: any) => {
|
||||
route.value = row
|
||||
loading.value = true
|
||||
getMakeUpData(row.id).then(res => {
|
||||
res.data.map((item: any) => {
|
||||
item.name = item.prjName
|
||||
? item.prjDataPath.replace('/bd0/cmn/', item.prjName + '-')
|
||||
: item.prjDataPath.replace('/bd0/cmn/', '')
|
||||
item.startTime = item.startTime ? item.startTime : '/'
|
||||
item.endTime = item.endTime ? item.endTime : '/'
|
||||
item.status = 0
|
||||
})
|
||||
dirList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 进入文件夹
|
||||
const dirCheckedList: any = ref([])
|
||||
const tbodyRef = ref()
|
||||
const tableHeight = mainHeight(85).height
|
||||
const routes = useRoute()
|
||||
const tableRef = ref()
|
||||
const selectRowCopy: any = ref(null)
|
||||
const handleUpDevice = () => {
|
||||
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.prjDataPath
|
||||
})
|
||||
if (checkList.value.length == 0) {
|
||||
return ElMessage.warning('请选择暂态稳态')
|
||||
}
|
||||
if (selectRow.value == null) {
|
||||
return ElMessage.warning('请选择工程')
|
||||
}
|
||||
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
|
||||
let form = {
|
||||
dataTypeList: checkList.value,
|
||||
startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
|
||||
lineId: routes.query.id,
|
||||
ndid: routes.query.ndid,
|
||||
proList: [selectRow.value?.prjDataPath]
|
||||
}
|
||||
ElMessage.warning('补召中, 请稍等...')
|
||||
offlineDataUploadMakeUp(form)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
// ElMessage.success(res.data)
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
item.status = 5
|
||||
}
|
||||
// })
|
||||
})
|
||||
// loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
|
||||
selectRow.value = row
|
||||
// console.log('单选事件')
|
||||
}
|
||||
|
||||
|
||||
const clearRadioRowEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
selectRow.value = null
|
||||
$table.clearRadioRow()
|
||||
}
|
||||
}
|
||||
const mqttRef = ref()
|
||||
const url: any = window.localStorage.getItem('MQTTURL')
|
||||
const connectMqtt = () => {
|
||||
if (mqttRef.value) {
|
||||
if (mqttRef.value.connected) {
|
||||
return
|
||||
}
|
||||
}
|
||||
const options = {
|
||||
protocolId: 'MQTT',
|
||||
qos: 2,
|
||||
clean: true,
|
||||
connectTimeout: 30 * 1000,
|
||||
clientId: 'mqttjs' + Math.random(),
|
||||
username: 't_user',
|
||||
password: 'njcnpqs'
|
||||
}
|
||||
mqttRef.value = mqtt.connect(url, options)
|
||||
}
|
||||
const handleSearch = () => {
|
||||
getMakeUpDataList(route.value)
|
||||
}
|
||||
connectMqtt()
|
||||
mqttRef.value.on('connect', () => {
|
||||
// ElMessage.success('连接mqtt服务器成功!')
|
||||
console.log('mqtt客户端已连接....')
|
||||
// mqttRef.value.subscribe('/Web/Progress')
|
||||
// mqttRef.value.subscribe('/Web/Progress/+')
|
||||
mqttRef.value.subscribe('/dataOnlineRecruitment/Progress/' + route.value.id)
|
||||
})
|
||||
const mqttMessage = ref<any>({})
|
||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
||||
loading.value = false
|
||||
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||
let regex1 = /allStep:(.*?),nowStep/
|
||||
let regex2 = /nowStep:(.*?)}/
|
||||
mqttMessage.value = {
|
||||
allStep: str.match(regex1)[1],
|
||||
nowStep: str.match(regex2)[1]
|
||||
}
|
||||
// console.log(mqttMessage.value)
|
||||
let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.name
|
||||
})
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
|
||||
if (percentage > 5) {
|
||||
item.status = percentage
|
||||
|
||||
}
|
||||
}
|
||||
// })
|
||||
})
|
||||
})
|
||||
|
||||
mqttRef.value.on('error', (error: any) => {
|
||||
console.log('mqtt连接失败...', error)
|
||||
mqttRef.value.end()
|
||||
})
|
||||
|
||||
mqttRef.value.on('close', function () {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (mqttRef.value) {
|
||||
mqttRef.value.end()
|
||||
}
|
||||
})
|
||||
defineExpose({ getMakeUpDataList })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .current_device {
|
||||
// width: 100%;
|
||||
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
// .current_header {
|
||||
// width: 100%;
|
||||
// height: 60px;
|
||||
// padding: 15px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// .el-form-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .current_body {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
:deep(.el-progress-bar__inner--striped) {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 75%, transparent 0, transparent);
|
||||
|
||||
}
|
||||
|
||||
:deep(.progress) {
|
||||
.el-progress__text {
|
||||
color: green;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.finish {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 550;
|
||||
color: #009688
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<TableHeader ref="refheader" :showSearch="false">
|
||||
<template #select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox-group style="width: 150px" v-model.trim="checkList">
|
||||
<el-checkbox label="稳态" :value="0" />
|
||||
<el-checkbox label="暂态" :value="1" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
|
||||
<el-button :icon="Back" @click="go(-1)">返回</el-button>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<!-- 设备补召 -->
|
||||
<div class=" current_device" v-loading="loading">
|
||||
|
||||
<div class="current_body" ref="tbodyRef">
|
||||
<vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
|
||||
:style="{ height: tableHeight }" @radio-change="radioChangeEvent">
|
||||
<vxe-column type="radio" width="60">
|
||||
<template #header>
|
||||
<vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="status" title="补召进度">
|
||||
<template #default="{ row }">
|
||||
<div class="finish" v-if="row.status == 100">
|
||||
<SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
|
||||
</div>
|
||||
<el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''"
|
||||
:format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
|
||||
striped-flow />
|
||||
|
||||
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="startTime" title="起始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue'
|
||||
import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
|
||||
import { SuccessFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Back,
|
||||
Setting, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import mqtt from 'mqtt'
|
||||
defineOptions({
|
||||
name: 'supplementaryRecruitment'
|
||||
})
|
||||
const checkList: any = ref([])
|
||||
// const props = defineProps(['lineId'])
|
||||
const { go } = useRouter() // 路由
|
||||
const selectRow: any = ref(null)
|
||||
const loading = ref(false)
|
||||
const dirList = ref([])
|
||||
const route: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
|
||||
const getMakeUpDataList = (row: any) => {
|
||||
route.value = row
|
||||
loading.value = true
|
||||
getMakeUpData(row.id).then(res => {
|
||||
res.data.map((item: any) => {
|
||||
item.name = item.prjName
|
||||
? item.prjDataPath.replace('/bd0/cmn/', item.prjName + '-')
|
||||
: item.prjDataPath.replace('/bd0/cmn/', '')
|
||||
item.startTime = item.startTime ? item.startTime : '/'
|
||||
item.endTime = item.endTime ? item.endTime : '/'
|
||||
item.status = 0
|
||||
})
|
||||
dirList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 进入文件夹
|
||||
const dirCheckedList: any = ref([])
|
||||
const tbodyRef = ref()
|
||||
const tableHeight = mainHeight(85).height
|
||||
const routes = useRoute()
|
||||
const tableRef = ref()
|
||||
const selectRowCopy: any = ref(null)
|
||||
const handleUpDevice = () => {
|
||||
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.prjDataPath
|
||||
})
|
||||
if (checkList.value.length == 0) {
|
||||
return ElMessage.warning('请选择暂态稳态')
|
||||
}
|
||||
if (selectRow.value == null) {
|
||||
return ElMessage.warning('请选择工程')
|
||||
}
|
||||
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
|
||||
let form = {
|
||||
dataTypeList: checkList.value,
|
||||
startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
|
||||
lineId: routes.query.id,
|
||||
ndid: routes.query.ndid,
|
||||
proList: [selectRow.value?.prjDataPath]
|
||||
}
|
||||
ElMessage.warning('补召中, 请稍等...')
|
||||
offlineDataUploadMakeUp(form)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
// ElMessage.success(res.data)
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
item.status = 5
|
||||
}
|
||||
// })
|
||||
})
|
||||
// loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
|
||||
selectRow.value = row
|
||||
// console.log('单选事件')
|
||||
}
|
||||
|
||||
|
||||
const clearRadioRowEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
selectRow.value = null
|
||||
$table.clearRadioRow()
|
||||
}
|
||||
}
|
||||
const mqttRef = ref()
|
||||
const url: any = window.localStorage.getItem('MQTTURL')
|
||||
const connectMqtt = () => {
|
||||
if (mqttRef.value) {
|
||||
if (mqttRef.value.connected) {
|
||||
return
|
||||
}
|
||||
}
|
||||
const options = {
|
||||
protocolId: 'MQTT',
|
||||
qos: 2,
|
||||
clean: true,
|
||||
connectTimeout: 30 * 1000,
|
||||
clientId: 'mqttjs' + Math.random(),
|
||||
username: 't_user',
|
||||
password: 'njcnpqs'
|
||||
}
|
||||
mqttRef.value = mqtt.connect(url, options)
|
||||
}
|
||||
const handleSearch = () => {
|
||||
getMakeUpDataList(route.value)
|
||||
}
|
||||
function parseStringToObject(str:string) {
|
||||
const content = str.replace(/^{|}$/g, '')
|
||||
const pairs = content.split(',')
|
||||
const result:any = {}
|
||||
pairs.forEach(pair => {
|
||||
const [key, value] = pair.split(':')
|
||||
// 尝试将数字转换为Number类型
|
||||
result[key.trim()] = isNaN(Number(value)) ? value.trim() : Number(value)
|
||||
})
|
||||
return result
|
||||
}
|
||||
connectMqtt()
|
||||
mqttRef.value.on('connect', () => {
|
||||
// ElMessage.success('连接mqtt服务器成功!')
|
||||
console.log('mqtt客户端已连接....')
|
||||
// mqttRef.value.subscribe('/Web/Progress')
|
||||
// mqttRef.value.subscribe('/Web/Progress/+')
|
||||
mqttRef.value.subscribe('/dataOnlineRecruitment/Progress/' + route.value.id)
|
||||
})
|
||||
const mqttMessage = ref<any>({})
|
||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
||||
loading.value = false
|
||||
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||
let regex1 = /allStep:(.*?),nowStep/
|
||||
let regex2 = /nowStep:(.*?)}/
|
||||
mqttMessage.value = parseStringToObject(str)
|
||||
// console.log(mqttMessage.value)
|
||||
let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.name
|
||||
})
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
|
||||
if (percentage > 5) {
|
||||
item.status = percentage
|
||||
|
||||
}
|
||||
}
|
||||
// })
|
||||
})
|
||||
})
|
||||
|
||||
mqttRef.value.on('error', (error: any) => {
|
||||
console.log('mqtt连接失败...', error)
|
||||
mqttRef.value.end()
|
||||
})
|
||||
|
||||
mqttRef.value.on('close', function () {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (mqttRef.value) {
|
||||
mqttRef.value.end()
|
||||
}
|
||||
})
|
||||
defineExpose({ getMakeUpDataList })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .current_device {
|
||||
// width: 100%;
|
||||
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
// .current_header {
|
||||
// width: 100%;
|
||||
// height: 60px;
|
||||
// padding: 15px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// .el-form-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .current_body {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
:deep(.el-progress-bar__inner--striped) {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 75%, transparent 0, transparent);
|
||||
|
||||
}
|
||||
|
||||
:deep(.progress) {
|
||||
.el-progress__text {
|
||||
color: green;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.finish {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 550;
|
||||
color: #009688
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,262 +1,254 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="项目名称">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
|
||||
placeholder="请输入项目名称"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <Table ref="tableRef" /> -->
|
||||
<div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading"
|
||||
:style="{ height: tableStore.table.height }">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
|
||||
<el-card class="box-card" @click="querdata(item)" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="display: flex;align-items: center">{{ item.name }}
|
||||
|
||||
<el-tooltip class="item" effect="dark" content="修改项目" placement="top">
|
||||
<Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color"
|
||||
@click="editd(item)" />
|
||||
</el-tooltip></span>
|
||||
<div style="display: flex;justify-content: end;">
|
||||
<el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text"
|
||||
@click="Aclick(item)">设计</el-button>
|
||||
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
|
||||
type="text" @click="shejid(item)">设计</el-button> -->
|
||||
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
|
||||
@click="shejid(item)">编辑</el-button> -->
|
||||
<el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text"
|
||||
@click="deleted(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
|
||||
<el-empty v-else description="暂无设计" style="height: 220px;"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background
|
||||
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
|
||||
</div>
|
||||
|
||||
<popup ref="popupRef" @submit="tableStore.index()" />
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
// import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { audit, add } from '@/api/cs-harmonic-boot/mxgraph';
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import popup from './components/popup.vue'
|
||||
defineOptions({
|
||||
name: 'mxgraph/graph-list'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
let DOMIN = window.location.origin
|
||||
|
||||
let STATIC_URL = DOMIN + '/api/system-boot/file/download?filePath='
|
||||
localStorage.setItem('STATIC_URL', STATIC_URL)
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/cs-harmonic-boot/csconfiguration/queryPage',
|
||||
method: 'POST',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
],
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value
|
||||
tableStore.index()
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
// 查询
|
||||
const onSubmitadd = () => {
|
||||
|
||||
popupRef.value.open({
|
||||
title: '新增项目'
|
||||
})
|
||||
}
|
||||
const querdata = (e: any) => { }
|
||||
const editd = (e: any) => {
|
||||
popupRef.value.open({
|
||||
title: '修改项目',
|
||||
row: e
|
||||
})
|
||||
}
|
||||
// 设计
|
||||
const Aclick = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`)
|
||||
// const link = document.createElement("a"); //创建下载a标签
|
||||
// link.target = `_blank`;
|
||||
// link.href = `http://192.168.1.128:3001/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`;
|
||||
// link.style.display = "none"; //默认隐藏元素
|
||||
// document.body.appendChild(link); // body中添加元素
|
||||
// link.click(); // 执行点击事件
|
||||
}
|
||||
const shejid = (e: any) => { }
|
||||
// 删除
|
||||
const deleted = (e: any) => {
|
||||
ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let data = {
|
||||
id: e.id,
|
||||
name: e.name,
|
||||
status: "0",
|
||||
};
|
||||
audit(data).then((res: any) => {
|
||||
if (res.code == "A0000") {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "删除项目成功!",
|
||||
});
|
||||
}
|
||||
tableStore.index()
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const imgData = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=true`)
|
||||
// const link = document.createElement("a"); //创建下载a标签
|
||||
// link.target = `_blank`;
|
||||
// link.href = `http://192.168.1.128:3001/zutai/#/?id=${e.id}&&name=decodeURI(${e.name})&&flag=true`;
|
||||
// link.style.display = "none"; //默认隐藏元素
|
||||
// document.body.appendChild(link); // body中添加元素
|
||||
// link.click(); // 执行点击事件
|
||||
}
|
||||
|
||||
const onTableSizeChange = (val: number) => {
|
||||
tableStore.onTableAction('page-size-change', { size: val })
|
||||
}
|
||||
|
||||
const onTableCurrentChange = (val: number) => {
|
||||
tableStore.onTableAction('current-page-change', { page: val })
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
// border: 1px solid #000;
|
||||
box-shadow: var(--el-box-shadow-light)
|
||||
}
|
||||
|
||||
.xiaoshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.setstyle {
|
||||
min-height: 200px;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
padding-top: 15px;
|
||||
padding-left: 10px;
|
||||
|
||||
// 不可全选样式
|
||||
.el-tree-node {
|
||||
.is-leaf+.el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 13px 20px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
|
||||
:deep(.el-pagination__sizes) {
|
||||
.el-select {
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="项目名称">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
|
||||
placeholder="请输入项目名称"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <Table ref="tableRef" /> -->
|
||||
<div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading"
|
||||
:style="{ height: tableStore.table.height }">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
|
||||
<el-card class="box-card" @click="querdata(item)" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="display: flex;align-items: center">{{ item.name }}
|
||||
|
||||
<el-tooltip class="item" effect="dark" content="修改项目" placement="top">
|
||||
<Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color"
|
||||
@click="editd(item)" />
|
||||
</el-tooltip></span>
|
||||
<div style="display: flex;justify-content: end;">
|
||||
<el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text"
|
||||
@click="Aclick(item)">设计</el-button>
|
||||
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
|
||||
type="text" @click="shejid(item)">设计</el-button> -->
|
||||
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
|
||||
@click="shejid(item)">编辑</el-button> -->
|
||||
<el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text"
|
||||
@click="deleted(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
|
||||
<el-empty v-else description="暂无设计" style="height: 220px;"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background
|
||||
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
|
||||
</div>
|
||||
|
||||
<popup ref="popupRef" @submit="tableStore.index()" />
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
// import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { audit, add } from '@/api/cs-harmonic-boot/mxgraph';
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import popup from './components/popup.vue'
|
||||
defineOptions({
|
||||
name: 'mxgraph/graph-list'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
let DOMIN = window.location.origin
|
||||
|
||||
let STATIC_URL = DOMIN + '/api/system-boot/file/download?filePath='
|
||||
localStorage.setItem('STATIC_URL', STATIC_URL)
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/cs-harmonic-boot/csconfiguration/queryPage',
|
||||
method: 'POST',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
],
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value
|
||||
tableStore.index()
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
// 查询
|
||||
const onSubmitadd = () => {
|
||||
|
||||
popupRef.value.open({
|
||||
title: '新增项目'
|
||||
})
|
||||
}
|
||||
const querdata = (e: any) => { }
|
||||
const editd = (e: any) => {
|
||||
popupRef.value.open({
|
||||
title: '修改项目',
|
||||
row: e
|
||||
})
|
||||
}
|
||||
// 设计
|
||||
const Aclick = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
|
||||
}
|
||||
const shejid = (e: any) => { }
|
||||
// 删除
|
||||
const deleted = (e: any) => {
|
||||
ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let data = {
|
||||
id: e.id,
|
||||
name: e.name,
|
||||
status: "0",
|
||||
};
|
||||
audit(data).then((res: any) => {
|
||||
if (res.code == "A0000") {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "删除项目成功!",
|
||||
});
|
||||
}
|
||||
tableStore.index()
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const imgData = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
|
||||
}
|
||||
|
||||
const onTableSizeChange = (val: number) => {
|
||||
tableStore.onTableAction('page-size-change', { size: val })
|
||||
}
|
||||
|
||||
const onTableCurrentChange = (val: number) => {
|
||||
tableStore.onTableAction('current-page-change', { page: val })
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
// border: 1px solid #000;
|
||||
box-shadow: var(--el-box-shadow-light)
|
||||
}
|
||||
|
||||
.xiaoshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.setstyle {
|
||||
min-height: 200px;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
padding-top: 15px;
|
||||
padding-left: 10px;
|
||||
|
||||
// 不可全选样式
|
||||
.el-tree-node {
|
||||
.is-leaf+.el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 13px 20px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
|
||||
:deep(.el-pagination__sizes) {
|
||||
.el-select {
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user