Skip to content

S
smart_gov_platform
Commit 06d7ba46 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat:新增桌面自助服务皮肤设置

parent aa28dfc5
Show whitespace changes
Inline Side-by-side
Showing with 341 additions and 80 deletions
base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue
View file @ 06d7ba46
......@@ -17,7 +17,7 @@
<div
class="preview-item"
@click="changePreview(i, v)"
:class="{ active: i === isActive }"
:class="{ active: i === curSkinIndex }"
v-for="(v, i) in previewList"
:key="v.id"
>
......@@ -38,7 +38,7 @@
<script>
import { getSkinList } from "@/services/surface";
import { Empty } from "ant-design-vue";
// import { mapMutations } from "vuex";
import { mapMutations, mapState } from "vuex";
export default {
props: {
classifyList: {
......@@ -51,41 +51,34 @@ export default {
},
data() {
return {
isActive: 0,
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
categoryId: "", // 分类ID
facilityInfo: {}, // 设备信息
previewList: [], // 皮肤列表
};
},
computed: {
...mapState("site", ["curSkinIndex"]),
},
created() {
// this.getSkinList();
this.$bus.$off(["delSkin"]);
this.$bus.$on("delSkin", (index) => {
this.previewList.splice(index, 1);
if (index > 0) {
this.isActive = index - 1;
this.$bus.$emit(
"selectPreview",
this.previewList[index - 1],
index - 1
);
this.SET_curSkin(this.previewList[index - 1]);
this.SET_curSkinIndex(index - 1);
} else {
this.$bus.$emit("selectPreview", this.previewList[0], 0);
this.SET_curSkin(this.previewList[0]);
}
});
},
methods: {
// ...mapMutations(["SET_imageResolution"]),
// 对象转对象数组
transverter(obj) {
return Object.keys(obj).map((v) => {
return {
id: v,
name: obj[v],
};
});
},
...mapMutations("site", [
"SET_imageResolution",
"SET_curSkin",
"SET_curSkinIndex",
]),
// 获取设备信息
getFacilityInfo(info) {
this.facilityInfo = info;
......@@ -103,17 +96,20 @@ export default {
});
let { imageResolution } = res.data.dict;
let { data } = res.data.data;
this.$store.commit(
"site/SET_imageResolution",
this.transverter(imageResolution)
);
// this.SET_imageResolution(this.transverter(imageResolution));
this.SET_imageResolution(imageResolution);
this.previewList = data;
this.$bus.$emit("selectPreview", this.previewList[0], 0);
if (data.length) {
this.SET_curSkin(this.previewList[0]);
this.SET_curSkinIndex(0);
} else {
this.SET_curSkin({});
this.SET_curSkinIndex(0);
}
},
// 选取预览图
changePreview(index, row) {
this.isActive = index;
this.SET_curSkin(row);
this.SET_curSkinIndex(index);
this.$bus.$emit("selectPreview", row, index);
},
// 新增
......@@ -137,6 +133,10 @@ export default {
}
},
},
beforeDestroy() {
this.SET_curSkin({});
this.SET_curSkinIndex(0);
},
};
</script>
......
base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue
View file @ 06d7ba46
<template>
<div class="show">
<div class="show-content" v-if="skinInfo.id">
<div class="show-content" v-if="curSkin.id">
<div class="show-header">
<h2 class="show-titlw">{{ skinInfo.name }}</h2>
<h2 class="show-titlw">{{ curSkin.name }}</h2>
<p>
更新时间：<span style="margin-right: 20px">{{
skinInfo.updateTime | dateFormat
curSkin.updateTime | dateFormat
}}</span>
支持分辨率：<span
>{{ filterImageResolution(skinInfo.imageResolution) }}
>{{ filterItems(curSkin.imageResolution, imageResolution) }}
</span>
</p>
</div>
......@@ -16,8 +16,8 @@
<component
conponentsId="skinInfo"
:is="component"
:imageResolution="skinInfo.imageResolution"
:skinFieldList="skinInfo.skinFieldList"
:imageResolution="curSkin.imageResolution"
:skinFieldList="curSkin.skinFieldList"
></component>
</div>
<div class="show-btn flex aic jcc">
......@@ -25,7 +25,7 @@
<a-button class="edit-btn" @click="editSurface"
>修改皮肤参数</a-button
>
<a-button type="danger" @click="handleClose(skinInfo.id)"
<a-button type="danger" @click="handleClose(curSkin.id)"
>删除皮肤</a-button
>
</a-space>
......@@ -54,6 +54,9 @@ import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
import InformationSkin from "../informationskin/InformationSkin.vue";
import SelfService from "../selfservice/SelfService.vue";
import DesSelfService from "../desSelfservice/DesSelfService.vue";
import { mapState, mapMutations } from "vuex";
import { filterItems } from "@/utils";
export default {
components: {
LandscapeMode,
......@@ -65,26 +68,21 @@ export default {
WriteFormSkin,
InformationSkin,
SelfService,
DesSelfService,
},
props: {},
data() {
return {
filterItems,
skinInfo: {},
index: "",
};
},
created() {
this.$bus.$off(["selectPreview"]);
this.$bus.$on("selectPreview", (row, index) => {
this.skinInfo = { ...row };
this.index = index;
console.log(this.skinInfo);
});
},
created() {},
computed: {
...mapState("site", ["imageResolution", "curSkin", "curSkinIndex"]),
component() {
let str = "";
switch (this.skinInfo.productName) {
switch (this.curSkin.productName) {
case "排号机":
str = "LandscapeMode";
break;
......@@ -115,39 +113,20 @@ export default {
case "信息发布终端":
str = "InformationSkin";
break;
case "桌面式自助终端":
str = "DesSelfService";
break;
}
return str;
},
displayer() {
return this.$store.state.site.imageResolution;
},
},
filters: {
filterScreen(val) {
if (val === "1") {
return "1920*1080";
} else if (val === "2") {
return "1080*1920";
} else {
return "1280*1280";
}
},
},
methods: {
// 过滤分辨率显示
filterImageResolution(val) {
let str = "";
this.displayer.forEach((v) => {
if (val == v.id) {
str = v.name;
}
});
return str;
},
...mapMutations("site", ["SET_curSkinIndex"]),
// 编辑皮肤
editSurface() {
if (this.skinInfo.id) {
this.$emit("editSkin", this.skinInfo);
if (this.curSkin.id) {
this.$emit("editSkin", this.curSkin);
} else {
this.$message.warning("请先选择皮肤");
}
......@@ -169,7 +148,7 @@ export default {
let { code, msg } = res.data;
if (code === 1) {
_this.$message.success(msg);
_this.$bus.$emit("delSkin", _this.index);
_this.$bus.$emit("delSkin", _this.curSkinIndex);
} else {
_this.$message.error(msg);
}
......
base-manager-ui/admin/src/pages/basicset/surface/desSelfservice/DesSelfService.vue 0 → 100644
View file @ 06d7ba46
<template>
<div class="skin-box">
<!-- 桌面自助服务终端 横板 -->
<div
:id="conponentsId"
v-if="imageResolution === '1'"
class="across-skin flex flexc aic"
:style="{
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex aic jcb">
<div class="left flex aic">
<div
class="title"
:style="{
color: filterItem('2', 0),
}"
>
自助服务终端
</div>
</div>
<div
class="right flex aic"
:style="{
color: filterItem('3', 0),
}"
>
<div class="time">10:32</div>
<div class="flex flexc">
<span>2023/02/16</span>
<span>星期四</span>
</div>
</div>
</div>
<div class="main flex aic jcb flex1">
<div class="left">
<div class="top">
<div class="search-box">
<div class="search">请输入你想查询的内容关键字</div>
<div
class="search_btn"
:style="{
color: filterItem('7', 0),
background: filterItem('8', 0),
}"
>
搜索
</div>
</div>
<div class="banner flex aic jcc">banner</div>
</div>
<div class="bottom">新闻区</div>
</div>
<div class="right flex aic jcc">应用展示区</div>
</div>
<!-- 底部 -->
<div class="footer mt20">
<div
class="footer-item footer-item1"
:style="{
background: filterItem('7', 0),
}"
>
首页
</div>
<div class="footer-item">服务</div>
<div class="footer-item">互动</div>
<div class="footer-item">我的</div>
<div
class="footer-item footer-item5"
:style="{
color: filterItem('7', 0),
background: filterItem('8', 0),
}"
>
登录/注册
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
<script>
export default {
props: {
skinFieldList: {
type: Array,
required: true,
default: () => {
return [];
},
},
imageResolution: {
required: true,
default: "1",
},
conponentsId: {
required: true,
type: String,
},
},
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
};
},
methods: {
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
</script>
<style lang="less" scoped>
.across-skin {
width: 1000px;
height: 562.5px;
background: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat !important ;
background-position: center !important ;
background-size: cover !important ;
.header {
width: 100%;
color: #fff;
padding: 20px;
.title {
font-size: 30px;
font-weight: 600;
}
.right {
.time {
font-size: 26px;
font-weight: 600;
margin-right: 10px;
}
}
}
.main {
width: 100%;
padding: 20px;
margin-top: 10px;
color: #fff;
.left {
width: 39%;
height: 100%;
padding: 10px;
border-radius: 4px;
border: 1px dashed #ececec;
.top {
height: 59%;
display: flex;
flex-direction: column;
.search-box {
height: 40px;
padding: 0px 4px;
margin-bottom: 10px;
border-radius: 4px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.search {
color: #ccc;
}
.search_btn {
width: 60px;
height: 36px;
border-radius: 4px;
background-color: #dee9ff;
display: flex;
justify-content: center;
align-items: center;
color: #206eff;
}
}
.banner {
flex: 0.9;
border: 1px dashed #ececec;
border-radius: 4px;
}
}
.bottom {
height: 39%;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #ececec;
}
}
.right {
width: 59%;
height: 100%;
border-radius: 4px;
border: 1px dashed #ececec;
}
}
.footer {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
background-color: #fff;
.footer-item1 {
color: #fff;
background-color: #206eff;
}
.footer-item {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 100%;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
font-size: 20px;
}
.footer-item5 {
color: #206eff;
background-color: #dee9ff;
}
}
}
</style>
\ No newline at end of file
base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue
View file @ 06d7ba46
......@@ -71,11 +71,11 @@
v-model="formData.imageResolution"
>
<a-select-option
v-for="v in displayer"
:key="v.id"
:value="v.id"
v-for="(v, key) in imageResolution"
:key="key"
:value="key"
>
{{ v.name }}
{{ v }}
</a-select-option>
</a-select>
</a-form-model-item>
......@@ -187,10 +187,12 @@ import AppraiseSkin from "../appraiseskin/AppraiseSkin.vue";
import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
import InformationSkin from "../informationskin/InformationSkin.vue";
import SelfService from "../selfservice/SelfService.vue"
import SelfService from "../selfservice/SelfService.vue";
import DesSelfService from "../desSelfservice/DesSelfService.vue";
import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
import html2canvas from "html2canvas";
import { Empty } from "ant-design-vue";
import { mapState } from "vuex";
export default {
components: {
......@@ -202,7 +204,8 @@ export default {
SampleFormSkin,
WriteFormSkin,
InformationSkin,
SelfService
SelfService,
DesSelfService,
},
props: {
isShow: {
......@@ -295,12 +298,13 @@ export default {
case "信息发布终端":
str = "InformationSkin";
break;
case "桌面式自助终端":
str = "DesSelfService";
break;
}
return str;
},
displayer() {
return this.$store.state.site.imageResolution;
},
...mapState("site", ["imageResolution"]),
},
created() {},
watch: {
......
base-manager-ui/admin/src/store/modules/site.js
View file @ 06d7ba46
......@@ -9,6 +9,8 @@ export default {
token: "",
userInfo: {}, // 用户信息
appDict: {}, // 应用字典
curSkin: {}, // 当前选中预览皮肤
curSkinIndex: 0, // 当前选中皮肤索引
},
getters: {
SiteTree(state) {
......@@ -31,9 +33,15 @@ export default {
},
},
mutations: {
SET_curSkinIndex(state, curSkinIndex) {
state.curSkinIndex = curSkinIndex;
},
SET_appDict(state, appDict) {
state.appDict = appDict;
},
SET_curSkin(state, curSkin) {
state.curSkin = curSkin;
},
SET_appTemplate(state, appTemplate) {
state.appTemplate = appTemplate;
},
......
base-manager-ui/admin/src/utils/index.js
View file @ 06d7ba46
......@@ -8,3 +8,12 @@ export const filterItems = (key, dict = {}) => {
});
return val;
};
// 对象转对象数组
export const transverter = (obj) => {
return Object.keys(obj).map((v) => {
return {
id: v,
name: obj[v],
};
});
};
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