This commit is contained in:
guanj
2025-09-23 08:44:17 +08:00
parent 50bc0f9396
commit 2e58e58c73
4 changed files with 1660 additions and 1594 deletions

View File

@@ -1,298 +1,313 @@
import type { AxiosRequestConfig, Method } from 'axios' import type { AxiosRequestConfig, Method } from 'axios'
import axios from 'axios' import axios from 'axios'
import { ElLoading, ElMessage, ElNotification, type LoadingOptions } from 'element-plus' import { ElLoading, ElMessage, ElNotification, type LoadingOptions } from 'element-plus'
import { refreshToken } from '@/api/user-boot/user' import { refreshToken } from '@/api/user-boot/user'
import router from '@/router/index' import router from '@/router/index'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import { set } from 'lodash'
window.requests = []
window.requests = [] window.tokenRefreshing = false
window.tokenRefreshing = false let loginExpireTimer:any=null
const pendingMap = new Map() const pendingMap = new Map()
const loadingInstance: LoadingInstance = { const loadingInstance: LoadingInstance = {
target: null, target: null,
count: 0 count: 0
} }
/** /**
* 根据运行环境获取基础请求URL * 根据运行环境获取基础请求URL
*/ */
export const getUrl = (): string => { export const getUrl = (): string => {
return '/api' return '/api'
} }
/** /**
* 创建`Axios` * 创建`Axios`
* 默认开启`reductDataFormat(简洁响应)`,返回类型为`ApiPromise` * 默认开启`reductDataFormat(简洁响应)`,返回类型为`ApiPromise`
* 关闭`reductDataFormat`,返回类型则为`AxiosPromise` * 关闭`reductDataFormat`,返回类型则为`AxiosPromise`
*/ */
function createAxios<Data = any, T = ApiPromise<Data>>( function createAxios<Data = any, T = ApiPromise<Data>>(
axiosConfig: AxiosRequestConfig, axiosConfig: AxiosRequestConfig,
options: Options = {}, options: Options = {},
loading: LoadingOptions = {} loading: LoadingOptions = {}
): T { ): T {
const adminInfo = useAdminInfo() const adminInfo = useAdminInfo()
const Axios = axios.create({ const Axios = axios.create({
baseURL: getUrl(), baseURL: getUrl(),
timeout: 1000 * 60 * 5, timeout: 1000 * 60 * 5,
headers: {}, headers: {},
responseType: 'json' responseType: 'json'
}) })
options = Object.assign( options = Object.assign(
{ {
CancelDuplicateRequest: true, // 是否开启取消重复请求, 默认为 true CancelDuplicateRequest: true, // 是否开启取消重复请求, 默认为 true
loading: false, // 是否开启loading层效果, 默认为false loading: false, // 是否开启loading层效果, 默认为false
reductDataFormat: true, // 是否开启简洁的数据结构响应, 默认为true reductDataFormat: true, // 是否开启简洁的数据结构响应, 默认为true
showErrorMessage: true, // 是否开启接口错误信息展示,默认为true showErrorMessage: true, // 是否开启接口错误信息展示,默认为true
showCodeMessage: true, // 是否开启code不为1时的信息提示, 默认为true showCodeMessage: true, // 是否开启code不为1时的信息提示, 默认为true
showSuccessMessage: false, // 是否开启code为1时的信息提示, 默认为false showSuccessMessage: false, // 是否开启code为1时的信息提示, 默认为false
anotherToken: '' // 当前请求使用另外的用户token anotherToken: '' // 当前请求使用另外的用户token
}, },
options options
) )
// 请求拦截 // 请求拦截
Axios.interceptors.request.use( Axios.interceptors.request.use(
config => { config => {
// if(config.url?.substring(0, 13)=='/advance-boot'){ // if(config.url?.substring(0, 13)=='/advance-boot'){
// config.url=config.url?.slice(13) // config.url=config.url?.slice(13)
// config.baseURL='/hzj' // config.baseURL='/hzj'
// } // }
// 取消重复请求 // 取消重复请求
if ( if (
!( !(
config.url == '/system-boot/file/upload' || config.url == '/system-boot/file/upload' ||
config.url == '/harmonic-boot/grid/getAssessOverview' || config.url == '/harmonic-boot/grid/getAssessOverview' ||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData'
) )
) )
removePending(config) removePending(config)
options.CancelDuplicateRequest && addPending(config) options.CancelDuplicateRequest && addPending(config)
// 创建loading实例 // 创建loading实例
if (options.loading) { if (options.loading) {
loadingInstance.count++ loadingInstance.count++
if (loadingInstance.count === 1) { if (loadingInstance.count === 1) {
loadingInstance.target = ElLoading.service(loading) loadingInstance.target = ElLoading.service(loading)
} }
} }
// 自动携带token // 自动携带token
if (config.headers) { if (config.headers) {
const token = adminInfo.getToken() const token = adminInfo.getToken()
if (token) { if (token) {
;(config.headers as anyObj).Authorization = token ;(config.headers as anyObj).Authorization = token
} else { } else {
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw==' config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
} }
} }
if (config.url == '/user-boot/user/generateSm2Key' || config.url == '/pqs-auth/oauth/token') { if (config.url == '/user-boot/user/generateSm2Key' || config.url == '/pqs-auth/oauth/token') {
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw==' config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
} }
return config return config
}, },
error => { error => {
return Promise.reject(error) return Promise.reject(error)
} }
) )
// 响应拦截 // 响应拦截
Axios.interceptors.response.use( Axios.interceptors.response.use(
response => { response => {
removePending(response.config) removePending(response.config)
options.loading && closeLoading(options) // 关闭loading options.loading && closeLoading(options) // 关闭loading
if ( if (
response.data.code === 'A0000' || response.data.code === 'A0000' ||
response.data.type === 'application/json' || response.data.type === 'application/json' ||
Array.isArray(response.data) || Array.isArray(response.data) ||
response.data.size response.data.size
// || // ||
// response.data.type === 'application/octet-stream' || // response.data.type === 'application/octet-stream' ||
// response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
) { ) {
return options.reductDataFormat ? response.data : response return options.reductDataFormat ? response.data : response
} else if (response.data.code == 'A0202') { } else if (response.data.code == 'A0202') {
if (!window.tokenRefreshing) { if (!window.tokenRefreshing) {
window.tokenRefreshing = true window.tokenRefreshing = true
return refreshToken() return refreshToken()
.then(res => { .then(res => {
adminInfo.setToken(res.data.access_token, 'auth') adminInfo.setToken(res.data.access_token, 'auth')
window.requests.forEach(cb => cb(res.data.access_token)) window.requests.forEach(cb => cb(res.data.access_token))
window.requests = [] window.requests = []
return Axios(response.config) return Axios(response.config)
}) })
.catch(err => { .catch(err => {
adminInfo.removeToken() adminInfo.removeToken()
router.push({ name: 'login' }) router.push({ name: 'login' })
return Promise.reject(err) return Promise.reject(err)
}) })
.finally(() => { .finally(() => {
window.tokenRefreshing = false window.tokenRefreshing = false
}) })
} else { } else {
return new Promise(resolve => { return new Promise(resolve => {
// 用函数形式将 resolve 存入,等待刷新后再执行 // 用函数形式将 resolve 存入,等待刷新后再执行
window.requests.push((token: string) => { window.requests.push((token: string) => {
response.headers.Authorization = `${token}` response.headers.Authorization = `${token}`
resolve(Axios(response.config)) resolve(Axios(response.config))
}) })
}) })
} }
} else if (response.data.code == 'A0024') { } else if (response.data.code == 'A0024') {
// 登录失效 // // 登录失效
ElMessage({ // 清除上一次的定时器
type: 'error', if (loginExpireTimer) {
message: response.data.message clearTimeout(loginExpireTimer)
}) }
adminInfo.removeToken() loginExpireTimer = setTimeout(() => {
router.push({ name: 'login' }) ElNotification({
return Promise.reject(response.data) type: 'error',
} else { message: response.data.message
if (options.showCodeMessage) { })
if (response.config.url == '/access-boot/device/wlRegister') { adminInfo.removeToken()
setTimeout(() => { router.push({ name: 'login' })
ElMessage.error(response.data.message || '未知错误') loginExpireTimer = null // 执行后清空定时器
}, 6000) }, 100) // 可根据实际情况调整延迟时间
} else { return Promise.reject(response.data)
ElMessage.error(response.data.message || '未知错误') // // 登录失效
} // ElMessage({
} // type: 'error',
return Promise.reject(response.data) // message: response.data.message
} // })
}, // adminInfo.removeToken()
error => { // router.push({ name: 'login' })
error.config && removePending(error.config) // return Promise.reject(response.data)
options.loading && closeLoading(options) // 关闭loading } else {
return Promise.reject(error) // 错误继续返回给到具体页面 if (options.showCodeMessage) {
} if (response.config.url == '/access-boot/device/wlRegister') {
) setTimeout(() => {
return Axios(axiosConfig) as T ElMessage.error(response.data.message || '未知错误')
} }, 6000)
} else {
export default createAxios ElMessage.error(response.data.message || '未知错误')
}
/** }
* 关闭Loading层实例 return Promise.reject(response.data)
*/ }
function closeLoading(options: Options) { },
if (options.loading && loadingInstance.count > 0) loadingInstance.count-- error => {
if (loadingInstance.count === 0) { error.config && removePending(error.config)
loadingInstance.target.close() options.loading && closeLoading(options) // 关闭loading
loadingInstance.target = null return Promise.reject(error) // 错误继续返回给到具体页面
} }
} )
return Axios(axiosConfig) as T
/** }
* 储存每个请求的唯一cancel回调, 以此为标识
*/ export default createAxios
function addPending(config: AxiosRequestConfig) {
const pendingKey = getPendingKey(config) /**
config.cancelToken = * 关闭Loading层实例
config.cancelToken || */
new axios.CancelToken(cancel => { function closeLoading(options: Options) {
if (!pendingMap.has(pendingKey)) { if (options.loading && loadingInstance.count > 0) loadingInstance.count--
pendingMap.set(pendingKey, cancel) if (loadingInstance.count === 0) {
} loadingInstance.target.close()
}) loadingInstance.target = null
} }
}
/**
* 删除重复的请求 /**
*/ * 储存每个请求的唯一cancel回调, 以此为标识
function removePending(config: AxiosRequestConfig) { */
const pendingKey = getPendingKey(config) function addPending(config: AxiosRequestConfig) {
if (pendingMap.has(pendingKey)) { const pendingKey = getPendingKey(config)
const cancelToken = pendingMap.get(pendingKey) config.cancelToken =
cancelToken(pendingKey) config.cancelToken ||
pendingMap.delete(pendingKey) new axios.CancelToken(cancel => {
} if (!pendingMap.has(pendingKey)) {
} pendingMap.set(pendingKey, cancel)
}
/** })
* 生成每个请求的唯一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是个字符串对象 function removePending(config: AxiosRequestConfig) {
return [ const pendingKey = getPendingKey(config)
url, if (pendingMap.has(pendingKey)) {
method, const cancelToken = pendingMap.get(pendingKey)
headers && (headers as anyObj).Authorization ? (headers as anyObj).Authorization : '', cancelToken(pendingKey)
headers && (headers as anyObj)['ba-user-token'] ? (headers as anyObj)['ba-user-token'] : '', pendingMap.delete(pendingKey)
JSON.stringify(params), }
JSON.stringify(data) }
].join('&')
} /**
* 生成每个请求的唯一key
/** */
* 根据请求方法组装请求数据/参数 function getPendingKey(config: AxiosRequestConfig) {
*/ let { data } = config
export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) { const { url, method, params, headers } = config
if (method == 'GET') { if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
return { return [
params: data url,
} method,
} else if (method == 'POST') { headers && (headers as anyObj).Authorization ? (headers as anyObj).Authorization : '',
if (paramsPOST) { headers && (headers as anyObj)['ba-user-token'] ? (headers as anyObj)['ba-user-token'] : '',
return { params: data } JSON.stringify(params),
} else { JSON.stringify(data)
return { data: data } ].join('&')
} }
}
} /**
// 适配器, 用于适配不同的请求方式 * 根据请求方法组装请求数据/参数
export function baseRequest(url, value = {}, method = 'post', options = {}) { */
url = sysConfig?.API_URL + url export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) {
if (method === 'post') { if (method == 'GET') {
return service.post(url, value, options) return {
} else if (method === 'get') { params: data
return service.get(url, { params: value, ...options }) }
} else if (method === 'formdata') { } else if (method == 'POST') {
// form-data表单提交的方式 if (paramsPOST) {
return service.post(url, qs.stringify(value), { return { params: data }
headers: { } else {
'Content-Type': 'multipart/form-data' return { data: data }
}, }
...options }
}) }
} else { // 适配器, 用于适配不同的请求方式
// 其他请求方式例如put、delete export function baseRequest(url, value = {}, method = 'post', options = {}) {
return service({ url = sysConfig?.API_URL + url
method: method, if (method === 'post') {
url: url, return service.post(url, value, options)
data: value, } else if (method === 'get') {
...options return service.get(url, { params: value, ...options })
}) } else if (method === 'formdata') {
} // form-data表单提交的方式
} return service.post(url, qs.stringify(value), {
// 模块内的请求, 会自动加上模块的前缀 headers: {
export const moduleRequest = 'Content-Type': 'multipart/form-data'
moduleUrl => },
(url, ...arg) => { ...options
return baseRequest(moduleUrl + url, ...arg) })
} } else {
// 其他请求方式例如put、delete
interface LoadingInstance { return service({
target: any method: method,
count: number url: url,
} data: value,
...options
interface Options { })
// 是否开启取消重复请求, 默认为 true }
CancelDuplicateRequest?: boolean }
// 是否开启loading层效果, 默认为false // 模块内的请求, 会自动加上模块的前缀
loading?: boolean export const moduleRequest =
// 是否开启简洁的数据结构响应, 默认为true moduleUrl =>
reductDataFormat?: boolean (url, ...arg) => {
// 是否开启code不为A0000时的信息提示, 默认为true return baseRequest(moduleUrl + url, ...arg)
showCodeMessage?: boolean }
// 是否开启code为0时的信息提示, 默认为false
showSuccessMessage?: boolean interface LoadingInstance {
// 当前请求使用另外的用户token target: any
anotherToken?: string 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
}

View File

@@ -1,273 +1,281 @@
<template> <template>
<TableHeader ref="refheader" :showSearch="false"> <TableHeader ref="refheader" :showSearch="false">
<template #select> <template #select>
<el-form-item label="日期"> <el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-checkbox-group style="width: 150px" v-model.trim="checkList"> <el-checkbox-group style="width: 150px" v-model.trim="checkList">
<el-checkbox label="稳态" :value="0" /> <el-checkbox label="稳态" :value="0" />
<el-checkbox label="暂态" :value="1" /> <el-checkbox label="暂态" :value="1" />
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
</template> </template>
<template #operation> <template #operation>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button> <el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
<el-button :icon="Back" @click="go(-1)">返回</el-button> <el-button :icon="Back" @click="go(-1)">返回</el-button>
</template> </template>
</TableHeader> </TableHeader>
<!-- 设备补召 --> <!-- 设备补召 -->
<div class=" current_device" v-loading="loading"> <div class=" current_device" v-loading="loading">
<div class="current_body" ref="tbodyRef"> <div class="current_body" ref="tbodyRef">
<vxe-table border ref="tableRef" :data="dirList" align="center" height="auto" <vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
:style="{ height: tableHeight }" @radio-change="radioChangeEvent"> :style="{ height: tableHeight }" @radio-change="radioChangeEvent">
<vxe-column type="radio" width="60"> <vxe-column type="radio" width="60">
<template #header> <template #header>
<vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button> <vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
</template> </template>
</vxe-column> </vxe-column>
<!-- <vxe-column type="checkbox" width="60"></vxe-column> --> <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
<vxe-column field="name" title="名称"></vxe-column> <vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="status" title="补召进度"> <vxe-column field="status" title="补召进度">
<template #default="{ row }"> <template #default="{ row }">
<div class="finish" v-if="row.status == 100"> <div class="finish" v-if="row.status == 100">
<SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span> <SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
</div> </div>
<el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''" <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" :format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
striped-flow /> striped-flow />
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="startTime" title="起始时间"></vxe-column> <vxe-column field="startTime" title="起始时间"></vxe-column>
<vxe-column field="endTime" title="结束时间"></vxe-column> <vxe-column field="endTime" title="结束时间"></vxe-column>
</vxe-table> </vxe-table>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue' import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue'
import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts' import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
import DatePicker from '@/components/form/datePicker/index.vue' import DatePicker from '@/components/form/datePicker/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table' import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
import { SuccessFilled } from '@element-plus/icons-vue' import { SuccessFilled } from '@element-plus/icons-vue'
import { import {
Back, Back,
Setting, Search Setting, Search
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import mqtt from 'mqtt' import mqtt from 'mqtt'
defineOptions({ defineOptions({
name: 'supplementaryRecruitment' name: 'supplementaryRecruitment'
}) })
const checkList: any = ref([]) const checkList: any = ref([])
// const props = defineProps(['lineId']) // const props = defineProps(['lineId'])
const { go } = useRouter() // 路由 const { go } = useRouter() // 路由
const selectRow: any = ref(null) const selectRow: any = ref(null)
const loading = ref(false) const loading = ref(false)
const dirList = ref([]) const dirList = ref([])
const route: any = ref({}) const route: any = ref({})
const datePickerRef = ref() const datePickerRef = ref()
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`) const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
const getMakeUpDataList = (row: any) => { const getMakeUpDataList = (row: any) => {
route.value = row route.value = row
loading.value = true loading.value = true
getMakeUpData(row.id).then(res => { getMakeUpData(row.id).then(res => {
res.data.map((item: any) => { res.data.map((item: any) => {
item.name = item.prjName item.name = item.prjName
? item.prjDataPath.replace('/bd0/cmn/', item.prjName + '-') ? item.prjDataPath.replace('/bd0/cmn/', item.prjName + '-')
: item.prjDataPath.replace('/bd0/cmn/', '') : item.prjDataPath.replace('/bd0/cmn/', '')
item.startTime = item.startTime ? item.startTime : '/' item.startTime = item.startTime ? item.startTime : '/'
item.endTime = item.endTime ? item.endTime : '/' item.endTime = item.endTime ? item.endTime : '/'
item.status = 0 item.status = 0
}) })
dirList.value = res.data dirList.value = res.data
loading.value = false loading.value = false
}) })
} }
// 进入文件夹 // 进入文件夹
const dirCheckedList: any = ref([]) const dirCheckedList: any = ref([])
const tbodyRef = ref() const tbodyRef = ref()
const tableHeight = mainHeight(85).height const tableHeight = mainHeight(85).height
const routes = useRoute() const routes = useRoute()
const tableRef = ref() const tableRef = ref()
const selectRowCopy: any = ref(null) const selectRowCopy: any = ref(null)
const handleUpDevice = () => { const handleUpDevice = () => {
let proList = tableRef.value.getCheckboxRecords().map((item: any) => { let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
return item.prjDataPath return item.prjDataPath
}) })
if (checkList.value.length == 0) { if (checkList.value.length == 0) {
return ElMessage.warning('请选择暂态稳态') return ElMessage.warning('请选择暂态稳态')
} }
if (selectRow.value == null) { if (selectRow.value == null) {
return ElMessage.warning('请选择工程') return ElMessage.warning('请选择工程')
} }
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value)) selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
let form = { let form = {
dataTypeList: checkList.value, dataTypeList: checkList.value,
startTime: datePickerRef.value && datePickerRef.value.timeValue[0], startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
endTime: datePickerRef.value && datePickerRef.value.timeValue[1], endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
lineId: routes.query.id, lineId: routes.query.id,
ndid: routes.query.ndid, ndid: routes.query.ndid,
proList: [selectRow.value?.prjDataPath] proList: [selectRow.value?.prjDataPath]
} }
ElMessage.warning('补召中, 请稍等...') ElMessage.warning('补召中, 请稍等...')
offlineDataUploadMakeUp(form) offlineDataUploadMakeUp(form)
.then((res: any) => { .then((res: any) => {
if (res.code == 'A0000') { if (res.code == 'A0000') {
// ElMessage.success(res.data) // ElMessage.success(res.data)
dirList.value.map((item: any) => { dirList.value.map((item: any) => {
// checkedList.map((vv: any) => { // checkedList.map((vv: any) => {
if (item.name == selectRowCopy.value?.name) { if (item.name == selectRowCopy.value?.name) {
item.status = 5 item.status = 5
} }
// }) // })
}) })
// loading.value = false // loading.value = false
} }
}) })
.catch(() => { .catch(() => {
// loading.value = false // loading.value = false
}) })
} }
const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => { const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
selectRow.value = row selectRow.value = row
// console.log('单选事件') // console.log('单选事件')
} }
const clearRadioRowEvent = () => { const clearRadioRowEvent = () => {
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
selectRow.value = null selectRow.value = null
$table.clearRadioRow() $table.clearRadioRow()
} }
} }
const mqttRef = ref() const mqttRef = ref()
const url: any = window.localStorage.getItem('MQTTURL') const url: any = window.localStorage.getItem('MQTTURL')
const connectMqtt = () => { const connectMqtt = () => {
if (mqttRef.value) { if (mqttRef.value) {
if (mqttRef.value.connected) { if (mqttRef.value.connected) {
return return
} }
} }
const options = { const options = {
protocolId: 'MQTT', protocolId: 'MQTT',
qos: 2, qos: 2,
clean: true, clean: true,
connectTimeout: 30 * 1000, connectTimeout: 30 * 1000,
clientId: 'mqttjs' + Math.random(), clientId: 'mqttjs' + Math.random(),
username: 't_user', username: 't_user',
password: 'njcnpqs' password: 'njcnpqs'
} }
mqttRef.value = mqtt.connect(url, options) mqttRef.value = mqtt.connect(url, options)
} }
const handleSearch = () => { const handleSearch = () => {
getMakeUpDataList(route.value) getMakeUpDataList(route.value)
} }
connectMqtt() function parseStringToObject(str:string) {
mqttRef.value.on('connect', () => { const content = str.replace(/^{|}$/g, '')
// ElMessage.success('连接mqtt服务器成功!') const pairs = content.split(',')
console.log('mqtt客户端已连接....') const result:any = {}
// mqttRef.value.subscribe('/Web/Progress') pairs.forEach(pair => {
// mqttRef.value.subscribe('/Web/Progress/+') const [key, value] = pair.split(':')
mqttRef.value.subscribe('/dataOnlineRecruitment/Progress/' + route.value.id) // 尝试将数字转换为Number类型
}) result[key.trim()] = isNaN(Number(value)) ? value.trim() : Number(value)
const mqttMessage = ref<any>({}) })
mqttRef.value.on('message', (topic: any, message: any) => { return result
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))) }
loading.value = false connectMqtt()
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) mqttRef.value.on('connect', () => {
let regex1 = /allStep:(.*?),nowStep/ // ElMessage.success('连接mqtt服务器成功!')
let regex2 = /nowStep:(.*?)}/ console.log('mqtt客户端已连接....')
mqttMessage.value = { // mqttRef.value.subscribe('/Web/Progress')
allStep: str.match(regex1)[1], // mqttRef.value.subscribe('/Web/Progress/+')
nowStep: str.match(regex2)[1] mqttRef.value.subscribe('/dataOnlineRecruitment/Progress/' + route.value.id)
} })
// console.log(mqttMessage.value) const mqttMessage = ref<any>({})
let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => { mqttRef.value.on('message', (topic: any, message: any) => {
return item.name // console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
}) loading.value = false
dirList.value.map((item: any) => { let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
// checkedList.map((vv: any) => { let regex1 = /allStep:(.*?),nowStep/
if (item.name == selectRowCopy.value?.name) { let regex2 = /nowStep:(.*?)}/
let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0 mqttMessage.value = parseStringToObject(str)
if (percentage > 5) { // console.log(mqttMessage.value)
item.status = percentage 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) {
mqttRef.value.on('error', (error: any) => { item.status = percentage
console.log('mqtt连接失败...', error)
mqttRef.value.end() }
}) }
// })
mqttRef.value.on('close', function () { })
console.log('mqtt客户端已断开连接.....') })
})
onMounted(() => { mqttRef.value.on('error', (error: any) => {
}) console.log('mqtt连接失败...', error)
onBeforeUnmount(() => { mqttRef.value.end()
if (mqttRef.value) { })
mqttRef.value.end()
} mqttRef.value.on('close', function () {
}) console.log('mqtt客户端已断开连接.....')
defineExpose({ getMakeUpDataList }) })
</script> onMounted(() => {
<style lang="scss" scoped> })
// .current_device { onBeforeUnmount(() => {
// width: 100%; if (mqttRef.value) {
mqttRef.value.end()
// display: flex; }
// flex-direction: column; })
defineExpose({ getMakeUpDataList })
// .current_header { </script>
// width: 100%; <style lang="scss" scoped>
// height: 60px; // .current_device {
// padding: 15px; // width: 100%;
// display: flex;
// align-items: center; // display: flex;
// box-sizing: border-box; // flex-direction: column;
// .el-form-item { // .current_header {
// display: flex; // width: 100%;
// align-items: center; // height: 60px;
// margin-bottom: 0; // padding: 15px;
// } // display: flex;
// } // align-items: center;
// box-sizing: border-box;
// .current_body {
// flex: 1; // .el-form-item {
// } // display: flex;
// } // align-items: center;
:deep(.el-progress-bar__inner--striped) { // margin-bottom: 0;
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); // }
// }
}
// .current_body {
:deep(.progress) { // flex: 1;
.el-progress__text { // }
color: green; // }
: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);
}
}
.finish {
display: flex; :deep(.progress) {
justify-content: center; .el-progress__text {
font-weight: 550; color: green;
color: #009688
} }
</style> }
.finish {
display: flex;
justify-content: center;
font-weight: 550;
color: #009688
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,262 +1,254 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label="项目名称"> <el-form-item label="项目名称">
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
placeholder="请输入项目名称"></el-input> placeholder="请输入项目名称"></el-input>
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button> <el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
</template> </template>
</TableHeader> </TableHeader>
<!-- <Table ref="tableRef" /> --> <!-- <Table ref="tableRef" /> -->
<div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading" <div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading"
:style="{ height: tableStore.table.height }"> :style="{ height: tableStore.table.height }">
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10"> <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"> <el-card class="box-card" @click="querdata(item)" shadow="hover">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span style="display: flex;align-items: center">{{ item.name }} <span style="display: flex;align-items: center">{{ item.name }}
<el-tooltip class="item" effect="dark" content="修改项目" placement="top"> <el-tooltip class="item" effect="dark" content="修改项目" placement="top">
<Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color" <Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color"
@click="editd(item)" /> @click="editd(item)" />
</el-tooltip></span> </el-tooltip></span>
<div style="display: flex;justify-content: end;"> <div style="display: flex;justify-content: end;">
<el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text" <el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text"
@click="Aclick(item)">设计</el-button> @click="Aclick(item)">设计</el-button>
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green" <!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
type="text" @click="shejid(item)">设计</el-button> --> type="text" @click="shejid(item)">设计</el-button> -->
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text" <!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
@click="shejid(item)">编辑</el-button> --> @click="shejid(item)">编辑</el-button> -->
<el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text" <el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text"
@click="deleted(item)">删除</el-button> @click="deleted(item)">删除</el-button>
</div> </div>
</div> </div>
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" /> <img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
<el-empty v-else description="暂无设计" style="height: 220px;"/> <el-empty v-else description="暂无设计" style="height: 220px;"/>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="table-pagination"> <div class="table-pagination">
<el-pagination :currentPage="tableStore.table.params!.pageNum" <el-pagination :currentPage="tableStore.table.params!.pageNum"
:page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background :page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total" :layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total"
@size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination> @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
</div> </div>
<popup ref="popupRef" @submit="tableStore.index()" /> <popup ref="popupRef" @submit="tableStore.index()" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue' import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
// import Table from '@/components/table/index.vue' // import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate' import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { audit, add } from '@/api/cs-harmonic-boot/mxgraph'; import { audit, add } from '@/api/cs-harmonic-boot/mxgraph';
import { Edit } from '@element-plus/icons-vue' import { Edit } from '@element-plus/icons-vue'
import popup from './components/popup.vue' import popup from './components/popup.vue'
defineOptions({ defineOptions({
name: 'mxgraph/graph-list' name: 'mxgraph/graph-list'
}) })
const tableRef = ref() const tableRef = ref()
const popupRef = ref() const popupRef = ref()
let DOMIN = window.location.origin let DOMIN = window.location.origin
let STATIC_URL = DOMIN + '/api/system-boot/file/download?filePath=' let STATIC_URL = DOMIN + '/api/system-boot/file/download?filePath='
localStorage.setItem('STATIC_URL', STATIC_URL) localStorage.setItem('STATIC_URL', STATIC_URL)
const tableStore = new TableStore({ const tableStore = new TableStore({
showPage: false, showPage: false,
url: '/cs-harmonic-boot/csconfiguration/queryPage', url: '/cs-harmonic-boot/csconfiguration/queryPage',
method: 'POST', method: 'POST',
publicHeight: 60, publicHeight: 60,
column: [ column: [
], ],
loadCallback: () => { loadCallback: () => {
} }
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
onMounted(() => { onMounted(() => {
tableStore.table.ref = tableRef.value tableStore.table.ref = tableRef.value
tableStore.index() tableStore.index()
tableStore.table.loading = false tableStore.table.loading = false
}) })
// 查询 // 查询
const onSubmitadd = () => { const onSubmitadd = () => {
popupRef.value.open({ popupRef.value.open({
title: '新增项目' title: '新增项目'
}) })
} }
const querdata = (e: any) => { } const querdata = (e: any) => { }
const editd = (e: any) => { const editd = (e: any) => {
popupRef.value.open({ popupRef.value.open({
title: '修改项目', title: '修改项目',
row: e row: e
}) })
} }
// 设计 // 设计
const Aclick = (e: any) => { const Aclick = (e: any) => {
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`) window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
// const link = document.createElement("a"); //创建下载a标签 // window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
// 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"; //默认隐藏元素 const shejid = (e: any) => { }
// document.body.appendChild(link); // body中添加元素 // 删除
// link.click(); // 执行点击事件 const deleted = (e: any) => {
} ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", {
const shejid = (e: any) => { } confirmButtonText: "确定",
// 删除 cancelButtonText: "取消",
const deleted = (e: any) => { type: "warning",
ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", { })
confirmButtonText: "确定", .then(() => {
cancelButtonText: "取消", let data = {
type: "warning", id: e.id,
}) name: e.name,
.then(() => { status: "0",
let data = { };
id: e.id, audit(data).then((res: any) => {
name: e.name, if (res.code == "A0000") {
status: "0", ElMessage({
}; type: "success",
audit(data).then((res: any) => { message: "删除项目成功!",
if (res.code == "A0000") { });
ElMessage({ }
type: "success", tableStore.index()
message: "删除项目成功!", });
}); })
} .catch(() => {
tableStore.index() ElMessage({
}); type: "info",
}) message: "已取消删除",
.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 imgData = (e: any) => { }
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=true`)
// const link = document.createElement("a"); //创建下载a标签 const onTableSizeChange = (val: number) => {
// link.target = `_blank`; tableStore.onTableAction('page-size-change', { size: val })
// 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中添加元素 const onTableCurrentChange = (val: number) => {
// link.click(); // 执行点击事件 tableStore.onTableAction('current-page-change', { page: val })
} }
const onTableSizeChange = (val: number) => { </script>
tableStore.onTableAction('page-size-change', { size: val }) <style lang="scss" scoped>
} .text {
font-size: 14px;
const onTableCurrentChange = (val: number) => { }
tableStore.onTableAction('current-page-change', { page: val })
} span {
font-size: 16px;
</script> }
<style lang="scss" scoped>
.text { .item {
font-size: 14px; margin-bottom: 18px;
} }
span { .image {
font-size: 16px; display: block;
} width: 100%;
height: 220px;
.item { }
margin-bottom: 18px;
} .clearfix::before,
.clearfix::after {
.image { display: table;
display: block; content: "";
width: 100%; }
height: 220px;
} .clearfix::after {
clear: both;
.clearfix::before, }
.clearfix::after {
display: table; .box-card {
content: ""; width: 100%;
} // border: 1px solid #000;
box-shadow: var(--el-box-shadow-light)
.clearfix::after { }
clear: both;
} .xiaoshou {
cursor: pointer;
.box-card { }
width: 100%;
// border: 1px solid #000; .setstyle {
box-shadow: var(--el-box-shadow-light) min-height: 200px;
} padding: 0 !important;
margin: 0;
.xiaoshou { overflow: auto;
cursor: pointer; cursor: default !important;
} }
.setstyle { .color {
min-height: 200px; color: var(--el-color-primary);
padding: 0 !important; }
margin: 0;
overflow: auto; :deep(.el-select-dropdown__wrap) {
cursor: default !important; max-height: 300px;
} }
.color { :deep(.el-tree) {
color: var(--el-color-primary); padding-top: 15px;
} padding-left: 10px;
:deep(.el-select-dropdown__wrap) { // 不可全选样式
max-height: 300px; .el-tree-node {
} .is-leaf+.el-checkbox .el-checkbox__inner {
display: inline-block;
:deep(.el-tree) { }
padding-top: 15px;
padding-left: 10px; .el-checkbox .el-checkbox__inner {
display: none;
// 不可全选样式 }
.el-tree-node { }
.is-leaf+.el-checkbox .el-checkbox__inner { }
display: inline-block;
} :deep(.el-card__header) {
padding: 13px 20px;
.el-checkbox .el-checkbox__inner { height: 44px;
display: none; }
}
} .table-pagination {
} height: 58px;
box-sizing: border-box;
:deep(.el-card__header) { width: 100%;
padding: 13px 20px; max-width: 100%;
height: 44px; background-color: var(--ba-bg-color-overlay);
} padding: 13px 15px;
border-left: 1px solid #e4e7e9;
.table-pagination { border-right: 1px solid #e4e7e9;
height: 58px; border-bottom: 1px solid #e4e7e9;
box-sizing: border-box; }
width: 100%;
max-width: 100%; :deep(.el-pagination__sizes) {
background-color: var(--ba-bg-color-overlay); .el-select {
padding: 13px 15px; min-width: 128px;
border-left: 1px solid #e4e7e9; }
border-right: 1px solid #e4e7e9; }
border-bottom: 1px solid #e4e7e9; </style>
}
:deep(.el-pagination__sizes) {
.el-select {
min-width: 128px;
}
}
</style>