Skip to content

卡
卡车调度系统
Commit 81c132d2 authored by xxx's avatar xxx
Browse files
Options

修改

parent b825fa0a
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 2211 deletions
src/views/Blueprint/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="common-page">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">项目名称</label>
<el-input v-model="query.name" clearable size="small" placeholder="请输入项目名称" style="width:140px;" @clear="clearLimit"/>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
</div>
</div>
<div class="panel-bottom page-row">
<h3>设备管理列表</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
</div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="id" label="ID" width="80px"></el-table-column>
<el-table-column prop="name" label="项目名称"></el-table-column>
<el-table-column prop="content" label="图纸" width="200px;">
<template slot-scope="scope">
<img :src="scope.row.content" style="width:100%;border:0;height:120px;"/>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
<el-table-column prop="createTime" label="上传时间"></el-table-column>
<el-table-column prop="remark" label="备注"></el-table-column>
<el-table-column label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog class="draw-dialog" append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="form.visible">
<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="80px">
<el-form-item prop="eprogramid" >
<el-select v-model="form.item.eprogramid" placeholder="请选择项目" :disabled="form.reqType==='edit'" @change="programSelectChanged">
<el-option v-for="obj in form.projectSelectList" :label="obj.name" :value="obj.id"></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-select v-model="form.item.deviceid" placeholder="请选择设备" size="small" @change="deviceSelectChanged">
<el-option v-for="obj in form.deviceSelectList" :label="obj.ename" :value="obj.id"></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-button type="primary" :disabled="(form.addBtn || !form.item.content)" @click="addDevicePoint">添加设备</el-button>
<el-button type="danger" :disabled="!form.delBtn" @click="deleteDevicePoint">删除设备</el-button>
</el-form-item>
<el-form-item prop="content" style="display:block;" >
<div class="img-upload">
<div class="img-box" v-show="form.item.content">
<img :src="form.item.content" v-model="form.item.content" id="drawingImg">
</div>
<div class="upload-layer" :class="{'show':!form.item.content}">
<label class="upload-area el-icon-plus" for="imgUpload">
<input type="file" style="display:none" id="imgUpload" @change="cropUpload">
</label>
</div>
<div id="pointsLayer" class="points-layer" :class="{'show':form.item.content}">
</div>
</div>
</el-form-item>
<el-form-item label="备注" prop="remark" >
<el-input v-model="form.item.remark" style="width:260px;" placeholder="备注名称"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
//import myUpload from 'vue-image-crop-upload'
import { Tools, HttpReq } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
import {Layers} from '@/components/Layers';
import { getToken } from '@/utils/auth'
// style
import '@/assets/styles/common.css';
export default {
name: 'Dashboard',
components: {
DateRangePicker,
},
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query:{},
tableData: [],
form: {
title:'添加图纸', visible:false, reqType:'add',
status:{cu:0},
projectSelectList:[],
deviceSelectList:[],
addBtn:true,
delBtn:false,
item:{
eprogramid:'',
deviceid:'',
content:'',
remark:'',
},
},
rules: {
eprogramid: [
{required: true, message: '请选择项目', trigger: 'blur' }
],
content: [
{required: true, message: '请选择图片', trigger: 'blur' }
],
},
headers: {
'Authorization': getToken()
},
updateAvatarApi:'',
show:true,
}
},
mounted() {
var that = this;
this.$nextTick(() => {
this.loadData();
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 点击搜索
toSearch() {
this.page = 1
this.loadData()
},
clearLimit(){ // 清除限制
this.loadData()
},
loadData() {
var that = this, sort = 'date,desc';
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.sort = sort;
// 按时间过滤
var param2 = {};
var Time = param.createTime || [];
if(Time[0]){
var date1 = new Date(Time[0]).getTime();
var date2 = new Date(Time[1] || Time[0]).getTime();
param2 = {date1:date1, date2:date2}
};
this.loading = true;
HttpReq.drawing.getItemSubProgram(param).then((res) => {
this.loading = false;
if(res.head.code === '0000'){
var body = res.body || {};
var list = body.list || [];
this.tableData = list;
this.total = body.total
};
}).catch(function(error) {
this.loading = false;
})
},
toAdd() {
// 请除表单验证
this.$refs['form1'] && this.$refs['form1'].clearValidate();
this.form.title = '添加图纸';
this.form.status.cu = 0;
this.form.visible = true;
this.form.reqType = 'add';
this.form.deviceSelectList = [];
this.form.item = {
eprogramid:'',
deviceid:'',
content:'',
remark:'',
};
// 请求项目列表
this.reqProjectsSimple().then((list) => {
this.form.projectSelectList = list
});
this.$nextTick(() => {
// 激活图形事件
this.figureEvent();
// 清除坐标点
this.sliderPanel.clearPoint()
});
},
toEdit(item) {
this.reqPointByProjectId(item).then((body) => {
var pointList = body.list || [];
this.$refs['form1'] && this.$refs['form1'].clearValidate();
this.form.title = '编辑图纸';
this.form.status.cu = 0;
this.form.visible = true;
this.form.reqType = 'edit';
this.form.item = {
eprogramid:item.name,
edeviceid: item.id,
content: item.content,
remark: item.remark,
name: item.name,
programid:item.programid,
};
// 请求图纸设备列表
this.reqNotInDeviceSelectList(item.programid);
// 功能
this.$nextTick(() => {
// 激活图形事件
var sliderPanel = this.figureEvent();
// 清除坐标点
sliderPanel.clearPoint();
for(var pitem of pointList){
item.x = pitem.x;
item.y = pitem.y;
item.deviceid = pitem.deviceid;
var param = {x:pitem.x, y:pitem.y, deviceid:pitem.deviceid, eprogramid:item.programid};
sliderPanel.createPoint(param).then((item) => {});
};
});
});
},
cancelForm(){
this.form.visible = false;
// 清除事件
Tools.removeMoveEvent(this.sliderPanel);
},
toDelete(item) {
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
this.reqRemoveProject({programid:item.programid})
}).catch((e) => {
})
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
submitForm(validateName, item){
if(!this.form.status.cu){
this.$refs[validateName].validate(valid => {
if(valid){
this.form.status.cu = 2;
if(this.form.reqType === 'add'){
// 添加图纸
this.reqAddItem({programid:item.eprogramid, content:item.content, remark:item.remark}).then((res) => {
// 更新设备标记
var pointsParam = this.sliderPanel.getPointParam();
this.reqUpdateItem({programid:item.eprogramid}, pointsParam)
});
}else{
// 添加图纸设备
var pointsParam = this.sliderPanel.getPointParam();
// 更新设备标记
this.reqUpdateItem(item, pointsParam)
}
}else{
this.form.status.cu = 0
}
});
};
},
reqProjectsSimple(){
return HttpReq.drawing.getNotInProgramSelectList().then((res) => {
if(res.head.code === '0000'){
return res.body.list;
}else{
return []
}
})
},
reqNotInDeviceSelectList(id){ // 请求图纸设备列表
return HttpReq.drawingpoint.getNotInDeviceSelectList({eprogramid:id}).then((res) => {
if(res.head.code === '0000'){
return this.form.deviceSelectList = res.body.list
}else{
return []
}
})
},
reqAddItem(item){
return HttpReq.drawing.saveItem(item).then((res) => {
this.form.visible = false;
if(res.head.code === '0000'){
this.$notify({
title: '添加成功！',
type: 'success',
duration: 2500
});
this.loadData()
}else{
this.$notify({
title: res.head.message,
type: 'error',
duration: 2500
})
}
}).catch(function(error) {
this.form.status.cu = 0
});
},
reqUpdateItem(item, list){
return HttpReq.drawingpoint.updateItem({programid:item.programid, list:list}).then((res) => {
this.form.visible = false;
if(res.head.code === '0000'){
/* this.$notify({
title: '修改成功！',
type: 'success',
duration: 2500
}); */
}else{
/* this.$notify({
title: res.head.message,
type: 'error',
duration: 2500
}) */
}
}).catch(function(error) {
this.form.status.cu = 0
});
},
reqRemoveProject(item){
return HttpReq.drawing.removeItem(item).then((res) => {
if(res.head.code === '0000'){
this.$notify({
title: '删除成功！',
type: 'success',
duration: 2500
});
this.loadData()
}else{
this.$notify({
title: res.head.message,
type: 'error',
duration: 2500
})
};
this.loadData()
});
},
reqPointByProjectId(item){
return HttpReq.drawingpoint.getItem({programid:item.programid}).then((res) => {
if(res.head.code === '0000'){
return res.body
}else{
this.$notify({
title: res.head.message,
type: 'error',
duration: 2500
});
}
})
},
// 项目 select 事件
programSelectChanged(val){
// 请求图纸设备列表
this.reqNotInDeviceSelectList(val);
},
// 设备 select 事件
deviceSelectChanged(val){
this.form.currentDevice = val;
this.form.addBtn = !val;
},
// 添加设备标记
addDevicePoint(){
var item = this.form.item;
var programid = this.form.reqType === 'add' ? item.eprogramid : item.programid;
var param = {deviceid:item.deviceid, eprogramid:programid};
this.sliderPanel.createPoint(param).then((point) => {
var deviceSelectList = this.form.deviceSelectList, len = deviceSelectList.length;
for(var i=0; i<len; i++){
var obj = deviceSelectList[i];
if(obj && obj.id === point.deviceid){
deviceSelectList.splice(i, 1);
item.deviceid = '';
};
};
this.form.addBtn = true;
});
},
// 删除设备标记
deleteDevicePoint(){
this.sliderPanel.removePoint(this.form.delBtn);
this.form.delBtn = false;
// 请求图纸设备列表
this.reqNotInDeviceSelectList(this.form.item.programid);
},
cropUpload(e){
var tag = e.target || e.srcElement;
var that = this, file = tag.files[0];
if(!this.form.item.eprogramid){
tag.value = '';
return this.$notify({
title: '请选择项目',
type: 'warning',
duration: 2500
})
};
if(!file)return ;
if(file.name.indexOf(".jpg") > 0){
var img = new Image();
var blob = (typeof file === 'string') ? file : URL.createObjectURL(file);
img.src = blob;
img.crossOrigin = "*";
img.onerror = function() {
var error = new Error('图片加载失败');
};
img.onload = function(){
var w = img.width, h = img.height;
/* if(w < 800 || w > 1024){
return that.$notify({
title: '图片宽度不在800~1024之间',
type: 'warning',
duration: 2500
})
};
if(h < 600 || h > 768){
return that.$notify({
title: '图片高度不在600~768之间',
type: 'warning',
duration: 2500
})
}; */
// 显示大小 2MB
var fileSize = file.size / 1024; // kb
if(fileSize > 2048){
return that.$notify({
title: '图片不能大于2M',
type: 'warning',
duration: 2500
})
};
// canvas
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, w, h);
ctx.drawImage(img, 0, 0, w, h);
// 生成结果
var results = {};
results.origin = file;
results.base64 = canvas.toDataURL('image/jpeg', 0.7);
results.base64Len = results.base64.length;
// 释放内存
canvas = null;
img = null;
var imgBox = tag.parentNode.parentNode.previousElementSibling;
imgBox.style.display = 'block';
that.form.item.content = results.base64;
tag.value = '';
// 重设比例
that.sliderPanel.setCoordRatio();
}
}else{
this.$notify({
title: '只支持JPG格式图片',
type: 'warning',
duration: 2500
})
}
},
figureEvent(){
var that = this, pointsLayer = document.getElementById("pointsLayer");
var mouseDewn, device, x, y;
var drawingImg = document.getElementById("drawingImg");
var wRatio = 1, hRatio = 1;
that.sliderPanel && that.sliderPanel.eventHandler.removeEvent();
var sliderPanel = Tools.registerSlider(pointsLayer, {
disc:'x',
event:true,
start: function(e){
var tag = e.target || e.srcElement;
device = tag.nodeName === 'A' ? tag.parentNode : tag.className === 'point' ? tag : void 0;
if(device){
x = device.offsetLeft;
y = device.offsetTop;
}else{
x = 0, y = 0;
};
this.activePoint(device);
mouseDewn = true
},
move: function(e){
if(mouseDewn && device){
that.sliderPanel.setMoveAbs.call(device, e.distX + x, e.distY + y);
}else{
};
},
end: function(e){
if(mouseDewn && device){
var absX = e.distX + x, absY = e.distY + y;
//device.dataset.naturalX = absX * wRatio;
//device.dataset.naturalY = absY * hRatio;
that.sliderPanel.setEndAbs.call(device, absX, absY);
};
mouseDewn = false;
},
activePoint: function(el){
var active = pointsLayer.querySelector('.active');
if(el && !el.classList.contains('active')){
active && active.classList.remove('active');
el.classList.add('active');
that.form.delBtn = el;
}else{ // null
active && active.classList.remove('active');
that.form.delBtn = false;
};
},
});
// 设置比例
(sliderPanel.setCoordRatio = function(){
var w = drawingImg.offsetWidth, h = drawingImg.offsetHeight,
nw = drawingImg.naturalWidth, nh = drawingImg.naturalHeight;
wRatio = nw / w, hRatio = nh / h;
drawingImg.onload = function(){
var w = drawingImg.offsetWidth, h = drawingImg.offsetHeight,
nw = drawingImg.naturalWidth, nh = drawingImg.naturalHeight;
wRatio = nw / w, hRatio = nh / h;
};
})();
sliderPanel.createPoint = function(item){
return new Promise(function (resolve, reject){
var point = document.createElement("div");
point.dataset.deviceid = item.deviceid;
point.dataset.eprogramid = item.eprogramid;
point.className = 'point';
point.innerHTML = '<a>'+item.deviceid+'</a>';
item.x && (point.style.left = item.x / wRatio + 'px');
item.y && (point.style.top = item.y / hRatio + 'px');
pointsLayer.appendChild(point)
resolve(item);
})
};
sliderPanel.clearPoint = function(item){
pointsLayer.innerHTML = '';
};
sliderPanel.removePoint= function(el){
el && pointsLayer.removeChild(el)
};
sliderPanel.getPointParam = function(item){
var points = pointsLayer.children;
var params = [];
for(var point of points){
var x = ~~(point.offsetLeft * wRatio), y = ~~(point.offsetTop * hRatio);
params.push({programid:point.dataset.eprogramid, deviceid:point.dataset.deviceid, x:x, y:y})
};
return params;
};
return that.sliderPanel = sliderPanel
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.draw-dialog{
display:flex;align-items:center;
.el-dialog{
margin-top:inherit !important;display:table !important;width:fit-content;
.el-form-item{margin-right:0;}
}
.el-dialog__header{display:none;}
.img-upload{
border:1px solid #999;width:800px;height:500px;position:relative;
.img-box{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
img{display:block;border:0;height:100%;width:100%;}
.upload-layer{
position:absolute;top:0;left:0;height:100%;width:100%;z-index:80;display:none;justify-content:center;align-items:center;
background-color:#fff;
.upload-area{
width:50%;padding:50px;border:1px dashed rgba(0, 0, 0, 0.1);background-color:rgba(0, 0, 0, 0.05);z-index:0;
text-align:center;cursor:pointer;color:#999;
&:before{display:block;font-size:34px;}
&:after{display:block;content:"上传图片,只支持宽度在800~1024之间,且小于2MB的图片";margin-top:20px;line-height:22px;}
}
}
.upload-layer.show{display:flex;}
.points-layer{
user-select:none;
position:absolute;top:0;left:0;height:100%;width:100%;z-index:50;border:1px solid green;display:none;overflow:hidden;
&.show{display:block;}
.point{position:absolute;}
.point a{
margin:0;padding:39px 0 0;min-height:40px;min-width:20px;cursor:default;display:block;
background:no-repeat top center url('~@/assets/images/point.png');background-size:auto;
line-height:11px;color:#000;text-align:center;
}
.active{border:2px solid green;}
}
}
}
</style>
src/views/History/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="common-page">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备编号</label>
<el-input v-model="query.equipmentCode" clearable placeholder="请输入设备识别码或名称" style="width:200px;" @clear="clearLimit"/>
<el-date-picker
v-model="query.createTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:MM:SS"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button
:loading="download.loading"
:disabled="!tableData.length"
size="mini"
type="warning"
icon="el-icon-download"
@click="daochu"
style="margin-left:10px;"
>导出</el-button>
</div>
</div>
<div class="panel-bottom page-row">
<h3>设备管理列表</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<!--<el-table-column prop="subcode" label="设备识别码" width="135px"></el-table-column>
<el-table-column prop="ename" label="设备名称"></el-table-column>
<el-table-column prop="helement" label="电量"></el-table-column>
<el-table-column prop="htemperature" label="温度值" ></el-table-column>
<el-table-column prop="hhumidity" label="湿度值"></el-table-column>
<el-table-column prop="hlenght1" label="宽度一"></el-table-column>
<el-table-column prop="hlenght2" label="宽度二"></el-table-column>
<el-table-column prop="hlenght3" label="宽度三"></el-table-column>
<el-table-column prop="hsignal" label="信号强度"></el-table-column>-->
<el-table-column prop="equipmentName" label="所属设备名称" width="135px"></el-table-column>
<el-table-column prop="equipmentCode" label="设备标识码"></el-table-column>
<el-table-column prop="windspeed" label="历史风速"></el-table-column>
<el-table-column prop="temperature" label="历史温度"></el-table-column>
<el-table-column prop="humidity" label="历史湿度"></el-table-column>
<el-table-column prop="co2" label="历史二氧化碳"></el-table-column>
<el-table-column prop="mlux" label="历史光照"></el-table-column>
<el-table-column prop="ph" label="历史酸碱度"></el-table-column>
<el-table-column prop="waterTemperature" label="历史水温"></el-table-column>
<el-table-column prop="electricalConductance" label="历史电导率"></el-table-column>
<el-table-column prop="waterDepth" label="历史液位"></el-table-column>
<el-table-column prop="createTime" label="记录时间" width="180px"></el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, FileStream, Dates} from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
import cuAmap from '@/components/AMap';
import { parseTime, downloadFile } from '@/utils/index'
// style
import '@/assets/styles/common.css';
export default {
name: 'Dashboard',
components: {
DateRangePicker, cuAmap
},
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query:{},
tableData: [],
download:{
loading:false,
}
}
},
mounted() {
var that = this;
this.$nextTick(() => {
this.loadData();
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 点击搜索
toSearch() {
this.page = 1
this.loadData()
},
clearLimit(){ // 清除限制
this.loadData()
},
loadData() {
var that = this, sort = 'createTime,desc';
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.sort = sort;
this.loading = true;
HttpReq.historys.getItem(param).then((res) => {
this.loading = false;
if(res.code === 200){
var body = res.data || {};
var list = body.content || [];
this.tableData = list;
this.total = body.totalElements
};
}).catch(function(error) {
this.loading = false;
})
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = '华菱光电-历史数据' + Dates.format('yyyy-MM-dd-HH-mm-ss')+'.xls'; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
/**
* 导出
*/
doExport() {
this.download.loading = true;
var that = this, sort = 'createTime,desc';
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.sort = sort;
// param.table = {
// title:'华菱光电－历史监控记录表',
// header:{
// "subcode":"设备识别码",
// "ename":"设备名称",
// "helement":"电量",
// "htemperature":"温度值",
// "hhumidity":"湿度值",
// "hlenght1":"宽度一",
// "hlenght2":"宽度二",
// "hlenght3":"宽度三",
// "hsignal":"信号强度",
// "createTime":"记录时间",
// }
// };
HttpReq.export.historyExport(param).then((res) => {
//if(res.head.code === 200){
this.download.loading = false;
//var blob = FileStream.toBlob(res.body);
downloadFile(res, '华菱光电-历史数据' + Dates.format('yyyy-MM-dd HH-mm-ss'), 'xls')
//FileStream.download(blob, '华菱光电-历史数据' + Dates.format('yyyy-MM-dd HH-mm-ss')+'.xlsx')
//};
}).catch(function(error) {
this.download.loading = false
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.dialog-map{border:1px solid green;height:300px;width:480px;}
</style>
src/views/ProjectManage/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="common-page">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">项目名称</label>
<el-input v-model="query.name" clearable size="small" placeholder="请输入项目名称" style="width:140px;" @clear="clearLimit" />
<label class="el-form-item-label" style="font-weight: 500;margin-left: 10px;">所在位置</label>
<el-input v-model="query.address" clearable size="small" placeholder="请输入所在位置" style="width:150px;" @clear="clearLimit" />
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
</div>
</div>
<div class="panel-bottom page-row">
<h3>项目管理列表</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
</div>
<div class="content">
<el-table v-loading="loading" :data="tableData" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="项目名称" />
<el-table-column prop="address" label="项目所在地址" />
<el-table-column prop="lng" label="经度" />
<el-table-column prop="lat" label="纬度" />
<el-table-column prop="createTime" label="项目创立时间" />
<el-table-column label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)" />
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="520px">
<el-form ref="form1" :model="form.item" :rules="rules" :inline="true" size="small" label-width="80px">
<el-form-item label="项目名称" prop="name">
<el-input v-model="form.item.name" style="width:260px;" placeholder="请输入项目名称" />
</el-form-item>
<el-form-item label="所在地址" prop="address">
<el-input v-model="form.item.address" style="width:260px;" placeholder="请选择位置" />
<el-button size="mini" type="primary" @click="toSearchAddress(form.item.address)">搜索</el-button>
</el-form-item>
<el-form-item label="选择位置" prop="" style="display:block;">
<div id="dialogMap" class="dialog-map">
<cu-amap
ref="amap"
:mapinfo="mapinfo"
:onload="amapOnload"
@click="mapClick"
/>
</div>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.item.remark" style="width:260px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { HttpReq } from '@/assets/js/common.js'
import cuAmap from '@/components/AMap'
// style
import '@/assets/styles/common.css'
export default {
name: 'Dashboard',
components: {
cuAmap
},
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query: {},
tableData: [],
form: {
title: '添加项目',
visible: false,
reqType: 'add',
status: { cu: 0 },
item: {
name: '',
address: '',
lng: '',
lat: '',
remark: ''
}
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
address: [
{ type: 'string', required: true, message: '请选择位置', trigger: 'blur' }
]
},
mapinfo: {
zoom: 6,
longitude: 120.651884,
latitude: 36.962533
}
}
},
mounted() {
// var that = this
this.$nextTick(() => {
this.loadData()
})
},
methods: {
tableRowClassName({ row, rowIndex }) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
},
// 点击搜索
toSearch() {
this.page = 1
this.loadData()
},
clearLimit() { // 清除限制
this.loadData()
},
loadData() {
// var that = this;
var sort = 'createTime,desc'
var param = this.query
param.page = this.page - 1
param.size = this.size
param.sort = sort
// 按时间过滤
// var param2 = {}
var Time = param.createTime || []
if (Time[0]) {
var date1 = new Date(Time[0]).getTime()
var date2 = new Date(Time[1] || Time[0]).getTime()
// param2 = { date1: date1, date2: date2 }
}
this.loading = true
HttpReq.project.getProject(param).then((res) => {
this.loading = false
if (res.code === 200) {
var body = res.data || {}
var list = body.content || []
this.tableData = list
this.total = body.totalElements
}
}).catch(function(error) {
this.loading = false
})
},
toAdd() {
this.form.status.cu = 0
this.form.visible = true
this.form.reqType = 'add'
this.form.title = '添加项目'
this.form.item = {
name: '',
address: '',
lng: '',
lat: '',
remark: ''
}
},
toDelete(item) {
var id = item.id
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
this.reqRemoveProject([id])
}).catch((e) => {
})
},
toEdit(data) {
var that = this; var camap = this.$refs.amap
this.form.status.cu = 0
this.form.visible = true
this.form.item = data
this.form.reqType = 'edit'
this.form.title = '修改项目'
if (camap) {
camap.setCenter([data.lng, data.lat])
camap.addMarker({
lnglat: [data.lng, data.lat],
title: '',
draggable: true,
dragend: function(e) {
var lnglat = e.lnglat
camap.deGeocode([lnglat.lng, lnglat.lat], function(addr) {
that.form.item.lng = lnglat.lng
that.form.item.lat = lnglat.lat
that.form.item.address = addr
})
}
})
} else {
this.mapOnload = function() {
camap = this.$refs.amap
camap.addMarker({
lnglat: [data.lng, data.lat],
title: '',
draggable: true,
dragend: function(e) {
var lnglat = e.lnglat
camap.deGeocode([lnglat.lng, lnglat.lat], function(addr) {
that.form.item.lng = lnglat.lng
that.form.item.lat = lnglat.lat
that.form.item.address = addr
})
}
})
}
}
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
cancelForm() {
this.form.visible = false
},
submitForm(validateName, item) {
if (!this.form.status.cu) {
this.form.status.cu = 2
this.$refs[validateName].validate(valid => {
if (valid) {
if (this.form.reqType === 'add') {
this.reqAddProject(this.form, item)
} else {
this.reqUpdateProject(this.form, item)
}
} else {
this.form.status.cu = 0
}
})
}
},
reqAddProject(form, item) {
HttpReq.project.saveProject(item).then((res) => {
form.visible = false
if (res.code === 200) {
this.$notify({
title: '项目添加' + res.msg,
type: 'success',
duration: 2500
})
} else {
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
this.loadData()
}).catch(function(error) {
form.status.cu = 0
})
},
reqUpdateProject(form, item) {
HttpReq.project.updateProject(item).then((res) => {
form.visible = false
if (res.code === 200) {
this.$notify({
title: '修改' + res.msg,
type: 'success',
duration: 2500
})
} else {
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
this.loadData()
}).catch(function(error) {
form.status.cu = 0
})
},
reqRemoveProject(item) {
HttpReq.project.removeProject(item).then((res) => {
if (res.code === 200) {
this.$notify({
title: '删除项目' + res.msg,
type: 'success',
duration: 2500
})
} else {
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
this.loadData()
}).catch(function(error) {
})
},
// 地图
mapClick(e) {
var that = this; var lnglat = e.lnglat; var camap = this.$refs.amap
// 地址解码
camap.deGeocode([lnglat.lng, lnglat.lat], function(addr) {
that.form.item.lng = lnglat.lng
that.form.item.lat = lnglat.lat
that.form.item.address = addr
})
// 添加标记
camap.addMarker({
lnglat: [lnglat.lng, lnglat.lat],
title: '',
draggable: true,
dragend: function(e) {
var lnglat = e.lnglat
camap.deGeocode([lnglat.lng, lnglat.lat], function(addr) {
that.form.item.lng = lnglat.lng
that.form.item.lat = lnglat.lat
that.form.item.address = addr
})
}
})
},
amapOnload() {
this.mapOnload && this.mapOnload()
},
toSearchAddress(addr) {
var that = this; var camap = this.$refs.amap
// 搜索
camap.addressSearch(addr).then((res) => {
that.form.item.lng = res.location.lng
that.form.item.lat = res.location.lat
var marker = camap.addMarker({
lnglat: [res.location.lng, res.location.lat],
draggable: true,
dragend: function(e) {
var lnglat = e.lnglat
camap.deGeocode([lnglat.lng, lnglat.lat], function(addr) {
that.form.item.lng = lnglat.lng
that.form.item.lat = lnglat.lat
that.form.item.address = addr
})
}
})
camap.deGeocode([res.location.lng, res.location.lat], function(addr) {
that.form.item.address = addr
})
this.$refs.amap.setFitView(marker)
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.dialog-map{border:1px solid green;height:300px;width:480px;}
</style>
src/views/RealtimeData/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="common-page">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备编号</label>
<el-input v-model="query.subcode" clearable placeholder="请输入设备识别码或名称" style="width:240px;" @clear="clearLimit"/>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
</div>
</div>
<div class="panel-bottom page-row">
<h3>设备管理列表</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="subcode" label="设备识别码" width="140px"></el-table-column>
<el-table-column prop="ename" label="设备名称"></el-table-column>
<el-table-column prop="relement" label="电量" min-width="55px"></el-table-column>
<el-table-column prop="relementalarm" :formatter="stateFormat" label="电量状态" min-width="55px"></el-table-column>
<!-- <el-table-column prop="rtemperature" label="温度值" width="55px"></el-table-column>
<el-table-column prop="rtemperaturealarm" label="温度状态" :formatter="stateFormat" width="65px"></el-table-column>
<el-table-column prop="rhumidity" label="湿度值" width="55px"></el-table-column>
<el-table-column prop="rhumidityalarm" label="湿度状态" :formatter="stateFormat" width="65px"></el-table-column> -->
<el-table-column prop="rlenght1" label="宽度一" min-width="55px"></el-table-column>
<el-table-column prop="rlenghtalarm1" label="宽度一状态" :formatter="stateFormat" min-width="55px"></el-table-column>
<el-table-column prop="rlenght2" label="宽度二" min-width="55px"></el-table-column>
<el-table-column prop="rlenghtalarm2" label="宽度二状态" :formatter="stateFormat" min-width="55px"></el-table-column>
<el-table-column prop="rlenght3" label="宽度三" min-width="55px"></el-table-column>
<el-table-column prop="rlenghtalarm3" label="宽度三状态" :formatter="stateFormat" min-width="55px"></el-table-column>
<el-table-column prop="rsignal" label="信号强度" width="70px"></el-table-column>
<el-table-column prop="createTime" label="设备激活时间" min-width="140px"></el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
// style
import '@/assets/styles/common.css';
export default {
name: 'Dashboard',
components: {
DateRangePicker
},
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query:{},
tableData: [],
}
},
mounted() {
var that = this;
this.$nextTick(() => {
this.loadData();
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 点击搜索
toSearch() {
this.page = 1
this.loadData()
},
clearLimit(){ // 清除限制
this.loadData()
},
loadData() {
var that = this, sort = 'date,desc';
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.sort = sort;
// 按时间过滤
var param2 = {};
var Time = param.createTime || [];
if(Time[0]){
var date1 = new Date(Time[0]).getTime();
var date2 = new Date(Time[1] || Time[0]).getTime();
param2 = {date1:date1, date2:date2}
};
this.loading = true;
HttpReq.realtime.getItem(param).then((res) => {
this.loading = false;
if(res.head.code === '0000'){
var body = res.body || {};
var list = body.list || [];
this.tableData = list;
this.total = body.total
};
}).catch(function(error) {
this.loading = false;
})
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
stateFormat(row, column, cellValue) {
cellValue = ~~cellValue;
if (cellValue === 0) {
return '正常'
}else {
return '报警'
}
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.dialog-map{border:1px solid green;height:300px;width:480px;}
</style>
src/views/Warning/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="common-page">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">条件查询</label>
<el-input v-model="query.equipmentCode" clearable placeholder="请输入设备识别码或名称" style="width:240px;" @clear="clearLimit"/>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
</div>
</div>
<div class="panel-bottom page-row">
<h3>报警列表</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="projectName" label="所属项目名称" width="90px"></el-table-column>
<el-table-column prop="equipmentCode" label="设备标识码"></el-table-column>
<el-table-column prop="equipmentName" label="所属设备名称" width="100px"></el-table-column>
<el-table-column prop="windspeed" label="实时风速" width="65px"></el-table-column>
<el-table-column prop="windspeedAlarm" label="风速是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.windspeedAlarm === 1}">{{scope.row.windspeedAlarm == 1 ? "报警" : "正常"}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="atemperature" label="温度值" width="60px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.atemperaturealarm === 1}">{{scope.row.atemperature}}</span>
</template>
</el-table-column>
<el-table-column prop="ahumidity" label="湿度值" width="60px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.ahumidityalarm === 1}">{{scope.row.ahumidity}}</span>
</template>
</el-table-column> -->
<el-table-column prop="temperatureAlarm" label="温度是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.temperatureAlarm === 1}">{{scope.row.temperatureAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="humidity" label="实时湿度" width="65px"></el-table-column>
<el-table-column prop="humidityAlarm" label="湿度是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.humidityAlarm === 1}">{{scope.row.humidityAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="co2" label="实时二氧化碳" width="85px"></el-table-column>
<el-table-column prop="co2Alarm" label="二氧化碳是否报警" width="110px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.co2Alarm === 1}">{{scope.row.co2Alarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="mlux" label="实时光照" width="65px"></el-table-column>
<el-table-column prop="mluxAlarm" label="光照是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.mluxAlarm === 1}">{{scope.row.mluxAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="ph" label="实时酸碱度" width="75px"></el-table-column>
<el-table-column prop="phAlarm" label="酸碱度是否报警" width="100px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.phAlarm === 1}">{{scope.row.phAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="waterTemperature" label="实时水温" width="65px"></el-table-column>
<el-table-column prop="waterTemperatureAlarm" label="水温是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.phAlarm === 1}">{{scope.row.phAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="waterDepth" label="实时液位" width="65px"></el-table-column>
<el-table-column prop="waterDepthAlarm" label="液位是否报警" width="85px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.waterDepthAlarm === 1}">{{scope.row.waterDepthAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="electricalConductance" label="实时电导率" width="75px"></el-table-column>
<el-table-column prop="electricalAlarm" label="电导率是否报警" width="100px">
<template slot-scope="scope">
<span :class="{alarm:scope.row.electricalAlarm === 1}">{{scope.row.electricalAlarm == 1 ? "是" : "否"}}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="记录时间" width="130px"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center" width="90px" fixed="right">
<template slot-scope="scope">
<span v-if="scope.row.state===1" class="normal">已处理</span>
<span v-else class="alarm">未处理</span>
</template>
</el-table-column>
<el-table-column label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="success" icon="el-icon-alarm-clock" :disabled="scope.row.state===1" @click="toEdit(scope.row)">解除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
// style
import '@/assets/styles/common.css';
export default {
name: 'Dashboard',
components: {
DateRangePicker
},
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query:{},
tableData: [],
}
},
mounted() {
var that = this;
this.$nextTick(() => {
this.loadData();
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 点击搜索
toSearch() {
this.page = 1
this.loadData()
},
clearLimit(){ // 清除限制
this.loadData()
},
loadData() {
var that = this, sort = 'createTime,desc';
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.sort = sort;
// 按时间过滤
var param2 = {};
var Time = param.createTime || [];
if(Time[0]){
var date1 = new Date(Time[0]).getTime();
var date2 = new Date(Time[1] || Time[0]).getTime();
param2 = {date1:date1, date2:date2}
};
this.loading = true;
HttpReq.alarm.getList(param).then((res) => {
this.loading = false;
if(res.code === 200){
var body = res.data || {};
var list = body.content || [];
this.tableData = list;
this.total = body.totalElements
};
}).catch(function(error) {
this.loading = false;
})
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
toEdit(item) {
var id = item.id;
this.$confirm('确认处理该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
var json = {};
for(var key in item){
if(key.indexOf('alarm') > 0 && item[key]){
json[key] = item[key]
}
};
this.reqUpdateItem({id:id, state:1, alarm:json})
}).catch((e) => {
})
},
reqUpdateItem(item){
HttpReq.alarm.updateItem(item).then((res) => {
if(res.code == 200){
this.$notify({
title: '解除成功！',
type: 'success',
duration: 2500
})
}else{
this.$notify({
title: '解除失败！',
type: 'error',
duration: 2500
})
};
this.loadData()
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.el-table{
.alarm{color:#ff0000;}
.normal{color:#b3b3b3;}
}
</style>
src/views/generator/config.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="app-container">
<el-row :gutter="15">
<el-col style="margin-bottom: 10px">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span">字段配置：{{ tableName }}</span>
<el-button
:loading="genLoading"
icon="el-icon-s-promotion"
size="mini"
style="float: right; padding: 6px 9px;"
type="success"
@click="toGen"
>保存&生成</el-button>
<el-button
:loading="columnLoading"
icon="el-icon-check"
size="mini"
style="float: right; padding: 6px 9px;margin-right: 9px"
type="primary"
@click="saveColumnConfig"
>保存</el-button>
<el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
<el-button
:loading="syncLoading"
icon="el-icon-refresh"
size="mini"
style="float: right; padding: 6px 9px;"
type="info"
@click="sync"
>同步</el-button>
</el-tooltip>
</div>
<el-form size="small" label-width="90px">
<el-table v-loading="loading" :data="data" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
<el-table-column prop="columnName" label="字段名称" />
<el-table-column prop="columnType" label="字段类型" />
<el-table-column prop="remark" label="字段描述">
<template slot-scope="scope">
<el-input v-model="data[scope.$index].remark" size="mini" class="edit-input" />
</template>
</el-table-column>
<el-table-column align="center" label="必填" width="70px">
<template slot-scope="scope">
<el-checkbox v-model="data[scope.$index].notNull" />
</template>
</el-table-column>
<el-table-column align="center" label="列表" width="70px">
<template slot-scope="scope">
<el-checkbox v-model="data[scope.$index].listShow" />
</template>
</el-table-column>
<el-table-column align="center" label="表单" width="70px">
<template slot-scope="scope">
<el-checkbox v-model="data[scope.$index].formShow" />
</template>
</el-table-column>
<el-table-column label="表单类型">
<template slot-scope="scope">
<el-select v-model="data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
<el-option
label="文本框"
value="Input"
/>
<el-option
label="文本域"
value="Textarea"
/>
<el-option
label="单选框"
value="Radio"
/>
<el-option
label="下拉框"
value="Select"
/>
<el-option
label="日期框"
value="Date"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="查询方式">
<template slot-scope="scope">
<el-select v-model="data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
<el-option
label="="
value="="
/>
<el-option
label="!="
value="!="
/>
<el-option
label=">="
value=">="
/>
<el-option
label="<="
value="<="
/>
<el-option
label="Like"
value="Like"
/>
<el-option
label="NotNull"
value="NotNull"
/>
<el-option
label="BetWeen"
value="BetWeen"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="日期注解">
<template slot-scope="scope">
<el-select v-model="data[scope.$index].dateAnnotation" filterable class="edit-input" clearable size="mini" placeholder="请选择">
<el-option
label="自动创建时间"
value="CreationTimestamp"
/>
<el-option
label="自动更新时间"
value="UpdateTimestamp"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="关联字典">
<template slot-scope="scope">
<el-select v-model="data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
<el-option v-for="item in dicts" :key="item.id" :label="item.remark === '' ? item.name : item.remark" :value="item.name" />
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
</el-card>
</el-col>
<el-col>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span">生成配置</span>
<el-button
:loading="configLoading"
icon="el-icon-check"
size="mini"
style="float: right; padding: 6px 9px"
type="primary"
@click="doSubmit"
>保存</el-button>
</div>
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px">
<el-form-item label="作者名称" prop="author">
<el-input v-model="form.author" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
</el-form-item>
<el-form-item label="模块名称" prop="moduleName">
<el-input v-model="form.moduleName" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
</el-form-item>
<el-form-item label="至于包下" prop="pack">
<el-input v-model="form.pack" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
</el-form-item>
<el-form-item label="接口名称" prop="apiAlias">
<el-input v-model="form.apiAlias" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
</el-form-item>
<el-form-item label="前端路径" prop="path">
<el-input v-model="form.path" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
</el-form-item>
<!-- <el-form-item label="接口目录">-->
<!-- <el-input v-model="form.apiPath" style="width: 40%" />-->
<!-- <span style="color: #C0C0C0;margin-left: 10px;">Api存放路径[src/api]，为空则自动生成路径</span>-->
<!-- </el-form-item>-->
<el-form-item label="去表前缀" prop="prefix">
<el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%" />
<span style="color: #C0C0C0;margin-left: 10px;">默认不去除表前缀，可自定义</span>
</el-form-item>
<el-form-item label="是否覆盖" prop="cover">
<el-radio-group v-model="form.cover" size="mini" style="width: 40%">
<el-radio-button label="true">是</el-radio-button>
<el-radio-button label="false">否</el-radio-button>
</el-radio-group>
<span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import crud from '@/mixins/crud'
import { update, get } from '@/api/generator/genConfig'
import { save, sync, generator } from '@/api/generator/generator'
import { getDicts } from '@/api/system/dict'
export default {
name: 'GeneratorConfig',
components: {},
mixins: [crud],
data() {
return {
activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [], syncLoading: false, genLoading: false,
form: { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '', apiAlias: null },
rules: {
author: [
{ required: true, message: '作者不能为空', trigger: 'blur' }
],
pack: [
{ required: true, message: '包路径不能为空', trigger: 'blur' }
],
moduleName: [
{ required: true, message: '包路径不能为空', trigger: 'blur' }
],
path: [
{ required: true, message: '前端路径不能为空', trigger: 'blur' }
],
apiAlias: [
{ required: true, message: '接口名称不能为空', trigger: 'blur' }
],
cover: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
created() {
this.tableHeight = document.documentElement.clientHeight - 385
this.tableName = this.$route.params.tableName
this.$nextTick(() => {
this.init()
get(this.tableName).then(data => {
this.form = data
this.form.cover = this.form.cover.toString()
})
getDicts().then(data => {
this.dicts = data
})
})
},
methods: {
beforeInit() {
this.url = 'api/generator/columns'
const tableName = this.tableName
this.params = { tableName }
return true
},
saveColumnConfig() {
this.columnLoading = true
save(this.data).then(res => {
this.notify('保存成功', 'success')
this.columnLoading = false
}).catch(err => {
this.columnLoading = false
console.log(err.response.data.message)
})
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.configLoading = true
update(this.form).then(res => {
this.notify('保存成功', 'success')
this.form = res
this.form.cover = this.form.cover.toString()
this.configLoading = false
}).catch(err => {
this.configLoading = false
console.log(err.response.data.message)
})
}
})
},
sync() {
this.syncLoading = true
sync([this.tableName]).then(() => {
this.init()
this.notify('同步成功', 'success')
this.syncLoading = false
}).then(() => {
this.syncLoading = false
})
},
toGen() {
this.genLoading = true
save(this.data).then(res => {
this.notify('保存成功', 'success')
// 生成代码
generator(this.tableName, 0).then(data => {
this.genLoading = false
this.notify('生成成功', 'success')
}).catch(err => {
this.genLoading = false
console.log(err.response.data.message)
})
}).catch(err => {
this.genLoading = false
console.log(err.response.data.message)
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.edit-input {
.el-input__inner {
border: 1px solid #e5e6e7;
}
}
</style>
<style scoped>
::v-deep .input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
src/views/generator/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<el-input v-model="query.name" clearable size="small" placeholder="请输入表名" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation />
</div>
<crudOperation>
<el-tooltip slot="right" class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-refresh"
:loading="syncLoading"
:disabled="crud.selections.length === 0"
@click="sync"
>同步</el-button>
</el-tooltip>
</crudOperation>
</div>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="tableName" label="表名" />
<el-table-column :show-overflow-tooltip="true" prop="engine" label="数据库引擎" />
<el-table-column :show-overflow-tooltip="true" prop="coding" label="字符编码集" />
<el-table-column :show-overflow-tooltip="true" prop="remark" label="备注" />
<el-table-column prop="createTime" label="创建日期" />
<el-table-column label="操作" width="160px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" style="margin-right: 2px" type="text">
<router-link :to="'/sys-tools/generator/preview/' + scope.row.tableName">
预览
</router-link>
</el-button>
<el-button size="mini" style="margin-left: -1px;margin-right: 2px" type="text" @click="toDownload(scope.row.tableName)">下载</el-button>
<el-button size="mini" style="margin-left: -1px;margin-right: 2px" type="text">
<router-link :to="'/sys-tools/generator/config/' + scope.row.tableName">
配置
</router-link>
</el-button>
<el-button type="text" style="margin-left: -1px" size="mini" @click="toGen(scope.row.tableName)">生成</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</template>
<script>
import { generator, sync } from '@/api/generator/generator'
import { downloadFile } from '@/utils/index'
import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
export default {
name: 'GeneratorIndex',
components: { pagination, crudOperation, rrOperation },
cruds() {
return CRUD({ url: 'api/generator/tables' })
},
mixins: [presenter(), header()],
data() {
return {
syncLoading: false
}
},
created() {
this.crud.optShow = { add: false, edit: false, del: false, download: false }
},
methods: {
toGen(tableName) {
// 生成代码
generator(tableName, 0).then(data => {
this.$notify({
title: '生成成功',
type: 'success',
duration: 2500
})
})
},
toDownload(tableName) {
// 打包下载
generator(tableName, 2).then(data => {
downloadFile(data, tableName, 'zip')
})
},
sync() {
const tables = []
this.crud.selections.forEach(val => {
tables.push(val.tableName)
})
this.syncLoading = true
sync(tables).then(() => {
this.crud.refresh()
this.crud.notify('同步成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.syncLoading = false
}).then(() => {
this.syncLoading = false
})
}
}
}
</script>
<style scoped>
</style>
src/views/generator/preview.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
<Java :value="item.content" :height="height" />
</el-tab-pane>
</el-tabs>
</template>
<script>
import Java from '@/components/JavaEdit/index'
import { generator } from '@/api/generator/generator'
export default {
name: 'Preview',
components: { Java },
data() {
return {
data: null, height: '', activeName: 'Entity'
}
},
created() {
this.height = document.documentElement.clientHeight - 180 + 'px'
const tableName = this.$route.params.tableName
generator(tableName, 1).then(data => {
this.data = data
}).catch(() => {
this.$router.go(-1)
})
}
}
</script>
src/views/nested/menu1/menu1-1/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div class="app-container">
<el-alert :closable="false" title="三级菜单1" type="success" />
<el-form label-width="170px" style="margin-top: 20px">
<el-form-item label="三级菜单缓存功能测试区">
<el-input v-model="input" placeholder="请输入内容" style="width: 360px;" />
</el-form-item>
</el-form>
<div>
<blockquote class="my-blockquote"> 三级菜单缓存配置教程</blockquote>
<pre class="my-code">
1、将前后端代码更新为最新版版本，或对照提交记录修改,点击查看-> <a href="https://gitee.com/elunez/eladmin/commit/43d1a63577f9d5347924355708429a2d210e29f7" target="_blank">提交(1)</a>、<a href="https://gitee.com/elunez/eladmin/commit/46393875148fcca5eaa327d4073f72edb3752f5c" target="_blank">提交(2)</a>、<a href="https://gitee.com/elunez/eladmin-web/commit/c93c99d8921abbb2c52afc806635f5ca08d6bda8" target="_blank">提交(3)</a>
2、将 二级菜单 的 菜单类型 设置为 目录 级别，并且原有的 组件路径 需要清空
3、将 三级菜单 的 菜单缓存 设置为 是，最后将 组件名称 填写正确
4、具体设置可参考 菜单管理 的 多级菜单 配置进行进行相应的修改
</pre>
<blockquote class="my-blockquote">更多帮助</blockquote>
<pre class="my-code">QQ交流群：一群：891137268、二群：947578238</pre>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
input: ''
}
}
}
</script>
<style scoped>
.my-code a{
color:#009688;
}
</style>
src/views/nested/menu1/menu1-2/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="三级菜单2" type="success" />
</div>
</template>
src/views/nested/menu2/index.vue deleted 100644 → 0
View file @ b825fa0a
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="二级菜单" />
</div>
</template>
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