|
|
@@ -1,462 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container sensorConfiguration">
|
|
|
- <div class="title-box">
|
|
|
- <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true">
|
|
|
- <el-form-item label="状态" prop="category" label-width="60px">
|
|
|
- <el-select v-model="queryParams.category" clearable placeholder="请选择分类" style="width: 200px">
|
|
|
- <el-option
|
|
|
- v-for="item in optionList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="文件名" prop="fileName">
|
|
|
- <el-input
|
|
|
- maxLength="30"
|
|
|
- v-model="queryParams.fileName"
|
|
|
- placeholder="文件名"
|
|
|
- clearable
|
|
|
- style="width: 200px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
|
|
|
- <p class="reset-button-one" @click="resetQuery">重置</p>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="" prop="title" style="float: right;margin-right:20px;">
|
|
|
- <p class="add-button-one-90" @click="tableButton(1)">新增</p>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="content-box">
|
|
|
- <el-table v-loading="loading" border :data="dataList" ref="multipleTable">
|
|
|
- <el-table-column label="文件名" align="center" prop="fileName" show-overflow-tooltip/>
|
|
|
- <el-table-column label="PC端正常图标" align="center" prop="pcNormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.pcNormal" :src="scope.row.pcNormal" @click="lookImgButton(scope.row.pcNormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="PC端异常图标" align="center" prop="pcAbnormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.pcAbnormal" :src="scope.row.pcAbnormal" @click="lookImgButton(scope.row.pcAbnormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="疏散正常图标" align="center" prop="evacuationNormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.evacuationNormal" :src="scope.row.evacuationNormal" @click="lookImgButton(scope.row.evacuationNormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="疏散异常图标" align="center" prop="evacuationAbnormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.evacuationAbnormal" :src="scope.row.evacuationAbnormal" @click="lookImgButton(scope.row.evacuationAbnormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="小程序正常图标" align="center" prop="smallProgramNormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.smallProgramNormal" :src="scope.row.smallProgramNormal" @click="lookImgButton(scope.row.smallProgramNormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="小程序异常图标" align="center" prop="smallProgramAbnormal" show-overflow-tooltip width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="icon-img-box" v-if="scope.row.smallProgramAbnormal" :src="scope.row.smallProgramAbnormal" @click="lookImgButton(scope.row.smallProgramAbnormal)">
|
|
|
- <p v-else>未上传</p>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" width="170">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="table-button-box">
|
|
|
- <p class="table-button-null"></p>
|
|
|
- <p class="table-button-p" @click="tableButton(2,scope.row)">编辑</p>
|
|
|
- <p class="table-button-p" @click="tableButton(3,scope.row)">删除</p>
|
|
|
- <p class="table-button-null"></p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination :page-sizes="[20, 30, 40, 50]"
|
|
|
- v-show="total>0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.page"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"/>
|
|
|
- </div>
|
|
|
- <!--新增编辑dialog-->
|
|
|
- <el-dialog class="sensorConfiguration-dialog" :title="dialogTitle"
|
|
|
- :visible.sync="dialogType" v-if="dialogType" width="600px"
|
|
|
- append-to-body :close-on-click-modal="false">
|
|
|
- <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="90px">
|
|
|
- <el-form-item label="名称" prop="name">
|
|
|
- <el-input v-model="dialogForm.name" placeholder="请输入备注" style="width:410px;"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="字符" prop="value">
|
|
|
- <el-input v-model="dialogForm.value" placeholder="请输入备注" style="width:410px;"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="isStart">
|
|
|
- <el-radio-group v-model="dialogForm.start" style="margin-top:4px;">
|
|
|
- <el-radio :label="true" style="margin:0 40px 0 10px;">启用</el-radio>
|
|
|
- <el-radio :label="false">停用</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <div class="up-img-box">
|
|
|
- <el-form-item label="pc端正常图标：" prop="pcNormal" label-width="160px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'pcNormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.pcNormal" :src="dialogForm.pcNormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.pcNormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.pcNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.pcNormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="pc端正常图标：" prop="pcAbnormal" label-width="180px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'pcAbnormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.pcAbnormal" :src="dialogForm.pcAbnormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.pcAbnormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.pcAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.pcAbnormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="up-img-box">
|
|
|
- <el-form-item label="疏散正常图标：" prop="evacuationNormal" label-width="160px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'evacuationNormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.evacuationNormal" :src="dialogForm.evacuationNormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.evacuationNormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.evacuationNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.evacuationNormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="疏散正常图标：" prop="evacuationAbnormal" label-width="180px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'evacuationAbnormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.evacuationAbnormal" :src="dialogForm.evacuationAbnormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.evacuationAbnormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.evacuationAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.evacuationAbnormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="up-img-box">
|
|
|
- <el-form-item label="小程序正常图标：" prop="smallProgramNormal" label-width="160px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'smallProgramNormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.smallProgramNormal" :src="dialogForm.smallProgramNormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.smallProgramNormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.smallProgramNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.smallProgramNormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="小程序正常图标：" prop="smallProgramAbnormal" label-width="180px">
|
|
|
- <el-upload
|
|
|
- class="certificate-avatar-uploader"
|
|
|
- :action="uploadImgUrl"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- :on-success="(res)=>handleAvatarSuccess(res,'smallProgramAbnormal')"
|
|
|
- :headers="headers"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img class="up-img" v-if="dialogForm.smallProgramAbnormal" :src="dialogForm.smallProgramAbnormal">
|
|
|
- <i class="el-icon-plus up-i" v-if="!dialogForm.smallProgramAbnormal"></i>
|
|
|
- </el-upload>
|
|
|
- <i v-if="dialogForm.smallProgramAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.smallProgramAbnormal)"
|
|
|
- style=""></i>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer dialog-footer-box">
|
|
|
- <p class="dialog-footer-button-null"></p>
|
|
|
- <p class="dialog-footer-button-info" @click="dialogCancel">取消</p>
|
|
|
- <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
|
|
|
- <p class="dialog-footer-button-null"></p>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!--单张图片预览-->
|
|
|
- <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { getToken } from "@/utils/auth";
|
|
|
- import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
|
|
|
- export default {
|
|
|
- name: 'index',
|
|
|
- components: {
|
|
|
- lookSingleImgDialog,
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
|
|
|
- headers: {
|
|
|
- Authorization:getToken(),
|
|
|
- },
|
|
|
- loading:false,
|
|
|
- optionList:[{label:'启用',value:true},{label:'停用',value:false}],
|
|
|
- queryParams:{
|
|
|
- page:1,
|
|
|
- pageSize:20,
|
|
|
- category:"",
|
|
|
- fileName:"",
|
|
|
- },
|
|
|
- dataList:[],
|
|
|
- total:0,
|
|
|
- //dialog
|
|
|
- dialogTitle:"",
|
|
|
- dialogType:false,
|
|
|
- dialogForm:{},
|
|
|
- dialogRules:{
|
|
|
- demo: [
|
|
|
- { required: true, message: "学校名称不能为空", trigger: "blur" },
|
|
|
- { required: true, message: "学校名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
- ],
|
|
|
- pcNormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- pcAbnormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- evacuationNormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- evacuationAbnormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- smallProgramNormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- smallProgramAbnormal: [
|
|
|
- { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
- ],
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created(){
|
|
|
-
|
|
|
- },
|
|
|
- mounted(){
|
|
|
-
|
|
|
- },
|
|
|
- methods:{
|
|
|
- //查询
|
|
|
- handleQuery(){
|
|
|
- this.$set(this.queryParams,'page',1);
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- //重置
|
|
|
- resetQuery(){
|
|
|
- this.$set(this,'dateRange',[])
|
|
|
- this.$set(this,'queryParams',{
|
|
|
- page:1,
|
|
|
- pageSize:20,
|
|
|
- category:"",
|
|
|
- fileName:"",
|
|
|
- });
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- //获取数据列表
|
|
|
- getList(){
|
|
|
- this.$set(this,'loading',true);
|
|
|
- let obj = JSON.parse(JSON.stringify(this.queryParams))
|
|
|
- if(this.dateRange[0]){
|
|
|
- obj.startTime = this.dateRange[0]+'T00:00:00'
|
|
|
- obj.endTime = this.dateRange[1]+'T23:59:59'
|
|
|
- }else{
|
|
|
- obj.startTime = "";
|
|
|
- obj.endTime = "";
|
|
|
- }
|
|
|
- getFileList(obj).then(response => {
|
|
|
- this.$set(this,'loading',false);
|
|
|
- this.$set(this,'tableList',response.data.records);
|
|
|
- this.$set(this,'total',response.data.total);
|
|
|
- });
|
|
|
- },
|
|
|
- lookImgButton(url){
|
|
|
- if(url){
|
|
|
- this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'预览');
|
|
|
- }
|
|
|
- },
|
|
|
- //table操作按钮
|
|
|
- tableButton(type,row){
|
|
|
- let self = this;
|
|
|
- if(type == 1){
|
|
|
- //新增
|
|
|
- this.resetForm();
|
|
|
- this.$set(this,'dialogTitle','新增');
|
|
|
- this.$set(this,'dialogType',true);
|
|
|
- }else if(type == 2){
|
|
|
- //编辑
|
|
|
- this.resetForm();
|
|
|
- this.$set(this,'dialogTitle','编辑');
|
|
|
- this.$set(this,'dialogType',true);
|
|
|
- this.$set(this,'dialogForm',row);
|
|
|
- }else if(type == 3){
|
|
|
- //删除
|
|
|
- this.$confirm('是否确认删除?', "警告", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- }).then(function() {
|
|
|
- }).then(() => {
|
|
|
- // appInfoDelete({id:row.id}).then(response => {
|
|
|
- // self.msgSuccess(response.message)
|
|
|
- // self.getList();
|
|
|
- // });
|
|
|
- }).catch(() => {});
|
|
|
- }
|
|
|
- },
|
|
|
- //重置
|
|
|
- resetForm() {
|
|
|
- this.$set(this,'dialogForm',{
|
|
|
- pcNormal:'121',
|
|
|
- pcAbnormal:'',
|
|
|
- evacuationNormal:'',
|
|
|
- evacuationAbnormal:'',
|
|
|
- smallProgramNormal:'',
|
|
|
- smallProgramAbnormal:'',
|
|
|
- });
|
|
|
- },
|
|
|
- //dialog提交
|
|
|
- dialogSubmit(){
|
|
|
- this.$refs["dialogForm"].validate(valid => {
|
|
|
- if (valid) {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //dialog取消
|
|
|
- dialogCancel(){
|
|
|
- this.$set(this,'dialogType',false);
|
|
|
- },
|
|
|
- //上传
|
|
|
- handleAvatarSuccess(res,type) {
|
|
|
- console.log('res',res)
|
|
|
- console.log('type',type)
|
|
|
- if(type == 'pcNormal'){
|
|
|
- this.$set(this.dialogForm,'pcNormal',res.data.url);
|
|
|
- }else if(type == 'pcAbnormal'){
|
|
|
- this.$set(this.dialogForm,'pcAbnormal',res.data.url);
|
|
|
- }else if(type == 'evacuationNormal'){
|
|
|
- this.$set(this.dialogForm,'evacuationNormal',res.data.url);
|
|
|
- }else if(type == 'evacuationAbnormal'){
|
|
|
- this.$set(this.dialogForm,'evacuationAbnormal',res.data.url);
|
|
|
- }else if(type == 'smallProgramNormal'){
|
|
|
- this.$set(this.dialogForm,'smallProgramNormal',res.data.url);
|
|
|
- }else if(type == 'smallProgramAbnormal'){
|
|
|
- this.$set(this.dialogForm,'smallProgramAbnormal',res.data.url);
|
|
|
- }
|
|
|
- this.$forceUpdate()
|
|
|
- },
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- let type = false;
|
|
|
- console.log('file',file);
|
|
|
- if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
|
|
|
- type = true;
|
|
|
- }else{
|
|
|
- this.$message.error('只能上传png/jpeg/gif格式图片');
|
|
|
- type = false;
|
|
|
- }
|
|
|
- return type;
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.sensorConfiguration{
|
|
|
- .title-box{
|
|
|
- padding-top:20px;
|
|
|
- border-bottom:1px solid #dedede;
|
|
|
- .form-box{
|
|
|
- flex:1;
|
|
|
- }
|
|
|
- }
|
|
|
- .content-box{
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding:20px;
|
|
|
- overflow: hidden;
|
|
|
- ::v-deep .el-table .icon-img-box{
|
|
|
- width:23px;
|
|
|
- height:23px;
|
|
|
- display: block;
|
|
|
- margin:auto;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
- .sensorConfiguration-dialog{
|
|
|
- .certificate-avatar-uploader{
|
|
|
- height:80px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .up-img-box{
|
|
|
- height:100px;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- .up-img{
|
|
|
- height:80px;
|
|
|
- width:80px;
|
|
|
- border:1px solid #e0e0e0;
|
|
|
- border-radius:4px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .up-i{
|
|
|
-
|
|
|
- }
|
|
|
- .look-i{
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- right:0;
|
|
|
- z-index:999;
|
|
|
- border-radius:3px;
|
|
|
- cursor:pointer;
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
- line-height:20px;
|
|
|
- text-align: center;
|
|
|
- background: rgba(0,0,0,0.2);
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
dedsudiyu