Commit 960439b5 authored by “yiyousong”'s avatar “yiyousong”

feat:重构皮肤管理板块

parent a13d47f0
<template> <template>
<div class="business flex_row p15"> <div class="business p15">
<sitetree @getSite="handleClick" @clickArea="clickArea" /> <sitetree @getSite="handleClick" @clickArea="clickArea" />
<!-- <div class="line"></div> --> <!-- <div class="line"></div> -->
<div class="right ff"> <div class="right ff">
<a-tabs :default-active-key="1" @change="handleChange"> <a-tabs :default-active-key="1" @change="handleChange">
<a-tab-pane forceRender :key="1" tab="业务管理"> <a-tab-pane forceRender :key="1" tab="业务管理">
...@@ -66,18 +64,14 @@ export default { ...@@ -66,18 +64,14 @@ export default {
// 切开tab // 切开tab
handleChange(key) { handleChange(key) {
if (this.siteId) { if (this.siteId) {
console.log(this.siteId, key);
switch (key) { switch (key) {
case 1: case 1:
console.log(1);
this.$refs.BusinessTabs1.getSiteInfo(this.siteId); this.$refs.BusinessTabs1.getSiteInfo(this.siteId);
break; break;
case 2: case 2:
console.log(2);
this.$refs.BusinessTabs2.getSiteInfo(this.siteId); this.$refs.BusinessTabs2.getSiteInfo(this.siteId);
break; break;
case 3: case 3:
console.log(3);
this.$refs.BusinessTabs3.getSiteInfo(this.siteId); this.$refs.BusinessTabs3.getSiteInfo(this.siteId);
break; break;
} }
...@@ -91,25 +85,13 @@ export default { ...@@ -91,25 +85,13 @@ export default {
.business { .business {
width: 100%; width: 100%;
height: 89vh; height: 89vh;
// .line { display: flex;
// width: 18px;
// background-color: #f0f2f5;
// margin-top: -20px;
// position: relative;
// &::after {
// content: "";
// width: 15px;
// height: 20px;
// background-color: #f0f2f5;
// position: absolute;
// bottom: -20px;
// }
// }
/deep/.ant-tabs-nav-container { /deep/.ant-tabs-nav-container {
border-bottom: 1px solid rgb(224, 224, 224) !important; border-bottom: 1px solid rgb(224, 224, 224) !important;
} }
.right { .right {
width: 100%; width: 85%;
position: relative; position: relative;
margin-left: 18px; margin-left: 18px;
&::after { &::after {
......
...@@ -3,9 +3,22 @@ ...@@ -3,9 +3,22 @@
<div class="left"> <div class="left">
<div class="header"> <div class="header">
<h3 class="titel">站点业务列表</h3> <h3 class="titel">站点业务列表</h3>
<div class="control">
<div>
<a-button type="danger" @click="handleDelAll"> 批量移除 </a-button> <a-button type="danger" @click="handleDelAll"> 批量移除 </a-button>
<a-button class="add-btn" @click="showModal"> 新增业务 </a-button> <a-button class="add-btn" @click="showModal"> 新增业务 </a-button>
</div> </div>
<div class="business-control">
<a-input-search
placeholder="请输入业务名称搜索"
enter-button="搜索"
v-model="serchSiteBusiness"
@search="onSearchLeft"
allowClear
/>
</div>
</div>
</div>
<div class="table-content"> <div class="table-content">
<!-- 表格 --> <!-- 表格 -->
<a-table <a-table
...@@ -253,6 +266,7 @@ export default { ...@@ -253,6 +266,7 @@ export default {
serchData: "", serchData: "",
siteId: "", // 站点id siteId: "", // 站点id
businessIds: "", // 业务id businessIds: "", // 业务id
serchSiteBusiness: "", // 左边站点业务名称搜索
}; };
}, },
created() {}, created() {},
...@@ -286,6 +300,7 @@ export default { ...@@ -286,6 +300,7 @@ export default {
page: this.leftCurrent, page: this.leftCurrent,
size: this.leftSize, size: this.leftSize,
siteId: this.siteId, siteId: this.siteId,
businessName: `%${this.serchSiteBusiness}%`,
...search, ...search,
}); });
let { code, data } = res.data; let { code, data } = res.data;
...@@ -295,13 +310,13 @@ export default { ...@@ -295,13 +310,13 @@ export default {
this.leftLoading = false; this.leftLoading = false;
} }
}, },
// 获取业务列表 // 获取一体化业务列表
async getBusinessListData() { async getBusinessListData() {
this.rightLoading = true; this.rightLoading = true;
let res = await getBusinessList({ let res = await getBusinessList({
page: this.rightCurrent, page: this.rightCurrent,
size: this.rightSize, size: this.rightSize,
name: this.serchData, name: `%${this.serchData}%`,
businessType: 0, businessType: 0,
}); });
let { code, data } = res.data; let { code, data } = res.data;
...@@ -312,6 +327,10 @@ export default { ...@@ -312,6 +327,10 @@ export default {
this.rightLoading = false; this.rightLoading = false;
} }
}, },
onSearchLeft() {
this.leftCurrent = 1;
this.getSiteBusinessData();
},
// 切换业务类型 // 切换业务类型
// onChangeBusiness(val) { // onChangeBusiness(val) {
// this.businessType = val.target.value; // this.businessType = val.target.value;
......
...@@ -192,12 +192,12 @@ ...@@ -192,12 +192,12 @@
<script> <script>
import { import {
getSiteMatterList, getSiteMatterList,
getMatterList, getMatterListSubList,
addMatterToSite, addMatterToSite,
delSiteMatter, delSiteMatter,
delMatter, delMatter,
} from "@/services/matter"; } from "@/services/matter";
import { getDeptList } from "@/services/dept"; // import { getDeptList } from "@/services/dept";
// import local from "@/utils/local"; // import local from "@/utils/local";
const leftColumns = [ const leftColumns = [
{ {
...@@ -325,14 +325,14 @@ export default { ...@@ -325,14 +325,14 @@ export default {
this.matterSiteData = data; this.matterSiteData = data;
this.leftLoading = false; this.leftLoading = false;
}, },
// 获取事项列表 // 获取一体化事项列表
async getMatterListData(search = {}) { async getMatterListData(search = {}) {
this.rightLoading = true; this.rightLoading = true;
let res = await getMatterList({ let res = await getMatterListSubList({
siteId: this.siteId,
page: this.rightCurrent, page: this.rightCurrent,
size: this.rightSize, size: this.rightSize,
matterName: `%${this.searchRightVal}%`, matterName: this.searchRightVal,
source: 0,
...search, ...search,
}); });
let { pageInfo, data } = res.data.data; let { pageInfo, data } = res.data.data;
...@@ -345,11 +345,11 @@ export default { ...@@ -345,11 +345,11 @@ export default {
this.rightLoading = false; this.rightLoading = false;
}, },
// 获取部门列表 // 获取部门列表
async getDeptData() { // async getDeptData() {
let res = await getDeptList({ siteId: this.siteId }); // let res = await getDeptList({ siteId: this.siteId });
let { data } = res.data.data; // let { data } = res.data.data;
this.deptList = data; // this.deptList = data;
}, // },
// 左边搜索 // 左边搜索
onSearchLeft() { onSearchLeft() {
this.leftCurrent = 1; this.leftCurrent = 1;
......
...@@ -46,7 +46,10 @@ ...@@ -46,7 +46,10 @@
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-form-model-item label="联系电话" prop="deptTelphone"> <a-form-model-item label="联系电话" prop="deptTelphone">
<a-input v-model="form.deptTelphone" placeholder="请输入座机电话" /> <a-input
v-model="form.deptTelphone"
placeholder="请输入座机电话:区号-电话号码"
/>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
......
...@@ -168,6 +168,7 @@ ...@@ -168,6 +168,7 @@
:visible="visibleWork" :visible="visibleWork"
@cancel="visibleWork = false" @cancel="visibleWork = false"
width="600px" width="600px"
:maskClosable="false"
> >
<template slot="footer"> <template slot="footer">
<a-button @click="handleReset">重置</a-button> <a-button @click="handleReset">重置</a-button>
...@@ -604,8 +605,6 @@ export default { ...@@ -604,8 +605,6 @@ export default {
this.$message.success(msg); this.$message.success(msg);
this.$refs.formData.resetFields(); this.$refs.formData.resetFields();
this.visibleWork = false; this.visibleWork = false;
} else {
this.$message.error(msg);
} }
} }
}); });
...@@ -617,7 +616,6 @@ export default { ...@@ -617,7 +616,6 @@ export default {
// 新增窗口事项 // 新增窗口事项
addWindowMatter(data) { addWindowMatter(data) {
this.isShow = true; this.isShow = true;
console.log(data);
let obj = { let obj = {
windowId: data.id, windowId: data.id,
windowName: data.name, windowName: data.name,
...@@ -810,7 +808,7 @@ export default { ...@@ -810,7 +808,7 @@ export default {
} }
} }
/deep/.ant-modal-body { /deep/.ant-modal-body {
max-height: 400px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 5px; width: 5px;
......
...@@ -5,33 +5,23 @@ ...@@ -5,33 +5,23 @@
:id="conponentsId" :id="conponentsId"
class="call-out-skin-across" class="call-out-skin-across"
:style="{ :style="{
backgroundImage: filterImg('背景大图') background: filterItem('1', 0),
? `url(${api + filterImg('背景大图')})`
: '',
}" }"
> >
<!-- 头部 --> <!-- 头部 -->
<div class="header flex jcb"> <div class="header flex jcb">
<div class="header-title flex aic"> <div class="header-title flex aic">
<img src="../../../../assets/img/logo.png" /> <img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1> <h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div> </div>
<div class="flex header-right jcb"> <div class="flex header-right jcb">
<p> <p>
<span :style="{ color: filterColor('数据标题') }" <span :style="{ color: filterItem('5', 0) }">今日评价次数:</span>
>今日评价次数:</span <span class="count" :style="{ color: filterItem('6', 0) }">66</span>
>
<span class="count" :style="{ color: filterColor('数据颜色') }"
>66</span
>
</p> </p>
<p> <p>
<span :style="{ color: filterColor('数据标题') }" <span :style="{ color: filterItem('5', 0) }">累计评价次数:</span>
>累计评价次数:</span <span class="count" :style="{ color: filterItem('6', 0) }">66</span>
>
<span class="count" :style="{ color: filterColor('数据颜色') }"
>66</span
>
</p> </p>
</div> </div>
</div> </div>
...@@ -40,9 +30,7 @@ ...@@ -40,9 +30,7 @@
<div <div
class="left flex flexc jca aic" class="left flex flexc jca aic"
:style="{ :style="{
backgroundImage: filterImg('信息面板') background: filterItem('10', 0),
? `url(${api + filterImg('信息面板')})`
: '',
}" }"
> >
<div class="left-info flex aic"> <div class="left-info flex aic">
...@@ -64,48 +52,32 @@ ...@@ -64,48 +52,32 @@
<div class="footer flex jcb aic"> <div class="footer flex jcb aic">
<div <div
class="footer-btn flex flexc jcc" class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 0) }"
:style="{ :style="{
backgroundImage: filterImg('办事指南') background: filterItem('4', 0),
? `url(${api + filterImg('办事指南')})`
: '',
}" }"
> ></div>
<p>办事指南</p>
<span>Processing matters</span>
</div>
<div <div
class="footer-btn flex flexc jcc" class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 1) }"
:style="{ :style="{
backgroundImage: filterImg('我要评价') background: filterItem('4', 1),
? `url(${api + filterImg('我要评价')})`
: '',
}" }"
> ></div>
<p>我要评价</p>
<span>Processing matters</span>
</div>
<div <div
class="footer-btn flex flexc jcc" class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 2) }"
:style="{ :style="{
backgroundImage: filterImg('投诉建议') background: filterItem('4', 2),
? `url(${api + filterImg('投诉建议')})`
: '',
}" }"
> ></div>
<p>投诉建议</p>
<span>Processing matters</span>
</div>
<div <div
class="footer-btn flex flexc jcc" class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 3) }"
:style="{ :style="{
backgroundImage: filterImg('廉政风险') background: filterItem('4', 3),
? `url(${api + filterImg('廉政风险')})`
: '',
}" }"
> ></div>
<p>廉政风险</p>
<span>Processing matters</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -139,32 +111,58 @@ export default { ...@@ -139,32 +111,58 @@ export default {
}, },
methods: { methods: {
// 过滤图片 // 过滤图片
filterImg(val) { // filterImg(val) {
let url = ""; // let url = "";
this.skinFieldList // this.skinFieldList
.filter((v) => { // .filter((v) => {
return v.fieldType === "2"; // return v.fieldType === "2";
}) // })
.forEach((v) => { // .forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) { // if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue; // url = v.fieldValue;
} // }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
}); });
return url; if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
}, },
// 过滤颜色 // 过滤属性值类型
filterColor(val) { filterValueType(info = {}) {
let str = ""; let value = "";
this.skinFieldList if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
.filter((v) => { value = info.fieldValue;
return v.fieldType === "1"; } else if (
}) info.fieldType !== "" &&
.forEach((v) => { info.fieldType === "2" &&
if (v.fieldName !== "" && v.fieldName === val) { info.fieldValue
str = v.fieldValue; ) {
value = `url(${this.api + info.fieldValue})`;
} }
}); return value;
return str;
}, },
}, },
}; };
...@@ -176,9 +174,9 @@ export default { ...@@ -176,9 +174,9 @@ export default {
height: 562.5px; height: 562.5px;
padding: 20px; padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff); background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat; background-repeat: no-repeat !important ;
background-position: center; background-position: center !important ;
background-size: cover; background-size: cover !important ;
.header { .header {
color: #fff; color: #fff;
.header-title { .header-title {
...@@ -245,9 +243,11 @@ export default { ...@@ -245,9 +243,11 @@ export default {
width: 22%; width: 22%;
height: 120px; height: 120px;
padding: 10px; padding: 10px;
background-color: #fff;
border-radius: 4px; border-radius: 4px;
background-size: 100% 100%; background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
} }
p { p {
margin: 0px; margin: 0px;
......
...@@ -5,18 +5,19 @@ ...@@ -5,18 +5,19 @@
:id="conponentsId" :id="conponentsId"
class="call-out-skin-across" class="call-out-skin-across"
:style="{ :style="{
backgroundImage: filterImg('背景大图') background: filterItem('1', 0),
? `url(${api + filterImg('背景大图')})`
: '',
}" }"
> >
<!-- 头部 --> <!-- 头部 -->
<div class="header flex jcb"> <div class="header flex jcb">
<div class="header-title flex aic"> <div class="header-title flex aic">
<img src="../../../../assets/img/logo.png" /> <img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1> <h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div> </div>
<div class="flex header-right jcb"> <div
class="flex header-right jcb"
:style="{ color: filterItem('3', 0) }"
>
<div class="flex flexc aic jcc"> <div class="flex flexc aic jcc">
<a-icon type="setting" /> <a-icon type="setting" />
<span>设置</span> <span>设置</span>
...@@ -33,7 +34,12 @@ ...@@ -33,7 +34,12 @@
</div> </div>
<!-- 主体 --> <!-- 主体 -->
<div class="main flex"> <div class="main flex">
<div class="left flex flexc aic jcc"> <div
class="left flex flexc aic jcc"
:style="{
background: filterItem('10', 0),
}"
>
<img src="../../../../assets/img/peopo.jpeg" /> <img src="../../../../assets/img/peopo.jpeg" />
<p>姓名:XXX</p> <p>姓名:XXX</p>
<p>部门:审批部</p> <p>部门:审批部</p>
...@@ -41,9 +47,10 @@ ...@@ -41,9 +47,10 @@
<div <div
class="left-btn" class="left-btn"
:style="{ :style="{
backgroundImage: `linear-gradient(${filterColor( backgroundImage: `linear-gradient(${filterItem(
'辅助色' '8',
)}, ${filterColor('主题色')})`, 0
)}, ${filterItem('7', 0)})`,
}" }"
> >
回归 回归
...@@ -52,50 +59,44 @@ ...@@ -52,50 +59,44 @@
<div class="right flex1 flex flexwrap jcb acb"> <div class="right flex1 flex flexwrap jcb acb">
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 0) }"
:style="{ :style="{
backgroundImage: filterImg('弃号') background: filterItem('4', 0),
? `url(${api + filterImg('弃号')})`
: `url(${require('../../../../assets/img/qh.png')})`,
}" }"
></div> ></div>
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 1) }"
:style="{ :style="{
backgroundImage: filterImg('重新呼叫') background: filterItem('4', 1),
? `url(${api + filterImg('重新呼叫')})`
: `url(${require('../../../../assets/img/cxhj.png')})`,
}" }"
></div> ></div>
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 2) }"
:style="{ :style="{
backgroundImage: filterImg('呼叫转移') background: filterItem('4', 2),
? `url(${api + filterImg('呼叫转移')})`
: `url(${require('../../../../assets/img/hjzy.png')})`,
}" }"
></div> ></div>
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 3) }"
:style="{ :style="{
backgroundImage: filterImg('选叫') background: filterItem('4', 3),
? `url(${api + filterImg('选叫')})`
: `url(${require('../../../../assets/img/xj.png')})`,
}" }"
></div> ></div>
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 4) }"
:style="{ :style="{
backgroundImage: filterImg('评价') background: filterItem('4', 4),
? `url(${api + filterImg('评价')})`
: `url(${require('../../../../assets/img/pj.png')})`,
}" }"
></div> ></div>
<div <div
class="right-item" class="right-item"
:class="{ border: !filterItem('4', 5) }"
:style="{ :style="{
backgroundImage: filterImg('下一位') background: filterItem('4', 5),
? `url(${api + filterImg('下一位')})`
: `url(${require('../../../../assets/img/xyw.png')})`,
}" }"
></div> ></div>
</div> </div>
...@@ -103,36 +104,38 @@ ...@@ -103,36 +104,38 @@
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer flex jcc aic"> <div class="footer flex jcc aic">
<div class="footer-item"> <div class="footer-item">
<p>当前窗口</p> <p :style="{ color: filterItem('5', 0) }">当前窗口</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }"> <p class="footer-data" :style="{ color: filterItem('6', 0) }">
A区16号 A区16号
</p> </p>
</div> </div>
<div <div
class="line" class="line"
:style="{ :style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor( backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'主题色' '6',
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`, 0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}" }"
></div> ></div>
<div class="footer-item"> <div class="footer-item">
<p>当前办理</p> <p :style="{ color: filterItem('5', 0) }">当前办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }"> <p class="footer-data" :style="{ color: filterItem('6', 0) }">
A0012 A0012
</p> </p>
</div> </div>
<div <div
class="line" class="line"
:style="{ :style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor( backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'主题色' '6',
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`, 0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}" }"
></div> ></div>
<div class="footer-item"> <div class="footer-item">
<p>等待办理</p> <p :style="{ color: filterItem('5', 0) }">等待办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }"> <p class="footer-data" :style="{ color: filterItem('6', 0) }">
<span>160</span> <span>160</span>
<span>120</span> <span>120</span>
</p> </p>
...@@ -140,16 +143,15 @@ ...@@ -140,16 +143,15 @@
<div <div
class="line" class="line"
:style="{ :style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor( backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'主题色' '6',
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`, 0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}" }"
></div> ></div>
<div class="footer-item"> <div class="footer-item">
<p>当天办理</p> <p :style="{ color: filterItem('5', 0) }">当天办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }"> <p class="footer-data" :style="{ color: filterItem('6', 0) }">16</p>
16
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -184,32 +186,58 @@ export default { ...@@ -184,32 +186,58 @@ export default {
}, },
methods: { methods: {
// 过滤图片 // 过滤图片
filterImg(val) { // filterImg(val) {
let url = ""; // let url = "";
this.skinFieldList // this.skinFieldList
.filter((v) => { // .filter((v) => {
return v.fieldType === "2"; // return v.fieldType === "2";
}) // })
.forEach((v) => { // .forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) { // if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue; // url = v.fieldValue;
} // }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
}); });
return url; if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
}, },
// 过滤颜色 // 过滤属性值类型
filterColor(val) { filterValueType(info = {}) {
let str = ""; let value = "";
this.skinFieldList if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
.filter((v) => { value = info.fieldValue;
return v.fieldType === "1"; } else if (
}) info.fieldType !== "" &&
.forEach((v) => { info.fieldType === "2" &&
if (v.fieldName !== "" && v.fieldName === val) { info.fieldValue
str = v.fieldValue; ) {
value = `url(${this.api + info.fieldValue})`;
} }
}); return value;
return str;
}, },
}, },
}; };
...@@ -221,9 +249,9 @@ export default { ...@@ -221,9 +249,9 @@ export default {
height: 562.5px; height: 562.5px;
padding: 20px; padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff); background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat; background-repeat: no-repeat !important;
background-position: center; background-position: center !important;
background-size: cover; background-size: cover !important;
.header { .header {
.header-title { .header-title {
h1 { h1 {
...@@ -267,9 +295,12 @@ export default { ...@@ -267,9 +295,12 @@ export default {
width: 49%; width: 49%;
height: 100px; height: 100px;
border-radius: 6px; border-radius: 6px;
background-repeat: no-repeat; background-repeat: no-repeat !important;
background-position: center; background-position: center !important;
background-size: 100% 100%; background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
} }
} }
} }
......
...@@ -5,18 +5,16 @@ ...@@ -5,18 +5,16 @@
class="centralize-across" class="centralize-across"
:id="conponentsId" :id="conponentsId"
:style="{ :style="{
backgroundImage: filterImg('背景大图') background: filterItem('1', 0),
? `url(${api + filterImg('背景大图')})`
: '',
}" }"
> >
<!-- 头部 --> <!-- 头部 -->
<div class="header flex aic jcb"> <div class="header flex aic jcb">
<div class="title flex aic"> <div class="title flex aic">
<img src="../../../../assets/img/logo.png" /> <img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1> <h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div> </div>
<div class="time" :style="{ color: filterColor('时间颜色') }"> <div class="time" :style="{ color: filterItem('3', 0) }">
2022-7-18 17:00:00 星期一 2022-7-18 17:00:00 星期一
</div> </div>
</div> </div>
...@@ -26,122 +24,104 @@ ...@@ -26,122 +24,104 @@
<img src="../../../../assets/img/Banner.png" /> <img src="../../../../assets/img/Banner.png" />
</div> </div>
<div class="call-out flex1 flex flexc jcb"> <div class="call-out flex1 flex flexc jcb">
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('正在呼叫') }"
>
<div class="call-out-item-title">正在呼叫</div> <div class="call-out-item-title">正在呼叫</div>
<div class="call-out-item-text call-out-item-text-1"> <div class="call-out-item-text call-out-item-text-1">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>03号窗口</span >03号窗口</span
> >
</div> </div>
</div> </div>
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('正在办理') }"
>
<div class="call-out-item-title">正在办理</div> <div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2"> <div class="call-out-item-text call-out-item-text-2">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>03号窗口</span >03号窗口</span
> >
</div> </div>
</div> </div>
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('正在办理') }"
>
<div class="call-out-item-title">正在办理</div> <div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2"> <div class="call-out-item-text call-out-item-text-2">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>03号窗口</span >03号窗口</span
> >
</div> </div>
</div> </div>
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item-title">等待中</div> <div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3"> <div class="call-out-item-text call-out-item-text-3">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>--</span >--</span
> >
</div> </div>
</div> </div>
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item-title">等待中</div> <div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3"> <div class="call-out-item-text call-out-item-text-3">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>--</span >--</span
> >
</div> </div>
</div> </div>
<div <div class="call-out-item">
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item-title">等待中</div> <div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3"> <div class="call-out-item-text call-out-item-text-3">
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>A0004号</span >A0004号</span
> >
<span <span
class="call-out-item-code" class="call-out-item-code"
:style="{ color: filterColor('主题色') }" :style="{ color: filterItem('7', 0) }"
>--</span >--</span
> >
</div> </div>
...@@ -151,26 +131,26 @@ ...@@ -151,26 +131,26 @@
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer flex aic jca"> <div class="footer flex aic jca">
<div class="footer-item flex flexc jcc aic"> <div class="footer-item flex flexc jcc aic">
<p>今日取号量</p> <p :style="{ color: filterItem('5', 0) }">今日取号量</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }"> <p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次 200次
</p> </p>
</div> </div>
<div class="footer-item flex flexc jcc aic"> <div class="footer-item flex flexc jcc aic">
<p>累计取号量</p> <p :style="{ color: filterItem('5', 0) }">累计取号量</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }"> <p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次 200次
</p> </p>
</div> </div>
<div class="footer-item flex flexc jcc aic"> <div class="footer-item flex flexc jcc aic">
<p>当前等待人数</p> <p :style="{ color: filterItem('5', 0) }">当前等待人数</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }"> <p class="footer-count" :style="{ color: filterItem('6', 0) }">
200人 200人
</p> </p>
</div> </div>
<div class="footer-item flex flexc jcc aic"> <div class="footer-item flex flexc jcc aic">
<p>评价等待时间</p> <p :style="{ color: filterItem('5', 0) }">评价等待时间</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }"> <p class="footer-count" :style="{ color: filterItem('6', 0) }">
12分钟 12分钟
</p> </p>
</div> </div>
...@@ -207,32 +187,58 @@ export default { ...@@ -207,32 +187,58 @@ export default {
}, },
methods: { methods: {
// 过滤图片 // 过滤图片
filterImg(val) { // filterImg(val) {
let url = ""; // let url = "";
this.skinFieldList // this.skinFieldList
.filter((v) => { // .filter((v) => {
return v.fieldType === "2"; // return v.fieldType === "2";
}) // })
.forEach((v) => { // .forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) { // if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue; // url = v.fieldValue;
} // }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
}); });
return url; if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
}, },
// 过滤颜色 // 过滤属性值类型
filterColor(val) { filterValueType(info = {}) {
let str = ""; let value = "";
this.skinFieldList if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
.filter((v) => { value = info.fieldValue;
return v.fieldType === "1"; } else if (
}) info.fieldType !== "" &&
.forEach((v) => { info.fieldType === "2" &&
if (v.fieldName !== "" && v.fieldName === val) { info.fieldValue
str = v.fieldValue; ) {
value = `url(${this.api + info.fieldValue})`;
} }
}); return value;
return str;
}, },
}, },
}; };
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div class="show-content" v-if="skinInfo.id"> <div class="show-content" v-if="skinInfo.id">
<div class="show-header"> <div class="show-header">
<h2 class="show-titlw">{{ skinInfo.name }}</h2> <h2 class="show-titlw">{{ skinInfo.name }}</h2>
<p> <p>
更新时间:<span style="margin-right: 20px">{{ 更新时间:<span style="margin-right: 20px">{{
skinInfo.updateTime | dateFormat skinInfo.updateTime | dateFormat
...@@ -15,6 +14,7 @@ ...@@ -15,6 +14,7 @@
</div> </div>
<div class="show-skin"> <div class="show-skin">
<component <component
conponentsId="skinInfo"
:is="component" :is="component"
:imageResolution="skinInfo.imageResolution" :imageResolution="skinInfo.imageResolution"
:skinFieldList="skinInfo.skinFieldList" :skinFieldList="skinInfo.skinFieldList"
......
...@@ -31,6 +31,13 @@ ...@@ -31,6 +31,13 @@
<a-form-model-item label="字段编码" prop="fieldCode"> <a-form-model-item label="字段编码" prop="fieldCode">
<a-input placeholder="请输入字段编码" v-model="formData.fieldCode" /> <a-input placeholder="请输入字段编码" v-model="formData.fieldCode" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="字段类型" prop="remark">
<a-select v-model="formData.remark" placeholder="请选择字段类型">
<a-select-option v-for="v in attrType" :key="v.key" :value="v.key">
{{ v.label }}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="数据类型" prop="fieldType"> <a-form-model-item label="数据类型" prop="fieldType">
<a-radio-group name="radioGroup" v-model="formData.fieldType"> <a-radio-group name="radioGroup" v-model="formData.fieldType">
<a-radio value="1"> 颜色 </a-radio> <a-radio value="1"> 颜色 </a-radio>
...@@ -44,14 +51,7 @@ ...@@ -44,14 +51,7 @@
</a-radio-group> </a-radio-group>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="排序号" prop="fieldOrderNo"> <a-form-model-item label="排序号" prop="fieldOrderNo">
<a-input-number v-model="formData.fieldOrderNo" :min="1" /> <a-input-number v-model="formData.fieldOrderNo" :min="0" />
</a-form-model-item>
<a-form-model-item label="备注" prop="remark">
<a-textarea
v-model="formData.remark"
placeholder="请输入备注"
allow-clear
/>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-modal> </a-modal>
...@@ -60,6 +60,18 @@ ...@@ -60,6 +60,18 @@
<script> <script>
import { fieldSave } from "@/services/surface"; import { fieldSave } from "@/services/surface";
const attrType = [
{ key: "1", label: "首页背景" },
{ key: "2", label: "标题" },
{ key: "3", label: "日期时间" },
{ key: "4", label: "导航" },
{ key: "5", label: "首页数据标题" },
{ key: "6", label: "首页数据" },
{ key: "7", label: "主题色" },
{ key: "8", label: "辅助色" },
{ key: "9", label: "备案" },
{ key: "10", label: "信息面板" },
];
export default { export default {
props: { props: {
visibleField: { visibleField: {
...@@ -81,6 +93,7 @@ export default { ...@@ -81,6 +93,7 @@ export default {
}, },
data() { data() {
return { return {
attrType, // 属性类型
formData: { formData: {
templateId: undefined, // 皮肤模板id templateId: undefined, // 皮肤模板id
templateName: "", // 模板名称 templateName: "", // 模板名称
...@@ -91,7 +104,7 @@ export default { ...@@ -91,7 +104,7 @@ export default {
fieldValue: "", // 字段值 fieldValue: "", // 字段值
fieldOrderNo: "", // 排序号 fieldOrderNo: "", // 排序号
skinId: 0, skinId: 0,
remark: "", // 备注 remark: undefined, // 字段类型
}, },
rules: { rules: {
templateId: [ templateId: [
...@@ -106,6 +119,9 @@ export default { ...@@ -106,6 +119,9 @@ export default {
fieldType: [ fieldType: [
{ required: true, message: "请选择数据类型", trigger: "change" }, { required: true, message: "请选择数据类型", trigger: "change" },
], ],
remark: [
{ required: true, message: "请选择字段类型", trigger: "change" },
],
}, },
}; };
}, },
...@@ -129,10 +145,7 @@ export default { ...@@ -129,10 +145,7 @@ export default {
this.$message.success(msg); this.$message.success(msg);
this.Visible = false; this.Visible = false;
this.$emit("addField"); this.$emit("addField");
} else {
this.$message.error(msg);
} }
console.log(res.data);
} }
}); });
}, },
......
...@@ -293,6 +293,15 @@ export default { ...@@ -293,6 +293,15 @@ export default {
if (data.length) { if (data.length) {
this.skinTemplate = data; this.skinTemplate = data;
this.formData.skinFieldList = data[0].skinFieldList; this.formData.skinFieldList = data[0].skinFieldList;
this.formData.skinFieldList.forEach((v) => {
v.fieldOrderNo = Number(v.fieldOrderNo);
if (!v.fieldOrderNo) {
v.fieldOrderNo = 1000;
}
});
this.formData.skinFieldList.sort((a, b) => {
return a.fieldOrderNo - b.fieldOrderNo;
});
} }
}, },
// 上传函数 // 上传函数
...@@ -322,7 +331,6 @@ export default { ...@@ -322,7 +331,6 @@ export default {
file.type === "image/jpeg" || file.type === "image/jpeg" ||
file.type === "image/png" || file.type === "image/png" ||
file.type === "image/gif"; file.type === "image/gif";
console.log(file);
if (!isJpgOrPng) { if (!isJpgOrPng) {
this.$message.error("请上传jpeg或者png图片!"); this.$message.error("请上传jpeg或者png图片!");
} }
...@@ -375,7 +383,6 @@ export default { ...@@ -375,7 +383,6 @@ export default {
this.loading = false; this.loading = false;
this.show = false; this.show = false;
} else { } else {
this.$message.error(msg);
this.loading = false; this.loading = false;
} }
}); });
......
...@@ -6,23 +6,15 @@ ...@@ -6,23 +6,15 @@
class="surface-preview" class="surface-preview"
v-if="imageResolution === '1'" v-if="imageResolution === '1'"
:style="{ :style="{
backgroundImage: filterImg('背景大图') background: filterItem('1', 0),
? `url(${api + filterImg('背景大图')})`
: '',
}" }"
> >
<div class="surface-preview-main"> <div class="surface-preview-main">
<div class="skin-header"> <div class="skin-header">
<h1 <h1 class="skin-header-title" :style="{ color: filterItem('2', 0) }">
class="skin-header-title"
:style="{ color: filterColor('标题颜色') }"
>
自助排队取号系统 自助排队取号系统
</h1> </h1>
<div <div class="skin-header-time" :style="{ color: filterItem('3', 0) }">
class="skin-header-time"
:style="{ color: filterColor('时间颜色') }"
>
<p class="show-time">16:14:00</p> <p class="show-time">16:14:00</p>
<span class="shoe-day"> 2022/5/20 星期五 </span> <span class="shoe-day"> 2022/5/20 星期五 </span>
</div> </div>
...@@ -34,10 +26,9 @@ ...@@ -34,10 +26,9 @@
<div class="skin-content-right"> <div class="skin-content-right">
<!-- 现场取号 --> <!-- 现场取号 -->
<div <div
:class="{ border: !filterItem('4', 0) }"
:style="{ :style="{
backgroundImage: filterImg('现场取号') background: filterItem('4', 0),
? `url(${api + filterImg('现场取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -49,10 +40,9 @@ ...@@ -49,10 +40,9 @@
/> --> /> -->
<!-- 预约取号 --> <!-- 预约取号 -->
<div <div
:class="{ border: !filterItem('4', 1) }"
:style="{ :style="{
backgroundImage: filterImg('预约取号') background: filterItem('4', 1),
? `url(${api + filterImg('预约取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -64,10 +54,9 @@ ...@@ -64,10 +54,9 @@
/> --> /> -->
<!-- VIP取号 --> <!-- VIP取号 -->
<div <div
:class="{ border: !filterItem('4', 2) }"
:style="{ :style="{
backgroundImage: filterImg('VIP取号') background: filterItem('4', 2),
? `url(${api + filterImg('VIP取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -79,10 +68,9 @@ ...@@ -79,10 +68,9 @@
/> --> /> -->
<!-- 重打小票 --> <!-- 重打小票 -->
<div <div
:class="{ border: !filterItem('4', 3) }"
:style="{ :style="{
backgroundImage: filterImg('重打小票') background: filterItem('4', 3),
? `url(${api + filterImg('重打小票')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -94,10 +82,9 @@ ...@@ -94,10 +82,9 @@
/> --> /> -->
<!-- 现场签到 --> <!-- 现场签到 -->
<div <div
:class="{ border: !filterItem('4', 4) }"
:style="{ :style="{
backgroundImage: filterImg('现场签到') background: filterItem('4', 4),
? `url(${api + filterImg('现场签到')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -109,10 +96,9 @@ ...@@ -109,10 +96,9 @@
/> --> /> -->
<!-- 政务服务网取号 --> <!-- 政务服务网取号 -->
<div <div
:class="{ border: !filterItem('4', 5) }"
:style="{ :style="{
backgroundImage: filterImg('政务网取号') background: filterItem('4', 5),
? `url(${api + filterImg('政务网取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
}" }"
></div> ></div>
<!-- <img <!-- <img
...@@ -127,39 +113,31 @@ ...@@ -127,39 +113,31 @@
<div class="skin-footer"> <div class="skin-footer">
<div class="skin-footer-data"> <div class="skin-footer-data">
<p> <p>
<span :style="{ color: filterColor('数据标题') }"> <span :style="{ color: filterItem('5', 0) }"> 今日取号量:</span>
今日取号量:</span <span :style="{ color: filterItem('6', 0) }">2000次</span>
>
<span :style="{ color: filterColor('数据颜色') }">2000次</span>
</p> </p>
<p> <p>
<span :style="{ color: filterColor('数据标题') }"> <span :style="{ color: filterItem('5', 0) }"> 累计取号量:</span>
累计取号量:</span <span :style="{ color: filterItem('6', 0) }">2000次</span>
>
<span :style="{ color: filterColor('数据颜色') }">2000次</span>
</p> </p>
<p> <p>
<span :style="{ color: filterColor('数据标题') }"> <span :style="{ color: filterItem('5', 0) }">
当前等待人数:</span 当前等待人数:</span
> >
<span :style="{ color: filterColor('数据颜色') }">2000人</span> <span :style="{ color: filterItem('6', 0) }">2000人</span>
</p> </p>
<p> <p>
<span :style="{ color: filterColor('数据标题') }"> <span :style="{ color: filterItem('5', 0) }">
平均等待时间:</span 平均等待时间:</span
> >
<span :style="{ color: filterColor('数据颜色') }">15分钟</span> <span :style="{ color: filterItem('6', 0) }">15分钟</span>
</p> </p>
</div> </div>
<div class="skin-footer-records"> <div class="skin-footer-records">
<p :style="{ color: filterColor('备案颜色') }"> <p :style="{ color: filterItem('9', 0) }">主办单位:信宏翔科技</p>
主办单位:信宏翔科技 <p :style="{ color: filterItem('9', 0) }">承办单位:信宏翔科技</p>
</p> <p :style="{ color: filterItem('9', 0) }">技术:信宏翔科技</p>
<p :style="{ color: filterColor('备案颜色') }"> <p :style="{ color: filterItem('9', 0) }">版权所有</p>
承办单位:信宏翔科技
</p>
<p :style="{ color: filterColor('备案颜色') }">技术:信宏翔科技</p>
<p :style="{ color: filterColor('备案颜色') }">版权所有</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -212,32 +190,57 @@ export default { ...@@ -212,32 +190,57 @@ export default {
}, },
methods: { methods: {
// 过滤图片 // 过滤图片
filterImg(val) { // filterImg(val) {
let url = ""; // let url = "";
this.skinFieldList // this.skinFieldList
.filter((v) => { // .filter((v) => {
return v.fieldType === "2"; // return v.fieldType === "2";
}) // })
.forEach((v) => { // .forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) { // if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue; // url = v.fieldValue;
} // }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
}); });
return url; if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
}, },
// 过滤颜色 // 过滤属性值类型
filterColor(val) { filterValueType(info = {}) {
let str = ""; let value = "";
this.skinFieldList if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
.filter((v) => { value = info.fieldValue;
return v.fieldType === "1"; } else if (
}) info.fieldType !== "" &&
.forEach((v) => { info.fieldType === "2" &&
if (v.fieldName !== "" && v.fieldName === val) { info.fieldValue
str = v.fieldValue; ) {
value = `url(${this.api + info.fieldValue})`;
} }
}); return value;
return str;
}, },
}, },
}; };
...@@ -249,9 +252,9 @@ export default { ...@@ -249,9 +252,9 @@ export default {
height: 562.5px; height: 562.5px;
color: #fff; color: #fff;
background-image: linear-gradient(#26c5ff, #2c66ff); background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat; background-repeat: no-repeat !important;
background-position: center; background-position: center !important;
background-size: cover; background-size: cover !important;
h1 { h1 {
color: #fff; color: #fff;
margin: 0px; margin: 0px;
...@@ -315,9 +318,15 @@ export default { ...@@ -315,9 +318,15 @@ export default {
width: 176px; width: 176px;
height: 108px; height: 108px;
border-radius: 10px; border-radius: 10px;
background-repeat: no-repeat; background-repeat: no-repeat !important;
background-position: center; background-position: center !important;
background-size: 100% 100%; background-size: 100% 100% !important;
text-align: center;
line-height: 108px;
}
.border {
border: 1px dashed #ececec;
} }
img { img {
width: 176px; width: 176px;
......
...@@ -5,56 +5,46 @@ ...@@ -5,56 +5,46 @@
:id="conponentsId" :id="conponentsId"
class="window-skin-across flex jcb aic" class="window-skin-across flex jcb aic"
:style="{ :style="{
backgroundImage: filterImg('背景大图') background: filterItem('1', 0),
? `url(${api + filterImg('背景大图')})`
: '',
}" }"
> >
<div class="left flex flexc jcc aic"> <div class="left flex flexc jcc aic">
<p class="title">异地社保</p> <p class="title">异地社保</p>
<p class="code" :style="{ color: filterColor('主题色') }">A08</p> <p class="code" :style="{ color: filterItem('7', 0) }">A08</p>
<p><img width="100" src="../../../../assets/img/lvma.png" /></p> <p><img width="100" src="../../../../assets/img/lvma.png" /></p>
</div> </div>
<div class="right flex1 flex flexc aic"> <div class="right flex1 flex flexc aic">
<div class="header flex aic jcc"> <div class="header flex aic jcc">
<img src="../../../../assets/img/logo.png" /> <img src="../../../../assets/img/logo.png" />
<div> <div>
<h1 :style="{ color: filterColor('主题色') }">政务服务中心</h1> <h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div> </div>
</div> </div>
<div <div
class="call-out flex aic" class="call-out flex aic"
:style="{ backgroundColor: filterColor('辅助色') }" :style="{ background: filterItem('8', 0) }"
> >
<div class="call-out-now flex flexc aic jcb"> <div class="call-out-now flex flexc aic jcb">
<p class="call-out-title">正在办理</p> <p class="call-out-title">正在办理</p>
<p <p class="call-out-now-code" :style="{ color: filterItem('7', 0) }">
class="call-out-now-code"
:style="{ color: filterColor('主题色') }"
>
A001 A001
</p> </p>
</div> </div>
<div <div
class="line" class="line"
:style="{ :style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor( backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'主题色' '7',
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`, 0
)} 45%,${filterItem('7', 0)} 65%,#ccc 100% )`,
}" }"
></div> ></div>
<div class="call-out-wt flex flex1 flexc aic jcb"> <div class="call-out-wt flex flex1 flexc aic jcb">
<p class="call-out-title">等待呼叫</p> <p class="call-out-title">等待呼叫</p>
<p <p class="call-out-wt-code" :style="{ color: filterItem('7', 0) }">
class="call-out-wt-code"
:style="{ color: filterColor('主题色') }"
>
A002 A002
</p> </p>
<p <p class="call-out-wt-code" :style="{ color: filterItem('7', 0) }">
class="call-out-wt-code"
:style="{ color: filterColor('主题色') }"
>
A003 A003
</p> </p>
</div> </div>
...@@ -65,14 +55,7 @@ ...@@ -65,14 +55,7 @@
<li>退休补偿金办理</li> <li>退休补偿金办理</li>
</ul> </ul>
<!-- 底部banner --> <!-- 底部banner -->
<div <div class="footer-banner">Banner展示区</div>
class="footer-banner"
:style="{
backgroundImage: filterImg('banner图')
? `url(${api + filterImg('banner图')})`
: `url(${require('../../../../assets/img/cpbg.png')})`,
}"
></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -106,32 +89,58 @@ export default { ...@@ -106,32 +89,58 @@ export default {
}, },
methods: { methods: {
// 过滤图片 // 过滤图片
filterImg(val) { // filterImg(val) {
let url = ""; // let url = "";
this.skinFieldList // this.skinFieldList
.filter((v) => { // .filter((v) => {
return v.fieldType === "2"; // return v.fieldType === "2";
}) // })
.forEach((v) => { // .forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) { // if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue; // url = v.fieldValue;
} // }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
}); });
return url; if (arr.length) {
}, return this.filterValueType(arr[index]);
// 过滤颜色 } else {
filterColor(val) { return "";
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
} }
}); },
return str; // 过滤属性值类型
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;
}, },
}, },
}; };
...@@ -143,9 +152,9 @@ export default { ...@@ -143,9 +152,9 @@ export default {
height: 562.5px; height: 562.5px;
padding: 20px; padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff); background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat; background-repeat: no-repeat !important;
background-position: center; background-position: center !important;
background-size: cover; background-size: cover !important;
.left { .left {
width: 38%; width: 38%;
height: 100%; height: 100%;
...@@ -232,6 +241,10 @@ export default { ...@@ -232,6 +241,10 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100%; background-size: 100%;
border: 1px dashed #ccc;
font-size: 20px;
text-align: center;
line-height: 100px;
} }
} }
} }
......
...@@ -65,6 +65,7 @@ module.exports = { ...@@ -65,6 +65,7 @@ module.exports = {
delete: `${BASE_URL}/matter/delete`, delete: `${BASE_URL}/matter/delete`,
addMatterToSite: `${BASE_URL}/matter/addMatterToSite`, addMatterToSite: `${BASE_URL}/matter/addMatterToSite`,
exportExcel: `${BASE_URL}/matter/exportExcel`, exportExcel: `${BASE_URL}/matter/exportExcel`,
matterList: `${BASE_URL}/matter/sublist`,
}, },
// 事项申请材料 // 事项申请材料
matterdatum: { matterdatum: {
......
...@@ -9,24 +9,24 @@ import { ...@@ -9,24 +9,24 @@ import {
matterintermediary, matterintermediary,
matterflowlimit, matterflowlimit,
mattercharges, mattercharges,
} from '@/services/basicsetApi' } from "@/services/basicsetApi";
import {request, METHOD} from '@/utils/request' import { request, METHOD } from "@/utils/request";
/** /**
* 站点事项 * 站点事项
*/ */
// 查询站点事项列表 // 查询站点事项列表
export async function getSiteMatterList(data) { export async function getSiteMatterList(data) {
return request(sitematter.list, METHOD.POST, data) return request(sitematter.list, METHOD.POST, data);
} }
// 新增站点事项 // 新增站点事项
export async function addSitematter(data) { export async function addSitematter(data) {
return request(sitematter.save, METHOD.POST, data) return request(sitematter.save, METHOD.POST, data);
} }
// 从站点删除事项 // 从站点删除事项
export async function delSiteMatter(data) { export async function delSiteMatter(data) {
return request(sitematter.delete, METHOD.GET, data) return request(sitematter.delete, METHOD.GET, data);
} }
/** /**
...@@ -34,43 +34,46 @@ export async function delSiteMatter(data) { ...@@ -34,43 +34,46 @@ export async function delSiteMatter(data) {
*/ */
// 获取一体化事项列表 // 获取一体化事项列表
export async function getMatterList(data) { export async function getMatterList(data) {
return request(matter.list, METHOD.POST, data) return request(matter.list, METHOD.POST, data);
} }
// 保存/更新基础事项 // 保存/更新基础事项
export async function saveAddMatter(data) { export async function saveAddMatter(data) {
return request(matter.save, METHOD.POST, data) return request(matter.save, METHOD.POST, data);
} }
// 添加基础事项到站点 // 添加基础事项到站点
export async function addMatterToSite(data) { export async function addMatterToSite(data) {
return request(matter.addMatterToSite, METHOD.POST, data) return request(matter.addMatterToSite, METHOD.POST, data);
} }
// 删除基础事项 // 删除基础事项
export async function delMatter(data) { export async function delMatter(data) {
return request(matter.delete, METHOD.GET, data) return request(matter.delete, METHOD.GET, data);
}
// 获取一体化事项列表(差集)
export async function getMatterListSubList(data) {
return request(matter.matterList, METHOD.POST, data);
} }
/** /**
* 事项申请材料 * 事项申请材料
*/ */
// 查询事项申请材料列表 // 查询事项申请材料列表
export async function getMatterDatumList(data) { export async function getMatterDatumList(data) {
return request(matterdatum.list, METHOD.POST, data) return request(matterdatum.list, METHOD.POST, data);
} }
// 保存更新事项申请材料 // 保存更新事项申请材料
export async function saveMatterDatum(data) { export async function saveMatterDatum(data) {
return request(matterdatum.save, METHOD.POST, data) return request(matterdatum.save, METHOD.POST, data);
} }
// 删除材料 // 删除材料
export async function delMatterDatum(data) { export async function delMatterDatum(data) {
return request(matterdatum.delete, METHOD.GET, data) return request(matterdatum.delete, METHOD.GET, data);
} }
// 下载附件 // 下载附件
export async function download(data,config) { export async function download(data, config) {
return request(matterdatumfile.exportExcel, METHOD.POST, data,config) return request(matterdatumfile.exportExcel, METHOD.POST, data, config);
} }
// 删除附件 // 删除附件
export async function delMatterdatumfile(data) { export async function delMatterdatumfile(data) {
return request(matterdatumfile.delete, METHOD.GET, data) return request(matterdatumfile.delete, METHOD.GET, data);
} }
/** /**
...@@ -79,32 +82,31 @@ export async function delMatterdatumfile(data) { ...@@ -79,32 +82,31 @@ export async function delMatterdatumfile(data) {
// 查询事项受理条件列表 // 查询事项受理条件列表
export async function getMatteracceptList(data) { export async function getMatteracceptList(data) {
return request(matteraccept.list, METHOD.POST, data) return request(matteraccept.list, METHOD.POST, data);
} }
// 新增受理条件 // 新增受理条件
export async function addMatteraccept(data) { export async function addMatteraccept(data) {
return request(matteraccept.save, METHOD.POST, data) return request(matteraccept.save, METHOD.POST, data);
} }
// 删除受理条件 // 删除受理条件
export async function delMatteraccept(data) { export async function delMatteraccept(data) {
return request(matteraccept.delete, METHOD.GET, data) return request(matteraccept.delete, METHOD.GET, data);
} }
/** /**
* 常见问题 * 常见问题
*/ */
// 获取常见问题列表 // 获取常见问题列表
export async function getMatterquestion(data) { export async function getMatterquestion(data) {
return request(matterquestion.list, METHOD.POST, data) return request(matterquestion.list, METHOD.POST, data);
} }
// 新增问答 // 新增问答
export async function addMatterquestion(data) { export async function addMatterquestion(data) {
return request(matterquestion.save, METHOD.POST, data) return request(matterquestion.save, METHOD.POST, data);
} }
// 删除问答 // 删除问答
export async function delMatterquestion(data) { export async function delMatterquestion(data) {
return request(matterquestion.delete, METHOD.GET, data) return request(matterquestion.delete, METHOD.GET, data);
} }
/** /**
...@@ -112,15 +114,15 @@ export async function delMatterquestion(data) { ...@@ -112,15 +114,15 @@ export async function delMatterquestion(data) {
*/ */
// 获取依据列表 // 获取依据列表
export async function getMattersetbase(data) { export async function getMattersetbase(data) {
return request(mattersetbase.list, METHOD.POST, data) return request(mattersetbase.list, METHOD.POST, data);
} }
// 新增依据 // 新增依据
export async function addMattersetbase(data) { export async function addMattersetbase(data) {
return request(mattersetbase.save, METHOD.POST, data) return request(mattersetbase.save, METHOD.POST, data);
} }
// 删除依据 // 删除依据
export async function delMattersetbase(data) { export async function delMattersetbase(data) {
return request(mattersetbase.delete, METHOD.GET, data) return request(mattersetbase.delete, METHOD.GET, data);
} }
/** /**
...@@ -128,7 +130,7 @@ export async function delMattersetbase(data) { ...@@ -128,7 +130,7 @@ export async function delMattersetbase(data) {
*/ */
// 增加中介服务 // 增加中介服务
export async function addMatterintermediary(data) { export async function addMatterintermediary(data) {
return request(matterintermediary.save, METHOD.POST, data) return request(matterintermediary.save, METHOD.POST, data);
} }
/** /**
...@@ -136,7 +138,7 @@ export async function addMatterintermediary(data) { ...@@ -136,7 +138,7 @@ export async function addMatterintermediary(data) {
*/ */
// 新增办理流程 // 新增办理流程
export async function addMatterflowlimit(data) { export async function addMatterflowlimit(data) {
return request(matterflowlimit.save, METHOD.POST, data) return request(matterflowlimit.save, METHOD.POST, data);
} }
/** /**
...@@ -144,5 +146,5 @@ export async function addMatterflowlimit(data) { ...@@ -144,5 +146,5 @@ export async function addMatterflowlimit(data) {
*/ */
// 新增收费标准 // 新增收费标准
export async function addMattercharges(data) { export async function addMattercharges(data) {
return request(mattercharges.save, METHOD.POST, data) return request(mattercharges.save, METHOD.POST, data);
} }
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