Browse Source

title组件添加高度,满意度评价动态修改select框宽度

V1.0
PLUTO 2 years ago
parent
commit
c4d46bbcd5
  1. 2
      src/assets/scss/dataBoardMain.scss
  2. 6
      src/views/dataBoard/satisfactionEval/components/Title/index.vue
  3. 144
      src/views/dataBoardMain/main-navbar.vue

2
src/assets/scss/dataBoardMain.scss

@ -54,7 +54,7 @@
left: 21px; left: 21px;
right: 0; right: 0;
top: 0; top: 0;
line-height: 70px; line-height: 78px;
img { img {
width: 21px; width: 21px;

6
src/views/dataBoard/satisfactionEval/components/Title/index.vue

@ -26,8 +26,10 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.title { .title {
background: url(../../../../../assets/images/shuju/overview/title-bg.png) // width: 100%;
no-repeat 0 0 fixed; height: 40px;
background: url(../../../../../assets/images/shuju/overview/title-bg.png) no-repeat;
// background-size: 100% 100%;
padding: 8px 16px 8px 32px; padding: 8px 16px 8px 32px;
display: flex; display: flex;
align-items: center; align-items: center;

144
src/views/dataBoardMain/main-navbar.vue

@ -1,31 +1,13 @@
<template> <template>
<div class="m-topnav"> <div class="m-topnav">
<div class="back" style="cursor: pointer" @click="goBack()"> <div class="back" style="cursor: pointer" @click="goBack()">
<img <img width="22px" height="22px" src="~@/assets/images/shuju/main/back1.png" alt="/" />
width="22px"
height="22px"
src="~@/assets/images/shuju/main/back1.png"
alt="/"
/>
</div> </div>
<div class="title"> <div class="title">
<div class="title-txt">{{ customerName }}数据智能分析平台</div> <div class="title-txt">{{ customerName }}数据智能分析平台</div>
<div <div class="selectArea" v-if="$route.path == '/dataBoard/satisfactionEval/index'">
class="selectArea" <el-select :style="{ width: selectWidth + 'px' }" @change="setSelectName" v-model="value" popper-class="selectPopClass">
v-if="$route.path == '/dataBoard/satisfactionEval/index'" <el-option v-for="(item, index) in options" v-if="item.agencyLevel !== 'grid'" :key="item.value" :label="item.label" :value="item.value" />
>
<el-select
@change="setSelectName"
v-model="value"
popper-class="selectPopClass"
>
<el-option
v-for="(item, index) in options"
v-if="item.agencyLevel !== 'grid'"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
@ -46,32 +28,16 @@
</div> </div>
</div>--> </div>-->
<div class="nav-list"> <div class="nav-list">
<div <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/overview') != -1 }" @click="toPage('/dataBoard/overview/index')">
class="nav-item"
:class="{ 'z-on': $route.path.indexOf('/dataBoard/overview') != -1 }"
@click="toPage('/dataBoard/overview/index')"
>
<span>概览</span> <span>概览</span>
</div> </div>
<div <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
class="nav-item"
:class="{ 'z-on': $route.path.includes('/organizational') }"
@click="toPage('/organizational/dangTree')"
>
<span>组织架构</span> <span>组织架构</span>
</div> </div>
<div <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }" @click="toPage('/dataBoard/renfang/index')">
class="nav-item"
:class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }"
@click="toPage('/dataBoard/renfang/index')"
>
<span>人房数据</span> <span>人房数据</span>
</div> </div>
<div <div class="nav-item" :class="{ 'z-on': $route.path.includes('/satisfactionEval') }" @click="toPage('/dataBoard/satisfactionEval/index')">
class="nav-item"
:class="{ 'z-on': $route.path.includes('/satisfactionEval') }"
@click="toPage('/dataBoard/satisfactionEval/index')"
>
<span>满意度评价</span> <span>满意度评价</span>
</div> </div>
</div> </div>
@ -205,6 +171,7 @@ export default {
showTime: "", showTime: "",
showMonth: "", showMonth: "",
value: 0, value: 0,
selectWidth: 120,
weather: { weather: {
weather: "晴", weather: "晴",
temperature: "--", temperature: "--",
@ -220,15 +187,10 @@ export default {
const customerId = localStorage.getItem("customerId"); const customerId = localStorage.getItem("customerId");
let siteconfigElement = window.SITE_CONFIG["menuShujuList"]; let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
// 亿 - // 亿 -
if ( if ("04c0d396e298f13e57aa5904a657eaa6" != customerId && "3fdd0380deff5b30f45376cdf995d1c1" != customerId) {
"04c0d396e298f13e57aa5904a657eaa6" != customerId &&
"3fdd0380deff5b30f45376cdf995d1c1" != customerId
) {
for (let index in siteconfigElement) { for (let index in siteconfigElement) {
if (siteconfigElement[index].id == "6") { if (siteconfigElement[index].id == "6") {
let newMenuArr = siteconfigElement[index].children.filter( let newMenuArr = siteconfigElement[index].children.filter((item) => item.id !== "duoyuanfuwufenxi");
(item) => item.id !== "duoyuanfuwufenxi"
);
siteconfigElement[index].children = newMenuArr; siteconfigElement[index].children = newMenuArr;
} }
} }
@ -257,55 +219,53 @@ export default {
if (this.options.length) { if (this.options.length) {
params = { orgId: this.value, level: this.getChooseLabel(this.value) }; params = { orgId: this.value, level: this.getChooseLabel(this.value) };
} }
this.$http this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => {
.post(`/gov/org/agency/maporg`, params) console.log(data);
.then(async ({ data: { data } }) => { this.value = data.id;
console.log(data); this.$store.dispatch("chooseArea/chooseName", {
this.value = data.id; orgId: data.id,
this.$store.dispatch("chooseArea/chooseName", { level: data.level,
orgId: data.id,
level: data.level,
});
let children = await this.dealTreeData(data.children);
if (data.parentId) {
this.options = [
{
...data,
value: data.parentId,
label: data.parentName,
},
{
...data,
value: data.id,
label: data.name,
},
...children,
];
} else {
this.options = [
{
...data,
value: data.id,
label: data.name,
},
...children,
];
}
}); });
let children = await this.dealTreeData(data.children);
if (data.parentId) {
this.options = [
{
...data,
value: data.parentId,
label: data.parentName,
},
{
...data,
value: data.id,
label: data.name,
},
...children,
];
} else {
this.options = [
{
...data,
value: data.id,
label: data.name,
},
...children,
];
}
});
}, },
dealTreeData(treeData, level = 0) { dealTreeData(treeData, level = 0) {
const data = treeData.map((item) => ({ const data = treeData.map((item) => ({
...item, ...item,
value: item.id, value: item.id,
label: item.name, label: item.name,
children: children: item.children && item.children.length ? this.dealTreeData(item.children, level++) : null,
item.children && item.children.length
? this.dealTreeData(item.children, level++)
: null,
})); }));
return data; return data;
}, },
setSelectName(index) { setSelectName(index) {
const name = this.options.filter((item) => item.value === index)[0].label;
const width = name.length > 5 ? name.length * 14 + 25 : 120;
this.selectWidth = width;
/* this.$store.dispatch("chooseArea/chooseName", { /* this.$store.dispatch("chooseArea/chooseName", {
orgId: this.options[index].id, orgId: this.options[index].id,
level: this.options[index].level level: this.options[index].level
@ -335,9 +295,7 @@ export default {
}, },
// menuId() // menuId()
gotoRouteHandle(menuId, idx) { gotoRouteHandle(menuId, idx) {
var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter( var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter((item) => item.meta.menuId === menuId)[0];
(item) => item.meta.menuId === menuId
)[0];
if (route) { if (route) {
this.$router.push({ this.$router.push({
name: route.name, name: route.name,
@ -346,12 +304,10 @@ export default {
} }
}, },
changeCustomerName() { changeCustomerName() {
this.customerName = this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
}, },
async getWeatherData() { async getWeatherData() {
const url = const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
"https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
const { data, code, msg } = await requestGet(url, { const { data, code, msg } = await requestGet(url, {
city: this.$store.state.user.areaCode, city: this.$store.state.user.areaCode,
}); });

Loading…
Cancel
Save