Skip to content

E
enterprise-opt-kit
Commit 09f1cabc authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

写概况和组织的页面

parent 0b072fcb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1738 additions and 1321 deletions
public/index.html
View file @ 09f1cabc
<!DOCTYPE html>
<html>
<html data-use-rem="1920">
<head>
<meta charset="utf-8" data-use-rem="1920">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>icon.ico">
......
src/App.vue
View file @ 09f1cabc
<template>
<div id="app">
<!-- <login></login> -->
<router-view/>
<dv-full-screen-container class="bg">
<router-view/>
</dv-full-screen-container>
</div>
</template>
<script>
import util from '@/libs/util'
// import login from '@/views/system/login/page.vue'
export default {
name: 'app',
// components: {
// login
// },
watch: {
'$i18n.locale': 'i18nHandle'
},
......
src/assets/fonts/font.css 0 → 100644
View file @ 09f1cabc
@font-face {
font-family: "ZhenyanGB-Regular";
src:url('ZhenyanGB-Regular.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/assets/img/ring.png
View replaced file @ 0b072fcb View file @ 09f1cabc
src/assets/img/ring.png

32.8 KB | W: | H:

src/assets/img/ring.png

52.9 KB | W: | H:

src/assets/img/ring.png
src/assets/img/ring.png
src/assets/img/ring.png
src/assets/img/ring.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/style/headerLayout.scss
View file @ 09f1cabc
.headerLayout{
background: url('~@/assets/img/titleBg.png') no-repeat center top;
background-size: 100% 100%;
height: 92px;
height: 0.92rem;
text-align: center;
display: flex;
white-space: nowrap;
h3{
width:216px;
height:36px;
font-size:36px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:rgba(255,255,255,1);
line-height:36px;
margin: 30px auto 0;
}
.time{
height:20px;
font-size:20px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(48,221,244,1);
line-height:20px;
position: fixed;
right: 85px;
top:30px;
}
.tabList{
position: fixed;
left: 40px;
width: 600px;
box-sizing: border-box;
padding-top: 0.24rem;
padding-left: 0.48rem;
.tabButton{
font-size:16px;
font-size:.16rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(48,221,244,1);
background:rgba(144,224,255,0.15);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
margin-right: 10px;
margin-top: 20px;
color: #30DDF4;
background: rgba(48,221,244,0.15);
border: 1px solid #77E2FF;
border-radius: 2px;
margin-right: .12rem;
float: left;
&.is-active{
color: #000E42;
background: #30DDF4;
}
}
}
.is-active{
color:rgba(0,14,66,1) !important;
background:rgba(48,221,244,1) !important;
border:1px solid rgba(119,226,255,1) !important;
h3{
font-size: .36rem;
font-weight: normal;
font-family: ZhenyanGB-Regular,ZhenyanGB;
color: #fff;
letter-spacing: 3px;
margin: .24rem auto;
margin-left: -.48rem;
}
.header-right-box {
display: flex;
justify-content: flex-end;
.time{
font-size:.2rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color: #30DDF4;
padding-top: .24rem;
}
.right-menu {
padding-top: .18rem;
padding-left: .12rem;
&:focus {
outline: none;
}
.right-menu-item {
padding: 0 .08rem;
height: 100%;
font-size: .18rem;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
display: block;
margin-right: .48rem;
.avatar-wrapper {
position: relative;
.user-avatar {
cursor: pointer;
width: .4rem;
height: .4rem;
border-radius: .1rem;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -.2rem;
top: .12rem;
font-size: .12rem;
}
}
}
}
}
}
src/assets/style/mainPage.scss
View file @ 09f1cabc
@media only screen and (min-width: 1029px){
// 这里写pc客户端的样式
.mainPage{
width: 100%;
height: 1080px;
height: 100vh;
background: #000E42;
position: relative;
.mapChina{
width:56.4%;
height:70%;
background:rgba(11,33,115,0.5);
/*filter:blur(50px);*/
position: absolute;
left:50%;
top:50%;
margin-left:-28.2%;
margin-top:-25%;
width: 8rem;
height: 6.24rem;
}
.section{
height: calc(100% - 92px - 2%);
padding:0 2% 2% 2%;
position: relative;
.leftBlock{
//position: relative;
z-index: 1;
.deptIntroduction{
height: calc(34% - 2%);
background: url("~@/assets/img/deptIntroduction.png");
background-color:rgba(0,14,66,0.5);
.deptIntroduction,.deptOperation,.deptNews{
height: 3.02rem;
background: url("~@/assets/img/l-border-1.png");
background-size: 100% 100%;
}
.deptOperation{
margin-top: 18px;
height: 66%;
background: url("~@/assets/img/deptOperation.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
.deptOperation,.deptNews{
margin-top: .2rem;
}
}
.clientDistributed{
width: calc(41% - 40px - 4%);
height: 24.5%;
background: url("~@/assets/img/clientDistributed.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
position: absolute;
left: calc(29.5% + 18px + 2%);
bottom: 2%;
z-index: 1;
.centerBlock {
.clientDistributed{
margin-top: .2rem;
height: 3.02rem;
background: url("~@/assets/img/c-border-b.png");
background-size: 100% 100%;
}
}
.rightBlock{
//position: relative;
z-index: 1;
//float: right;
.knowledgeGraph{
height: calc(51.6% - 40px);
background: url("~@/assets/img/knowledgeGraph.png");
background-color:rgba(0,14,66,0.5);
.knowledgeGraph,.importantProject{
height: 4.62rem;
background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%;
}
.companyNews,.companyHotWord{
height: 24.2%;
background: url("~@/assets/img/companyNews.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
.importantProject {
margin-top: .2rem;
}
}
}
......
src/assets/style/organization.scss
View file @ 09f1cabc
......@@ -2,180 +2,153 @@
width: 100%;
height: 100%;
background: #000E42;
.architecture{
width: 90%;
height: calc(100% - 60px);
margin: 0 auto 20px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
position: relative;
.subtitle{
position: absolute;
top:0;
left: 0;
i{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #30DDF4;
margin-right: 10px;
}
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
}
.architectureBlock{
width: 170px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -85px;
margin-top: -75px;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.name{
width: 170px;
height: 150px;
font-size:20px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(0,14,66,1);
line-height:174px;
text-align: center;
}
.top{
width: 80px;
.leftBox{
height: 3.02rem;
background: url("~@/assets/img/l-border-1.png");
background-size: 100% 100%;
margin-bottom: .2rem;
// 组织架构
.architecture{
width: calc(100% - .48rem);
height: calc(100% - .44rem);
padding: .24rem;
position: relative;
.architectureBlock{
font-family: PingFang-SC-Bold;
font-size: .14rem;
color: #000E42;
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
font-size: 12px;
width: 1.62rem;
height: 1.4rem;
position: absolute;
top:-30%;
left: 50%;
margin-left: -50px;
top: 50%;
margin-left: -.81rem;
margin-top: -.7rem;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.top{
width: 1.28rem;
height: .28rem;
line-height: .28rem;
background: #30DDF4;
border-radius: 2px;
position: absolute;
top: -35%;
left: 50%;
margin-left: -.64rem;
}
.left,.right {
position: absolute;
top:0;
margin: 0;
li{
width: 1.28rem;
height: .28rem;
line-height: .28rem;
background: #30DDF4;
border-radius: 2px;
margin-bottom: .28rem;
}
}
.left {
left: -80%;
li {
&:nth-of-type(2n) {
margin-left: -.24rem;
}
}
}
.right{
left: 100%;
li {
&:nth-of-type(2n) {
margin-left: .24rem;
}
}
}
}
.left,.right{
width:70%;
position: absolute;
top:0%;
left: -75%;
padding: 0;
font-size: 12px;
li{
}
// 人员分布
.peopleContent {
padding: .24rem;
.select-box {
justify-content: center;
font-size: .12rem;
}
.jobDistribution {
width: 100%;
height: 2.14rem;
}
}
// 人才招聘
.sum-item {
text-align: center;
font-size: .16rem;
color: #fff;
.num {
margin-left: .16rem;
font-family: ZhenyanGB-Regular,ZhenyanGB;
color: #30DDF4;
strong {
font-size: .24rem;
}
}
}
.ballBox{
.ball {
width: 100%;
p{
font-size:.12rem;
font-family:PingFang-SC-Medium,PingFang-SC;
color: #30DDF4;
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
margin-bottom: 30%;
margin: 4px 0;
}
}
.right{
position: absolute;
top:0%;
left: 105%;
.ball1{
height: 1.2rem;
}
.ball2,.ball3 {
width:.88rem;
height:.88rem;
margin: 0 auto;
align-self: baseline;
}
}
.recruitment{
width: 60%;
float: left;
}
.ballBox{
width: 40%;
float: left;
.ball{
width: 50%;
height:50%;
float: left;
.heightCut20{height:calc(100% - 20px);}
p{
height:12px;
font-size:12px;
font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500;
color:rgba(48,221,244,1);
line-height:12px;
text-align: center;
margin: 4px 0;
}
}
}
.centerBlock{
.content{
height: calc(73.5% - 20px);
.search{
width: 50%;
height: 30px;
margin: 10px auto;
border-radius: 2px;
.el-input{
width: 70%;
float: left;
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
border: 0 !important;
}
}
.searchBtn{
width: 30%;
height: 28px;
line-height: 28px;
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
text-align: center;
float: left;
}
height: 6.24rem;
}
.search-box {
margin: .2rem auto;
width: 60%;
.search {
width: 100%;
margin-left: .2rem;
}
}
.bottomBox{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 3.02rem;
background: url("~@/assets/img/c-border-b.png");
background-size: 100% 100%;
}
}
.bottomBoxLong{
height: calc(53% + 20px);
background: url("~@/assets/img/566378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
.coordinate{
width: 80%;
height: calc(100% - 122px);
margin: 40px auto;
border-left:1px solid #30DDF4;
border-bottom:1px solid #30DDF4;
display:flex;
flex-wrap: wrap;
.block {
width: calc(calc(100% / 3) - 10px);
margin: 5px;
height: calc(calc(100% / 3) - 10px);
box-sizing: border-box;
border: 1px solid #30DDF4;
border-radius:2px;
font-size:20px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
display: flex;
justify-content: center;
align-items: center;
.rightBlock {
.rightBox,.peopleCounting {
height: 4.62rem;
background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%;
margin-bottom: .2rem;
.lastMonthPerformance {
width: 100%;
height: 3.6rem;
}
}
}
}
src/assets/style/public-class.scss
View file @ 09f1cabc
......@@ -157,14 +157,14 @@ $sizes: (0, 5, 10, 15, 20);
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #999;
background-color: #001D91;
}
/*滚动条样式*/
/*滚动条 start*/
::-webkit-scrollbar
{
width: 8px;
height: 8px;
width: 5px;
height: 5px;
}
src/assets/style/public.scss
View file @ 09f1cabc
......@@ -10,19 +10,6 @@ $prefix: d2;
cursor: pointer;
}
// @media only screen and (min-width: 1029px){
// // 这里写pc客户端的样式
// %full {
// position: absolute;
// top: 0px;
// right: 0px;
// bottom: 0px;
// left: 0px;
// height: 1080px;
// width: 1920px;
// }
// }
// 填满父元素
// 组要父元素 position: relative | absolute;
%full {
position: absolute;
......@@ -67,27 +54,28 @@ $prefix: d2;
.dv-loading {
color: #fff;
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
ul{list-style: none; padding: 0}
.d2-container-full{height: 100%;}
.d2-container-full__body{height: 100%;}
.tl{text-align: left}
.tr{text-align: right}
.title,.longTitle{
width: 100px;
height: 20px;
font-size:20px;
.title{
height: .44rem;
font-size:.18rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:$color-primary;
color:#fff;
text-align: center;
line-height:20px;
padding: 10px 35px;
margin: 0 auto;
}
.longTitle{
width: 150px;
line-height:.44rem;
}
.line{
width:150px;
height:2px;
......@@ -112,81 +100,91 @@ ul{list-style: none; padding: 0}
vertical-align: 3px;
}
}
.px-24 {
padding: .24rem;
}
.height100{height: 100%}
.height21{height: 2.1rem}
.heightCut42 {height: calc(100% - 42px);}
.heightCut62 {height: calc(100% - 62px);}
.section{
height: calc(100% - 92px - 2%);
padding:0 2% 2% 2%;
position: relative;
height: calc(100% - 1.4rem);
padding:.08rem .48rem .4rem;
display: flex;
.leftBlock{
width: 29.5%;
height: calc(100% - 2%);
position: absolute;
.topBox{
height: calc(47% - 40px);
background: url("~@/assets/img/566378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
}
.bottomBox{
height: 26.5%;
background: url("~@/assets/img/566266.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
width: 5.02rem;
}
.centerBlock{
width: calc(41% - 40px - 4%);
height: calc(100% - 2%);
margin: 0 20px;
position: absolute;
left: 31.5%;
.topBox{
height: calc(47% - 40px);
background: url("~@/assets/img/674378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
}
.bottomBox{
height: 26.5%;
background: url("~@/assets/img/674266.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
width: 8rem;
padding: 0 .2rem;
position: relative;
}
.rightBlock{
width: 29.5%;
height: calc(100% - 2%);
position: absolute;
left: 68.5%;
.topBox{
height: calc(47% - 40px);
background: url("~@/assets/img/566378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
}
.bottomBox{
height: 26.5%;
background: url("~@/assets/img/566266.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
width: 5.02rem;
}
}
// tab 切换数据框公共样式
.select-box {
font-size: .12rem;
display: flex;
justify-content: center;
.tab-button {
height: .2rem;
line-height: .2rem;
padding: 0 .16rem;
font-size:.12rem;
font-family:PingFang-SC-Bold,PingFang-SC;
color: #30DDF4;
background: rgba(48,221,244,0.15);
border: 1px solid #77E2FF;
border-radius: 2px;
&.is-active{
color: #000E42;
background: #30DDF4;
}
}
}
//头部布局
@media screen and (min-width: 1400px){
.header{
h3{
width: 850px;
}
.date, .time{
padding-top: 24px;
}
.search-box {
margin: .2rem;
}
// 选择框 搜索框样式
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
color: #FFFFFF;
font-size:.12rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
}
.el-select{
width: 1.6rem;
.el-select__caret{color: #30DDF4 !important;}
}
// 搜索框样式
.search{
font-size: .16rem;
height: .28rem;
border-radius: 2px;
.el-autocomplete{
width: calc(100% - 0.64rem);
float: left;
}
.searchBtn{
color: #000E42;
width: .64rem;
height: .28rem;
line-height: .28rem;
background-image: linear-gradient(180deg, #30DDF4 0%, #30DDF4 100%);
border: 1px solid rgba(119,226,255,0.15);
box-shadow: inset 0 4px 10px 0 rgba(0,0,0,0.50);
border-radius: 0 2px 2px 0;
text-align: center;
padding: 0;
float: left;
}
}
src/components/HeaderLayout/index.vue
View file @ 09f1cabc
<template>
<div class="headerLayout">
<div class="tabList">
<div v-for="(item,index) in buttenList" :key="index" @click="change(index)">
<el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button>
</div>
</div>
<h3>企业运行图谱</h3>
<div class="tabList flex-1">
<div v-for="(item,index) in buttenList" :key="index" @click="change(index)">
<el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button>
</div>
</div>
<h3 class="flex-1">企业运行图谱</h3>
<div class="flex-1 header-right-box">
<div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img src="~@/assets/img/timg.jpg" class="user-avatar">
<i class="el-icon-caret-bottom" />
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img src="~@/assets/img/timg.jpg" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
<span style="display:block; width: 60px">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
<span style="display:block; width: 60px">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
......@@ -43,7 +45,7 @@ export default {
yData: [70, 90, 110, 108, 100, 110, 130, 140, 150, 120, 110, 98],
colors: ['RGBA(27, 157, 247, 1)', 'RGBA(30, 201, 251, 1)']
},
buttenList: ['概况', '运营', '商机', '客户']
buttenList: ['概况', '运营', '商机', '客户', '组织人才', '管理端']
}
},
filters: {
......@@ -135,15 +137,10 @@ export default {
case 3:
this.$router.replace('/content/client/page')
break
// case 4:
// this.$router.replace('/content/organization/page')
// break
// case 5:
// this.$router.replace('/content/organization/page')
// break
case 4:
// this.$router.replace('/http://localhost:9528/#/dashboard')
// window.location.replace('http://localhost:9528/#/dashboard')
this.$router.replace('/content/organization/page')
break
case 5:
window.open('http://111.203.232.175:8085/#/dashboard?token=' + token)
// window.open('http://localhost:9528/#/dashboard?token=' + token)
}
......@@ -153,56 +150,6 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/style/headerLayout.scss';
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 14px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
@import '~@/assets/fonts/font.css';
@import '~@/assets/style/headerLayout.scss';
</style>
src/router/routes.js
View file @ 09f1cabc
......@@ -14,7 +14,7 @@ const frameIn = [
{
path: '/',
redirect: { name: 'index' },
component: _import('content/layout'),
component: _import('system/index'),
children: [
// 首页 概况
{
......@@ -23,7 +23,7 @@ const frameIn = [
meta: {
auth: true
},
component: _import('content/overview')
component: _import('system/index')
},
// 刷新页面 必须保留
{
......
src/views/content/business/page.vue
View file @ 09f1cabc
<template>
<d2-container class="business">
<!-- <headerLayout></headerLayout> -->
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="topBox">
......@@ -33,12 +33,12 @@
</div>
</div>
<div class="bottomBox">
<div class="longTitle">商机业务类型</div>
<div class="title">商机业务类型</div>
<div class="line"></div>
<pie :message="businessType" :idstr="'1'" class="businessType heightCut42"></pie>
</div>
<div class="bottomBox">
<div class="longTitle">商机报价及占比</div>
<div class="title">商机报价及占比</div>
<div class="line"></div>
<quoteProportion :message="quoteProportion" :idstr="'quote'" class="quoteProportion heightCut42"></quoteProportion>
</div>
......@@ -46,12 +46,12 @@
<div class="centerBlock">
<div class="topBoxEmpty">
<div class="halfLeft">
<div class="longTitle">商机来源</div>
<div class="title">商机来源</div>
<div class="line"></div>
<pies :message="source" :idstr="'source'" class="source heightCut42"></pies>
</div>
<div class="halfRight">
<div class="longTitle">商机流程</div>
<div class="title">商机流程</div>
<div class="line"></div>
<pie :message="businessType" :idstr="process" class="process heightCut42"></pie>
</div>
......@@ -82,15 +82,17 @@
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
// import {pie, pies} from './components/pie' // 饼图/
import quoteProportion from './components/barPolyline' // 报价及占比
import scatterPlot from './components/scatterPlot' // 项目分析
import knowledgeGraph from '../overview/components/knowledgeGraph'// 知识图谱
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱
import funnel from './components/funnel' // 梯形图
import * as API_BUSSINESS from '@/api/con.business.js'
const pie = () => import('./components/pie')
const pies = () => import('./components/pie')
export default {
components: { pie, pies, quoteProportion, scatterPlot, knowledgeGraph, funnel },
components: { headerLayout, pie, pies, quoteProportion, scatterPlot, knowledgeGraph, funnel },
data () {
return {
businessType: [], // 商机业务类型
......
src/views/content/client/page.vue
View file @ 09f1cabc
<template>
<d2-container class="client">
<!-- <headerLayout></headerLayout> -->
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="topBox">
......@@ -33,7 +33,7 @@
</div>
</div>
<div class="bottomBox">
<div class="longTitle">客户属性</div>
<div class="title">客户属性</div>
<div class="line"></div>
<pie :message="businessType" :idstr="'buType'" class="businessType heightCut42"></pie>
</div>
......@@ -150,15 +150,15 @@
</template>
<script>
// import headerLayout from '../../system/index/components/headerLayout' // 公共头部
import headerLayout from '@/components/headerLayout/index' // 公共头部
import pie from './components/pie' // 商机业务类型
import distributed from './components/distributed' // 客户分布
import scatterPlot from './components/scatterPlot' // 客户分析
import knowledgeGraph from '../overview/components/knowledgeGraph'// 知识图谱
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱
import * as API_CLIENT from '@/api/con.client.js'
export default {
components: { pie, distributed, scatterPlot, knowledgeGraph },
components: { headerLayout, pie, distributed, scatterPlot, knowledgeGraph },
data () {
return {
clientData: {}, // 客户数据
......
src/views/content/layout.js deleted 100644 → 0
View file @ 0b072fcb
import page from './layout'
export default page
src/views/content/layout.vue deleted 100644 → 0
View file @ 0b072fcb
<template>
<dv-full-screen-container class="bg">
<header-layout></header-layout>
<router-view />
</dv-full-screen-container>
</template>
<script>
import headerLayout from '@/components/HeaderLayout/index' // 公共头部
export default {
components: { headerLayout },
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/page.vue
View file @ 09f1cabc
<template>
<d2-container class="operation">
<!-- <headerLayout></headerLayout> -->
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="topBox height100">
<div class="longTitle">流水利润完成比</div>
<div class="title">流水利润完成比</div>
<div class="line"></div>
<doubleHistogram :message="profitChart" idstr="profitChart" class="profitChart heightCut42"></doubleHistogram>
</div>
......@@ -57,7 +57,7 @@
</template>
<script>
// import headerLayout from '../../system/index/components/headerLayout' // 公共头部
import headerLayout from '@/components/headerLayout/index' // 公共头部
import doubleHistogram from './components/doubleHistogram' // 双柱状图
import pie from './components/pie' // 饼图
import lineChart from './components/polyline' // 折线图
......@@ -65,10 +65,10 @@ import turnoverStatistics from './components/turnoverStatistics' // 营业额统
import cashFlow from './components/cashFlow' // 现金流
import revenueRanking from './components/revenueRanking' // 营收排行
import assetManagement from './components/assetManagement' // 资产管理
import knowledgeGraph from '../overview/components/knowledgeGraph'// 知识图谱
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱
export default {
components: { doubleHistogram, pie, lineChart, turnoverStatistics, cashFlow, knowledgeGraph, revenueRanking, assetManagement },
components: { headerLayout, doubleHistogram, pie, lineChart, turnoverStatistics, cashFlow, knowledgeGraph, revenueRanking, assetManagement },
data () {
return {
profitChart: {}, // 流水利润完成比
......
src/views/content/overview/components/mainPageEcharts/distributed.vue → src/views/content/organization/components/lastMonthPerformance.vue
View file @ 09f1cabc
......@@ -19,8 +19,10 @@ export default {
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
props: ['message', 'idstr', 'performActive'],
mounted () {
console.log(this.performActive)
this.drawLine()
},
methods: {
......@@ -31,63 +33,57 @@ export default {
// 清空图表
vm.chart.clear()
vm.option = {
xAxis: {
type: 'category',
data: this.message[0].title,
axisLine: {
lineStyle: {
color: '#FFF'
xAxis: [
{
type: 'category',
data: ['客户营销', '解决方案', '智能制造', '生态合作', 'IT服务'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
},
axisLabel: {
rotate: 50,
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
],
yAxis: [
{
type: 'value',
name: vm.performActive === 1 ? '分数' : '部门',
min: 0,
max: 250,
interval: 50,
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
},
],
grid: {
top: '10px',
left: '30px',
bottom: '30px',
top: '20%',
left: '10%',
right: '10%',
bottom: '5%',
width: '80%', // 图例宽度
height: '80%' // 图例高度
height: '70%' // 图例高度
},
series: [{
data: this.message[0].num,
type: 'bar',
showBackground: true,
barWidth: 14,
itemStyle: {
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{ offset: 1, color: '#30DDF4' },
{ offset: 0, color: '#E23AA2' }
]
)
}
series: [
{
type: 'bar',
barWidth: '50%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#30DDF4' },
{ offset: 1, color: '#001873' }
])
},
data: [23.2, 76.7, 135.6, 162.2, 32.6]
}
}]
]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
......@@ -102,12 +98,12 @@ export default {
}
},
watch: {
message: function () {
performActive: function (val) {
console.log(val)
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 10)
}
}
}
......
src/views/content/organization/components/peopleCounting.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="peopleCounting">
<div class="title">人数统计</div>
<div class="px-24">
<dv-scroll-board :config="config" style="width:450px;height:380px" />
</div>
</div>
</template>
<script>
// import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: {},
data () {
return {
config: {
columnWidth: [350, 100],
oddRowBGC: 'rgba(47,219,243,0.15)',
evenRowBGC: 'rgba(47,219,243,0.05)',
data: [
['劳动生产率', '1000/人'],
['人力成本绿润效率', '19.2'],
['人力成本含量', '10.2'],
['人均收入', '1000元/人'],
['人力成本绩效', '11.7'],
['人均贡献利润', '1000元/人']
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/organization/components/pie.vue
View file @ 09f1cabc
......@@ -33,7 +33,7 @@ export default {
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
formatter: '{b}: {c} ({d}%)'
},
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: {
......@@ -52,21 +52,11 @@ export default {
series: [
{
type: 'pie',
radius: ['40%', '60%'],
radius: ['30%', '70%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
// roseType: 'area', // radius
label: {
show: false,
position: 'left'
},
emphasis: { // hover效果，已经关闭
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
......@@ -74,7 +64,7 @@ export default {
{ value: 310, name: '销售岗' },
{ value: 234, name: '管理岗' },
{ value: 135, name: '职能岗' },
{ value: 1548, name: '其他岗' }
{ value: 548, name: '其他岗' }
]
}
]
......
src/views/content/organization/components/polyline.vue
View file @ 09f1cabc
......@@ -30,27 +30,66 @@ export default {
// 清空图表
vm.chart.clear()
vm.option = {
legend: {},
tooltip: {
transitionDuration: 0,
trigger: 'axis',
showContent: false
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
legend: {
data: ['简历数', '面试数', '发放offer', '入职'],
right: 20,
top: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle' // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5]
]
grid: {
top: '20%',
left: '10%',
bottom: '10%'
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [
{ type: 'line', smooth: true, seriesLayoutBy: 'row' },
{ type: 'line', smooth: true, seriesLayoutBy: 'row' },
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }
]
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisLine: {
lineStyle: {
color: '#FFF'
}
},
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: '简历数',
data: [820, 932, 901, 934, 1290, 1330, 620],
type: 'line'
},
{
name: '面试数',
data: [420, 532, 701, 434, 290, 330, 120],
type: 'line'
}, {
name: '发放offer',
data: [520, 232, 401, 334, 790, 830, 320],
type: 'line'
},
{
name: '入职',
data: [620, 732, 101, 234, 690, 530, 520],
type: 'line'
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
......
src/views/content/organization/components/staffInfo.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="staff-box">
<div class="tab-box">
<span
class="tab-btn"
:class="{'active':isActive===index}"
v-for="(item,index) in tabList"
:key="index"
@click="isActive = index">{{item.name}}</span>
</div>
<div class="content d-flex">
<el-image src=""></el-image>
<el-row :gutter="12" class="inner-content flex-1">
<el-col span="12">
<div class="item-box d-flex jc-between">
<span class="label">姓名</span>
<span class="text">赵忠祥</span>
</div>
<div class="item-box d-flex jc-between">
<span class="label">职位</span>
<span class="text">主持人</span>
</div>
<div class="item-box d-flex jc-between">
<span class="label">电话</span>
<span class="text">13242321122</span>
</div>
</el-col>
<el-col span="12">
<div class="item-box d-flex jc-between">
<span class="label">年龄</span>
<span class="text">123</span>
</div>
<div class="item-box d-flex jc-between">
<span class="label">司龄</span>
<span class="text">12</span>
</div>
<div class="item-box d-flex jc-between">
<span class="label">邮箱</span>
<span class="text">zhaozongxiang@163.cn</span>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'staff',
data () {
return {
isActive: 0,
tabList: [
{ name: '基本信息', id: 1 },
{ name: '任之轨迹', id: 2 },
{ name: '工作经历', id: 3 },
{ name: '资质证书', id: 4 },
{ name: '项目经验', id: 5 },
{ name: '绩效呈现', id: 6 },
{ name: '素质评价', id: 7 }
]
}
}
}
</script>
<style lang="scss" scoped>
.staff-box {
font-size: .12rem;
.tab-box {
text-align: center;
padding: .2rem .24rem 0;
.tab-btn {
display: inline-block;
width: .72rem;
height: .32rem;
background: rgba(48,221,244,0.15);
border-radius: 2px;
margin-left: .08rem;
font-family: PingFang-SC-Medium;
color: #30DDF4;
text-align: center;
line-height: .32rem;
&.active {
background: #30DDF4;
color: #000E42;
}
}
}
.content {
margin-left: .6rem;
margin-right: .6rem;
padding: .4rem;
height: 4rem;
background: rgba(0,14,66,0.80);
border: 1px solid #30DDF4;
box-shadow: 0 0 20px 4px rgba(0,14,66,0.40);
border-radius: 2px;
position: relative;
&:after {
content: "";
position: absolute;
bottom: -16px;
left: -6px;
right: -6px;
height: 10px;
background: -webkit-linear-gradient(#30DDF4,transparent);
background: -o-linear-gradient(#30DDF4,transparent);
background: -moz-linear-gradient(#30DDF4,transparent);
background: -mos-linear-gradient(#30DDF4,transparent);
background: linear-gradient(#30DDF4,transparent);
}
.el-image {
width: 1.28rem;
height: 1.28rem;
margin-right: .2rem;
}
.inner-content {
color: #fff;
.item-box {
height: .32rem;
line-height: .32rem;
background: rgba(48,221,244,0.15);
border-radius: 2px;
padding: 0 .16rem;
margin-bottom: .12rem;
.text {
color: #30DDF4;
}
}
}
}
}
</style>
src/views/content/organization/components/waterBall.vue
View file @ 09f1cabc
......@@ -47,7 +47,7 @@ export default {
},
series: [{
type: 'liquidFill',
name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
name: '离职率', // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: '80%', // 水球图的半径
center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
......
src/views/content/organization/page.vue
View file @ 09f1cabc
This diff is collapsed.
src/views/content/overview/components/clientDistributed.vue deleted 100644 → 0
View file @ 0b072fcb
<template>
<div class="charts">
<div class="distributed">
<div class="subtitle"><i class="diamond"></i>客户增长分布</div>
<distributed :message="distributedChart" :idstr="'distributedChart1'" class="distributedChart"></distributed>
</div>
<div class="pie">
<div class="subtitle"><i class="diamond"></i>客户增长分布</div>
<pieChart :message="pieChart" idstr="pieChart" class="pieChart"></pieChart>
</div>
</div>
</template>
<script>
import distributed from './mainPageEcharts/distributed' // 公司营收统计
import pieChart from './mainPageEcharts/pieChart' // 公司营收统计
import * as API_BASIC from '@/api/sys.basic.js'
export default {
data () {
return {
pieChart: {},
distributedChart: []
}
},
components: { pieChart, distributed },
mounted () {
this.getCustoList()
},
methods: {
// 查询概况页面数据
getCustoList () {
API_BASIC.GetBasicList().then(res => {
// 客户分布
const argcustomer = res.data.customer
const title = []
const data = []
const num = []
argcustomer.forEach(e => {
title.push(e.status)
num.push(e.new)
var dis = { name: e.status, value: e.new }
data.push(dis)
})
this.distributedChart.push({ title: title, num: num, data: data })
})
}
}
}
</script>
<style lang="scss" scoped>
.charts{
.distributed,.pie{
width: 40%;
height: 80%;
float: left;
margin: 5% 5%;
.pieChart,.distributedChart{
height: calc(100% - 16px);
}
}
}
</style>
src/views/content/overview/components/deptIntroduction.vue deleted 100644 → 0
View file @ 0b072fcb
<template>
<div class="deptIntroductionMain">
<div class="title">部门介绍</div>
<div class="line"></div>
<div>
<div class="content">
<div class="logo">
<div class="qzh"></div>
<p>{{ basicObj.name }}</p>
</div>
<div class="contentDetail">
{{ basicObj.introduce }}
</div>
<div class="partnerBox">
<span class="partner" v-for="(arg, index) in labelArr" :key="index">{{ arg }}</span>
<!-- <span class="partner">华为战略合作伙伴</span> -->
</div>
</div>
<div class="subtitle" style="margin-top: 20px"><i class="diamond"></i>主营业务</div>
<div class="box">
<ul>
<li v-for="(item, id) in businessarr" :key="id">{{ item }}</li>
<!-- <li>软件与云服务解决方案</li>
<li>智慧能源</li>
<li>智慧城市</li>
<li>新零售</li>
<li>企业智能化</li> -->
</ul>
</div>
</div>
</div>
</template>
<script>
import * as API_BASIC from '@/api/sys.basic.js'
export default {
data () {
return {
basicData: {},
basicObj: {},
hotwordsarr: [],
labelArr: [],
businessarr: []
}
},
mounted () {
this.getBasicList()
},
methods: {
// 查询概况页面数据
getBasicList () {
API_BASIC.GetBasicList().then(res => {
this.basicData = res.data
this.basicData.org.forEach(element => {
this.basicObj = element
this.labelArr = element.label.split('，')
this.hotwordsarr = element.hotwords.split('，')
this.businessarr = element.business.split('，')
})
})
}
}
}
</script>
<style lang="scss" scoped>
.deptIntroductionMain{
padding: 0 25px;
.content{
overflow: hidden;
.logo{
width:20%;
padding-bottom: 20%;
height: 0;
background:rgba(0,14,66,1);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border:2px solid rgba(48,221,244,0.5);
border-radius: 50%;
float: left;
.qzh{
margin: 10px auto 0;
width: 50%;
padding-bottom: 50%;
height: 0;
background:url("~@/assets/img/Wisenergy.png");
background-size: 100% 100%;
}
p{
text-align: center;
width: 100%;
height:20px;
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:20px;
margin: 0;
}
}
.contentDetail{
width:calc(80% - 20px);
margin: 6px 0 6px 8px;
height:32%;
font-size:12px;
font-family:PingFang-SC-Regular,PingFang-SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:16px;
float: left;
overflow-y: auto;
}
.partnerBox{
margin-left: calc(20% + 8px);
.partner{
width:130px;
height:45px;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:$color-primary;
line-height:28px;
margin-right: 10px;
float: left;
}
}
}
.box{
width:100%;
overflow-x:auto;
ul{
li{
padding: 6px 4px;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:12px;
background:linear-gradient(180deg,rgba(94,240,250,0.2) 0%,rgba(48,221,244,0.2) 100%);
border-radius:2px;
border:1px solid;
border-image:linear-gradient(180deg, rgba(94,240,250,1), rgba(48,221,244,1)) 1 1;
float: left;
margin-right: 10px;
margin-bottom: 6px;
}
}
}
}
</style>
src/views/content/overview/components/deptOperation.vue deleted 100644 → 0
View file @ 0b072fcb
<template>
<div class="deptOperation">
<div class="title">部门运营</div>
<div class="charts">
<div class="statistics">
<div class="subtitle"><i class="diamond"></i>公司营收统计</div>
<statistics :message="statisticsChart" idstr="statisticsChart" class="statisticsChart"></statistics>
</div>
<div class="distributed">
<div class="subtitle"><i class="diamond"></i>客户增长分布</div>
<distributed :message="distributedChart" :idstr="'distributedChart'" class="distributedChart"></distributed>
</div>
</div>
<div class="subtitle"><i class="diamond"></i>解决方案</div>
<div class="solution">
<!-- <ul>
<li v-for="(item,index) in iconList" :key="index">
<div>
<i :class=item.icon></i>
<p>{{item.name}}</p>
</div>
</li>
</ul> -->
<el-carousel indicator-position="none" height="88px">
<el-carousel-item v-for="(icon, id) in iconList" :key="id">
<div class="softwareSolution">
<div class="title">{{icon.name}}</div>
</div>
<ul v-for="(item, index) in icon.introArr.length" :key="index">
<li>
<div>
<el-image :src="icon.urlArr[index]" style="width: 42px; height: 42px"></el-image>
<p>{{icon.introArr[index]}}</p>
</div>
</li>
</ul>
</el-carousel-item>
</el-carousel>
</div>
<div class="subtitle"><i class="diamond"></i>案例展示</div>
<div class="caseShow">
<el-carousel height="177px">
<el-carousel-item v-for="(item, i) in caseList" :key="i">
<img :src="item.url" alt="">
<div class="content">
<!-- <span>{{item.name}}</span> -->
<!-- <p>{{item.introduce}}</p> -->
<el-link href="https://www.baidu.com" :underline="false" target="_blank" style="color: #ffffff">{{item.introduce}}</el-link>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
import statistics from './mainPageEcharts/statistics' // 公司营收统计
import distributed from './mainPageEcharts/distributed' // 公司营收统计
import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: { statistics, distributed },
data () {
return {
iconList: [
// { icon: 'intelligent', name: '企业智能化' },
// { icon: 'retail', name: '新零售' },
// { icon: 'city', name: '智慧城市' },
// { icon: 'energy', name: '智慧能源' },
// { icon: 'general', name: '基础通用产品' }
],
statisticsChart: {},
distributedChart: [],
basicObj: {},
introducearr: [],
urlarr: [],
caseList: [],
caseObj: {}
}
},
mounted () {
this.getCustomerList()
},
methods: {
// 查询概况页面数据
getCustomerList () {
API_BASIC.GetBasicList().then(res => {
this.iconList = res.data.program
for (let i = 0; i < this.iconList.length; i++) {
// this.iconList[i].name = this.iconList[i].name
this.iconList[i].urlArr = this.iconList[i].url.split(',')
this.iconList[i].introArr = this.iconList[i].introduce.split(',')
}
this.iconList.forEach(element => {
this.basicObj.name = element.name
this.introducearr = element.introduce.split(',')
this.urlarr = element.url.split(',')
})
// 案例展示
this.caseList = res.data.case
this.caseList.forEach(ele => {
this.caseObj = ele
})
// 客户分布
const argcustomer = res.data.customer
const titledis = []
const data = []
const num = []
argcustomer.forEach(e => {
titledis.push(e.status)
num.push(e.new)
var dis = { name: e.status, value: e.new }
data.push(dis)
})
this.distributedChart.push({ title: titledis, num: num, data: data })
})
}
}
}
</script>
<style lang="scss" scoped>
.deptOperation{
padding: 0 25px;
.charts{
height: calc(100% - 400px);
margin-bottom: 10px;
.statistics,.distributed{
width: 50%;
height: 100%;
float: left;
.statisticsChart,.distributedChart{
height: calc(100% - 16px);
}
}
}
.solution{
width:100%;
height: 88px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
border:1px solid $color-primary;
margin: 10px 0;
.softwareSolution{
width:40px;
height: 100%;
background:$color-primary;
border-radius:2px 0px 0px 2px;
float: left;
.title{
width:32px;
height:54px;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:18px;
padding: 18px 4px;
}
}
ul{
li{
display: inline-flex;
float: left;
margin-top: -6px;
>div{
flex-grow:1;
width: 100%;
text-align: center;
padding:0 10px;
i{
display: inline-block;
width: 42px;
height: 42px;
vertical-align: -4px;
}
p{
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:$color-primary;
line-height:12px;
text-align: center;
}
}
.intelligent{background: url("~@/assets/icon/intelligent.png");background-size: 100% 100%;}
.city{background: url("~@/assets/icon/city.png");background-size: 100% 100%;}
.energy{background: url("~@/assets/icon/energy.png");background-size: 100% 100%;}
.general{background: url("~@/assets/icon/general.png");background-size: 100% 100%;}
.retail{background: url("~@/assets/icon/retail.png");background-size: 100% 100%;}
}
}
}
.caseShow{
width: calc(100% - 32px);
height: 128px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
border:1px solid rgba(48,221,244,1);
padding: 16px;
margin-top: 10px;
.el-carousel__container {
position: relative;
height: 177px;
}
img{
width:44%;
height:128px;
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px 0px 0px 2px;
float: left;
}
.content{
width: calc(56% - 10px);
margin-left: 10px;
float: left;
span{
font-size:14px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(48,221,244,1);
line-height:14px;
}
p{
font-size:12px;
font-family:PingFang-SC-Regular,PingFang-SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:18px;
margin: 0;
}
}
}
}
</style>
src/views/content/overview/components/headerLayout.vue deleted 100644 → 0
View file @ 0b072fcb
<template>
<div class="headerLayout">
<div class="tabList">
<div v-for="(item,index) in buttenList" :key="index" @click="change(index)">
<el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button>
</div>
</div>
<h3>企业运行图谱</h3>
<div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img src="~@/assets/img/timg.jpg" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
<span style="display:block; width: 60px">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
export default {
data () {
return {
screenWidth: document.body.clientWidth,
num: 0,
nowDate: '',
week: '',
hour: '',
monthData: {
id: 'dataByMonth',
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yData: [70, 90, 110, 108, 100, 110, 130, 140, 150, 120, 110, 98],
colors: ['RGBA(27, 157, 247, 1)', 'RGBA(30, 201, 251, 1)']
},
buttenList: ['概况', '运营', '商机', '客户']
}
},
filters: {
weekFilter: function (value) {
let nvalue = ''
switch (value) {
case 1:
nvalue = '一'
break
case 2:
nvalue = '二'
break
case 3:
nvalue = '三'
break
case 4:
nvalue = '四'
break
case 5:
nvalue = '五'
break
case 6:
nvalue = '六'
break
case 0:
nvalue = '日'
break
}
return nvalue
}
},
watch: {
screenwidth (val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
const that = this
setTimeout(function () {
console.log(that.screenWidth)
that.timer = false
}, 400)
}
}
},
mounted () {
this.init()
this.getDate()
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
methods: {
logout () {
this.$router.push('/login')
},
init () {
this.num = sessionStorage.getItem('num')
const user = JSON.parse(sessionStorage.getItem('user'))
if (user.role === 1) {
this.buttenList.push('管理端')
}
},
getDate () {
const vm = this
this.nowDate = new Date()
this.week = new Date().getDay()
setTimeout(function () {
vm.getDate()
}, 1000)
},
change (index) {
this.num = index
sessionStorage.setItem('num', index)
const token = sessionStorage.getItem('token')
switch (index) {
case 0:
this.$router.replace('/index')
break
case 1:
this.$router.replace('/content/operation/page')
break
case 2:
this.$router.replace('/content/business/page')
break
case 3:
this.$router.replace('/content/client/page')
break
// case 4:
// this.$router.replace('/content/organization/page')
// break
// case 5:
// this.$router.replace('/content/organization/page')
// break
case 4:
// this.$router.replace('/http://localhost:9528/#/dashboard')
// window.location.replace('http://localhost:9528/#/dashboard')
window.open('http://111.203.232.175:8085/#/dashboard?token=' + token)
// window.open('http://localhost:9528/#/dashboard?token=' + token)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/headerLayout.scss';
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 14px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
</style>
src/views/system/index/components/clientDistributed.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="clientDistributed">
<div class="title">全国</div>
<div class="content">
<el-col span="12">
<div class="d-flex icon-box">
<img class="" src="@/assets/img/icon-custom.png" alt="">
<div class="text-box">
<label>客户共计(个)</label>
<span>3098</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
</div>
</div>
</el-col>
<el-col span="12">
<div class="d-flex icon-box">
<img class="" src="@/assets/img/icon-project.png" alt="">
<div class="text-box">
<label>项目共计(个)</label>
<span>3098</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
</div>
</div>
</el-col>
<el-col span="12">
<div class="d-flex icon-box">
<img class="" src="@/assets/img/icon-bussion.png" alt="">
<div class="text-box">
<label>商机共计(个)</label>
<span>3098</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
</div>
</div>
</el-col>
<el-col span="12">
<div class="d-flex icon-box">
<img class="" src="@/assets/img/icon-people.png" alt="">
<div class="text-box">
<label>参与人员(个)</label>
<span>3098</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
</div>
</div>
</el-col>
</div>
</div>
</template>
<script>
import * as API_BASIC from '@/api/sys.basic.js'
export default {
data () {
return {
pieChart: {},
distributedChart: []
}
},
mounted () {
// this.getCustoList()
},
methods: {
// 查询概况页面数据
getCustoList () {
API_BASIC.GetBasicList().then(res => {
// 客户分布
const argcustomer = res.data.customer
const title = []
const data = []
const num = []
argcustomer.forEach(e => {
title.push(e.status)
num.push(e.new)
var dis = { name: e.status, value: e.new }
data.push(dis)
})
this.distributedChart.push({ title: title, num: num, data: data })
})
}
}
}
</script>
<style lang="scss" scoped>
.clientDistributed {
.content {
padding: .24rem;
.icon-box {
padding: .16rem;
height:.64rem;
img {
width: .64rem;
}
}
.text-box {
flex:1;
padding-left: .24rem;
label {
display: block;
font-family: PingFang-SC-Medium;
font-size: .16rem;
line-height: .16rem;
color: #FFFFFF;
}
span {
display: block;
padding-top: .14rem;
font-family: ZhenyanGB-Regular;
font-size: .32rem;
line-height: .32rem;
color: #30DDF4;
}
}
}
}
</style>
src/views/system/index/components/deptIntroduction.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="deptIntroductionMain">
<div class="title">企业介绍</div>
<div class="content">
<div class="d-flex px-4 d2-text-center">
<div class="flex-1 item-box" v-for="(item,index) in basicData.slice(0,3)" :key="index" @click="handleDetail(index)">
<img :src="activeIndex=== index ? item.imgActive : item.img">
<p>{{item.name}}</p>
</div>
</div>
<div class="d-flex d2-text-center">
<div class="flex-1 item-box" v-for="(item,index) in basicData.slice(3,7)" :key="index" @click="handleDetail(index+3)">
<img :src="activeIndex=== index+3 ? item.imgActive : item.img">
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
// import * as API_BASIC from '@/api/sys.basic.js'
export default {
data () {
return {
activeIndex: 0,
basicData: [
{
img: require('@/assets/img/icon-info.png'),
imgActive: require('@/assets/img/icon-info-active.png'),
name: '企业介绍',
active: true
},
{
img: require('@/assets/img/icon-zizhi.png'),
imgActive: require('@/assets/img/icon-zizhi-active.png'),
name: '企业资质',
active: false
},
{
img: require('@/assets/img/icon-chanquan.png'),
imgActive: require('@/assets/img/icon-chanquan-active.png'),
name: '企业产权',
active: false
},
{
img: require('@/assets/img/icon-yewu.png'),
imgActive: require('@/assets/img/icon-yewu-active.png'),
name: '主营业务',
active: false
},
{
img: require('@/assets/img/icon-rongyu.png'),
imgActive: require('@/assets/img/icon-rongyu-active.png'),
name: '公司荣誉',
active: false
},
{
img: require('@/assets/img/icon-wenhua.png'),
imgActive: require('@/assets/img/icon-wenhua-active.png'),
name: '企业文化',
active: false
},
{
img: require('@/assets/img/icon-guimo.png'),
imgActive: require('@/assets/img/icon-guimo-active.png'),
name: '企业规模',
active: false
}
]
}
},
mounted () {
},
methods: {
handleDetail (item) {
this.activeIndex = item
}
}
}
</script>
<style lang="scss" scoped>
.deptIntroductionMain{
padding: 0 .42rem;
font-size: .16rem;
color: #30DDF4;
.content{
.px-4 {
padding: 0 .4rem;
}
.item-box {
p {
margin:0;
}
}
img {
width: .92rem;
height: .92rem;
}
}
}
</style>
src/views/system/index/components/deptNews.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="deptNews">
<div class="title">公司新闻</div>
<div class="content">
<dv-scroll-board :config="config" style="width:450px;height:220px" />
</div>
</div>
</template>
<script>
import * as API_BASIC from '@/api/sys.basic.js'
export default {
data () {
return {
basicData: {},
basicObj: {},
hotwordsarr: [],
labelArr: [],
businessarr: [],
config: {
columnWidth: [350, 100],
oddRowBGC: 'rgba(47,219,243,0.15)',
evenRowBGC: 'rgba(47,219,243,0.05)',
data: [
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10']
]
}
}
},
mounted () {
// this.getBasicList()
},
methods: {
// 查询概况页面数据
getBasicList () {
API_BASIC.GetBasicList().then(res => {
this.basicData = res.data
this.basicData.org.forEach(element => {
this.basicObj = element
this.labelArr = element.label.split('，')
this.hotwordsarr = element.hotwords.split('，')
this.businessarr = element.business.split('，')
})
})
}
}
}
</script>
<style lang="scss" scoped>
.deptNews{
.content{
padding: .24rem;
}
}
</style>
src/views/system/index/components/deptOperation.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="deptOperation">
<div class="title">企业运营</div>
<div class="content">
<div class="select-box">
<div class="tab-chart">
<span class="tab-button" @click="chartActive=1" :class="{'is-active':chartActive=== 1 }">公司营收统计</span>
<span class="tab-button" @click="chartActive=2" :class="{'is-active':chartActive=== 2 }">客户增长分布</span>
</div>
<div class="tab-data">
<span class="tab-button" @click="dataActive=1" :class="{'is-active':dataActive=== 1 }">年</span>
<span class="tab-button" @click="dataActive=2" :class="{'is-active':dataActive=== 2 }">月</span>
</div>
</div>
<div class="charts">
<statistics v-if="chartActive===1" :message="statisticsChart" idstr="statisticsChart" class="statisticsChart"></statistics>
<distributed v-else :message="distributedChart" :idstr="'distributedChart'" class="distributedChart"></distributed>
</div>
</div>
</div>
</template>
<script>
import statistics from './mainPageEcharts/statistics' // 公司营收统计
import distributed from './mainPageEcharts/distributed' // 公司营收统计
import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: { statistics, distributed },
data () {
return {
chartActive: 1,
dataActive: 1,
iconList: [
],
statisticsChart: {},
distributedChart: [],
basicObj: {},
introducearr: [],
urlarr: [],
caseList: [],
caseObj: {}
}
},
mounted () {
// this.getCustomerList()
},
methods: {
// 查询概况页面数据
getCustomerList () {
API_BASIC.GetBasicList().then(res => {
this.iconList = res.data.program
for (let i = 0; i < this.iconList.length; i++) {
// this.iconList[i].name = this.iconList[i].name
this.iconList[i].urlArr = this.iconList[i].url.split(',')
this.iconList[i].introArr = this.iconList[i].introduce.split(',')
}
this.iconList.forEach(element => {
this.basicObj.name = element.name
this.introducearr = element.introduce.split(',')
this.urlarr = element.url.split(',')
})
// 案例展示
this.caseList = res.data.case
this.caseList.forEach(ele => {
this.caseObj = ele
})
// 客户分布
const argcustomer = res.data.customer
const titledis = []
const data = []
const num = []
argcustomer.forEach(e => {
titledis.push(e.status)
num.push(e.new)
var dis = { name: e.status, value: e.new }
data.push(dis)
})
this.distributedChart.push({ title: titledis, num: num, data: data })
})
}
}
}
</script>
<style lang="scss" scoped>
.deptOperation{
.content {
font-size: .12rem;
padding: .16rem .24rem;
.select-box {
justify-content: flex-end;
.tab-data {
margin-left: .4rem;
}
}
.charts {
width: 100%;
height: 2rem;
.statisticsChart ,.distributedChart {
width: 100%;
height: 2rem;
}
}
}
}
</style>
src/views/system/index/components/importantProject.vue 0 → 100644
View file @ 09f1cabc
<template>
<div class="importantProject">
<div class="title">重点项目</div>
<div class="content">
<div class="subtitle"><i class="diamond"></i>解决方案</div>
<div class="solution">
<el-carousel indicator-position="none">
<el-carousel-item v-for="(icon, id) in solutionList" :key="id">
<div class="softwareSolution">
<div class="title">{{icon.name}}</div>
</div>
<ul>
<li v-for="(item, index) in icon.introArr.length" :key="index">
<el-image :src="icon.urlArr[index]"></el-image>
<p>{{icon.introArr[index]}}</p>
</li>
</ul>
</el-carousel-item>
</el-carousel>
</div>
<div class="subtitle"><i class="diamond"></i>案例展示& 产品展示</div>
<div class="solution caseShow">
<el-carousel>
<el-carousel-item v-for="(item, i) in caseList" :key="i">
<div class="softwareSolution">
<div class="title">{{item.name}}</div>
</div>
<ul>
<li>
<el-image :src="item.url" class="case-img"></el-image>
<div class="case-content">
<h5>案例介绍</h5>
<div class="text-ells">{{item.introduce}}</div>
</div>
</li>
</ul>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: {},
data () {
return {
solutionList: [
{ icon: 'intelligent', name: '企业智能化', urlArr: ['123', '345', '567', '789'], introArr: ['123.png', '456.png', '567.png', '789.png'] },
{ icon: 'retail', name: '新零售', urlArr: ['123', '345', '567', '789'], introArr: ['123.png', '456.png', '567.png', '789.png'] },
{ icon: 'city', name: '智慧城市', urlArr: ['123', '345', '567', '789'], introArr: ['123.png', '456.png', '567.png', '789.png'] },
{ icon: 'energy', name: '智慧能源', urlArr: ['123', '345', '567', '789'], introArr: ['123.png', '456.png', '567.png', '789.png'] },
{ icon: 'general', name: '基础通用', urlArr: ['123', '345', '567', '789'], introArr: ['123.png', '456.png', '567.png', '789.png'] }
],
caseList: [
{
name: '企业智能化',
url: '123',
introduce: '基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用，基础通用基础通用基础通用，基础通用基础通用基础通用基础通用。'
},
{
name: '新零售',
url: '456',
introduce: '基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用，基础通用基础通用基础通用，基础通用基础通用基础通用基础通用。'
}, {
name: '智慧城市',
url: '789',
introduce: '基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用基础通用，基础通用基础通用基础通用，基础通用基础通用基础通用基础通用。'
}
]
}
},
mounted () {
// this.getCustomerList()
},
methods: {
// 查询概况页面数据
getCustomerList () {
API_BASIC.GetBasicList().then(res => {
console.log(res.data)
// this.solutionList = res.data.program
// for (let i = 0; i < this.solutionList.length; i++) {
// this.solutionList[i].urlArr = this.solutionList[i].url.split(',')
// this.solutionList[i].introArr = this.solutionList[i].introduce.split(',')
// }
// 案例展示
this.caseList = res.data.case
})
}
}
}
</script>
<style lang="scss" scoped>
.importantProject{
.content {
padding: .24rem;
.solution{
width:100%;
height: 1.28rem;
border-radius:2px;
border:1px solid $color-primary;
margin: .16rem 0 .24rem;
.el-carousel {
height: 1.28rem;
}
::v-deep .el-carousel__container {
height: 1.28rem;
}
.softwareSolution{
width: .4rem;
height: 100%;
background:$color-primary;
border-radius:2px 0px 0px 2px;
float: left;
.title{
font-size: .12rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color: #000E42;
line-height: 1.5;
padding: .24rem .1rem;
}
}
ul{
font-size: .12rem;
margin: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
li{
display: inline-block;
padding-top:.2rem;
padding-left:.14rem;
&:last-child {
padding-right: .14rem;
}
}
}
.el-image {
width: 1.15rem;
height: .72rem;
text-align: center;
}
p{
font-size:.12rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:$color-primary;
line-height:.12rem;
text-align: center;
margin-top: .12rem;
margin-bottom: 0;
}
}
.caseShow{
height: 1.6rem;
.el-carousel {
height: 1.6rem;
}
::v-deep .el-carousel__container {
height: 1.6rem;
}
.case-img{
width:1.6rem;
height:1rem;
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px 0px 0px 2px;
float: left;
}
.case-content{
width: calc(100% - 1.8rem);
height:1rem;
margin-left: .2rem;
float: left;
h5{
font-size:.14rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color: #30DDF4;
line-height:.14rem;
margin-bottom: .12rem;
margin-top: 0;
}
.text-ells{
position: relative;
width: 100%;
height: calc(100% - .26rem);
font-size:.12rem;
font-family:PingFang-SC-Regular,PingFang-SC;
color:#fff;
line-height: 1.5;
white-space: pre-wrap;
overflow: hidden;
&:after { /* 超出部分显示省略号，支持多行 */
content: "...";
box-sizing: content-box;
position: absolute;
width: 50px;
bottom: 3px;
left: 100%;
margin-left: -61px;
padding-right: 5px;
text-align: right;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
#000E42 50px
);
}
}
}
}
}
}
</style>
src/views/content/overview/components/knowledgeDialog.vue → src/views/system/index/components/knowledgeDialog.vue
View file @ 09f1cabc
......@@ -20,7 +20,7 @@
</div>
<h3>关系筛选</h3>
<el-checkbox-group v-model="checked">
<el-checkbox v-for="item in checkList" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
<el-checkbox v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
</el-checkbox-group>
<div class="inquire" @click="handleChange">查询</div>
</div>
......
src/views/content/overview/components/knowledgeGraph.vue → src/views/system/index/components/knowledgeGraph.vue
View file @ 09f1cabc
<template>
<div class="knowledgeGraph">
<div class="title">知识图谱</div>
<div class="line"></div>
<el-select v-model="value" size="mini">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="search" style="width: 280px">
<el-autocomplete
style="float: left; width: 196px;"
class="inline-input"
v-model="state"
size="mini"
clearable
:fetch-suggestions="querySearch"
placeholder="请输入项目名称"
:trigger-on-focus="false"
@select="handleSelect"
<div class="d-flex search-box">
<el-select v-model="value" size="mini">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="search">
<el-autocomplete
class="inline-input"
v-model="state"
size="mini"
clearable
:fetch-suggestions="querySearch"
placeholder="请输入项目名称"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
<div class="searchBtn">
<el-button type="text" style="color: #606266; position: relative; bottom: 6px">搜索</el-button>
</div>
<el-button class="searchBtn" type="text">搜索</el-button>
</div>
</div>
<div id="topology"></div>
<div class="open" @click="openDialog"></div>
<knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
......@@ -34,7 +33,7 @@
<script>
import vis from '@/assets/js/VisHelper.js'
// import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
import knowledgeDialog from './knowledgeDialog'
import * as API_KNOWLED from '@/api/sys.knowled.js'
......@@ -92,7 +91,7 @@ export default {
cb(this.knowledData)
})
},
// // 点击下拉列表搜索
// 点击下拉列表搜索
handleSelect (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.knowledname = res.data
......@@ -101,11 +100,11 @@ export default {
},
topoAll (value) {
const vm = this
// let data = knowledgeJSON[0]
const data = {
retLinks: [],
retNodes: []
}
const data = knowledgeJSON[0]
// const data = {
// retLinks: [],
// retNodes: []
// }
const linksArr = []
value.links.forEach((v, i) => {
......@@ -162,63 +161,23 @@ export default {
<style lang="scss">
.knowledgeGraph{
position: relative;
.el-select{
width: 30%;
margin:10px 2% 0 8%;
float: left;
.el-select__caret{color: #30DDF4 !important;}
}
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
}
.search{
width: calc(50% - 2px);
margin:10px 8% 0 2%;
float: left;
border:1px solid rgba(119,226,255,1);
border-radius: 2px;
.el-input{
width: 100%;
float: left;
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
border: 0 !important;
}
}
.searchBtn{
width: 30%;
height: 28px;
line-height: 28px;
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
text-align: center;
float: left;
}
}
#topology{
height: calc(100% - 80px);
}
.open{
width: 24px;
height: 24px;
background: url("~@/assets/img/open.png");
background-size: 100% 100%;
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
}
position: relative;
.search{
width: calc(100% - 1.6rem);
margin-left: .2rem;
}
#topology{
height: calc(100% - 80px);
}
.open{
width: 24px;
height: 24px;
background: url("~@/assets/img/open.png");
background-size: 100% 100%;
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
}
}
</style>
src/views/system/index/components/mainPageEcharts/distributed.vue 0 → 100644
View file @ 09f1cabc
<template>
<div :id="idstr" style="width:100%,height:2rem;"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
xAxis: [
{
type: 'category',
data: ['4行业', '5行业', '6行业', '7行业', '8行业', '9行业', '10行业', '11行业', '12行业'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
yAxis: [
{
type: 'value',
name: '单位：个',
min: 0,
max: 250,
interval: 50,
axisLine: {
lineStyle: {
color: '#FFF'
}
}
},
{
type: 'value',
name: '增长率：%',
min: 0,
max: 25,
interval: 5,
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '5%',
width: '80%', // 图例宽度
height: '70%' // 图例高度
},
series: [
{
type: 'bar',
barWidth: '50%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#30DDF4' },
{ offset: 1, color: '#001873' }
])
},
data: [23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
type: 'line',
yAxisIndex: 1,
itemStyle: { // 线条样式
normal: {
color: '#30DDF4',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#30DDF4'
}, {
offset: 1,
color: '#E23AA2'
}])// 线条渐变色
}
}
},
data: [4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
vm.drawBar()
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
src/views/content/overview/components/mainPageEcharts/statistics.vue → src/views/system/index/components/mainPageEcharts/statistics.vue
View file @ 09f1cabc
<template>
<div :id="idstr"></div>
<div :id="idstr" style="width:100%,height:2rem;"></div>
</template>
<script>
......@@ -57,10 +57,9 @@ export default {
}
},
grid: {
top: '10px',
left: '30px',
bottom: '30px',
backgroundColor: '#fff',
top: '10%',
left: '15%',
bottom: '5%',
width: '80%', // 图例宽度
height: '80%' // 图例高度
},
......@@ -96,12 +95,14 @@ export default {
}
}
}
}, {
data: [120, 232, 501, 634, 290, 330, 320],
type: 'line',
smooth: true,
color: '#30DDF4'
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
......
src/views/content/overview/page.vue → src/views/system/index/page.vue
View file @ 09f1cabc
<template>
<div id="overview">
<dv-loading v-show="loading">Loading...</dv-loading>
<d2-container v-show="!loading" class="mainPage">
<div class="section">
<div style="position: absolute; width: 250px; left: 630px; z-index: 1; top: 20px">
<el-button @click="getData(1)">客户</el-button>
<el-button @click="getData(2)">商机</el-button>
<el-button @click="getData(3)">项目</el-button>
</div>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina>
<div class="leftBlock">
<deptIntroduction class="deptIntroduction"></deptIntroduction>
<deptOperation class="deptOperation"></deptOperation>
</div>
<clientDistributed class="clientDistributed"></clientDistributed>
<div class="rightBlock">
<knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
<companyNews class="companyNews"></companyNews>
<companyHotWord class="companyHotWord"></companyHotWord>
</div>
<d2-container class="mainPage">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<deptIntroduction class="deptIntroduction"></deptIntroduction>
<deptOperation class="deptOperation"></deptOperation>
<deptNews class="deptNews"></deptNews>
</div>
</d2-container>
</div>
<div class="centerBlock">
<div style="position: absolute; left: .2rem; z-index: 1; top: 0;line-height: .4rem;">
<el-button @click="getData(1)">客户</el-button>
<el-button @click="getData(2)">商机</el-button>
<el-button @click="getData(3)">项目</el-button>
</div>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina>
<clientDistributed class="clientDistributed"></clientDistributed>
</div>
<div class="rightBlock">
<knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
<importantProject></importantProject>
</div>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import mapChina from './components/mainPageEcharts/mapChina' // 地图
import deptIntroduction from './components/deptIntroduction'// 部门介绍
import deptNews from './components/deptNews'// 部门介绍
import deptOperation from './components/deptOperation'// 部门运营
import clientDistributed from './components/clientDistributed'// 客户增长分布
import knowledgeGraph from './components/knowledgeGraph'// 知识图谱
import companyNews from './components/companyNews'// 公司新闻
import companyHotWord from './components/companyHotWord'// 企业热词
import importantProject from './components/importantProject'// 重点项目
import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: { mapChina, deptIntroduction, deptOperation, clientDistributed, knowledgeGraph, companyNews, companyHotWord },
components: { headerLayout, mapChina, deptIntroduction, deptNews, deptOperation, clientDistributed, knowledgeGraph, importantProject },
data () {
return {
loading: true,
newData: [],
mapChina: [],
type: 1
......@@ -55,7 +55,6 @@ export default {
GET_MapChina () {
const type = this.type
API_BASIC.GetMapChina(type).then(res => {
this.loading = false
this.newData = res.data
this.newData.forEach(e => {
var arr = { name: e.area, value: e.num }
......@@ -63,22 +62,6 @@ export default {
})
})
}
// 方法
// handleSure () {
// deleteKmz({
// kmzId: this.delMsg.deleteId,
// userId: this.delMsg.userId
// }).then(res => {
// console.log(res)
// if (res.code == 200) {
// this.$message.success('success')
// } else {
// this.$message.error(res.message)
// }
// }).catch(err => {
// console.log('err', err)
// })
// }
}
}
......
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