代码提交
This commit is contained in:
commit
2bde3d8cc1
|
|
@ -1122,7 +1122,6 @@
|
|||
"version": "7.20.1",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.1.tgz",
|
||||
"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.10"
|
||||
}
|
||||
|
|
@ -1182,6 +1181,56 @@
|
|||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"@jiaminghi/bezier-curve": {
|
||||
"version": "0.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
|
||||
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5"
|
||||
}
|
||||
},
|
||||
"@jiaminghi/c-render": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
|
||||
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/bezier-curve": "*",
|
||||
"@jiaminghi/color": "*",
|
||||
"@jiaminghi/transition": "*"
|
||||
}
|
||||
},
|
||||
"@jiaminghi/charts": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
|
||||
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/c-render": "^0.4.3"
|
||||
}
|
||||
},
|
||||
"@jiaminghi/color": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
|
||||
"integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
|
||||
},
|
||||
"@jiaminghi/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"@jiaminghi/transition": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
|
||||
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5"
|
||||
}
|
||||
},
|
||||
"@jridgewell/gen-mapping": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
|
||||
|
|
@ -6226,8 +6275,7 @@
|
|||
"regenerator-runtime": {
|
||||
"version": "0.13.10",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
|
||||
"integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
|
||||
},
|
||||
"regenerator-transform": {
|
||||
"version": "0.15.0",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"axios": "^1.1.3",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.0",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ export default {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
background: #040f26;
|
||||
overflow: hidden;
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
|
|
@ -5,6 +5,9 @@ import '../src/assets/font/font.less'
|
|||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
Vue.use(ElementUI)
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
|
||||
Vue.use(dataV)
|
||||
// import Plugin from 'v-fit-cdcolumns';
|
||||
// Vue.use(Plugin);
|
||||
import * as echarts from 'echarts'
|
||||
|
|
|
|||
|
|
@ -29,5 +29,10 @@ export default new Router({
|
|||
name: 'equipmentAssets',
|
||||
component: () => import ('./view/equipmentAssets.vue')
|
||||
},
|
||||
{
|
||||
path: '/smartPage',
|
||||
name: 'smartPage',
|
||||
component: () => import ('./view/smartPage.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -333,7 +333,9 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
window.setTimeout(()=>{
|
||||
this.menuHandelShow()
|
||||
},3400)
|
||||
},
|
||||
methods: {
|
||||
handelBtn(index) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<!-- 左边的内容 -->
|
||||
<div class="left-content">
|
||||
<transition name="left">
|
||||
<div class="left-content" v-show="menuShow">
|
||||
<!-- 营业临厅时长 -->
|
||||
<div class="business-hall">
|
||||
<div class="title">
|
||||
|
|
@ -21,8 +22,8 @@
|
|||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">
|
||||
|
||||
<span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
|
|
@ -85,8 +86,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 右边的内容 -->
|
||||
<div class="right-content">
|
||||
<transition name="right">
|
||||
<div class="right-content" v-show="menuShow">
|
||||
<!-- 缴费情况 -->
|
||||
<div class="payment">
|
||||
<div class="title">
|
||||
|
|
@ -193,6 +196,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="middle-content">
|
||||
<!-- 内容头部 -->
|
||||
<div class="middleTop">
|
||||
|
|
@ -211,14 +215,21 @@
|
|||
<div class="middleBottomIcon">
|
||||
</div>
|
||||
</div>
|
||||
<transition name="equimentAssets">
|
||||
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import equipmentAssets from "./equipmentAssets.vue";
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
menuShow: true, //菜单显示
|
||||
equimentAssetsShow: false, //设备资产
|
||||
hallList: [
|
||||
{
|
||||
font: "平均办理时长",
|
||||
|
|
@ -349,41 +360,41 @@ export default {
|
|||
// 内容头部
|
||||
middleTopList: [
|
||||
{
|
||||
name: '工单总数',
|
||||
num: 1311
|
||||
name: "工单总数",
|
||||
num: 1311,
|
||||
},
|
||||
{
|
||||
name: '已归档',
|
||||
num: 1076
|
||||
name: "已归档",
|
||||
num: 1076,
|
||||
},
|
||||
{
|
||||
name: '代办工单',
|
||||
num: 24
|
||||
name: "代办工单",
|
||||
num: 24,
|
||||
},
|
||||
{
|
||||
name: '预受理信息预警',
|
||||
num: 0
|
||||
name: "预受理信息预警",
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
name: '柜台状态',
|
||||
num: '在线'
|
||||
}
|
||||
name: "柜台状态",
|
||||
num: "在线",
|
||||
},
|
||||
],
|
||||
menu:[
|
||||
menu: [
|
||||
{
|
||||
icon: require("@/assets/images/zongti.png"),
|
||||
iconAc:require("@/assets/images/zongtiAc.png")
|
||||
iconAc: require("@/assets/images/zongtiAc.png"),
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/zhihui.png"),
|
||||
iconAc:require("@/assets/images/zhihuiAc.png")
|
||||
iconAc: require("@/assets/images/zhihuiAc.png"),
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/shebei.png"),
|
||||
iconAc:require("@/assets/images/shebeiAc.png")
|
||||
}
|
||||
iconAc: require("@/assets/images/shebeiAc.png"),
|
||||
},
|
||||
],
|
||||
menuAc:0
|
||||
menuAc: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -393,20 +404,32 @@ export default {
|
|||
|
||||
this.drawHallChart();
|
||||
this.drawFlowChart();
|
||||
this.handelBtn(0)
|
||||
this.handelBtn(0);
|
||||
},
|
||||
methods: {
|
||||
//菜单切换
|
||||
handelBtn(index){
|
||||
this.menuAc = index
|
||||
if (index == 0) {
|
||||
|
||||
}else if (index == 1) {
|
||||
|
||||
}else if (index == 2) {
|
||||
this.$router.push('./equipmentAssets')
|
||||
//菜单切换
|
||||
handelBtn(index) {
|
||||
this.menuAc = index;
|
||||
if (index == 0) {
|
||||
//如果当前页面为设备资产
|
||||
if (this.equimentAssetsShow == true) {
|
||||
this.$refs.equimentAssets.menuHandel();
|
||||
window.setTimeout(() => {
|
||||
this.equimentAssetsShow = false;
|
||||
this.menuShow = true;
|
||||
}, 1500);
|
||||
}
|
||||
} else if (index == 1) {
|
||||
} else if (index == 2) {
|
||||
let that = this;
|
||||
if (this.menuShow == true) {
|
||||
this.menuShow = false;
|
||||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = true;
|
||||
this.$refs.equimentAssets.menuHandelShow();
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
drawHallChart() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
|
||||
|
|
@ -507,7 +530,7 @@ export default {
|
|||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) { },
|
||||
formatter: function (res) {},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -633,7 +656,7 @@ export default {
|
|||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) { },
|
||||
formatter: function (res) {},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1587,6 +1610,9 @@ export default {
|
|||
this.serviceTypeActive = index;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
equipmentAssets,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1597,56 +1623,61 @@ export default {
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
.right-content {
|
||||
position: absolute;
|
||||
width: 20.6%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 20.6%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.middle-content {
|
||||
position: absolute;
|
||||
width: calc(100% - 41.2%);
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: calc(100% - 41.2%);
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.middleBottom {
|
||||
width: 52%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.middleBottom{
|
||||
width: 52%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
z-index: 999;
|
||||
.menuBtn{
|
||||
width:142px;
|
||||
height:52px
|
||||
}
|
||||
.menuBtn1{
|
||||
width:188px;
|
||||
height:74px
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
z-index: 999;
|
||||
|
||||
.menuBtn {
|
||||
width: 142px;
|
||||
height: 52px;
|
||||
}
|
||||
.middleBottomIcon{
|
||||
z-index: 100;
|
||||
width: 1115px;
|
||||
height: 57px;
|
||||
background: url('../assets/images/menubottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
bottom: -37px;
|
||||
|
||||
.menuBtn1 {
|
||||
width: 188px;
|
||||
height: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
.middleBottomIcon {
|
||||
z-index: 100;
|
||||
width: 1115px;
|
||||
height: 57px;
|
||||
background: url("../assets/images/menubottom.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
bottom: -37px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容板块背景 */
|
||||
.left-content>div,
|
||||
.right-content>div {
|
||||
.left-content > div,
|
||||
.right-content > div {
|
||||
background-image: url(../assets/images/border.png);
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -1680,17 +1711,19 @@ export default {
|
|||
width: 102px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.span0{
|
||||
|
||||
.span0 {
|
||||
background-image: url(../assets/images/select-font.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.span1{
|
||||
|
||||
.span1 {
|
||||
background-image: url(../assets/images/default-font.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.hall-icon span {
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
|
@ -1709,10 +1742,7 @@ export default {
|
|||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
|
|
@ -1738,10 +1768,13 @@ export default {
|
|||
z-index: 10;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
|
||||
-webkit-mask: linear-gradient(
|
||||
to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.hall-box .item {
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
|
|
@ -1759,7 +1792,7 @@ export default {
|
|||
|
||||
.hall-time1,
|
||||
.hall-time0 {
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -1778,8 +1811,8 @@ export default {
|
|||
}
|
||||
|
||||
/* 标题的样式 */
|
||||
.left-content>div>.title,
|
||||
.right-content>div>.title {
|
||||
.left-content > div > .title,
|
||||
.right-content > div > .title {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border-title.png);
|
||||
height: 30px;
|
||||
|
|
@ -1788,7 +1821,7 @@ export default {
|
|||
padding-left: 8%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -1804,7 +1837,6 @@ export default {
|
|||
|
||||
.left-content .business-hall {
|
||||
height: 38.2%;
|
||||
|
||||
}
|
||||
|
||||
.left-content .passenger-flow {
|
||||
|
|
@ -1843,12 +1875,8 @@ export default {
|
|||
font-size: 25px;
|
||||
color: #4bbfde;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flow-right {
|
||||
width: 56%;
|
||||
height: 100%;
|
||||
|
|
@ -1911,8 +1939,6 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(2) {
|
||||
|
|
@ -1920,7 +1946,6 @@ export default {
|
|||
color: #c0c0c4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1935,11 +1960,11 @@ export default {
|
|||
width: 33%;
|
||||
|
||||
.img2 {
|
||||
background-image: url(../assets/images/people-icon.png)
|
||||
background-image: url(../assets/images/people-icon.png);
|
||||
}
|
||||
|
||||
.img1 {
|
||||
background-image: url(../assets/images/paizi.png)
|
||||
background-image: url(../assets/images/paizi.png);
|
||||
}
|
||||
|
||||
// display: flex;
|
||||
|
|
@ -1957,20 +1982,18 @@ export default {
|
|||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
color: #4bbfde !important;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:980px) {
|
||||
@media screen and (min-height: 980px) {
|
||||
.stat-num {
|
||||
font-size: 20px;
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
// display: inline-block;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
|
|
@ -1978,7 +2001,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.right-content .payment {
|
||||
height: 38.3%;
|
||||
|
||||
|
|
@ -2216,13 +2238,15 @@ export default {
|
|||
font-size: 25px;
|
||||
font-family: maleGod;
|
||||
margin-top: 7px;
|
||||
color: #4bbfde
|
||||
color: #4bbfde;
|
||||
}
|
||||
.item-value3{
|
||||
|
||||
.item-value3 {
|
||||
color: #ebad22;
|
||||
}
|
||||
.item-value4{
|
||||
color:#2c6e43
|
||||
|
||||
.item-value4 {
|
||||
color: #2c6e43;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2246,4 +2270,49 @@ export default {
|
|||
background-image: url(../assets/images/content-icon5.png);
|
||||
}
|
||||
}
|
||||
//left动画
|
||||
@keyframes donghua1 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.left-leave,
|
||||
.left-leave-active,
|
||||
.left-leave-to {
|
||||
animation: donghua1 1s linear;
|
||||
}
|
||||
|
||||
.left-enter,
|
||||
.left-enter-active,
|
||||
.left-enter-to {
|
||||
animation: donghua1 1s linear reverse;
|
||||
}
|
||||
//right动画
|
||||
@keyframes donghua2 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.right-leave,
|
||||
.right-leave-active,
|
||||
.right-leave-to {
|
||||
animation: donghua2 1s linear;
|
||||
}
|
||||
|
||||
.right-enter,
|
||||
.right-enter-active,
|
||||
.right-enter-to {
|
||||
animation: donghua2 1s linear reverse;
|
||||
}
|
||||
.equimentAssets {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="left-content">
|
||||
<!-- 排班管理 -->
|
||||
<div class="work-force">
|
||||
<div class="title">
|
||||
<p class="titleText" text="排班管理" style="font-family: maleGod">
|
||||
排班管理
|
||||
</p>
|
||||
<!-- <p class="work-time">
|
||||
<el-date-picker v-model="workTime" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</p> -->
|
||||
</div>
|
||||
<!-- 当前值班人员 -->
|
||||
<div class="nowWork">
|
||||
<p class="titleText" text="当前值班人员" style="font-family: maleGod;">
|
||||
当前值班人员
|
||||
</p>
|
||||
<div class="work-items">
|
||||
<p class="work-item">
|
||||
<img src="../assets/images/itemImg.png" alt="">
|
||||
<span>刘伟</span>
|
||||
</p>
|
||||
<p class="work-item">
|
||||
<img src="../assets/images/itemImg.png" alt="">
|
||||
<span>李坤霞</span>
|
||||
</p>
|
||||
<p class="work-item">
|
||||
<img src="../assets/images/itemImg.png" alt="">
|
||||
<span>蒋玲</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中午值班人员 -->
|
||||
<div class="wuWork">
|
||||
<p class="titleText" text="中午值班人员" style="font-family: maleGod;">
|
||||
中午值班人员
|
||||
</p>
|
||||
<div class="work-items">
|
||||
<p class="work-item">
|
||||
<img src="../assets/images/itemImg.png" alt="">
|
||||
<span>刘伟</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemBtn">
|
||||
<span>查看排班</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 起点业务 -->
|
||||
<div class="start-business">
|
||||
<div class="title">
|
||||
<p class="titleText" text="起点业务" style="font-family: maleGod">
|
||||
起点业务
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 100%;height:calc(100% - 40px)">
|
||||
<dv-scroll-board :config="config" style="height:100%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 学习资料 -->
|
||||
<div class="study-means">
|
||||
<div class="title">
|
||||
<p class="titleText" text="学习资料" style="font-family: maleGod">
|
||||
学习资料
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 100%;height:calc(100% - 40px)">
|
||||
|
||||
<dv-scroll-board :config="studyData" style="height:100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<!-- 任务通知 -->
|
||||
<div class="notice">
|
||||
<div class="title">
|
||||
<p class="titleText" text="任务通知" style="font-family: maleGod">
|
||||
任务通知
|
||||
</p>
|
||||
</div>
|
||||
<!-- 交办的任务 -->
|
||||
<div class="my-notice">
|
||||
<p class="titleText" text="我交办的任务" style="font-family: maleGod">
|
||||
我交办的任务
|
||||
</p>
|
||||
</div>
|
||||
<div class="jiao-notice">
|
||||
<p class="titleText" text="我承办的任务" style="font-family: maleGod">
|
||||
我承办的任务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 服务 -->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<p class="titleText" text="服务" style="font-family: maleGod">
|
||||
服务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'smartPage',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
workTime: '',
|
||||
config: {
|
||||
header: ['排名', '业务类型', '占比'],
|
||||
data: [
|
||||
[1, '过户', '53.85%'],
|
||||
[2, '电费结算协议变更', '19.23%'],
|
||||
[3, '更名', '3.5%'],
|
||||
[4, '低压居民新装增000', '15.30%'],
|
||||
[5, '客户基础信息000', '3.85%'],
|
||||
[6, '低压非居民新装000', '3.85%'],
|
||||
[7, '过户', '3.85%'],
|
||||
[8, '更名', '3.85%'],
|
||||
[9, '电费', '3.85%'],
|
||||
[10, '过户', '3.85%']
|
||||
],
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: '#102c50',
|
||||
waitTime: 10000,
|
||||
headerBGC: 'transparent',
|
||||
rowNum: 6,
|
||||
columnWidth: [80],
|
||||
align: ['center']
|
||||
},
|
||||
studyData: {
|
||||
header: ['序号', '标题', '时间'],
|
||||
data: [[1, '关于进一步规范...', '2023-12-12 14:58'], [2, '关于重申在全市... ', '2023-12-12 14:58'], [3, '南京供电公司营...', '2023-12-12 14:58'], [4, '关于重申在全市...', '2023-12-12 14:58']],
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: '#102c50',
|
||||
waitTime: 10000,
|
||||
headerBGC: 'transparent',
|
||||
rowNum: 4,
|
||||
columnWidth: [80],
|
||||
align: ['center']
|
||||
},
|
||||
// 我交办的任务
|
||||
myNotice1: [
|
||||
{
|
||||
name: '任务总数',
|
||||
num: 3,
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
num: 3,
|
||||
},
|
||||
{
|
||||
name: '未完成',
|
||||
num: 0
|
||||
}
|
||||
],
|
||||
// 我承办的任务
|
||||
myNotice2: [{
|
||||
name: '任务总数',
|
||||
num:2,
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
num: 1,
|
||||
},
|
||||
{
|
||||
name: '未完成',
|
||||
num: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-date-editor.el-input {
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
/deep/ .dv-scroll-board {
|
||||
color: #f8fcfd;
|
||||
}
|
||||
|
||||
/deep/ .dv-scroll-board .header {
|
||||
background-image: url(../assets/images/stratHead.png) !important;
|
||||
}
|
||||
|
||||
/deep/ .start-business .dv-scroll-board .rows .row-item>div:nth-child(3) {
|
||||
font-family: maleGod;
|
||||
color: #40accd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
.right-content {
|
||||
// position: absolute;
|
||||
width: 20.6%;
|
||||
// top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-content>div,
|
||||
.right-content>div {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border.png);
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
padding: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
.right-content {
|
||||
|
||||
|
||||
|
||||
// 左边内容
|
||||
.work-force {
|
||||
height: 39%;
|
||||
|
||||
.itemBtn {
|
||||
width: 356px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
line-height: 35px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background-image: url(../assets/images/itemBtn.png);
|
||||
}
|
||||
|
||||
.nowWork,
|
||||
.wuWork {
|
||||
.titleText {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.work-items {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.work-item>img {
|
||||
width: 83px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-business {
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
@media screen and (min-height:980px) {
|
||||
.wuWork>.titleText {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.nowWork,
|
||||
.wuWork {
|
||||
.titleText {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.itemBtn {
|
||||
margin: 8px auto 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.study-means {
|
||||
height: 24.8%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// 标题样式
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border-title.png);
|
||||
height: 30px;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
padding-left: 8%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-family: 'maleGod';
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
// 右边内容
|
||||
.notice {
|
||||
height: 31.6%;
|
||||
}
|
||||
|
||||
.service {
|
||||
height: 67.5%;
|
||||
}
|
||||
}
|
||||
|
||||
.titleText {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 渐变颜色
|
||||
.titleText:before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue