Skip to content

9
91isoft_vue_manage
Commit b6d04398 authored by 杨硕's avatar 杨硕
Browse files
Options

修改按钮

parent 9df5b48e
Show whitespace changes
Inline Side-by-side
Showing with 767 additions and 0 deletions
src/components/coolbutton/index.vue 0 → 100644
View file @ b6d04398
<template>
<el-button
v-hasPermi="hasper"
:size="size"
:type="type"
:icon="icon"
:disabled="disabled"
@click="defaultClick"
>{{ name }}</el-button>
</template>
<script>
import { getInfo } from '@/api/login'
export default {
name: 'CoolButton',
props: {// 调用该组件时需要传递过来的属性
name: {
type: String
},
type: {
type: String
},
haspermi: {
type: Array
},
size: {
type: String
},
icon: {
type: String
},
disabled: {
type: Boolean
}
},
data() {
return {
isShow: true,
hasper: '',
butname: this.name
}
},
computed: {},
created() {
this.getInfoMessage()
},
methods: {
defaultClick() {
this.$emit('btn-click')
},
getInfoMessage() {
const data = this.haspermi
getInfo().then(res => {
if (res.data.permissions[0] === '*:*:*') {
this.isShow = true
this.hasper = []
} else {
this.hasper = data
}
// TODO: clear this log
console.log(`this.hasper`, this.hasper)
})
}
}
}
</script>
<style scoped>
/*按钮样式*/
input{
border: none;
padding: 2px 10px;
border-radius: 6px;
margin: 2px 6px;
color:#fff
}
/*不同属性按钮颜色不同*/
.primary{background-color: #409eff}
.danger{background-color: #f56c6c}
.success{background-color: #67c23a}
.warning{background-color: #e6a23c}
</style>
src/store/modules/searchSave.js 0 → 100644
View file @ b6d04398
const state = {
searchParams: {
// [route.path]: { ...searchContent }
}
}
const mutations = {
SET_SEARCH_PARAMS: (state, config) => {
if (!config || typeof config !== 'object') { return }
if (!config.path) { return }
if (config.param && typeof config.param === 'object' && Object.keys(config.param).length > 0) {
state.searchParams[config.path] = JSON.stringify(config.param)
} else {
delete state.searchParams[config.path]
}
},
RSET_SEARCH_PARAMS: (state) => {
state.searchParams = {}
},
CLEAR_ONE_PARAMS: (state, path) => {
path && state.searchParams[path] && delete state.searchParams[path]
}
}
const actions = {
searchParamsSet({ commit }, config) {
if (!config || typeof config !== 'object') { return }
if (!config.path) { return }
commit('SET_SEARCH_PARAMS', config)
},
restSearchParams({ commit }) {
commit('RSET_SEARCH_PARAMS')
},
clearOneParams({ commit }, path) {
commit('CLEAR_ONE_PARAMS', path)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
src/views/overView/dashboard/equipment.vue 0 → 100644
View file @ b6d04398
<template>
<div class="equipment">
<el-row :gutter="12">
<el-col :span="6">
<div class="equipmentLeft">
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">全网信息统计</div>
</div>
<el-row style="margin-top: 20px">
<el-col :span="8">
<div class="cardChild">
<img :src="equipmentIcon" class="sidebar-logo">
<div class="cardFont">设备总数</div>
<div class="cardNum">104</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="monitorIcon" class="sidebar-logo">
<div class="cardFont">监控总数</div>
<div class="cardNum">2143</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="warnIcon" class="sidebar-logo">
<div class="cardFont">警告数</div>
<div class="cardNum">22</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">故障统计TOP5</div>
</div>
<el-row style="margin-top: 20px">
<div id="echarts-enter" class="span_1">
<div id="dataCharts_enter" ref="chart_enter" style="height: 25vh" />
</div>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px;margin-bottom: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">未处理警告</div>
</div>
<div v-for="(item, index) in messageList" :key="index" class="warnMessage">
<div>
<span>{{ item.label }}</span>
<span>{{ item.time }}</span>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="12">
<div class="equipmentMiddle">
<div class="bigTitle">IT一体化监控平台</div>
<div class="middleBody">
<div class="middleChild">
<div id="echarts-proLineMonitor" class="span_1">
<el-row>
<el-col :span="16">
<div id="dataCharts_proLineMonitor" ref="chart_stay" style="height: 30vh" />
</el-col>
<el-col :span="8">
<div class="middleLattice">
<div style="margin-bottom: 15px;margin-top: 15px">设备总数：104</div>
<div class="middleLatticeChild">正常：78</div>
<div class="middleLatticeChild">故障：9</div>
<div class="middleLatticeChild">危险：3</div>
<div class="middleLatticeChild">未知：14</div>
<div class="middleLatticeChild" style="border-bottom: 1px solid black">禁止：0</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="middleChild">
<div id="echarts-MonitoringPpoint" class="span_1">
<el-row>
<el-col :span="16">
<div id="dataCharts_MonitoringPpoint" ref="chart_stay" style="height: 30vh" />
</el-col>
<el-col :span="8">
<div class="middleLattice">
<div style="margin-bottom: 15px;margin-top: 15px">监测点总数：2143</div>
<div class="middleLatticeChild">正常：1658</div>
<div class="middleLatticeChild">故障：17</div>
<div class="middleLatticeChild">危险：12</div>
<div class="middleLatticeChild">未知：455</div>
<div class="middleLatticeChild" style="border-bottom: 1px solid black">禁止：1</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="equipmentRight">
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">全网信息统计</div>
</div>
<el-row style="margin-top: 20px">
<el-col :span="8">
<div class="cardChild">
<img :src="equipmentIcon" class="sidebar-logo">
<div class="cardFont">设备总数</div>
<div class="cardNum">104</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="monitorIcon" class="sidebar-logo">
<div class="cardFont">监控总数</div>
<div class="cardNum">2143</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="warnIcon" class="sidebar-logo">
<div class="cardFont">警告数</div>
<div class="cardNum">22</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">故障统计TOP5</div>
</div>
<el-row style="margin-top: 20px">
<div id="echarts-enters" class="span_1">
<div id="dataCharts_enters" ref="chart_enter" style="height: 25vh" />
</div>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px;margin-bottom: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">未处理警告</div>
</div>
<div v-for="(item, index) in messageList" :key="index" class="warnMessage">
<div>
<span>{{ item.label }}</span>
<span>{{ item.time }}</span>
</div>
</div>
</el-card>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Equipment',
data() {
return {
messageList: [
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' }
],
equipmentIcon: require('@/assets/image/logo.png'),
monitorIcon: require('@/assets/image/logo.png'),
warnIcon: require('@/assets/image/logo.png')
}
},
mounted() {
this.genderStatistics()
this.getProLineMonitor()
this.getMonitorPoint()
// 通过监听内容部分的宽度让图表resize
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-enter'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter')).resize()
})
})
erd.listenTo(document.getElementById('echarts-proLineMonitor'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_proLineMonitor')).resize()
})
})
erd.listenTo(document.getElementById('echarts-MonitoringPpoint'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_MonitoringPpoint')).resize()
})
})
},
methods: {
/** 故障统计TOP5
* */
genderStatistics() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter'))
var optionEnter = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['其他', '物联网', '应用和业务', '服务器', '网络设备']
},
series: [
{
type: 'bar',
data: [0, 0, 1, 1, 7]
}
]
}
myChartGender.setOption(optionEnter)
},
/** 设备*/
getProLineMonitor() {
const myChartAge = echarts.init(document.getElementById('dataCharts_proLineMonitor'))
var optionArea = {
tooltip: {
trigger: 'item'
},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
title: {
text: '设备',
left: 'center',
top: '50%',
textStyle: {
textAlign: 'center',
fill: '#333',
fontSize: 18,
fontWeight: 400
}
},
graphic: {
type: 'text',
left: 'center',
top: '40%',
style: {
text: '104',
textAlign: 'center',
fill: '#333',
fontSize: 20
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: [
{ value: 78, name: '正常 78个' },
{ value: 9, name: '故障 9个' },
{ value: 3, name: '危险 3个' },
{ value: 14, name: '未知 14个' },
{ value: 0, name: '禁止 0个' }
]
}
]
}
myChartAge.setOption(optionArea)
},
/** 监测点*/
getMonitorPoint() {
const myChartAge = echarts.init(document.getElementById('dataCharts_MonitoringPpoint'))
var optionArea = {
tooltip: {
trigger: 'item'
},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
title: {
text: '监测点',
left: 'center',
top: '50%',
textStyle: {
textAlign: 'center',
fill: '#333',
fontSize: 18,
fontWeight: 400
}
},
graphic: {
type: 'text',
left: 'center',
top: '40%',
style: {
text: '2143',
textAlign: 'center',
fill: '#333',
fontSize: 20
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: [
{ value: 1658, name: '正常 1658个' },
{ value: 17, name: '故障 17个' },
{ value: 12, name: '危险 12个' },
{ value: 455, name: '未知 455个' },
{ value: 1, name: '禁止 1个' }
]
}
]
}
myChartAge.setOption(optionArea)
}
}
}
</script>
<style lang="scss" >
.equipment{
padding: 15px;
.equipmentMiddle{
.middleLattice{
.middleLatticeChild{
width: 90px;
padding: 5px;
border: 1px solid black;
border-bottom: 0;
}
}
.middleBody{
.middleChild{
margin-bottom: 30px;
}
}
.bigTitle{
text-align: center;
font-size: 35px;
color: #46bcf2;
}
}
.box-card{
height: 25vh;
margin-bottom: 10px;
.el-divider--vertical{
width: 5px!important;
background-color: #46bcf2!important;
}
.warnMessage{
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #46bcf2;
}
.cardTitle{
text-align: left;
font-weight: bold;
}
.cardChild{
.sidebar-logo{
width: 55px;
}
.cardFont{
margin-top: 5px;
}
.cardNum{
margin-top: 10px;
font-size: 20px;
}
}
.el-card__body{
text-align: center!important;
padding: 10px!important;
}
.span_middle{
font-size: 14px;
}
.topChild{
width:160px;
padding: 15px;
display:inline-flex;
.cardLabel{
padding-left: 10px;
text-align: center;
}
}
}
}
</style>
src/views/system/user/addUserList.vue 0 → 100644
View file @ b6d04398
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option
v-for="dict in sexOptions"
:key="dict.dictValue"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phone">
<el-input
v-model.trim="form.phone"
value="phone"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model.trim="form.email" placeholder="请输入邮箱" maxlength="25" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.businessId == undefined" label="登录名" prop="username">
<el-input v-model="form.username" placeholder="请输入登录名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.businessId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户类型" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入用户类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model.trim="form.idNumber" placeholder="请输入身份证号" maxlength="18" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.businessId == undefined" label="状态">
<el-radio-group v-model="form.flag">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{ dict.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-col :span="24">-->
<!-- <el-form-item label="岗位" prop="postId">-->
<!-- <treeSelect-->
<!-- v-model="form.postId"-->
<!-- :disable-branch-nodes="true"-->
<!-- multiple-->
<!-- :options="deptChildren"-->
<!-- :show-count="true"-->
<!-- placeholder="请选择归属部门"-->
<!-- @input="changeValue"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-button type="primary">确定</el-button>
<!-- <el-button type="primary" @click="clearLocalData">清空</el-button>-->
</el-form>
</div>
</template>
<script>
import { getChildrenDept } from '@/api/system/dept'
export default {
name: 'AddUserList',
data() {
return {
// 表单参数
form: {
username: '',
phone: '',
email: '',
idNumber: '',
name: ''
},
// 性别状态字典
sexOptions: [
{ label: '男', value: '0' },
{ label: '女', value: '1' }
],
// 状态数据字典
statusOptions: [
{
dictLabel: '启用',
dictValue: '1'
},
{
dictLabel: '停用',
dictValue: '0'
}
],
// 子部门信息
deptChildren: []
}
},
/** 路由离开前存储表单字段*/
beforeRouteLeave(to, from, next) {
const info = this.form
localStorage.setItem('userForm', JSON.stringify(info))
next()
},
created() {
this.getLocalData()
},
methods: {
/** 清除localStorage里存的值*/
clearLocalData() {
localStorage.clear()
window.location.reload() // 刷新页面
},
/** 获取之前保存的表单字段*/
getLocalData() {
const list = JSON.parse(localStorage.getItem('userForm'))
if (list) {
this.form = list
}
},
/** 查询子部门 */
getChildrenDept(userId) {
getChildrenDept(userId).then(response => {
this.deptChildren = response.data.postChildren
this.form.postId = response.data.checkedKeys
})
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment