Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
bfa807e7 by xiaomiao
Options

工作台样式调整

1 parent 6c08504a
Inline Side-by-side
Showing 8 changed files with 322 additions and 280 deletions
......@@ -17,7 +17,7 @@
data () {
return {
options: {},
max: "100", //最大value值
max: "5000", //最大value值
min: "1", // 最小value值
key: 0,
mapjson: "",
......@@ -87,10 +87,10 @@
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: "20-100", color: "#3375e4" },
{ gte: 20, lte: 2000, label: "1-200", color: "#6797ef" },
{ gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" },
{ gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" },
{ gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" },
{ gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" },
],
textStyle: {
color: "#737373",
......
......@@ -26,7 +26,7 @@
watch: {
cdata: {
handler (newData) {
console.log("newData", newData);
this.options = {
color: [
"#37a2da",
......@@ -34,31 +34,29 @@
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "<br/>{b} : {c} ({d}%)",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `${params.name}\n（${params.value}）`;
return `${params.name}`;
},
position: "outer",
alignTo: "edge",
margin: 5
},
labelLine: {
lineStyle: {
width: 3,
},
},
data: newData.seriesData,
}
],
......
......@@ -5,57 +5,71 @@
</template>
<script>
import Chart from "./Chart";
import work from "@/api/work";
export default {
data() {
return {
cdata: {
seriesData: [],
},
};
},
components: {
Chart,
},
mounted() {
this.getdjywltotal();
window.addEventListener("resize", () => {
this.cdata.seriesData = [];
this.getdjywltotal();
});
},
methods: {
// 获取登记业务量玫瑰图数据
async getdjywltotal() {
if (this.cdata.seriesData.length == 0) {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
this.cdata.seriesData = [];
let res = await work.getdjywltotal(p);
if(this.cdata.seriesData.length == 0){
res.result.map((item) => {
return this.cdata.seriesData.push({
name: item.AREACODE,
value: item.ywtotal,
});
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
return {
cdata: {
seriesData: [],
},
getdata: [],
};
},
components: {
Chart,
},
mounted () {
this.addhousetotal();
window.addEventListener("resize", () => {
this.getdata = [];
this.addhousetotal();
});
},
methods: {
async addhousetotal () {
if (this.getdata.length == 0) {
this.getdata = [];
try {
let { result: res } = await work.addhousetotal();
res.map((item) => {
return this.cdata.seriesData.push({
name: `${item.fwyt + '（' + item.fwxz}）`,
value: item.mj,
});
});
}
// 遍历修改数组键，作为echars图表的参数
} catch (error) {
console.log(error);
} catch (error) {
console.log("error", error);
}
}
}
},
},
};
let delarr = this.cdata.seriesData.sort(this.up)
this.setadat(delarr)
},
// 处理数据方法
setadat (delarr) {
this.cdata.seriesData = delarr.splice(0, 6);
let sum = 0
for (var i = 0; i < delarr.length; i++) {
sum = sum + delarr[i].value
}
sum = sum.toFixed(2)
this.cdata.seriesData.push({
name: "其他（其他种类）",
values: "其他种类",
value: sum,
})
},
// 排序方法
up (x, y) { return y.value - x.value }
}
};
</script>
<style lang="scss" scoped></style>
......
......@@ -2,7 +2,8 @@
<div class="navbar-con">
<div class="navbar">
<div class="logo">
<img :src="require('@/image/logo.png')" alt="" />
<img :src="require('@/image/bdclogo.png')" alt="" />
<h4>不动产登记上报系统</h4>
</div>
<div class="right-menu">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
......@@ -20,214 +21,224 @@
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
Breadcrumb
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
data () {
return {
title: defaultSettings.title
}
},
methods: {
handleDataView () {
const { href } = this.$router.resolve('/dataView');
window.open(href, '_blank');
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
Breadcrumb
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
themeChange (val) {
this.$store.dispatch('app/updateTheme', val)
data () {
return {
title: defaultSettings.title
}
},
handleCommand (command) {
if (command == 'a') {
} else {
methods: {
handleDataView () {
const { href } = this.$router.resolve('/dataView');
window.open(href, '_blank');
},
themeChange (val) {
this.$store.dispatch('app/updateTheme', val)
},
handleCommand (command) {
if (command == 'a') {
} else {
}
}
}
}
}
</script>
<style lang="scss" scoped>
.navbar-con {
position: relative;
.navbar-con {
position: relative;
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
}
.NoticeBar {
position: absolute;
bottom: 0;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #ebeef5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4a4a4a;
width: 140px;
height: 36px;
line-height: 36px;
}
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #ebeef5;
}
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
display: flex;
img {
width: 47px;
height: 47px;
}
h4 {
margin-left: 20px;
height: 50px;
line-height: 50px;
}
}
}
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #f6f7f9;
color: #4a4a4a;
}
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
background: #3D59C4;
display: flex;
align-items: center;
padding-right: 20px;
justify-content: space-between;
.header-logo {
width: 300px;
.NoticeBar {
position: absolute;
bottom: 0;
}
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #ebeef5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4a4a4a;
width: 140px;
height: 36px;
line-height: 36px;
}
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #ebeef5;
}
&:hover {
background: rgba(0, 0, 0, 0.025);
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
}
}
.breadcrumb-container {
float: left;
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #f6f7f9;
color: #4a4a4a;
}
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
background: linear-gradient(270deg, #ebf1ff 0%, #3d59c4 100%);
display: flex;
align-items: center;
.function {
margin: 0 15px;
cursor: pointer;
padding-right: 20px;
justify-content: space-between;
.header-logo {
width: 300px;
}
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
}
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
position: relative;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
&:focus {
outline: none;
.breadcrumb-container {
float: left;
}
.right-menu-item {
display: inline-block;
.right-menu {
float: right;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
line-height: 50px;
display: flex;
align-items: center;
&.hover-effect {
.function {
margin: 0 15px;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
}
&:hover {
background: rgba(0, 0, 0, 0.025);
}
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
}
.user-avatar {
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
position: relative;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
}
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
}
}
}
}
}
</style>
......
<!--
* @Description:
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-06 16:18:21
-->
......@@ -9,7 +9,7 @@
<el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(3)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(4)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......@@ -19,38 +19,42 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import defaultSettings from '@/settings'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
data () {
return {
title: defaultSettings.title
}
},
created () {
console.log(this.permission_routes);
},
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
import { mapGetters } from 'vuex'
import Logo from './Logo'
import defaultSettings from '@/settings'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
data () {
return {
title: defaultSettings.title
}
return path
},
variables () {
return variables
created () {
console.log(this.permission_routes);
},
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes
}
},
asyncRoutes () {
return asyncRoutes
mounted () {
console.log("this. permission_routes", this.permission_routes);
}
}
}
</script>
\ No newline at end of file
</script>
......
<template>
<div class="rightcard">
<div class="card2 cardCon mt-10">
<div class="cardhead">登记业务量</div>
<Rose />
</div>
<div class="card1 cardCon d-center">
<div class="cardhead">新建国有房屋信息</div>
<div class="cardhead">登记业务量</div>
<div class="cardcontent" style="margin-top: .3646rem">
<dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
<div v-else class="nodata">暂无数据</div>
</div>
</div>
<div class="card2 cardCon mt-10">
<div class="cardhead">新建国有房屋信息</div>
<Rose />
</div>
<div class="card3 cardCon mt-10">
<div class="cardhead">登记类型总量</div>
<columnarsmat />
......@@ -30,7 +29,8 @@
headerBGC: '#016AC5',
oddRowBGC: '#154295',
evenRowBGC: '#154295',
header: ['序号', '用途', '性质', '面积'],
header: ['序号', '业务名称', '登记业务量'],
columnWidth: [120, 270, 140],
data: [],
key: 0
}
......@@ -38,23 +38,38 @@
},
components: { columnarsmat, Rose },
mounted () {
this.addhousetotal();
this.getdjywltotal();
window.addEventListener("resize", () => {
this.cdata.seriesData = [];
this.getdjywltotal();
});
// scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
methods: {
async addhousetotal () {
// 获取登记业务量玫瑰图数据
async getdjywltotal () {
try {
let { result: res } = await work.addhousetotal();
res.map((item, index) => {
return (
this.config.data.push([index, item.fwyt, item.fwxz, item.mj])
)
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
let res = await work.getdjywltotal(p);
res.result.map((item, index) => {
this.config.data.push([index, item.AREACODE, item.ywtotal])
});
// 遍历修改数组键，作为echars图表的参数
} catch (error) {
console.log("error", error);
console.log(error);
}
}
}
},
},
}
</script>
<style lang="scss" scoped>
......@@ -134,6 +149,7 @@
background: url("~@/image/djywl.png") no-repeat;
background-size: 100% 100%;
padding: 0.3825rem 0 0 0;
overflow: hidden;
}
.card3 {
......
......@@ -60,7 +60,7 @@
getAction(api.subsystem, params).then((res) => {
if (res.status === 1) {
console.log(" res.contentJJJGGG", res.content);
// this.productName = res.content[0].name;
this.productName = res.content[0].name;
this.$store.dispatch("products/setData", res.content[0].code);
sessionStorage.setItem("products", res.content[0].code)
console.log("jjjggg的product");
......
......@@ -67,9 +67,8 @@
getAction(api.subsystem, params).then((res) => {
if (res.status === 1) {
this.productName = res.content[0].name;
// console.log(" res.contentSSSSSBBBBB", res.content);
this.$store.dispatch("products/setData", res.content[0].code);
sessionStorage.setItem("products", res.content[0].code)
} else {
this.$message.error({ message: res.message, showClose: true });
......