hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备工况物联系统任务计划列表页面

Browse Source
This commit is contained in:
123@123.com 2023-09-11 16:53:21 +08:00
parent 296e42f621
commit ef69e8fa27
6 changed files with 171 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/indexImg/MicroExhibitionTable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

9
src/http/cisma/index.ts
View File

@ -11,3 +11,12 @@ export function getFiveList(){
export function getTopDevice(){
return get('/cisma/getTopDevice')
}
// 任务计划列表
export function getPlanProduction(){
return get('/cisma/getPlanProduction')
}
// 任务计划列表保存
export function insertPlanProduction(data){
return post('/cisma/insertPlanProduction',data)
}

7
src/router/index.ts
View File

@ -1,5 +1,5 @@
/*
* @FilePath: \wwwd:\code\screenFront\src\router\index.ts
* @FilePath: index.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-29 15:16:36
@ -285,6 +285,11 @@ const routes: Array<RouteRecordRaw> = [
},
{
path: "/MicroExhibitionTable",
name: "MicroExhibitionTable",
component: () => import("../views/MicroExhibition/table.vue"),
},

90
src/utils/http.ts
View File

@ -24,7 +24,7 @@ axios.create({
//请求拦截器
axios.interceptors.request.use( (config:AxiosRequestConfig|any) => {
axios.interceptors.request.use((config: AxiosRequestConfig | any) => {
// console.group("本次请求地址为", config) //请求提示
// 在发送请求之前做些什么，例如加入token
// if (config.data) {
@ -39,7 +39,7 @@ axios.interceptors.request.use( (config:AxiosRequestConfig|any) => {
});
//响应拦截器
axios.interceptors.response.use(function (response:AxiosResponse) {
axios.interceptors.response.use(function (response: AxiosResponse) {
// 在接收响应做些什么，例如跳转到登录页
// console.log(response, "我是响应拦截器")
const router = Router; //路由全局对象
@ -92,7 +92,7 @@ export function get(staurl: string, data: any = '') {
// strSign = MD5(strSign);
// let strData = 'code=' + code + '&sign=' + strSign + '&para=' + strPara;
let _url = url+staurl //"?" + strData;
let _url = url + staurl //"?" + strData;
return new Promise((resolve, rejects) => {
let header = { //请求头设置
@ -101,7 +101,7 @@ export function get(staurl: string, data: any = '') {
axios({
url: _url,//在线跨域请求
method: "get",//默认是get请求
headers:header,
headers: header,
params: data
}).then(function (val) {
// console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
@ -125,7 +125,7 @@ export function put(staurl: string, data: any = '') {
// strSign = MD5(strSign);
// let strData = 'code=' + code + '&sign=' + strSign + '&para=' + strPara;
let _url = url+staurl //"?" + strData;
let _url = url + staurl //"?" + strData;
return new Promise((resolve, rejects) => {
let header = { //请求头设置
@ -134,7 +134,7 @@ export function put(staurl: string, data: any = '') {
axios({
url: _url,//在线跨域请求
method: "put",//默认是get请求
headers:header,
headers: header,
params: data
}).then(function (val) {
// console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
@ -148,90 +148,18 @@ export function put(staurl: string, data: any = '') {
}
export function post(code: string, data: any = "", method: string = "POST", isFile: boolean = false, file: File) {
let strTime = (<any>new Date()).Format("yyyyMMddhhmmss")
let flag = sessionStorage.getItem("Order_management_Office") || false
if (!flag) {
open4("禁止非法post跳转")
Router.push('/login') //路由全局对象 如果没有 内存存的sessionStorage那么默认是非法跳转直接弹回登录页
return
}
export function post(staurl: string, data: any = "", method: string = "POST") {
let userId = JSON.parse(sessionStorage.getItem("Order_management_Office")!).UserID
let Token = JSON.parse(sessionStorage.getItem("Order_management_Office")!).Token
let strPara = '';
if (data == '') {
strPara = '{"datetime":"' + strTime + '","userid":"' + userId + '","token":"' + Token + '"}';
} else {
strPara = '{"datetime":"' + strTime + '","userid":"' + userId + '","token":"' + Token + '",' + data + '}';
}
// console.log(strPara);
let password = "RicardPwd";
let strSign = password + strPara + password;
// console.log(strSign);
// strSign = MD5(strSign);
// console.log(strSign);
// let tmpPara = (method == "POST") ? '' : strPara //post url后para为空
let newUrl = url
// strData = 'code=' + code + '&sign=' + strSign + '&para=' + tmpPara;
// console.log(strData);
let _url = newUrl //+ "?" + strData;
let _url = url + staurl //+ "?" + strData;
let METHOD = method || "POST"
return new Promise((resolve, rejects) => {
if (userId == "" || Token == "" || userId == undefined || Token == undefined) {
let tip = "登录失效，请重新登录!"
console.log("*************我进来了2*******************")
rejects(tip)
open4("禁止非法post跳转")
Router.push('/Login') //路由全局对象 如果没有 内存存的cooike那么默认是非法跳转直接弹回登录页
return
}
let header = { //请求头设置
"Content-Type": "application/x-www-form-urlencoded",
"Access-Control-Allow-Origin": "*"
}
let params:any = {}
if (!isFile) {
params = { //此处是传参
code,
sign: strSign,
para: strPara
}
// 对数据进行序列化操作
data = qs.stringify(params)
}
let params: any = {}
// 处理表单结果中文件的操作
if (isFile) { //如果包含文件得传参方式
params = { //此处是传参
code,
sign: strSign,
para: strPara,
file
}
// 设置请求头
header = {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*"
}
// 对数据进行序列化操作
data = new FormData();
for (let i in params) {
data.append(i, params[i])
}
}
axios({
url: _url,
headers: header,
method: METHOD,
data: data
}).then(function (res) {

138
src/views/MicroExhibition/table.vue Normal file
View File

@ -0,0 +1,138 @@
<!--
* @FilePath: table.vue
* @Author: 张宇琼
* @Date: 2023-09-08 16:35:24
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-09-11 16:51:36
* @Descripttion:
-->
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
:typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="table-container">
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
'text-align': 'center',
'font-size': '20px',
'background': '#162556 !important',
'color': '#ffffff',
'border': 'none !important'
}">
<el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
<el-table-column align="center" prop="name" label="设备名称"></el-table-column>
<el-table-column prop="label" label="设备编号" align="center"></el-table-column>
<el-table-column prop="planProduction" label="计划任务" align="center">
<template #default="{ row }">
<div class="centered-input">
<el-input v-model="row.planProduction" placeholder="请输入" clearable />
</div>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-button @click="saveData" type="success" style="background-color: #00B38B;">保存</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import header2 from '@/components/headerBox/header2.vue'
import { ref, onMounted } from 'vue';
import { ElTable, ElTableColumn, ElInput, ElButton, ElMessage,ElMessageBox } from 'element-plus';
import { getPlanProduction, insertPlanProduction } from '@/http/cisma';
const tableData = ref([]);
onMounted(() => {
// 获取数据
fetchPlanProduction();
})
async function fetchPlanProduction(): Promise<any> {
try {
const res = await getPlanProduction() as any;
if (res.code === 200) {
// console.log(res);
tableData.value = res.data
}
} catch (error) {
console.error('Failed to fetch plan production:', error);
// 处理错误情况
}
}
async function saveData() {
let list = tableData.value.map(item => {
// 检查planProduction是否为空值
if (!item.planProduction) {
ElMessageBox.alert('任务计划列存在空值，无法保存', '提示'); // 使用弹窗组件显示提示信息
throw new Error('存在空值,无法保存'); // 抛出异常，停止保存操作
}
return {
planProduction: item.planProduction,
label: item.label
}
})
try {
const res = await insertPlanProduction(list) as any;
if (res.code === 200) {
ElMessage.success('保存成功');
} else {
ElMessage.error('保存失败');
}
} catch (error) {
console.error('Failed to save plan production:', error);
// 处理错误情况
}
}
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #FFFFFF;
background-color: #0E0E0E;
position: relative;
/* text-align: center; */
}
:deep(.el-table tr) {
font-size: 24px;
}
:deep(.el-table__inner-wrapper::before) {
background-color: #173d91;
}
.centered-input ::v-deep .el-input__inner {
text-align: center;
font-size: 24px;
}
.el-input {
width: 50%;
border: none;
height: 100%;
}
.table-container {
width: 70%;
margin-left: 15%;
margin-top: 20px;
}
.el-button {
margin-left: 65%;
margin-top: 10px;
}
</style>

8
src/views/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \code\gitscreenFront\src\views\index.vue
* @FilePath: index.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-29 15:34:48
@ -222,6 +222,12 @@ let routerList = [
title: '设备大屏展示系统',
url: require("../assets/indexImg/microExhibition.jpg"),
},
{
id: 33,
path: "/MicroExhibitionTable",
title: '设备物联工况系统列表',
url: require("../assets/indexImg/MicroExhibitionTable.png"),
},
{
id: 7,