elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化初步

master
dai 3 years ago
parent
71a69182cd
commit
24cbdb7a2c
6 changed files with 231 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      src/assets/scss/main-shuju.scss
  2. 24
      src/assets/scss/shuju-variables.scss
  3. 89
      src/js/store/index.js
  4. 62
      src/views/components/fixed1920.vue
  5. 54
      src/views/main-shuju/main.vue
  6. 84
      src/views/modules/visual/heart/index.vue

25
src/assets/scss/main-shuju.scss
View File

@ -1,5 +1,8 @@
@import "~@/element-ui/theme-variables.scss"; @import "~@/element-ui/theme-variables.scss";
@import "./variables.scss"; @import "./shuju-variables.scss";
@import "./c/config";
@import "./c/function";
@import "./modules/visual/c/common.scss";
// $navbar--height: 60px; // $navbar--height: 60px;
body { body {
@ -19,6 +22,8 @@ body {
background-image: url(../img/shuju/bg.jpg); background-image: url(../img/shuju/bg.jpg);
background-size: cover; background-size: cover;
background-position: center 0; background-position: center 0;
height: 100%;
@include scrollBar;
.el-card + .el-card { .el-card + .el-card {
margin-top: 15px; margin-top: 15px;
@ -171,6 +176,10 @@ body {
// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
background: linear-gradient(180deg, #00023f, #176dec); background: linear-gradient(180deg, #00023f, #176dec);
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35);
font-size: 18px;
.el-menu-item {
font-size: 18px;
}
.navbar--colorful { .navbar--colorful {
.navbar__body { .navbar__body {
@ -229,17 +238,17 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 5px; padding: 10px 20px;
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 24px; font-size: 28px;
font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
// overflow: hidden; // overflow: hidden;
transition: width 0.3s; transition: width 0.3s;
font-family: FZZCHJW; font-family: FZZCHJW;
font-weight: normal;
color: #ffffff; color: #ffffff;
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
-webkit-background-clip: text; -webkit-background-clip: text;
@ -288,6 +297,7 @@ body {
.navbar__menu { .navbar__menu {
background-color: transparent; background-color: transparent;
border-bottom: 0 !important; border-bottom: 0 !important;
a:focus, a:focus,
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -349,7 +359,7 @@ body {
position: absolute; position: absolute;
display: none; display: none;
padding: 0 10px; padding: 0 10px;
width: 120px; width: 160px;
left: -100px; left: -100px;
right: -100px; right: -100px;
margin: 0 auto; margin: 0 auto;
@ -360,6 +370,9 @@ body {
border-top: 1px dashed rgba(#fff, 0.4); border-top: 1px dashed rgba(#fff, 0.4);
color: rgba(#fff, 0.7); color: rgba(#fff, 0.7);
transition: all ease 0.5s; transition: all ease 0.5s;
padding: 10px 0;
line-height: $navbar--height * 0.5;
&.z-on { &.z-on {
font-weight: bold; font-weight: bold;
} }
@ -409,7 +422,7 @@ body {
} }
.navbar__icon-menu { .navbar__icon-menu {
vertical-align: middle; vertical-align: middle;
font-size: 16px; font-size: 20px;
} }
.el-dropdown { .el-dropdown {
color: #fff; color: #fff;

24
src/assets/scss/shuju-variables.scss
View File

@ -0,0 +1,24 @@
// Base
$base--line-height: 1.15;
// Navbar
$navbar--height: 75px;
// Sidebar
$sidebar--width: 230px;
$sidebar--width-fold: 100px;
$sidebar--background-color-dark: #263238;
$sidebar--text-color-dark: #8a979e;
$sidebar--menu-item-height: 48px;
// Content
$content--padding: 10px;
$content--background-color: #f1f4f5;
$content--card-header-height: 60px;
$content--tabs-header-height: 38px;
// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度
$content--fill-height: calc(100vh - #{$navbar--height} - #{$content--padding * 2});
// Content, 填充整屏高度(是tabs状态) = 整屏高度 - 导航条高度 - tabs组件header高度 - tabs组件content上下内边距高度
$content--fill-height-tabs: calc(
100vh - #{$navbar--height} - #{$content--tabs-header-height} - #{$content--padding * 2}
);

89
src/js/store/index.js
View File

@ -8,7 +8,7 @@ import { requestPost } from "@/js/dai/request";
import { dateFormats } from "@/utils/index"; import { dateFormats } from "@/utils/index";
Vue.use(Vuex); Vue.use(Vuex);
let interTimer = null let interTimer = null;
export default new Vuex.Store({ export default new Vuex.Store({
namespaced: true, namespaced: true,
state: { state: {
@ -42,6 +42,9 @@ export default new Vuex.Store({
tipsList: [], tipsList: [],
tipsTime: [], tipsTime: [],
inIframe: window.self !== window.top, inIframe: window.self !== window.top,
fixed1920: {
height: document.documentElement.clientHeight,
},
}, },
modules: { modules: {
user, user,
@ -56,69 +59,71 @@ export default new Vuex.Store({
}); });
}, },
SET_TIPS_LIST(state, tipsList) { SET_TIPS_LIST(state, tipsList) {
let _list = state.tipsList let _list = state.tipsList;
// state.tipsList = _list.concat(tipsList) // state.tipsList = _list.concat(tipsList)
state.tipsList = tipsList state.tipsList = tipsList;
}, },
SET_TIPS_TIME(state, time) { SET_TIPS_TIME(state, time) {
state.tipsTime = time state.tipsTime = time;
} },
}, },
actions: { actions: {
clearInter() { clearInter() {
clearInterval(interTimer) clearInterval(interTimer);
}, },
setInterval({ commit, dispatch, state }) { setInterval({ commit, dispatch, state }) {
interTimer = setInterval(() => { interTimer = setInterval(() => {
const _t = dateFormats('YYYY-mm-dd HH:MM', (new Date(new Date().toLocaleDateString()).getTime())) const _t = dateFormats(
const _tt = new Date(_t).getTime() "YYYY-mm-dd HH:MM",
console.log('230000---', _t) new Date(new Date().toLocaleDateString()).getTime()
const t = dateFormats('YYYY-mm-dd HH:MM', (new Date().getTime())) );
const nt = new Date(t).getTime() const _tt = new Date(_t).getTime();
console.log("230000---", _t);
const t = dateFormats("YYYY-mm-dd HH:MM", new Date().getTime());
const nt = new Date(t).getTime();
// 判断当前时间是否为 00：00 // 判断当前时间是否为 00：00
if (nt == _tt) { if (nt == _tt) {
dispatch('setTipsTime') dispatch("setTipsTime");
return return;
} }
let times = state.tipsTime let times = state.tipsTime;
console.log('nt---000', nt) console.log("nt---000", nt);
state.tipsTime.forEach((item, index) => { state.tipsTime.forEach((item, index) => {
const _t = new Date(item).getTime() const _t = new Date(item).getTime();
if (_t == nt) { if (_t == nt) {
clearInterval(interTimer) clearInterval(interTimer);
dispatch('setTipsList', item) dispatch("setTipsList", item);
times.splice(index, 1) times.splice(index, 1);
commit('SET_TIPS_TIME', times) commit("SET_TIPS_TIME", times);
} }
}) });
}, 60000) }, 60000);
}, },
setTipsList({ commit }, time) { setTipsList({ commit }, time) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
const url = '/gov/project/memoAttr/memosToRemind' const url = "/gov/project/memoAttr/memosToRemind";
const params = { const params = {
remindTime: time || '' remindTime: time || "",
} };
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
commit('SET_TIPS_LIST', data) commit("SET_TIPS_LIST", data);
resolve() resolve();
} else reject(msg) } else reject(msg);
}) });
}, },
setTipsTime({ commit, dispatch }) { setTipsTime({ commit, dispatch }) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
if (interTimer) clearInterval(interTimer) if (interTimer) clearInterval(interTimer);
const url = '/gov/project/memoAttr/memoTime' const url = "/gov/project/memoAttr/memoTime";
const { data, code, msg } = await requestPost(url) const { data, code, msg } = await requestPost(url);
if (code === 0) { if (code === 0) {
commit("SET_TIPS_TIME", data);
commit('SET_TIPS_TIME', data) if (data.length > 0) dispatch("setInterval");
if (data.length > 0) dispatch('setInterval') resolve();
resolve() } else reject(msg);
} else reject(msg) });
}) },
} },
}
}); });

62
src/views/components/fixed1920.vue
View File

@ -0,0 +1,62 @@
<template>
<div class="g-app">
<div class="g-bd" :style="bdStyle">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
clientHeight: document.documentElement.clientHeight,
clientWidth: document.documentElement.clientWidth,
};
},
components: {},
computed: {
bdStyle() {
const { clientHeight, clientWidth } = this;
console.log("clientHeight", clientHeight);
const scale = clientWidth / 1920;
const height = clientHeight / scale;
const top = (clientHeight - height) / 2;
const left = (clientWidth - 1920) / 2;
this.$store.state.fixed1920.height = height;
return {
transform: `scale(${scale})`,
height: `${height}px`,
left: `${left}px`,
top: `${top}px`,
};
},
},
created() {},
mounted() {
window.addEventListener("resize", () => {
this.clientHeight = document.documentElement.clientHeight;
this.clientWidth = document.documentElement.clientWidth;
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
.g-app {
position: absolute;
// width: 1920px;
width: 100%;
height: 100vh;
overflow: hidden;
}
.g-bd {
position: absolute;
width: 1920px;
overflow-x: hidden;
overflow-y: auto;
}
</style>

54
src/views/main-shuju/main.vue
View File

@ -1,25 +1,28 @@
<template> <template>
<div <fixed1920>
v-loading.fullscreen.lock="loading" <div
:element-loading-text="$t('loading')" v-loading.fullscreen.lock="loading"
:class="[ :element-loading-text="$t('loading')"
'g-bd', :class="[
{ 'z-sidebar--fold': $store.state.sidebarFold }, 'g-bd',
{ { 'z-sidebar--fold': $store.state.sidebarFold },
'z-sidebar--noside': true, {
}, 'z-sidebar--noside': true,
]" },
> ]"
<template v-if="!loading"> >
<main-navbar ref="ref_navbar" /> <template v-if="!loading">
<div class="g-cnt"> <main-navbar ref="ref_navbar" />
<main-content
v-if="!$store.state.contentIsNeedRefresh" <div class="g-cnt">
@changeCustomerName="changeCustomerName" <main-content
/> v-if="!$store.state.contentIsNeedRefresh"
</div> @changeCustomerName="changeCustomerName"
</template> />
</div> </div>
</template>
</div>
</fixed1920>
</template> </template>
<script> <script>
@ -29,6 +32,7 @@ import debounce from "lodash/debounce";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick"; import nextTick from "dai-js/tools/nextTick";
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import fixed1920 from "@/views/components/fixed1920.vue";
export default { export default {
provide() { provide() {
@ -51,6 +55,7 @@ export default {
components: { components: {
MainNavbar, MainNavbar,
MainContent, MainContent,
fixed1920,
}, },
watch: { watch: {
@ -145,7 +150,8 @@ export default {
&::-webkit-scrollbar-corner, &::-webkit-scrollbar-corner,
/* 滚动条角落 */ /* 滚动条角落 */
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track { /*滚动条的轨道*/ &::-webkit-scrollbar-track {
/*滚动条的轨道*/
border-radius: 4px; border-radius: 4px;
} }
@ -153,13 +159,13 @@ export default {
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
/* 滚动条轨道 */ /* 滚动条轨道 */
background: rgba(12, 129, 254, .24); background: rgba(12, 129, 254, 0.24);
// box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
/* 滚动条手柄 */ /* 滚动条手柄 */
background: linear-gradient(270deg, #1257c9, #0095FF); background: linear-gradient(270deg, #1257c9, #0095ff);
} }
} }
</style> </style>

84
src/views/modules/visual/heart/index.vue
View File

@ -2,12 +2,14 @@
<div> <div>
<div class="m-sizer"> <div class="m-sizer">
<span>时间：</span> <span>时间：</span>
<el-date-picker v-model="monthId" <el-date-picker
type="month" v-model="monthId"
:clearable="false" type="month"
prefix-icon="el-icon-caret-bottom" :clearable="false"
placeholder="选择日期" prefix-icon="el-icon-caret-bottom"
value-format="yyyyMM"> placeholder="选择日期"
value-format="yyyyMM"
>
</el-date-picker> </el-date-picker>
</div> </div>
@ -19,12 +21,14 @@
<span>公益达人</span> <span>公益达人</span>
</div> </div>
<div class="tb"> <div class="tb" :style="tbStyle">
<cpt-tb :highlight-top3="true" <cpt-tb
:col-list="tb3.colList" :highlight-top3="true"
:loading="tb3.loading" :col-list="tb3.colList"
:header="tb3.header" :loading="tb3.loading"
:list="tb3.list"></cpt-tb> :header="tb3.header"
:list="tb3.list"
></cpt-tb>
</div> </div>
</cpt-card> </cpt-card>
</div> </div>
@ -36,12 +40,14 @@
<span>党员先锋</span> <span>党员先锋</span>
</div> </div>
<div class="tb"> <div class="tb" :style="tbStyle">
<cpt-tb :highlight-top3="true" <cpt-tb
:col-list="tb2.colList" :highlight-top3="true"
:loading="tb2.loading" :col-list="tb2.colList"
:header="tb2.header" :loading="tb2.loading"
:list="tb2.list"></cpt-tb> :header="tb2.header"
:list="tb2.list"
></cpt-tb>
</div> </div>
</cpt-card> </cpt-card>
</div> </div>
@ -53,12 +59,14 @@
<span>动力网格</span> <span>动力网格</span>
</div> </div>
<div class="tb"> <div class="tb" :style="tbStyle">
<cpt-tb :highlight-top3="true" <cpt-tb
:col-list="tb1.colList" :highlight-top3="true"
:loading="tb1.loading" :col-list="tb1.colList"
:header="tb1.header" :loading="tb1.loading"
:list="tb1.list"></cpt-tb> :header="tb1.header"
:list="tb1.list"
></cpt-tb>
</div> </div>
</cpt-card> </cpt-card>
</div> </div>
@ -76,7 +84,7 @@ import dateFormat from "dai-js/tools/dateFormat";
export default { export default {
name: "heart", name: "heart",
data () { data() {
return { return {
agencyId: this.$store.state.user.agencyId, agencyId: this.$store.state.user.agencyId,
areaCode: "", areaCode: "",
@ -171,7 +179,13 @@ export default {
props: {}, props: {},
computed: {}, computed: {
tbStyle() {
return {
height: this.$store.state.fixed1920.height - 260 + "px",
};
},
},
components: { components: {
cptCard, cptCard,
@ -179,33 +193,33 @@ export default {
}, },
watch: { watch: {
monthId () { monthId() {
this.getApiData(); this.getApiData();
}, },
}, },
async mounted () { async mounted() {
this.userId = this.uid; this.userId = this.uid;
await nextTick(100); await nextTick(100);
this.getApiData(); this.getApiData();
}, },
methods: { methods: {
handleSearch () { }, handleSearch() {},
async getApiData () { async getApiData() {
//await this.getAgencyInfo(); //await this.getAgencyInfo();
this.getTb1(); this.getTb1();
this.getTb2(); this.getTb2();
this.getTb3(); this.getTb3();
}, },
toUserInfo (uid) { toUserInfo(uid) {
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` }); this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
}, },
// 获取当前组织信息 // 获取当前组织信息
async getAgencyInfo () { async getAgencyInfo() {
const { data, code, msg } = await requestPost( const { data, code, msg } = await requestPost(
"/data/report/screen/agency/agencydetail-multic", "/data/report/screen/agency/agencydetail-multic",
{ {
@ -219,7 +233,7 @@ export default {
}, },
//加载组织数据 //加载组织数据
async getTb1 () { async getTb1() {
const { agencyId, areaCode } = this; const { agencyId, areaCode } = this;
const url = const url =
@ -248,7 +262,7 @@ export default {
}, },
//加载组织数据 //加载组织数据
async getTb2 () { async getTb2() {
const { agencyId, areaCode } = this; const { agencyId, areaCode } = this;
const url = "/data/report/screen/user/partypointrank"; const url = "/data/report/screen/user/partypointrank";
let params = { let params = {
@ -279,7 +293,7 @@ export default {
}, },
//加载组织数据 //加载组织数据
async getTb3 () { async getTb3() {
const { agencyId, areaCode } = this; const { agencyId, areaCode } = this;
const url = "/data/report/screen/user/userpointrank/withoutpartymember"; const url = "/data/report/screen/user/userpointrank/withoutpartymember";
let params = { let params = {

Write Preview
Loading…
Cancel
Save