运维主站
fanluyan
2 years ago
parent
d9b434f87d
commit
4b85bb8130
@ -1,11 +1,23 @@
|
|||||||
# ---> Vue
|
.DS_Store
|
||||||
# gitignore template for Vue.js projects
|
node_modules
|
||||||
#
|
/dist
|
||||||
# Recommended template: Node.gitignore
|
|
||||||
|
|
||||||
# TODO: where does this rule come from?
|
|
||||||
docs/_book
|
|
||||||
|
|
||||||
# TODO: where does this rule come from?
|
# local env files
|
||||||
test/
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"name": "operation",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
|
"element-ui": "^2.15.14",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"postcss-px2rem": "^0.3.0",
|
||||||
|
"px2rem-loader": "^0.1.9",
|
||||||
|
"three": "^0.158.0",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"less": "^4.0.0",
|
||||||
|
"less-loader": "^7.0.1",
|
||||||
|
"postcss-loader": "^4.3.0",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<v-head></v-head>
|
||||||
|
<layout-tabs></layout-tabs>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="content">
|
||||||
|
<!-- <transition name="move" mode="out-in"> -->
|
||||||
|
<keep-alive :include="caches">
|
||||||
|
<router-view v-if="isRenderTab"></router-view>
|
||||||
|
</keep-alive>
|
||||||
|
<!-- </transition> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vHead from "./header.vue";
|
||||||
|
import LayoutTabs from "./LayoutTabs.vue";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
vHead,
|
||||||
|
LayoutTabs,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState("cache", ["caches"]),
|
||||||
|
...mapState(["isRenderTab"]),
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.wrapper {
|
||||||
|
min-width: 1366px;
|
||||||
|
color: #333;
|
||||||
|
.content-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
right: 0;
|
||||||
|
top: 92px;
|
||||||
|
bottom: 0;
|
||||||
|
//padding-bottom: 30px;
|
||||||
|
-webkit-transition: left 0.3s ease-in-out;
|
||||||
|
transition: left 0.3s ease-in-out;
|
||||||
|
// background: @background-color-base;
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
//padding: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebarBox">
|
||||||
|
<ul class="menuBoxUl">
|
||||||
|
<li class="menuItem" v-for="(item, index) in routeItem" :key="index">
|
||||||
|
<router-link :to="item.path"> {{ item.name }} </router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
routeItem: [
|
||||||
|
{
|
||||||
|
path: "/home",
|
||||||
|
name: "首页",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/report",
|
||||||
|
name: "状态报表",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/log",
|
||||||
|
name: "上传日志列表",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/upgradation",
|
||||||
|
name: "上传Apk",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.sidebarBox {
|
||||||
|
// width: 55%;
|
||||||
|
// margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.menuBoxUl {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.menuItem {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 32px;
|
||||||
|
a {
|
||||||
|
color: #6de1ff;
|
||||||
|
background-image: url(../assets/menu.png);
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<div class="leftLogo">
|
||||||
|
<!-- <img src="../assets/stateGridCorporation.png" /> -->
|
||||||
|
<img src="../assets/logo.png" />
|
||||||
|
<p>运维管理系统</p>
|
||||||
|
</div>
|
||||||
|
<div class="menuBox">
|
||||||
|
<vSidebar></vSidebar>
|
||||||
|
</div>
|
||||||
|
<div class="userInfo">
|
||||||
|
<div class="header-user-con">
|
||||||
|
<!-- 用户头像 -->
|
||||||
|
<div class="user-avator">
|
||||||
|
<!-- <img src="../assets/user.jpeg" /> -->
|
||||||
|
<!-- 显示当前时间 -->
|
||||||
|
<span>{{ $moment(currentTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- 用户名下拉菜单 -->
|
||||||
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<!-- {{ userName }} -->
|
||||||
|
系统
|
||||||
|
<i class="el-icon-caret-bottom"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<!-- <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item> -->
|
||||||
|
<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import vSidebar from "./Sidebar.vue";
|
||||||
|
// import passwordDialog from "../components/passwordDialog.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
vSidebar,
|
||||||
|
// passwordDialog,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentTime: null,
|
||||||
|
userName: localStorage.getItem("userName"),
|
||||||
|
role: localStorage.getItem("role"),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
handleCommand(command) {
|
||||||
|
switch (command) {
|
||||||
|
case "noticeShow": //公告
|
||||||
|
console.log(command);
|
||||||
|
break;
|
||||||
|
case "changePwd": //修改密码
|
||||||
|
this.$refs.passwordref.display();
|
||||||
|
break;
|
||||||
|
case "loginout": //退出登录
|
||||||
|
this.$message({
|
||||||
|
duration: 1500,
|
||||||
|
showClose: true,
|
||||||
|
message: "退出成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.$store.commit("REMOVE_INFO");
|
||||||
|
this.$router.push("/login");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.currentTime = new Date();
|
||||||
|
setInterval(() => {
|
||||||
|
this.currentTime = new Date();
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 52px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(24, 75, 112, 1);
|
||||||
|
-webkit-backdrop-filter: blur(0.41667vw);
|
||||||
|
backdrop-filter: blur(0.41667vw);
|
||||||
|
line-height: 52px;
|
||||||
|
padding: 0px 16px;
|
||||||
|
display: flex;
|
||||||
|
.leftLogo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
img {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuBox {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0px 32px;
|
||||||
|
}
|
||||||
|
.userInfo {
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
|
height: 52px;
|
||||||
|
align-items: center;
|
||||||
|
.user-avator {
|
||||||
|
margin-left: 16px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
// img {
|
||||||
|
// display: block;
|
||||||
|
// width: 40px;
|
||||||
|
// height: 40px;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// }
|
||||||
|
span {
|
||||||
|
color: #66e6ff;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
margin-left: 8px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
.el-dropdown-link {
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
import store from "./store";
|
||||||
|
import ElementUI from "element-ui";
|
||||||
|
// import "element-ui/lib/theme-chalk/index.css";
|
||||||
|
import "../src/assets/css/theme/index.css"; //cac主题
|
||||||
|
|
||||||
|
Vue.use(ElementUI, {
|
||||||
|
size: "small",
|
||||||
|
});
|
||||||
|
|
||||||
|
//引入Echarts;
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
|
||||||
|
//字体自适应
|
||||||
|
import "./utils/rem";
|
||||||
|
|
||||||
|
//引入日期// 注册全局 moment
|
||||||
|
import moment from "moment";
|
||||||
|
Vue.prototype.$moment = moment;
|
||||||
|
|
||||||
|
//挂载弹出信息
|
||||||
|
import { message } from "@/utils/resetMessage";
|
||||||
|
Vue.prototype.$message = message;
|
||||||
|
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
//使用钩子函数对路由进行权限跳转
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
document.title = `${to.meta.title} | 状态监测数据汇集系统`;
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
if (!token && to.path !== "/login") {
|
||||||
|
next({
|
||||||
|
path: "/login",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: (h) => h(App),
|
||||||
|
}).$mount("#app");
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import VueRouter from "vue-router";
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/login",
|
||||||
|
component: () => import("../views/login/index.vue"),
|
||||||
|
meta: { title: "登录" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
redirect: "/home",
|
||||||
|
component: () => import("../components/Home.vue"),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/home",
|
||||||
|
component: () => import("../views/homePage/index.vue"),
|
||||||
|
name: "home",
|
||||||
|
meta: {
|
||||||
|
title: "首页",
|
||||||
|
keepAlive: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/report",
|
||||||
|
component: () => import("../views/report/index.vue"),
|
||||||
|
name: "report",
|
||||||
|
meta: {
|
||||||
|
title: "状态报表",
|
||||||
|
keepAlive: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/log",
|
||||||
|
component: () => import("../views/logList/index.vue"),
|
||||||
|
name: "log",
|
||||||
|
meta: {
|
||||||
|
title: "上传日志列表",
|
||||||
|
keepAlive: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/upgradation",
|
||||||
|
component: () => import("../views/upgradation/index.vue"),
|
||||||
|
name: "upgradation",
|
||||||
|
meta: {
|
||||||
|
title: "上传Apk",
|
||||||
|
keepAlive: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: "hash",
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
caches: [],
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
// 添加缓存的路由组件
|
||||||
|
addCache({ state, dispatch }, componentName) {
|
||||||
|
if (Array.isArray(componentName)) {
|
||||||
|
componentName.forEach((item) => {
|
||||||
|
dispatch("addCache", item);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { caches } = state;
|
||||||
|
if (!componentName || caches.includes(componentName)) return;
|
||||||
|
|
||||||
|
caches.push(componentName);
|
||||||
|
console.log("缓存路由组件：", componentName);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 移除缓存的路由组件
|
||||||
|
removeCache({ state, dispatch }, componentName) {
|
||||||
|
if (Array.isArray(componentName)) {
|
||||||
|
componentName.forEach((item) => {
|
||||||
|
dispatch("removeCache", item);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { caches } = state;
|
||||||
|
const index = caches.indexOf(componentName);
|
||||||
|
if (index > -1) {
|
||||||
|
console.log("清除缓存的路由组件：", componentName);
|
||||||
|
return caches.splice(index, 1)[0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 移除缓存的路由组件的实例
|
||||||
|
async removeCacheEntry({ dispatch }, componentName) {
|
||||||
|
const cacheRemoved = await dispatch("removeCache", componentName);
|
||||||
|
if (cacheRemoved) {
|
||||||
|
await Vue.nextTick();
|
||||||
|
dispatch("addCache", componentName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 清除缓存的路由组件的实例
|
||||||
|
clearEntry({ state, dispatch }) {
|
||||||
|
const { caches } = state;
|
||||||
|
caches.slice().forEach((key) => {
|
||||||
|
dispatch("removeCacheEntry", key);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import Vuex from "vuex";
|
||||||
|
import cacheModule from "./cache";
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
//用户登录token 存储
|
||||||
|
|
||||||
|
isRenderTab: true,
|
||||||
|
},
|
||||||
|
getters: {},
|
||||||
|
mutations: {
|
||||||
|
setIsRenderTab(state, data) {
|
||||||
|
state.isRenderTab = data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {},
|
||||||
|
modules: { cache: cacheModule },
|
||||||
|
});
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
import request from "../request";
|
||||||
|
//获取登录
|
||||||
|
export function loginJoggle(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/login.php",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//获取line
|
||||||
|
export function getqueryLineApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryLine.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function getqueryTermsApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryTerms.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//运维，快心跳
|
||||||
|
export function getdoActionApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/doAction.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//上传日志列表
|
||||||
|
export function getqueryUploadsApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryUploads.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取信息装置的信息
|
||||||
|
export function getqueryRawApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryRawData.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//带下发状态
|
||||||
|
export function getqueryCmdsApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryCmds.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//上传apk
|
||||||
|
|
||||||
|
export function postuploadFileApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/uploadFile.php",
|
||||||
|
method: "post",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data", // set the content type to multipart/form-data
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//获取上传列表
|
||||||
|
export function getqueryUpgradesApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/queryUpgrades.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除列表
|
||||||
|
export function getdelUpgradeApi(data) {
|
||||||
|
return request({
|
||||||
|
url: "api/delUpgrade.php",
|
||||||
|
method: "get",
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
const EventBus = new Vue()
|
||||||
|
export default EventBus
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,438 @@
|
|||||||
|
<template>
|
||||||
|
<div class="homeBox">
|
||||||
|
<div class="filterBox">
|
||||||
|
<el-form
|
||||||
|
v-show="showDiv"
|
||||||
|
:inline="true"
|
||||||
|
:model="formdata"
|
||||||
|
class="demo-form-inline"
|
||||||
|
>
|
||||||
|
<div class="topSearch">
|
||||||
|
<el-form-item label="线路" class="xlbox">
|
||||||
|
<el-select v-model="formdata.lineId" @change="getSearchgt" filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in xlOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
{{ item.vname + item.name }}
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="杆塔" class="gtbox">
|
||||||
|
<el-select v-model="formdata.towerId" filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in gtOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否在线" class="isonLineClass">
|
||||||
|
<el-select v-model="formdata.isonline">
|
||||||
|
<el-option
|
||||||
|
v-for="item in onlineOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="bottomSearch">
|
||||||
|
<el-form-item label="出厂ID" class="oidbox">
|
||||||
|
<el-input
|
||||||
|
v-model="formdata.oidInput"
|
||||||
|
placeholder="请输入出厂ID"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="formdata.oidCheck"
|
||||||
|
:checked="formdata.oidCheck == 1 ? true : false"
|
||||||
|
true-label="1"
|
||||||
|
false-label="0"
|
||||||
|
></el-checkbox
|
||||||
|
>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="装置编号" class="cmdibox">
|
||||||
|
<el-input
|
||||||
|
v-model="formdata.cmdidInput"
|
||||||
|
placeholder="请输入装置编号"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="formdata.cmdidCheck"
|
||||||
|
:checked="formdata.cmdidCheck == 1 ? true : false"
|
||||||
|
true-label="1"
|
||||||
|
false-label="0"
|
||||||
|
></el-checkbox>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="CMA服务器" class="cmabox">
|
||||||
|
<el-input
|
||||||
|
v-model="formdata.cmaInput"
|
||||||
|
placeholder="请输入CMA服务器"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="formdata.cmaCheck"
|
||||||
|
:checked="formdata.cmaCheck == 1 ? true : false"
|
||||||
|
true-label="1"
|
||||||
|
false-label="0"
|
||||||
|
></el-checkbox>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="版本" class="versionbox">
|
||||||
|
<el-input
|
||||||
|
v-model="formdata.versionInput"
|
||||||
|
placeholder="请输入版本"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="formdata.versionCheck"
|
||||||
|
:checked="formdata.versionCheck == 1 ? true : false"
|
||||||
|
true-label="1"
|
||||||
|
false-label="0"
|
||||||
|
></el-checkbox>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="btngrop">
|
||||||
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button type="primary" @click="onReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
:content="showDiv ? '收起' : '展开'"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
class="toggleClass"
|
||||||
|
:icon="showDiv ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
|
||||||
|
circle
|
||||||
|
@click="toggleDiv"
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="tableBox"
|
||||||
|
:style="{ height: showDiv ? 'calc(100% - 102px)' : 'calc(100% - 2px)' }"
|
||||||
|
>
|
||||||
|
<tableMain :tableData="dataList" :onlineNum="onlineNum" :offlineNum="offlineNum" :noPicNum="noPicNum" v-loading="tableLoaidng"></tableMain>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getqueryLineApi, getqueryTermsApi } from "@/utils/api/index";
|
||||||
|
import tableMain from "./components/tableMain";
|
||||||
|
export default {
|
||||||
|
name: "home",
|
||||||
|
components: {
|
||||||
|
tableMain,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showDiv: true, // 控制div的显示与隐藏
|
||||||
|
nowTime: new Date().getTime() / 1000,
|
||||||
|
xlOptions: [{ id: 0, name: "全部" }], //线路数据
|
||||||
|
gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
|
||||||
|
onlineOptions: [
|
||||||
|
{ id: -1, name: "全部" },
|
||||||
|
{ id: 1, name: "在线" },
|
||||||
|
{ id: 0, name: "离线" },
|
||||||
|
],
|
||||||
|
formdata: {
|
||||||
|
lineId: 0,
|
||||||
|
towerId: 0,
|
||||||
|
isonline: -1,
|
||||||
|
oidInput: "",
|
||||||
|
oidCheck: 0,
|
||||||
|
cmdidInput: "",
|
||||||
|
cmdidCheck: 0,
|
||||||
|
cmaInput: "",
|
||||||
|
cmaCheck: 0,
|
||||||
|
versionInput: "",
|
||||||
|
versionCheck: 0,
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
tableLoaidng: false,
|
||||||
|
onlineNum: "", //在线数量
|
||||||
|
offlineNum: "", //离线数量
|
||||||
|
noPicNum:'',//未上传图片数量
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var that = this;
|
||||||
|
document.onkeydown = function (e) {
|
||||||
|
var key = window.event.keyCode;
|
||||||
|
if (key === 13) {
|
||||||
|
that.onSubmit(); // 触发事件
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//this.fetchData(); // 初始化时获取数据
|
||||||
|
setInterval(this.fetchData, 60000); // 每10秒刷新数据
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLineList();
|
||||||
|
this.onSubmit();
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
methods: {
|
||||||
|
//获取linelist 线路内容
|
||||||
|
getLineList() {
|
||||||
|
getqueryLineApi()
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.xlOptions = [{ id: 0, name: "全部", vname: "" }];
|
||||||
|
this.xlOptions = this.xlOptions.concat(res.data);
|
||||||
|
this.formdata.lineId = this.xlOptions[0].id;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
//通过线路获取杆塔
|
||||||
|
getSearchgt() {
|
||||||
|
getqueryLineApi({ lineId: this.formdata.lineId })
|
||||||
|
.then((res) => {
|
||||||
|
this.gtOptions = [{ id: 0, name: "全部" }];
|
||||||
|
this.gtOptions = this.gtOptions.concat(res.data);
|
||||||
|
this.formdata.towerId = this.gtOptions[0].id;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
onSubmit() {
|
||||||
|
this.tableLoaidng = true;
|
||||||
|
getqueryTermsApi({
|
||||||
|
lineId: this.formdata.lineId,
|
||||||
|
towerId: this.formdata.towerId,
|
||||||
|
isonLine: this.formdata.isonline,
|
||||||
|
fc: 4,
|
||||||
|
fn1: "oid",
|
||||||
|
fv1: this.formdata.oidInput,
|
||||||
|
frev1: this.formdata.oidCheck,
|
||||||
|
fn2: "cmdid",
|
||||||
|
fv2: this.formdata.cmdidInput,
|
||||||
|
frev2: this.formdata.cmdidCheck,
|
||||||
|
fn3: "cma",
|
||||||
|
fv3: this.formdata.cmaInput,
|
||||||
|
frev3: this.formdata.cmaCheck,
|
||||||
|
fn4: "version",
|
||||||
|
fv4: this.formdata.versionInput,
|
||||||
|
frev4: this.formdata.versionCheck,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
|
||||||
|
res.data = res.data.map(item => {
|
||||||
|
|
||||||
|
if (!item.raw_report.pic) {
|
||||||
|
item.raw_report.pic = 0;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.formdata.isonline == "-1") {
|
||||||
|
//全部
|
||||||
|
this.dataList = res.data;
|
||||||
|
// console.log(this.dataList)
|
||||||
|
} else if (this.formdata.isonline == "1") {
|
||||||
|
//在线
|
||||||
|
this.dataList = res.data.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
||||||
|
);
|
||||||
|
|
||||||
|
} else if (this.formdata.isonline == "0") {
|
||||||
|
//离线
|
||||||
|
this.dataList = res.data.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts > 720
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
this.onlineNum =this.dataList.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
||||||
|
).length;
|
||||||
|
this.offlineNum = this.dataList.length - this.onlineNum
|
||||||
|
this.noPicNum = this.dataList.filter(
|
||||||
|
(item) => item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
|
||||||
|
).length
|
||||||
|
this.tableLoaidng = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
fetchData() {
|
||||||
|
getqueryTermsApi({
|
||||||
|
lineId: this.formdata.lineId,
|
||||||
|
towerId: this.formdata.towerId,
|
||||||
|
isonLine: this.formdata.isonline,
|
||||||
|
fc: 4,
|
||||||
|
fn1: "oid",
|
||||||
|
fv1: this.formdata.oidInput,
|
||||||
|
frev1: this.formdata.oidCheck,
|
||||||
|
fn2: "cmdid",
|
||||||
|
fv2: this.formdata.cmdidInput,
|
||||||
|
frev2: this.formdata.cmdidCheck,
|
||||||
|
fn3: "cma",
|
||||||
|
fv3: this.formdata.cmaInput,
|
||||||
|
frev3: this.formdata.cmaCheck,
|
||||||
|
fn4: "version",
|
||||||
|
fv4: this.formdata.versionInput,
|
||||||
|
frev4: this.formdata.versionCheck,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
res.data = res.data.map(item => {
|
||||||
|
|
||||||
|
if (!item.raw_report.pic) {
|
||||||
|
item.raw_report.pic = 0;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
if (this.formdata.isonline == "-1") {
|
||||||
|
//全部
|
||||||
|
this.dataList = res.data;
|
||||||
|
} else if (this.formdata.isonline == "1") {
|
||||||
|
//在线
|
||||||
|
|
||||||
|
this.dataList = res.data.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
||||||
|
);
|
||||||
|
} else if (this.formdata.isonline == "0") {
|
||||||
|
//离线
|
||||||
|
this.dataList = res.data.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts > 720
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.onlineNum =this.dataList.filter(
|
||||||
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
||||||
|
).length;
|
||||||
|
this.offlineNum = this.dataList.length - this.onlineNum
|
||||||
|
this.noPicNum = this.dataList.filter(
|
||||||
|
(item) => item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
|
||||||
|
).length
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
//重置
|
||||||
|
onReset() {
|
||||||
|
this.formdata = {
|
||||||
|
lineId: 0,
|
||||||
|
towerId: 0,
|
||||||
|
isonline: -1,
|
||||||
|
oidInput: "",
|
||||||
|
oidCheck: false,
|
||||||
|
cmdidInput: "",
|
||||||
|
cmdidCheck: false,
|
||||||
|
cmaInput: "",
|
||||||
|
cmaCheck: false,
|
||||||
|
versionInput: "",
|
||||||
|
versionCheck: false,
|
||||||
|
};
|
||||||
|
this.onSubmit();
|
||||||
|
},
|
||||||
|
//展开收起
|
||||||
|
toggleDiv() {
|
||||||
|
this.showDiv = !this.showDiv; // 切换showDiv的值
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.homeBox {
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
padding: 12px;
|
||||||
|
.filterBox {
|
||||||
|
position: relative;
|
||||||
|
.el-form {
|
||||||
|
display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
flex-direction: column;
|
||||||
|
.topSearch{
|
||||||
|
display:flex;
|
||||||
|
}
|
||||||
|
.bottomSearch{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
|
||||||
|
.el-form-item--small .el-form-item__label{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.btngrop{
|
||||||
|
.el-form-item__content{
|
||||||
|
display:flex;
|
||||||
|
flex-wrap:nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.isonLineClass {
|
||||||
|
.el-select {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.oidbox,
|
||||||
|
.cmdibox,
|
||||||
|
.cmabox,
|
||||||
|
.versionbox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #e9e9e9;
|
||||||
|
padding: 0px 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
.el-form-item__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.el-input {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form-item__label,
|
||||||
|
.el-checkbox {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toggleClass {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
.el-icon-d-arrow-left {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
.el-icon-d-arrow-right {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tableBox {
|
||||||
|
//height: calc(100% - 102px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-pagination{
|
||||||
|
color: #606262;
|
||||||
|
font-weight: normal;
|
||||||
|
.el-pager li.active{
|
||||||
|
font-weight:800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__headerbtn .el-dialog__close{
|
||||||
|
font-size:20px;
|
||||||
|
&:hover{
|
||||||
|
background:#e2e2e2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<div class="logMainClass">
|
||||||
|
<h3>日志列表</h3>
|
||||||
|
<div class="boxLogTable">
|
||||||
|
<el-table
|
||||||
|
v-loading="logLoading"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
style="width: 100%"
|
||||||
|
height="100%"
|
||||||
|
>
|
||||||
|
<el-table-column prop="id" label="Id" width="80"> </el-table-column>
|
||||||
|
<el-table-column prop="line_name" label="线路"> </el-table-column>
|
||||||
|
<el-table-column prop="cmdid" label="装置编号"> </el-table-column>
|
||||||
|
<el-table-column prop="file_name" label="文件名">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<a
|
||||||
|
:href="'/dl/?id=' + scope.row.id"
|
||||||
|
target="_blank"
|
||||||
|
class="buttonText"
|
||||||
|
>{{ scope.row.file_name }}</a
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="文件大小">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.file_size | changeType }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="create_time" label="上传时间"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getqueryUploadsApi } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
name: "log",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [],
|
||||||
|
logLoading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
changeType(val) {
|
||||||
|
if (val == "0") return "0B";
|
||||||
|
var k = 1024;
|
||||||
|
var sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||||
|
console.log("Math.log(val)", Math.log(val));
|
||||||
|
console.log("Math.log(k)", Math.log(k));
|
||||||
|
let i = Math.floor(Math.log(val) / Math.log(k)); //得出该数字的单位应该是kB?MB
|
||||||
|
return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.getLogList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getLogList() {
|
||||||
|
this.logLoading = true;
|
||||||
|
getqueryUploadsApi()
|
||||||
|
.then((res) => {
|
||||||
|
this.tableData = res.data;
|
||||||
|
this.logLoading = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.logMainClass {
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
padding: 12px;
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxLogTable {
|
||||||
|
height: calc(100% - 36px);
|
||||||
|
background: #fcc;
|
||||||
|
.el-table thead {
|
||||||
|
th.el-table__cell {
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttonText {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #606266;
|
||||||
|
&:hover {
|
||||||
|
color: #337ab7;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue