Skip to content

R
rs-cloud-platform-ui
Commit 6b0fcb52 authored by Xiaxuxia's avatar Xiaxuxia
Browse files
Options

新增影像图库

parent cf0c03e4
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 80 deletions
src/api/website/imageLibrary/index.js
View file @ 6b0fcb52
import fetch from 'utils/fetch';
//获取影像图库列表
export function page(query) {
return fetch({
url: '/api/website/imageImgStorage/getList',
......@@ -7,7 +7,7 @@ export function page(query) {
params: query
});
}
//新增或修改影像图库
export function update(query) {
return fetch({
url: '/api/website/imageImgStorage/addUpdate',
......@@ -15,3 +15,19 @@ export function update(query) {
data: query
});
}
//获取所有相似图像
export function getAll(query) {
return fetch({
url: '/api/website/imageInfoRelation/getAll',
method: 'get',
params: query
});
}
///api/website/imageImgStorage/getDetail/{id}
export function getDetail(query) {
return fetch({
url: `/api/website/imageImgStorage/getDetail/${query}`,
method: 'get'
});
}
src/components/Upload/singleImageX.vue
View file @ 6b0fcb52
<template>
<div class="upload-container">
<el-upload
v-show="!imageUrl"
ref="upload"
v-show="!value"
:ref="refName"
drag
v-loading="uploading"
action="#"
......@@ -14,9 +14,9 @@
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__text">只能上传1个文件</div>
</el-upload>
<div class="image-preview" v-show="imageUrl">
<div class="image-preview" v-show="value">
<div class="image-preview-wrapper">
<img :src="imageUrl" />
<img :src="value" />
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>
</div>
......@@ -29,12 +29,16 @@
// 预览效果见专题
import { uploadFile } from "@/api/website/newsCategory/index";
export default {
name: "singleImageUpload2",
name: "singleImageX",
props: {
refName: {
type: String,
default: 'upload'
},
//图片地址
value: {
type: String,
default: "",
default: () => "",
},
},
data() {
......@@ -42,26 +46,29 @@ export default {
uploading: false
};
},
computed: {
imageUrl() {
return (!!this.value) ? this.value : ""
}
},
methods: {
//删除图片
rmImage() {
this.$refs.upload.clearFiles()
this.emitFunc("");
this.$refs[this.refName].clearFiles()
this.emitFunc("", null);
},
//上传请求
onUploadRequest(data) {
this.uploading = true;
let fileObj = data.file;
console.log(data)
//获取图片详情信息
let imgInfo = {};
let temp = URL.createObjectURL(fileObj)
let img = new Image();
img.src = temp;
console.log(img.width, img.height)
img.onload = function () {
imgInfo.width = img.width;
imgInfo.height = img.height;
}
imgInfo.size = fileObj.size;
imgInfo.type = fileObj.type;
// FormData 对象
let form = new FormData();
......@@ -72,16 +79,16 @@ export default {
this.uploading = false;
if (res.status == 200) {
this.emitFunc(res.data)
this.emitFunc(res.data, imgInfo)
} else {
this.emitFunc("");
this.emitFunc("", null);
this.$message.error(res.message)
}
})
},
//组件通信
emitFunc(val) {
this.$emit('input', val)
emitFunc(val, info = null) {
this.$emit('input', val, info)
}
},
};
......
src/views/webSiteManagement/imageLibrary/edit.vue
View file @ 6b0fcb52
......@@ -6,23 +6,25 @@
<div class="body">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-alert title="基础信息" type="info" :closable="false"></el-alert>
<el-alert title="基础信息" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
<el-form-item label="产品名称" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
</el-form-item>
<el-form-item label="产品缩略图" prop="coverImage">
<el-form-item label="产品缩略图" prop="coverImg">
<!-- 上传 -->
<my-upload :value="ruleForm.coverImage" @input="(val) => getSrc('coverImage', val)"></my-upload>
<my-upload :value="ruleForm.coverImg" @input="(val, info) => getSrc('coverImg', val)"></my-upload>
</el-form-item>
<el-form-item label="上传源文件" :prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'">
<!-- 上传 -->
<my-upload :value="ruleForm.imageInfoRelationList.url" @input="(val) => getSrc('imageInfoRelationList', val)"></my-upload>
<my-upload refName="upload2" :value="ruleForm.imageInfoRelationList.url" @input="(val, info) => getSrc('imageInfoRelationList', val, info)"></my-upload>
<div v-if="ruleForm.imageInfoRelationList.fileWidth">尺寸大小：{{ruleForm.imageInfoRelationList.fileWidth}}</div>
<el-input size="mini" v-model="ruleForm.imageInfoRelationList.price" placeholder="请输入价格"></el-input>
</el-form-item>
<el-alert title="产品参数" type="info" :closable="false"></el-alert>
<el-alert title="产品参数" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
<el-form-item label="影像分类" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择">
......@@ -34,10 +36,10 @@
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="产品类型" prop="">
<el-input v-model="ruleForm.type" placeholder="请输入产品类型"></el-input>
</el-form-item> -->
<el-form-item label="文件格式" prop="paramJson.fileType">
<el-form-item label="产品类型" prop="paramJson.productType">
<el-input v-model="ruleForm.paramJson.productType" placeholder="请输入产品类型"></el-input>
</el-form-item>
<el-form-item label="文件格式" prop="paramJson.productType">
<el-input v-model="ruleForm.paramJson.fileType" placeholder="请输入文件格式"></el-input>
</el-form-item>
<el-form-item label="卫星" prop="paramJson.satellite">
......@@ -51,6 +53,7 @@
</el-form-item>
<el-form-item label="拍摄时间" prop="paramJson.shotTime">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="ruleForm.paramJson.shotTime"
type="datetime"
placeholder="选择日期时间">
......@@ -68,29 +71,65 @@
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="相似图片" prop="type">
<el-input v-model="ruleForm.type"></el-input>
</el-form-item> -->
<el-form-item label="相似图片" prop="relatedIds">
<el-button type="primary" icon="el-icon-plus" @click="showImagesDialog">相似图片</el-button>
<el-tag type="success">已选 {{images.selects.length}}个</el-tag>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<!-- 相似图片弹窗 -->
<el-dialog title="相似图片" :visible.sync="images.visible" width="80%" :close-on-click-modal="false">
<el-row :gutter="20">
<el-col :span="6" v-for="item in images.datas" :key="item.id">
<div :class="`grid-content${selectsArr.includes('' + item.id) ? ' active' : ''}`" @click="select(item)">
<el-image :src="item.url" lazy></el-image>
</div>
</el-col>
</el-row>
<div style="margin-top: 10px; display: flex; align-item: center; justify-content: center;">
<el-pagination
small
layout="prev, pager, next"
:page-size="images.pageInfo.limit"
:total="images.total"
@current-change="currentChange">
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="confirm">确 定</el-button>
<el-button @click="images.visible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件
// import { satelliteIntroduction } from "@/utils/formDatas.js"//表单数据
import { update } from "@/api/website/imageLibrary"
import { update, getAll, getDetail } from "@/api/website/imageLibrary"
export default {
components: {
MyUpload
},
data() {
let checkNumber = function (rule, value, callback) {
if (value === '') {
callback(new Error('请输入价格'));
} else {
if (isNaN(value)) {
callback(new Error('请输入数字'));
} else {
callback();
}
}
}
return {
//1--影像美图 2--专题图 3--遥感成果图
imageTypes: {
......@@ -100,15 +139,18 @@ export default {
},
ruleForm: {
name: '',
coverImage: '',
coverImg: '',
imageInfoRelationList: {
url: '',
price: ''
price: null,
fileWidth: '',
fileSize: '',
},
type: '',
relatedIds: "",
paramJson: {
productType: '',
fileType: '',
fileWidth: '',
satellite: '',
resolution: '',
address: '',
......@@ -121,20 +163,24 @@ export default {
name: [
{required: true, message: '请输入产品名称', trigger: 'blur'}
],
coverImage: [
coverImg: [
{required: true, message: '请上传缩略图', trigger: 'change'}
],
'imageInfoRelationList.url': [
{required: true, message: '请上传源文件', trigger: 'change'}
],
'imageInfoRelationList.price': [
{required: true, message: '请输入价格', trigger: 'blur'}
{required: true, message: '请输入价格', trigger: 'blur'},
{validator: checkNumber, trigger: 'blur'}//校验是否是数字
],
type: [
{required: true, message: '请选择影像类型', trigger: 'change'}
],
'paramJson.productType': [
{required: true, message: '请输入产品类型', trigger: 'blur'}
],
'paramJson.fileType': [
{required: true, message: '请输入文件类型', trigger: 'blur'}
{required: true, message: '请输入文件格式'}
],
'paramJson.satellite': [
{required: true, message: '请输入卫星型号', trigger: 'blur'}
......@@ -146,42 +192,142 @@ export default {
{required: true, message: '请输入拍摄地点', trigger: 'blur'}
],
'paramJson.shotTime': [
{type: 'date', required: true, message: '请选择拍摄时间', trigger: 'change'}
{required: true, message: '请选择拍摄时间', trigger: 'change'}
],
'paramJson.commercial': [
{required: true, message: '请选择', trigger: 'change'}
],
'paramJson.watermark': [
{required: true, message: '请选择', trigger: 'change'}
],
relatedIds: [
{required: true, message: '请选择'}
]
}
},
images: {
pageInfo: {
page: 1,
limit: 20,
},
total: 100,
datas: [],
visible: false,
selects: []
},
selectsArr: []
}
},
mounted() {
this.$bus.$on('satelliteIntroduction-edit-renderData', this.renderData)
//获取所有相似图像
this.getAllImages()
this.$bus.$on('imageLibrary-edit-renderData', this.renderData)
},
beforeDestroy() {
this.$bus.$off('imageLibrary-edit-renderData')
},
methods: {
getSrc(key, val) {
//打开相似图片dialog弹窗
showImagesDialog() {
// console.log(this.images.selects)
this.selectsArr = JSON.parse(JSON.stringify(this.images.selects))
this.images.visible = true;
},
//相似图片弹窗图片列表切换页面方法
currentChange(val) {
this.images.pageInfo.page = val;
this.getAllImages();
},
//选择相似图片确定按钮
confirm() {
if (this.selectsArr.length <= 0) {
this.$message.info('至少选出一个')
return;
}
this.images.visible = false;
this.ruleForm.relatedIds = this.selectsArr.toString();
this.images.selects = JSON.parse(JSON.stringify(this.selectsArr));
},
//选择相似图片
select(item) {
let selects = this.selectsArr;
let index = selects.indexOf(item.id + '')
if (index > -1) {
selects.splice(index, 1)
} else {
selects.push(item.id + '')
}
this.selectsArr = selects
},
//获取所有相似图像
getAllImages() {
getAll(this.images.pageInfo).then(res => {
this.images.datas = res.data.data
this.images.total = res.data.totalCount
})
},
//上传图片，获取图片地址
getSrc(key, val, info) {
let rule = ['imageInfoRelationList'];
if (rule.includes(key)) {
this.ruleForm[key].url = val;
if (rule.includes(key) && info) {
this.ruleForm[key] = {
url: val,
price: this.ruleForm[key].price,
fileWidth: info.width + '*' + info.height,
fileSize: info.size
}
this.$set(this.ruleForm.paramJson, 'fileType', info.type)
} else {
this.ruleForm[key] = val;
}
console.log(key, this.ruleForm[key])
},
//点击编辑的时候，获取表格行数据，渲染edit页面
renderData(val) {
this.ruleForm = val
console.log('bus end', this.ruleForm)
//获取详情
// getDetail(val.id).then(res => {
// let val = res.data;
let afterFormat = this.filterParams(val);
let data = JSON.parse(JSON.stringify(afterFormat));
data.paramJson = JSON.parse(data.paramJson);
data.imageInfoRelationList = data.imageInfoRelationList[0];
data.coverImg = data.coverImg || '';
this.ruleForm = data;
this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式
console.log('bus end', this.ruleForm);
// })
},
//返回上一页
goBack() {
this.$emit('change', 'list')
this.$emit('change', 'List')
},
//过滤多余属性
filterParams(obj) {
let p = {}
let b = ['isDel', 'status', 'updTime', 'crtTime', 'allowCustom', 'rank', 'relationId', 'similarImageList']
for (let key in obj) {
if (!b.includes(key)) {
if (key === 'imageInfoRelationList') {
let temp = this.filterParams(obj[key][0])
obj[key] = [temp];
}
p[key] = obj[key]
}
}
return p;
},
//提交
onSubmit() {
console.log(this.ruleForm)
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
console.log('submit')
this.updateFunc();//上传数据
} else {
console.log('error submit!!');
return false;
......@@ -189,31 +335,25 @@ export default {
});
},
// filterParams(obj) {
// let p = {}
// let b = ['isDel', 'status', 'updTime', 'crtTime']
// for (let key in obj) {
// if (!b.includes(key)) {
// p[key] = obj[key]
// }
// }
// return p;
// },
// //更新方法
// updateFunc(params) {
// params.rank = ~~params.rank;
// let datas = this.filterParams(params);
// update(datas).then(res => {
// if (res.status == 200) {
// //返回上一页，更新列表
// this.goBack();
// } else {
// this.$message.error(res.message);
// }
// })
// }
//添加/修改方法
updateFunc() {
//转换数据格式
let params = JSON.parse(JSON.stringify(this.ruleForm));
params.paramJson = JSON.stringify(params.paramJson);
params.imageInfoRelationList = [params.imageInfoRelationList]
console.log(params)
//执行方法
update(params).then(res => {
if (res.status == 200) {
//返回上一页，更新列表
this.goBack();
} else {
this.$message.error(res.message);
}
})
}
}
}
</script>
......@@ -240,4 +380,11 @@ export default {
.body {
padding: 20px 50px 40px
}
.grid-content {
border: 1px solid transparent;
}
.grid-content:hover, .grid-content.active {
border: 1px solid #409eff;
box-sizing: border-box
}
</style>
src/views/webSiteManagement/imageLibrary/index.vue
View file @ 6b0fcb52
......@@ -33,7 +33,7 @@ export default {
this.$nextTick(() => {
if (!!val) {
this.$bus.$emit('satelliteIntroduction-edit-renderData', val)
this.$bus.$emit('imageLibrary-edit-renderData', val)
}
})
......
src/views/webSiteManagement/imageLibrary/list.vue
View file @ 6b0fcb52
......@@ -25,8 +25,8 @@
<el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
<el-table-column align="center" label="产品名称" prop="name"></el-table-column>
<el-table-column align="center" label="产品类型" prop="type"></el-table-column>
<el-table-column align="center" label="尺寸" prop="imageInfoRelationList.ileWidth"></el-table-column>
<el-table-column align="center" label="价格" prop="name"></el-table-column>
<el-table-column align="center" label="尺寸" prop="imageInfoRelationList[0].fileWidth"></el-table-column>
<el-table-column align="center" label="价格" prop="imageInfoRelationList[0].price"></el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="scope">
{{ getStatus(scope.row.status) }}
......
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