智能运营中心

src/components/device/deviceheartbeat.vue

@@ -11,16 +11,11 @@
     <el-row>
       <el-col span="4">
         <el-tabs tab-position="right" @tab-click="handleClick" v-model="index">
-
           <el-tab-pane :key="index" v-for="(item, index) in data" :label="item.tag" :name="index">
           </el-tab-pane>
-
         </el-tabs>
 
       </el-col>
-
-
-
       <el-col span="20">
         <div ref="gatechart" style="width:100%;height:500px"></div>
       </el-col>

src/config/website.js

@@ -17,7 +17,7 @@ export default {
   //http的status默认放行列表
   statusWhiteList: [],
   //配置首页不可关闭
-  isFirstPage: true,
+  isFirstPage: false,
   fistPage: {
     label: "首页",
     value: "/wel/index",

src/page/index/index.vue

@@ -7,14 +7,15 @@
 
     <div class="avue-layout" style="background-color: #042352;">
       <!-- 左侧导航栏 -->
-      <div v-show="menuIndex != 0" style="background-color: #062252;" class="animate__animated avue-left animate__faster"
+      <div v-show="menuIndex != 0" style="background-color: #16488B;"
+        class="animate__animated avue-left animate__faster"
         :class="menuIndex == 0 ? 'animate__fadeOutLeftBig' : 'animate__fadeInLeftBig'">
         <sidebar />
       </div>
       <div class="avue-main" :style="menuIndex == 0 ?'left: 0;width: 100%;height: calc(100vh - 10rem);':''">
         <!-- 顶部标签卡 -->
         <div v-show="menuIndex != 0" class="animate__animated animate__faster"
-          :class="menuIndex == 0 ? 'animate__fadeOutDownBig' : 'animate__fadeInDownBig'">
+          :class="menuIndex == 0 ? 'animate__fadeOutLeftBig' : 'animate__fadeInLeftBig'">
           <tags />
           <transition name="fade-scale">
             <search class="avue-view" v-show="isSearch"></search>
@@ -22,8 +23,7 @@
         </div>
 
         <!-- 主体视图层 -->
-        <div class="animate__animated animate__fadeInUpBig"
-          style="height:100%;overflow-y:auto;overflow-x:hidden;"
+        <div class="animate__animated animate__fadeInUpBig" style="height:100%;overflow-y:auto;overflow-x:hidden;"
           :style="menuIndex == 0 ?'height: calc(100vh - 10rem);':''" id="avue-view" v-show="!isSearch">
           <keep-alive>
             <router-view class="avue-view" v-if="$route.meta.keepAlive" />

src/page/index/sidebar/index.vue

@@ -1,33 +1,30 @@
 <template>
-  <div class="avue-sidebar" style="background-color: #042352;border: none;box-shadow: none;">
+  <div class="avue-sidebar" style="background-color: #16488B;border: none;box-shadow: none;">
     <!-- <logo></logo> -->
     <el-scrollbar style="height:100%">
-      <div v-if="validatenull(menu)"
-           class="avue-sidebar--tip">{{$t('menuTip')}}
+      <div v-if="validatenull(menu)" class="avue-sidebar--tip">{{$t('menuTip')}}
       </div>
-      <el-menu unique-opened
-               :default-active="nowTagValue"
-               mode="vertical"
-               :show-timeout="200"
-               :collapse="keyCollapse">
-        <sidebar-item :menu="menu"
-                      :screen="screen"
-                      first
-                      :props="website.menu.props"
-                      :collapse="keyCollapse"></sidebar-item>
+      <el-menu  unique-opened :default-active="nowTagValue" mode="vertical" :show-timeout="200" :collapse="keyCollapse">
+        <sidebar-item :menu="menu" :screen="screen" first :props="website.menu.props" :collapse="keyCollapse">
+        </sidebar-item>
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
+  import {
+    mapGetters
+  } from "vuex";
   import logo from "../logo";
   import sidebarItem from "./sidebarItem";
 
   export default {
     name: "sidebar",
-    components: {sidebarItem, logo},
+    components: {
+      sidebarItem,
+      logo
+    },
     inject: ["index"],
     data() {
       return {};
@@ -37,12 +34,15 @@
     },
     computed: {
       ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]),
-      nowTagValue: function () {
+      nowTagValue: function() {
         return this.$router.$avueRouter.getValue(this.$route);
       }
     },
     methods: {}
   };
 </script>
-<style lang="scss" scoped>
+<style>
+  .el-menu-item.is-active {
+    background-color: #3b8ff4 !important;
+  }
 </style>

src/page/index/sidebar/sidebarItem.vue

@@ -1,46 +1,38 @@
 <template>
   <div class="menu-wrapper">
     <template v-for="item in menu">
-      <el-menu-item  v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
-                    :index="item[pathKey]"
-                    @click="open(item)"
-                    :key="item[labelKey]"
-                    :class="{'is-active':vaildActive(item)}">
+      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)" :index="item[pathKey]"
+        @click="open(item)" :key="item[labelKey]" :class="{'is-active':vaildActive(item)}">
         <i :class="item[iconKey]"></i>
-        <span slot="title"
-              :alt="item[pathKey]">{{generateTitle(item)}}</span>
+        <span slot="title" :alt="item[pathKey]">{{generateTitle(item)}}</span>
       </el-menu-item>
-      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
-                  :index="item[pathKey]"
-                  :key="item[labelKey]">
+      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)" :index="item[pathKey]"
+        :key="item[labelKey]">
         <template slot="title">
           <i :class="item[iconKey]"></i>
-          <span slot="title"
-                :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
+          <span slot="title" :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
         </template>
         <template v-for="(child,cindex) in item[childrenKey]">
-          <el-menu-item :index="child[pathKey],cindex"
-                        @click="open(child)"
-                        :class="{'is-active':vaildActive(child)}"
-                        v-if="validatenull(child[childrenKey])"
-                        :key="child[labelKey]">
+          <el-menu-item :index="child[pathKey],cindex" @click="open(child)"
+            :class="{'is-active':vaildActive(child)}" v-if="validatenull(child[childrenKey])" :key="child[labelKey]">
             <i :class="child[iconKey]"></i>
             <span slot="title">{{generateTitle(child)}}</span>
           </el-menu-item>
-          <sidebar-item v-else
-                        :menu="[child]"
-                        :key="cindex"
-                        :props="props"
-                        :screen="screen"
-                        :collapse="collapse"></sidebar-item>
+          <sidebar-item v-else :menu="[child]" :key="cindex" :props="props" :screen="screen" :collapse="collapse">
+          </sidebar-item>
         </template>
       </el-submenu>
     </template>
   </div>
 </template>
 <script>
-  import {mapGetters} from "vuex";
-  import {isURL, validatenull} from "@/util/validate";
+  import {
+    mapGetters
+  } from "vuex";
+  import {
+    isURL,
+    validatenull
+  } from "@/util/validate";
   import config from "./config.js";
 
   export default {
@@ -71,10 +63,8 @@
         type: Boolean
       }
     },
-    created() {
-    },
-    mounted() {
-    },
+    created() {},
+    mounted() {},
     computed: {
       ...mapGetters(["roles"]),
       labelKey() {

src/page/index/tags.vue

@@ -176,4 +176,4 @@
       }
     }
   };
-</script>
+</script>

src/page/login/userlogin.vue

@@ -2,7 +2,7 @@
   <div>
     <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
       <el-form-item>
-        <div >
+        <div>
           <i class="login-title" style="font-size: 1.5rem;position: relative;bottom: -0.8rem;">CY-SMART</i>
           <br />
           <i class="login-title" style="font-size: 1.3rem;position: relative;bottom: -0.4rem;">智慧园区大数据平台</i>
@@ -41,9 +41,9 @@
         </el-row>
       </el-form-item>
       <el-form-item>
-          <el-button type="primary" size="small" @click.native.prevent="handleLogin" id="submit" class="login-submit">
-            {{$t('login.submit')}}
-          </el-button>
+        <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">
+          {{$t('login.submit')}}
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -140,14 +140,13 @@
           (this.passwordType = "");
       },
       handleLogin() {
-        this.$animateCss('#submit','animate__flip')
         this.$refs.loginForm.validate(valid => {
           if (valid) {
-            // const loading = this.$loading({
-            //   lock: true,
-            //   text: '登录中,请稍后。。。',
-            //   spinner: "el-icon-loading"
-            // });
+            const loading = this.$loading({
+              lock: true,
+              text: '登录中,请稍后。。。',
+              spinner: "el-icon-loading"
+            });
             this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
               // this.$router.push({path: this.tagWel.value});
               getByTenantId(this.loginForm.tenantId).then(res => {
@@ -176,9 +175,9 @@
 
                 })
               });
-              // loading.close();
+              loading.close();
             }).catch(() => {
-              // loading.close();
+              loading.close();
               this.refreshCode();
             });
           }

src/styles/avue.scss

@@ -50,3 +50,7 @@ $backgrouind: #fff;
   color: rgba(164, 160, 160, 0.85);
   background-color: #fafafa;
 }
+
+.el-dialog{
+  margin-top: 150px !important;
+}

src/styles/sidebar.scss

@@ -78,10 +78,10 @@ $mainColor: #1b315e;
                 left: 0;
                 bottom: 0;
                 width: 4px;
-                background: #2d58ac;
+                background: #3B8FF4;
                 position: absolute;
             }
-            background-color: #042352;
+            // background-color: #042352;
             i,span{
                 color:#02EEFF;
             }

src/styles/tags.scss

@@ -28,8 +28,9 @@
         line-height:40px;
         font-size: 13px;
         font-weight: normal;
-        color: #ccc;
+        color: #8a8a8a;
         &.is-active {
+			font-weight: 800;
             color: #3B8FF4;
             border-bottom: 3px solid #3B8FF4;
         }

src/styles/theme/iview.scss

@@ -62,7 +62,7 @@
      .el-submenu{
         .el-menu-item{
           &.is-active {
-            background-color:  #409EFF;
+            background-color:  #fff;
             &:before {
               display: none;
             }

src/styles/theme/white.scss

@@ -11,14 +11,14 @@
                 }
             }
             &.is-active {
-                background-color: #409EFF;
+                background-color: #3b8ff4;
                 &:before {
                     content: '';
                     top: 0;
                     left: 0;
                     bottom: 0;
                     width: 4px;
-                    background: #409eff;
+                    background: #3b8ff4;
                     position: absolute;
                 }
                 i,span{

src/views/businessmng/agencymng/agency 1.vue

@@ -0,0 +1,518 @@
+<template>
+  <basic-container>
+
+<!--卡片数据展示-->
+    <el-card style="margin-bottom: 20px">
+        <el-tabs type="border-card">
+          <el-tab-pane label="园区数据统计">
+            <div><avue-data-box :option="communityStatistics"></avue-data-box></div>
+          </el-tab-pane>
+        </el-tabs>
+    </el-card>
+
+    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
+               :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
+               @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
+               @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.agency_delete" @click="handleDelete">删 除</el-button>
+        <cy-excel-import :flag="1" file-name="园区信息导入模板" @success="onLoad(page)"></cy-excel-import>
+      </template>
+      <template slot="mapSelectForm" slot-scope="scope">
+        <div>
+          <!--          <input class="el-input&#45;&#45;small el-input__inner" placeholder="选择地址" @click="mapVisible = true">-->
+          <el-button @click="mapVisible = true"> 选择地址</el-button>
+          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
+                     title="编辑地址" width="80%">
+            <editPolygonMap v-if="mapVisible" :editForm.sync="scope.row" :region.sync="scope.row.address" :latitude.sync="scope.row.latitude" :longitude.sync="scope.row.longitude" :visible.sync="mapVisible"></editPolygonMap>
+          </el-dialog>
+        </div>
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+import {
+  getList,
+  getDetail,
+  add,
+  update,
+  remove
+} from "@/api/community/agency.js";
+import {getCommunityList} from "../../../api/grid/index";
+import {
+  mapGetters
+} from "vuex";
+import {
+  validatePhone
+} from "@/util/validator"
+import CyExcelImport from "../../../components/excel/cy-excel-import"
+import editPolygonMap from "../../../components/residential/editPolygonMap.vue"
+import {getDetail as getRegDetail} from "@/api/base/region"
+export default {
+  components: {CyExcelImport,editPolygonMap},
+  data() {
+    return {
+      communityCount:{},
+      mapVisible:false,
+      areaData: [],
+      form: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      //数据展示
+      communityStatistics:{
+        span:6,
+        data: [
+          {
+            title: '园区数量',
+            count: 0,
+            icon: 'el-icon-office-building',
+            color: 'rgb(49, 180, 141)',
+          },
+          {
+            title: '区域数量',
+            count: 0,
+            icon: 'el-icon-school',
+            color: 'rgb(56, 161, 242)',
+          },
+          {
+            title: '楼宇数量',
+            count: 0,
+            icon: 'el-icon-s-home',
+            color: 'rgb(117, 56, 199)',
+          },
+          {
+            title: '住户数量',
+            count: 0,
+            icon: 'el-icon-user-solid',
+            color: 'rgb(143,119,0)',
+          },
+        ]
+      },
+
+      selectionList: [],
+      option: {
+        height: 'auto',
+        // calcHeight: 60,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        menuWidth:350,
+        column: [{
+          label: "名称",
+          prop: "name",
+          search: true,
+          width: 160,
+          overHidden: true,
+          rules: [{
+            required: true,
+            message: "请输入名称",
+            trigger: "blur"
+          }]
+        },
+          {
+            label:'',
+            prop:'mapSelect',
+            viewDisplay: false,
+            formslot: true,
+            hide: true,
+          },
+          {
+            label: "经度",
+            prop: "longitude",
+            width: 120,
+            hide: true,
+            rules: [{
+              required: false,
+              message: "请输入经度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "纬度",
+            prop: "latitude",
+            width: 120,
+            hide: true,
+            rules: [{
+              required: false,
+              message: "请输入纬度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "所属省",
+            prop: "regionProvince",
+            type: "select",
+            width: 150,
+            dicUrl: "/api/blade-system/region/lazy-tree?parentCode=000000",
+            cascaderItem:["regionCity"],
+            props:{
+              label:"title",
+              value: "id"
+            },
+            rules: [{
+              required: true,
+              message: "请选择所属省份",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "所属市",
+            prop: "regionCity",
+            type: "select",
+            width: 150,
+            dicFlag: true,
+            cascaderItem: ["regionArea"],
+            dicUrl: `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
+
+            props:{
+              label: "title",
+              value: "id"
+            },
+            rules: [{
+              required: false,
+              message: "请选择所属市",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "所属区",
+            prop: "regionArea",
+            type: "select",
+            width: 150,
+            cascaderItem: ["regionStreet"],
+            dicUrl:  `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
+            props: {
+              label: "title",
+              value: "id"
+            },
+            rules: [{
+              required: false,
+              message: "请选择所属区",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "所属街道",
+            prop: "regionStreet",
+            type:"select",
+
+            width: 150,
+            dicUrl: `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
+            props: {
+              label: "title",
+              value: "id"
+            },
+
+            rules: [{
+              required: true,
+              message: "请选择所属街道",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "详细地址",
+            search: true,
+            prop: "address",
+            type: "textarea",
+            maxRows: 2,
+            // width: 300,
+            overHidden: true,
+            rules: [{
+              required: false,
+              message: "请输入详细地址",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "负责人名称",
+            prop: "personName",
+            width: 210,
+            labelWidth: 100,
+            rules: [{
+              required: false,
+              message: "请输入负责人名称",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "联系方式",
+            prop: "personPhone",
+            width: 120,
+            rules: [{
+              required: false,
+              message: "请输入负责人联系方式",
+              trigger: "blur"
+            }, {
+              validator: validatePhone,
+              trigger: "blur"
+            }],
+          },
+          {
+            label: "背景图",
+            prop: "pic",
+            type: 'upload',
+            hide: true,
+            propsHttp: {
+              res: "data",
+              url: 'link'
+            },
+            listType: 'picture-img',
+            span: 24,
+            row: true,
+            action: "/api/blade-resource/oss/endpoint/put-file",
+            display: true,
+            tip:"上传图片不能超过500K",
+            rules: [{
+              required: false,
+              message: "请上传封面图片",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "小区数量",
+            prop: "residentialCount",
+            display: false,
+            hide: true,
+          },
+          {
+            label: "楼栋数量",
+            prop: "buildingCount",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "单元数量",
+            prop: "unitCount",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "楼层数量",
+            prop: "floorCount",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "房间数量",
+            prop: "roomCount",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "人员数量",
+            prop: "personCount",
+            hide: true,
+            display: false,
+          },
+
+          {
+            label: "备注",
+            prop: "remark",
+            hide: true,
+          },
+        ]
+      },
+      data: []
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
+      return {
+        addBtn: this.vaildData(this.permission.agency_add, false),
+        viewBtn: this.vaildData(this.permission.agency_view, false),
+        delBtn: this.vaildData(this.permission.agency_delete, false),
+        editBtn: this.vaildData(this.permission.agency_edit, false)
+      };
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    },
+  },
+  watch: {
+    'form.address': {
+      handler: function(value) {
+        if (!value){
+          return
+        }else{
+          var _this = this
+          AMap.plugin('AMap.Geocoder', function() {
+            var geocoder = new AMap.Geocoder({})
+            let lnglat = [_this.form.longitude,_this.form.latitude]
+            geocoder.getAddress(lnglat, function(status, result) {
+              if (status === 'complete'&&result.regeocode&&result.regeocode.addressComponent.township) {
+                let parentCode = result.regeocode.addressComponent.adcode
+                let name = result.regeocode.addressComponent.township
+                getRegDetail({"name":name,"regionLevel":"4","parentCode":parentCode}).then((res)=>{
+                  let data = res.data.data
+                  let obj = {}
+                  obj['regionProvince'] = data.provinceCode
+                  obj['regionCity']  = data.cityCode
+                  obj['regionArea'] = data.districtCode
+                  obj['regionStreet'] = data.code
+                  _this.form = obj
+                })
+              }
+            })
+          })
+        }
+      },
+    },
+    'form.mapSelect': {
+      handler: function(value) {
+        if (!value){
+          return
+        }else{
+          this.form.longitude = this.form.mapSelect.longitude;
+          this.form.latitude = this.form.mapSelect.latitude;
+          this.form.address = this.form.mapSelect.formattedAddress;
+        }
+      },
+    }
+  },
+  methods: {
+    rowSave(row, done, loading) {
+      row.residentialCount = 0;
+      row.unitCount = 0;
+      row.roomCount = 0;
+      row.personCount = 0;
+      row.carCount = 0;
+      add(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
+    },
+    rowUpdate(row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.$refs.crud.toggleSelection();
+        });
+    },
+    beforeOpen(done, type) {
+
+      if (["edit", "view"].includes(type)) {
+        getDetail(this.form.id).then(res => {
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      getCommunityList('/640000').then(res=>{
+        this.communityCount = res.data.data;
+        console.log(this.communityCount,"打印communityCount");
+        this.communityStatistics.data[0].count = this.communityCount.agencyCount;
+        this.communityStatistics.data[1].count = this.communityCount.residentialCount;
+        this.communityStatistics.data[2].count = this.communityCount.buildingCount;
+        this.communityStatistics.data[3].count = this.communityCount.userCount;
+      });
+      this.loading = true;
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/views/businessmng/agencymng/agency.vue

@@ -1,518 +1,70 @@
 <template>
-  <basic-container>
-
-<!--卡片数据展示-->
-    <el-card style="margin-bottom: 20px">
-        <el-tabs type="border-card">
-          <el-tab-pane label="园区数据统计">
-            <div><avue-data-box :option="communityStatistics"></avue-data-box></div>
-          </el-tab-pane>
-        </el-tabs>
-    </el-card>
-
-    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
-               :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
-               @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
-               @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.agency_delete" @click="handleDelete">删 除</el-button>
-        <cy-excel-import :flag="1" file-name="园区信息导入模板" @success="onLoad(page)"></cy-excel-import>
-      </template>
-      <template slot="mapSelectForm" slot-scope="scope">
-        <div>
-          <!--          <input class="el-input&#45;&#45;small el-input__inner" placeholder="选择地址" @click="mapVisible = true">-->
-          <el-button @click="mapVisible = true"> 选择地址</el-button>
-          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
-                     title="编辑地址" width="80%">
-            <editPolygonMap v-if="mapVisible" :editForm.sync="scope.row" :region.sync="scope.row.address" :latitude.sync="scope.row.latitude" :longitude.sync="scope.row.longitude" :visible.sync="mapVisible"></editPolygonMap>
-          </el-dialog>
+  <div class="page">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <!-- 宫格功能 -->
+        <grid-list></grid-list>
+        <!-- 业务管理 -->
+        <operation></operation>
+        <div style="display: flex;width: 100%;">
+          <!-- 通行记录 -->
+          <access-records></access-records>
+          <!-- 设备管理 -->
+          <device></device>
         </div>
-      </template>
-    </avue-crud>
-  </basic-container>
-</template>
-
-<script>
-import {
-  getList,
-  getDetail,
-  add,
-  update,
-  remove
-} from "@/api/community/agency.js";
-import {getCommunityList} from "../../../api/grid/index";
-import {
-  mapGetters
-} from "vuex";
-import {
-  validatePhone
-} from "@/util/validator"
-import CyExcelImport from "../../../components/excel/cy-excel-import"
-import editPolygonMap from "../../../components/residential/editPolygonMap.vue"
-import {getDetail as getRegDetail} from "@/api/base/region"
-export default {
-  components: {CyExcelImport,editPolygonMap},
-  data() {
-    return {
-      communityCount:{},
-      mapVisible:false,
-      areaData: [],
-      form: {},
-      query: {},
-      loading: true,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      //数据展示
-      communityStatistics:{
-        span:6,
-        data: [
-          {
-            title: '园区数量',
-            count: 0,
-            icon: 'el-icon-office-building',
-            color: 'rgb(49, 180, 141)',
-          },
-          {
-            title: '区域数量',
-            count: 0,
-            icon: 'el-icon-school',
-            color: 'rgb(56, 161, 242)',
-          },
-          {
-            title: '楼宇数量',
-            count: 0,
-            icon: 'el-icon-s-home',
-            color: 'rgb(117, 56, 199)',
-          },
-          {
-            title: '住户数量',
-            count: 0,
-            icon: 'el-icon-user-solid',
-            color: 'rgb(143,119,0)',
-          },
-        ]
-      },
+        <div style="display: flex;width: 100%;">
+          <!-- 空气质量检测 -->
+          <air-quality style="word-break: 40%;"></air-quality>
+          <!-- 能耗统计 -->
+          <energy style="word-break: 40%;"></energy>
+        </div>
+      </el-col>
 
-      selectionList: [],
-      option: {
-        height: 'auto',
-        // calcHeight: 60,
-        tip: false,
-        searchShow: true,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        viewBtn: true,
-        selection: true,
-        dialogClickModal: false,
-        menuWidth:350,
-        column: [{
-          label: "名称",
-          prop: "name",
-          search: true,
-          width: 160,
-          overHidden: true,
-          rules: [{
-            required: true,
-            message: "请输入名称",
-            trigger: "blur"
-          }]
-        },
-          {
-            label:'',
-            prop:'mapSelect',
-            viewDisplay: false,
-            formslot: true,
-            hide: true,
-          },
-          {
-            label: "经度",
-            prop: "longitude",
-            width: 120,
-            hide: true,
-            rules: [{
-              required: false,
-              message: "请输入经度",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "纬度",
-            prop: "latitude",
-            width: 120,
-            hide: true,
-            rules: [{
-              required: false,
-              message: "请输入纬度",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "所属省",
-            prop: "regionProvince",
-            type: "select",
-            width: 150,
-            dicUrl: "/api/blade-system/region/lazy-tree?parentCode=000000",
-            cascaderItem:["regionCity"],
-            props:{
-              label:"title",
-              value: "id"
-            },
-            rules: [{
-              required: true,
-              message: "请选择所属省份",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "所属市",
-            prop: "regionCity",
-            type: "select",
-            width: 150,
-            dicFlag: true,
-            cascaderItem: ["regionArea"],
-            dicUrl: `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
 
-            props:{
-              label: "title",
-              value: "id"
-            },
-            rules: [{
-              required: false,
-              message: "请选择所属市",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "所属区",
-            prop: "regionArea",
-            type: "select",
-            width: 150,
-            cascaderItem: ["regionStreet"],
-            dicUrl:  `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
-            props: {
-              label: "title",
-              value: "id"
-            },
-            rules: [{
-              required: false,
-              message: "请选择所属区",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "所属街道",
-            prop: "regionStreet",
-            type:"select",
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <work-order></work-order>
+      </el-col>
 
-            width: 150,
-            dicUrl: `/api/blade-system/region/lazy-tree?parentCode={{key}}`,
-            props: {
-              label: "title",
-              value: "id"
-            },
 
-            rules: [{
-              required: true,
-              message: "请选择所属街道",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "详细地址",
-            search: true,
-            prop: "address",
-            type: "textarea",
-            maxRows: 2,
-            // width: 300,
-            overHidden: true,
-            rules: [{
-              required: false,
-              message: "请输入详细地址",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "负责人名称",
-            prop: "personName",
-            width: 210,
-            labelWidth: 100,
-            rules: [{
-              required: false,
-              message: "请输入负责人名称",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "联系方式",
-            prop: "personPhone",
-            width: 120,
-            rules: [{
-              required: false,
-              message: "请输入负责人联系方式",
-              trigger: "blur"
-            }, {
-              validator: validatePhone,
-              trigger: "blur"
-            }],
-          },
-          {
-            label: "背景图",
-            prop: "pic",
-            type: 'upload',
-            hide: true,
-            propsHttp: {
-              res: "data",
-              url: 'link'
-            },
-            listType: 'picture-img',
-            span: 24,
-            row: true,
-            action: "/api/blade-resource/oss/endpoint/put-file",
-            display: true,
-            tip:"上传图片不能超过500K",
-            rules: [{
-              required: false,
-              message: "请上传封面图片",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "小区数量",
-            prop: "residentialCount",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "楼栋数量",
-            prop: "buildingCount",
-            hide: true,
-            display: false,
-          },
-          {
-            label: "单元数量",
-            prop: "unitCount",
-            hide: true,
-            display: false,
-          },
-          {
-            label: "楼层数量",
-            prop: "floorCount",
-            hide: true,
-            display: false,
-          },
-          {
-            label: "房间数量",
-            prop: "roomCount",
-            hide: true,
-            display: false,
-          },
-          {
-            label: "人员数量",
-            prop: "personCount",
-            hide: true,
-            display: false,
-          },
+    </el-row>
+  </div>
+</template>
 
-          {
-            label: "备注",
-            prop: "remark",
-            hide: true,
-          },
-        ]
-      },
-      data: []
-    };
-  },
-  computed: {
-    ...mapGetters(["permission"]),
-    permissionList() {
+<script>
+  import operation from "./comps/operation.vue"
+  import gridList from "./comps/grid_list.vue"
+  import workOrder from './comps/work_order.vue'
+  import accessRecords from './comps/access_records.vue'
+  import device from './comps/device.vue'
+  import airQuality from './comps/air_quality.vue'
+  import energy from  './comps/energy.vue'
+  export default {
+    components: {
+      gridList,
+      workOrder,
+      operation,
+      accessRecords,
+      device,
+      airQuality,
+      energy
+    },
+    data() {
       return {
-        addBtn: this.vaildData(this.permission.agency_add, false),
-        viewBtn: this.vaildData(this.permission.agency_view, false),
-        delBtn: this.vaildData(this.permission.agency_delete, false),
-        editBtn: this.vaildData(this.permission.agency_edit, false)
+
       };
-    },
-    ids() {
-      let ids = [];
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id);
-      });
-      return ids.join(",");
-    },
-  },
-  watch: {
-    'form.address': {
-      handler: function(value) {
-        if (!value){
-          return
-        }else{
-          var _this = this
-          AMap.plugin('AMap.Geocoder', function() {
-            var geocoder = new AMap.Geocoder({})
-            let lnglat = [_this.form.longitude,_this.form.latitude]
-            geocoder.getAddress(lnglat, function(status, result) {
-              if (status === 'complete'&&result.regeocode&&result.regeocode.addressComponent.township) {
-                let parentCode = result.regeocode.addressComponent.adcode
-                let name = result.regeocode.addressComponent.township
-                getRegDetail({"name":name,"regionLevel":"4","parentCode":parentCode}).then((res)=>{
-                  let data = res.data.data
-                  let obj = {}
-                  obj['regionProvince'] = data.provinceCode
-                  obj['regionCity']  = data.cityCode
-                  obj['regionArea'] = data.districtCode
-                  obj['regionStreet'] = data.code
-                  _this.form = obj
-                })
-              }
-            })
-          })
-        }
-      },
-    },
-    'form.mapSelect': {
-      handler: function(value) {
-        if (!value){
-          return
-        }else{
-          this.form.longitude = this.form.mapSelect.longitude;
-          this.form.latitude = this.form.mapSelect.latitude;
-          this.form.address = this.form.mapSelect.formattedAddress;
-        }
-      },
     }
-  },
-  methods: {
-    rowSave(row, done, loading) {
-      row.residentialCount = 0;
-      row.unitCount = 0;
-      row.roomCount = 0;
-      row.personCount = 0;
-      row.carCount = 0;
-      add(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        loading();
-        window.console.log(error);
-      });
-    },
-    rowUpdate(row, index, done, loading) {
-      update(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        loading();
-        console.log(error);
-      });
-    },
-    rowDel(row) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(row.id);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        });
-    },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning("请选择至少一条数据");
-        return;
-      }
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(this.ids);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          this.$refs.crud.toggleSelection();
-        });
-    },
-    beforeOpen(done, type) {
+  };
+</script>
 
-      if (["edit", "view"].includes(type)) {
-        getDetail(this.form.id).then(res => {
-          this.form = res.data.data;
-        });
-      }
-      done();
-    },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
-    },
-    selectionChange(list) {
-      this.selectionList = list;
-    },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    onLoad(page, params = {}) {
-      getCommunityList('/640000').then(res=>{
-        this.communityCount = res.data.data;
-        console.log(this.communityCount,"打印communityCount");
-        this.communityStatistics.data[0].count = this.communityCount.agencyCount;
-        this.communityStatistics.data[1].count = this.communityCount.residentialCount;
-        this.communityStatistics.data[2].count = this.communityCount.buildingCount;
-        this.communityStatistics.data[3].count = this.communityCount.userCount;
-      });
-      this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = res.data.data;
-        this.page.total = data.total;
-        this.data = data.records;
-        this.loading = false;
-        this.selectionClear();
-      });
-    }
+<style lang="scss">
+  .page {
+    background-color: #F5F5F5;
+    height: 100%;
   }
-};
-</script>
 
-<style>
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
 </style>

src/views/businessmng/agencymng/comps/access_records.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="page">
+    <more title="通行记录"></more>
+    <div class="area">
+      <div class="area1">日期</div>
+      <div class="area2">内部通行人数</div>
+      <div class="area3">访客</div>
+      <div class="area4">车辆</div>
+      <div class="area5">平均逗留时间</div>
+    </div>
+
+    <div v-for="(item,index) in 7" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
+      <div class="area1">2021-12-21</div>
+      <div class="area2">3312</div>
+      <div class="area3">313</div>
+      <div class="area4">344</div>
+      <div class="area5">03:02:28</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "./more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    margin: 0 0 0.625rem 0.625rem;
+    padding: 1.25rem;
+    height: 27rem;
+  }
+
+
+  .area {
+    padding: 0.5rem 0;
+    display: flex;
+    font-size: 0.875rem;
+    color: #666666;
+    margin-top: 1rem;
+    text-align: center;
+
+    .area1 {
+      width: 22%;
+    }
+
+    .area2 {
+      width: 22%;
+    }
+
+    .area3 {
+      width: 22%;
+    }
+
+    .area4 {
+      width: 22%;
+    }
+
+    .area5 {
+      width: 22%;
+    }
+  }
+</style>

src/views/businessmng/agencymng/comps/air_quality.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="page">
+    <more title="空气质量检测"></more>
+    <div class="area-box">
+      <div class="area">
+        <div class="area1"></div>
+        <div class="area2">评定时间</div>
+        <div class="area3">污染级别</div>
+        <div class="area4">AQI</div>
+        <div class="area5">首要污染物</div>
+      </div>
+
+      <div class="area">
+        <div class="area1">全市</div>
+        <div class="area2">09-21 23:44</div>
+        <div class="area3">一级</div>
+        <div class="area4">38</div>
+        <div class="area5">暂无</div>
+      </div>
+
+      <div class="area">
+        <div class="area1">全区</div>
+        <div class="area2">09-21 23:44</div>
+        <div class="area3">一级</div>
+        <div class="area4">38</div>
+        <div class="area5">暂无</div>
+      </div>
+    </div>
+
+    <div style="height: 17rem;margin-top: 1.25rem;width: 100%;">
+      <div class="full" id="airCharts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import more from "./more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        var myCharts = echarts.init(document.getElementById('airCharts'));
+        window.addEventListener('resize', function() {
+          myCharts.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            }
+          },
+          legend: {
+            data: ['全市AQI', '园区AQI']
+          },
+          grid: {
+            left: '4%',
+            right: '0%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            boundaryGap: false,
+            data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '18:00', '21:00', '24:00']
+          }],
+          yAxis: [{
+            type: 'value'
+          }],
+          series: [{
+              name: '全市AQI',
+              type: 'line',
+              stack: 'Total',
+              areaStyle: {},
+              emphasis: {
+                focus: 'series'
+              },
+              data: [120, 132, 101, 134, 90, 230, 210,156,145,168]
+            },
+            {
+              name: '园区AQI',
+              type: 'line',
+              stack: 'Total',
+              areaStyle: {},
+              emphasis: {
+                focus: 'series'
+              },
+              data: [220, 182, 191, 234, 290, 330, 310,132,156,148]
+            },
+          ]
+        };
+        option && myCharts.setOption(option);
+
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .page {
+    background-color: #FFFFFF;
+    margin: 0 0 1.875rem 0.625rem;
+    padding: 1.25rem;
+    height: 28rem;
+  }
+
+  .area-box {
+    margin-top: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .area {
+    background-color: #F5F5F5;
+    color: #666666;
+    width: 90%;
+    padding: 0.6rem 0.5rem;
+    display: flex;
+    text-align: center;
+    font-size: 0.8rem;
+
+    .area1 {
+      width: 24%;
+    }
+
+    .area2 {
+      width: 24%;
+    }
+
+    .area3 {
+      width: 24%;
+    }
+
+    .area4 {
+      width: 24%;
+    }
+
+    .area5 {
+      width: 24%;
+    }
+  }
+</style>

src/views/businessmng/agencymng/comps/device.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="page">
+    <more title="设备管理"></more>
+    <div class="card">
+      <div class="item" style="margin-right: 0;width: 44%;" v-for="(item,index) in list" :key="index">
+        <div class="left center">
+          <img :src="item.icon">
+          <div class="data">
+            <div>{{item.name}}</div>
+            <div>{{item.total}}个</div>
+          </div>
+        </div>
+        <div class="right center">
+          <div>在线：{{item.online}}</div>
+          <div>离线：{{item.offline}}</div>
+          <div>告警：{{item.warn}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "./more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+            name: '摄像头',
+            icon: '/img/grid/sxt.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '井盖',
+            icon: '/img/grid/jg.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '智慧路灯',
+            icon: '/img/grid/zhld.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '智能垃圾桶',
+            icon: '/img/grid/znljt.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '智能地磁',
+            icon: '/img/grid/zndc.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '智能门磁',
+            icon: '/img/grid/znmc.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '智能烟感',
+            icon: '/img/grid/znyg.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          },
+          {
+            name: '消防栓',
+            icon: '/img/grid/xfs.png',
+            total: 32,
+            online: 32,
+            offline: 1,
+            warn: 12
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    margin:0 0.625rem 0 0.625rem;
+    padding: 1.25rem;
+    height: 27rem;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card {
+    margin-top: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      width: 43%;
+      height: 60px;
+      background-color: #f5f5f5;
+      padding: 0.625rem;
+      margin: 0.625rem;
+      margin-top: 0;
+
+      .left {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 2.4rem;
+          height: 2.4rem;
+          border-radius: 50%;
+        }
+
+        .data {
+          padding-left: 0.5rem;
+
+          div:first-child {
+            font-weight: 800;
+            color: #333333;
+            font-size: 0.9rem;
+          }
+
+          div:last-child {
+            color: #666666;
+            font-size: 0.625rem;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        font-size: 0.75rem;
+        color: #666666;
+
+        div {
+          margin-bottom: 0.25rem;
+        }
+      }
+    }
+
+  }
+</style>

src/views/businessmng/agencymng/comps/energy.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="page">
+    <more title="能耗统计"></more>
+    <tab></tab>
+    <div class="full">
+      <div class="full" id="energyCharts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import tab from "./tab.vue"
+  import * as echarts from 'echarts';
+  import more from "./more.vue"
+  export default {
+    components: {
+      more,
+      tab
+    },
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        var myCharts = echarts.init(document.getElementById('energyCharts'));
+        window.addEventListener('resize', function() {
+          myCharts.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          color: ['#4196f2', '#4196f2', '#4196f2', '#4196f2', '#4196f2', '#4196f2', ],
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar'
+          }]
+        };
+        option && myCharts.setOption(option);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    height: 100%;
+    width: 100%;
+  }
+
+  .page {
+    background-color: #FFFFFF;
+    margin: 0 0.625rem 1.875rem 0.625rem;
+    padding: 1.25rem;
+    height: 28rem;
+  }
+</style>

src/views/businessmng/agencymng/comps/grid_list.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 宫格功能 -->
+  <div style="margin: 0.625rem;margin-top: 0;">
+    <div class="my-grid">
+      <div @click="selected(item,index)" :id="'id'+index" class="item" v-for="(item,index) in list" :key="index">
+        <img :src="item.icon" class="animate__animated animate__faster"
+         :class="activedIndex == index ? 'animate__heartBeat': ''">
+        <label>{{item.name}}</label>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        activedIndex: 0,
+        list: [{
+            icon: '/img/grid/xzgs.png',
+            name: '新增公司'
+          },
+          {
+            icon: '/img/grid/xzyg.png',
+            name: '新增员工'
+          },
+          {
+            icon: '/img/grid/zclr.png',
+            name: '资产录入'
+          },
+          {
+            icon: '/img/grid/gdlr.png',
+            name: '工单录入'
+          },
+          {
+            icon: '/img/grid/wybx.png',
+            name: '物业报修'
+          },
+          {
+            icon: '/img/grid/fksh.png',
+            name: '访客审核'
+          },
+          {
+            icon: '/img/grid/zhsh.png',
+            name: '住户审核'
+          },
+          {
+            icon: '/img/grid/wyjf.png',
+            name: '物业缴费'
+          }
+        ]
+      };
+    },
+    methods: {
+      selected(item, index) {
+        this.activedIndex = index
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .borderShadow {
+    box-shadow: none;
+  }
+
+  .my-grid {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+
+    .item {
+      background-color: #FFFFFF;
+      width: 9rem;
+      height: 6.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+
+      img {
+        width: 3.2rem;
+        height: 3.2rem;
+      }
+
+      label {
+        margin-top: 0.625rem;
+        color: #333333;
+        font-size: 0.75rem;
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+
+
+    }
+
+
+
+  }
+</style>

src/views/businessmng/agencymng/comps/more.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="title-container">
+    <div class="title">{{title}}</div>
+    <div class="more" v-if="!nomore">更多 ></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: String,
+      nomore:Boolean
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .title-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      margin-left: 0.625rem;
+      position: relative;
+      font-size: 1.2rem;
+      font-weight: 800;
+      color: #000000;
+      &:before {
+        content: '';
+        width: 4px;
+        height: 20px;
+        background-color: #3B8FF4;
+        position: absolute;
+        left: -0.6rem;
+        top: 0.28rem;
+      }
+    }
+    .more {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
+      color: #666666;
+      font-size: 0.8rem;
+    }
+
+  }
+</style>

src/views/businessmng/agencymng/comps/operation.vue

@@ -0,0 +1,219 @@
+<template>
+  <div style="background-color: #FFFFFF;height: 300px;margin: 10px;">
+    <div style="display: flex;width: 100%;height: 100%;">
+      <!-- 左布局 -->
+      <div style="padding: 1.1rem;width: calc(48% - 10px);">
+        <more title="业务管理" nomore style="padding: 0;"></more>
+        <div style="padding-top: 1.8rem;display: flex;">
+          <img src="/img/test/yq.png" style="width: 110px;height: 82px;">
+          <div style="padding-left: 1rem;display: flex;flex-direction: column;justify-content: center;">
+            <div style="font-size: 1.1rem;color: #333333;font-weight: 800;">信阳容基软件园</div>
+            <div class="num" style="display: flex;">
+              <dv-digital-flop :config="totalConfig" style="width:88px;height:50px;" />
+              <div class="symbol">m²</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="data-box">
+          <div class="item" v-for="(item,index) in dataList" :key="index">
+            <div class="name">{{item.name}}</div>
+            <div class="value" style="display: flex;justify-content: center;align-items: center;">
+              <dv-digital-flop :config="dataConfig" style="width:100px;height:30px;" />
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <!-- 分割线 -->
+      <div
+        style="width: 10px;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
+        <div style="background-color: #F5F5F5;height: 220px;width: 100%;"></div>
+      </div>
+      <!-- 右布局 -->
+      <div style="width: calc(50%);height: 100%;">
+        <div style="width: 100%;height: 100%;" id="myCharts"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import more from "./more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        totalConfig: {
+          textAlign: 'left',
+          style: {
+            fill: '#3B8FF4'
+          },
+          number: [0],
+        },
+        dataConfig: {
+          style: {
+            fontSize: 22,
+            fill: '#3B8FF4'
+          },
+          number: [0,0,0,0]
+        },
+        dataList: [{
+            name: '入驻企业',
+            value: 6666
+          },
+          {
+            name: '办公人数',
+            value: 38956
+          },
+          {
+            name: '办公区域(m²)',
+            value: 6666
+          },
+          {
+            name: '入驻率',
+            value: '82%'
+          }
+        ]
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+        _this.initDigital()
+      }, 300)
+    },
+    methods: {
+      initDigital() {
+        this.totalConfig = {
+          textAlign: 'left',
+          style: {
+            fill: '#3B8FF4'
+          },
+          number: [25862],
+        }
+
+        this.dataConfig={
+          style: {
+            fontSize: 20,
+            fill: '#3B8FF4'
+          },
+          number: [895,236,456,257]
+        }
+      },
+      // echarts图表 begin
+      initMyCharts() {
+        var myCharts = echarts.init(document.getElementById('myCharts'));
+        window.addEventListener('resize', function() { //执行
+          myCharts.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a}<br/>{b} : {c} ({d}%)'
+          },
+          textStyle: {
+            color: "white",
+            fontWeight: 100,
+            fontSize: 12,
+          },
+          legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            textStyle: {
+              color: "#777777",
+              fontWeight: 500,
+              fontSize: 12
+            },
+            right: 40,
+            top: 40,
+            data: ['商务服务', '科研服务', '信息技术', '批发零售', '制造业'],
+            selected: '商务服务',
+          },
+          color: ['#469af2', '#51F9FF', '#ED8A35', '#ee6666', '#91cc75'],
+          series: [{
+            name: '类型',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            center: ['40%', '50%'],
+            avoidLabelOverlap: false,
+            data: [{
+                name: '商务服务',
+                value: '30000'
+              },
+              {
+                name: '科研服务',
+                value: '30000'
+              },
+              {
+                name: '信息技术',
+                value: '10000'
+              },
+              {
+                name: '批发零售',
+                value: '45000'
+              },
+              {
+                name: '制造业',
+                value: '30000'
+              }
+            ],
+          }]
+        }
+        option && myCharts.setOption(option);
+      },
+      // echarts图表 end
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .data-box {
+    padding-top: 40px;
+    display: flex;
+    justify-content: space-around;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+
+      .name {
+        color: #666666;
+        font-size: 0.9rem;
+      }
+
+      .value {
+        padding-top: 0.2rem;
+        color: #3B8FF4;
+        font-size: 1.25rem;
+      }
+
+    }
+  }
+
+  .num {
+    padding-top: 0.8rem;
+    font-size: 1.66rem;
+    color: #3B8FF4;
+    position: relative;
+
+    .symbol {
+      font-size: 0.6em;
+      color: #666666;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 0.4rem;
+    }
+  }
+</style>

src/views/businessmng/agencymng/comps/tab.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <!-- 胶囊标签 -->
+    <div style="display: flex;justify-content: center;padding-top: 0.625rem;">
+      <div class="tab-container">
+        <div @click="select(index)" v-for="(item,index) in list" :key="index" class="tab"
+          :class="{'actived':activedIndex==item.value,'tab-left':index == 0,'tab-right':index==(list.length - 1)}">
+          <div class="animate__animated animate__faster" :class="activedIndex==item.value?'animate__heartBeat':''">{{item.label}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data() {
+      return {
+        activedIndex: 0,
+        list: [{
+            label: '水',
+            value: 0
+          },
+          {
+            label: '电',
+            value: 1
+          },
+          {
+            label: '燃气',
+            value: 2
+          },
+          {
+            label: '热能',
+            value: 3
+          }
+        ]
+      };
+    },
+    methods:{
+      select(index) {
+        this.activedIndex = index
+        this.$emit('click', index)
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tab-container {
+    cursor: pointer;
+    color: #3B8FF4;
+    display: flex;
+    justify-content: center;
+    height: 28px;
+    font-size: 12px;
+    overflow: hidden;
+    line-height: 28px;
+
+    .tab {
+      overflow: hidden;
+      border: 1px solid #3B8FF4;
+      border-right: none;
+      width: 3rem;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      color: #3B8FF4;
+
+      &:last-child {
+        border-right: 1px solid #3B8FF4;
+      }
+    }
+
+
+    .tab-left {
+      border-radius: 80px 0 0 80px;
+    }
+
+    .tab-right {
+      border-radius: 0 80px 80px 0;
+    }
+
+    .actived {
+      background-color: #3B8FF4;
+      color: #FFFFFF;
+    }
+  }
+</style>

src/views/businessmng/agencymng/comps/work_order.vue

@@ -0,0 +1,111 @@
+<template>
+  <div style="background-color: #FFFFFF;padding: 1rem;">
+    <more title="工单管理"></more>
+    <!-- 胶囊标签 -->
+    <div style="display: flex;justify-content: center;padding-top: 0.625rem;">
+      <div class="tab-container">
+        <div @click="select(0)"  :class="workOrderIndex==0?'actived':''" class="tab tab-left">
+          <div class="animate__animated animate__faster" :class="workOrderIndex==0?'animate__heartBeat':''">设备工单</div>
+        </div>
+        <div @click="select(1)" :class="workOrderIndex==1?'actived':''" class="tab tab-right">
+          <div class="animate__animated animate__faster" :class="workOrderIndex==1?'animate__heartBeat':''">保修工单</div>
+        </div>
+      </div>
+    </div>
+    <!-- 工单列表 -->
+    <div style="padding-top: 0.5rem;">
+      <div class="card" v-for="(item,index) in 12" :key="index">
+        <div class="left">
+          <div class="title">电梯一级告警</div>
+          <el-tag style="border-radius: 10px;" size="mini">未处理</el-tag>
+        </div>
+
+        <div class="right">
+          <el-tag style="border-radius: 10px;margin-bottom: 0.4rem;"  size="mini" type="danger">设备告警</el-tag>
+          <div style="font-size: 0.75rem;">2021-03-15 22:40</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import more from "./more.vue"
+  export default {
+    components:{
+      more
+    },
+    data() {
+      return {
+        workOrderIndex: 0
+      };
+    },
+    methods: {
+      select(index) {
+        this.workOrderIndex = index
+        this.$emit('click', index)
+      }
+    }
+  };
+</script>
+
+
+<style lang="scss" scoped>
+  .card {
+    background-color: #F5F5F5;
+    display: flex;
+    justify-content: space-between;
+    margin:15px 5px;
+    padding: 15px;
+
+    .left {
+      text-align: left;
+
+      .title{
+        font-size: 0.8rem;
+        font-weight: 800;
+        color: #000000;
+      }
+    }
+
+    .right {
+      text-align: right;
+    }
+  }
+
+  .tab-container {
+    cursor: pointer;
+    color: #3B8FF4;
+    display: flex;
+    justify-content: center;
+    width: 160px;
+    height: 30px;
+    font-size: 12px;
+    overflow: hidden;
+    line-height: 30px;
+
+    .tab {
+      overflow: hidden;
+      border: 1px solid #3B8FF4;
+      width: 50%;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      color: #3B8FF4;
+    }
+
+    .tab-left {
+      border-radius: 80px 0 0 80px;
+    }
+
+    .tab-right {
+      border-radius: 0 80px 80px 0;
+    }
+
+    .actived {
+      background-color: #3B8FF4;
+      color: #FFFFFF;
+    }
+  }
+</style>

src/views/intelligent-operation/intelligent-operation.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div class="grid-content bg-purple"></div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple"></div>
+      </el-col>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .el-col {
+    border-radius: 4px;
+  }
+
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+
+  .bg-purple {
+    background: #d3dce6;
+  }
+
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>

src/views/wel/index-old.vue

@@ -1,11 +1,20 @@
 <template>
-  <basic-container style="margin-top: 10px;">
-    <avue-data-card :option="option"></avue-data-card>
-  </basic-container>
+  <div  class="full animate__animated animate__faster"
+    :class="menuIndex == 0 ? 'animate__fadeInLeftBig' : 'animate__fadeOutLeftBig'">
+    <basic-container style="margin-top: 10px;">
+      <avue-data-card :option="option"></avue-data-card>
+    </basic-container>
+  </div>
 </template>
 
 <script>
+  import {
+    mapGetters
+  } from "vuex";
   export default {
+    computed: {
+      ...mapGetters(["menuIndex"])
+    },
     data() {
       return {
         option: {
@@ -97,6 +106,8 @@
   }
 </script>
 
+
+
 <style scoped lang="scss">
   /deep/ .data-card .item {
     position: relative;