代码提交

package-lock.json

@@ -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==",
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.15.0",

package.json

@@ -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",

src/main.js

@@ -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'

src/router.js

@@ -24,5 +24,10 @@ export default new Router({
       name: 'index',
       component: () => import ('./view/index.vue')
     },
+    {
+      path: '/smartPage',
+      name: 'smartPage',
+      component: () => import ('./view/smartPage.vue')
+    },
   ]
 })

src/view/index.vue

@@ -21,8 +21,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">
@@ -204,14 +204,17 @@
         </div>
       </div>
       <div class="middleBottom">
-        <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
+
-          <img :src="item.icon"/>
+          <div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
-        </div>
+            @click="handelBtn(index)">
-      </div>
+            <img :src="item.icon" />
-      <div class="middleBottomIcon">
 
       </div>
     </div>
+    <div class="middleBottomIcon">
+
+    </div>
+  </div>
   </div>
 </template>
 
@@ -370,7 +373,7 @@ export default {
           num: '在线'
         }
       ],
-      menu:[
+      menu: [
         {
           icon: require("@/assets/images/zongti.png")
         },
@@ -393,23 +396,23 @@ export default {
     this.handelBtn(0)
   },
   methods: {
-     //菜单切换
+    //菜单切换
-     handelBtn(index){
+    handelBtn(index) {
       this.menuAc = index
-        if (index == 0) {
+      if (index == 0) {
         this.menu[0].icon = require("@/assets/images/zongtiAc.png")
         this.menu[1].icon = require("@/assets/images/zhihui.png")
         this.menu[2].icon = require("@/assets/images/shebei.png")
-      }else if (index == 1) {
+      } else if (index == 1) {
         this.menu[0].icon = require("@/assets/images/zongti.png")
         this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
         this.menu[2].icon = require("@/assets/images/shebei.png")
-      }else if (index == 2) {
+      } else if (index == 2) {
         this.menu[0].icon = require("@/assets/images/zongti.png")
         this.menu[1].icon = require("@/assets/images/zhihui.png")
         this.menu[2].icon = require("@/assets/images/shebeiAc.png")
       }
-      
+
     },
     drawHallChart() {
       let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
@@ -1605,46 +1608,50 @@ export default {
 .left-content,
 .right-content {
   position: absolute;
-    width: 20.6%;
+  width: 20.6%;
-    top: 0;
+  top: 0;
-    height: 100%;
+  height: 100%;
 }
 
 .middle-content {
   position: absolute;
-    width: calc(100% - 41.2%);
+  width: calc(100% - 41.2%);
-    top: 0;
+  top: 0;
-    height: 100%;
+  height: 100%;
-    position: relative;
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  .middleBottom {
+    width: 52%;
+    height: 10%;
     display: flex;
-    justify-content: center;
+    align-items: center;
-   .middleBottom{
+    justify-content: space-evenly;
-      width: 52%;
+    position: absolute;
-      height: 10%;
+    bottom: -26px;
-      display: flex;
+    z-index: 999;
-      align-items: center;
+
-      justify-content: space-evenly;
+    .menuBtn {
-      position: absolute;
+      width: 142px;
-      bottom: -26px;
+      height: 52px
-      z-index: 999;
-      .menuBtn{
-        width:142px;
-        height:52px
-      }
-      .menuBtn1{
-        width:188px;
-        height:74px
-      }
     }
-    .middleBottomIcon{
+
-      z-index: 100;
+    .menuBtn1 {
-      width: 1115px;
+      width: 188px;
-      height: 57px;
+      height: 74px
-          background: url('../assets/images/menubottom.png') no-repeat;
-          background-size: 100% 100%;
-          position: absolute;
-          bottom: -37px; 
     }
+  }
+
+  .middleBottomIcon {
+    z-index: 100;
+    width: 1115px;
+    height: 57px;
+    background: url('../assets/images/menubottom.png') no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: -37px;
+  }
 }
 
 /* 内容板块背景 */
@@ -1683,17 +1690,20 @@ 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%;
 
@@ -2221,11 +2231,13 @@ export default {
       margin-top: 7px;
       color: #4bbfde
     }
-    .item-value3{
+
+    .item-value3 {
       color: #ebad22;
     }
-    .item-value4{
+
-      color:#2c6e43
+    .item-value4 {
+      color: #2c6e43
     }
   }
 

src/view/smartPage.vue

@@ -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>