整体布局

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_SCREEN=dev

.env.production

@@ -0,0 +1,3 @@
+NODE_ENV=production
+
+VUE_APP_SCREEN=prod

.env.production.sit

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_SCREEN=prod:sit

.env.production.uat

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_SCREEN=prod:uat

src/api/index.js

@@ -0,0 +1,14 @@
+import request from 'utils/request'
+import config from 'utils/config'
+
+const baseURL = config.screenBaseUrl
+
+// 获取下拉框组织机构tree
+export function getOrgTree() {
+  return request({
+    baseURL,
+    url: '/shibei/data/report/screen/agency/tree',
+    method: 'POST',
+    data: {}
+  })
+}

src/components/screen-dropdown-menu/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="screen-dropdown-menu"
-       :style="{height: dropdownMenuVisible ? dataList.length > 4 ? '260px' : `${dataList.length * 50 + 10}px` : '0px', opacity: dropdownMenuVisible ? '1' : '0', '--top': top }">
+       :style="{height: dropdownMenuVisible ? dataList.length > 4 ? '260px' : `${dataList.length * 50 }px` : '0px', opacity: dropdownMenuVisible ? '1' : '0', '--top': top }">
     <div class="screen-dropdown-menu-border"
          :style="{overflowY: dataList.length > 5 ? 'auto' : 'hidden'}">
       <div :class="['screen-dropdown-menu-item', item.select ? 'screen-dropdown-menu-item-active' : '']"
@@ -8,7 +8,7 @@
            v-for="item in dataList"
            :key="item.value">{{item.label}}</div>
     </div>
-    <div class="screen-dropdown-menu-arrow"></div>
+    <!-- <div class="screen-dropdown-menu-arrow"></div> -->
   </div>
 </template>
 
@@ -92,6 +92,7 @@ export default {
 <style lang="scss" scoped>
 .screen-dropdown-menu {
   width: 100%;
+
   position: absolute;
   // box-shadow: 0 2px 12px 0 #5c7bc7;
   border: 1px solid #00a4b9;
@@ -109,23 +110,22 @@ export default {
     overflow-y: auto;
     border-radius: 4px;
     box-sizing: border-box;
-    padding: 10px 0 0;
+    // padding: 10px 0 0;
     &::-webkit-scrollbar {
       /*滚动条整体样式*/
-      width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
       height: 1px;
     }
     &::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
-      border-radius: 10px;
+      background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%);
-      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
-      background: #2bccff;
     }
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
-      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-      border-radius: 10px;
+      background: #428ba2;
-      background: #061836;
+      border-radius: 3px;
     }
   }
   &-item {

src/components/screen-title/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-title">
+    <img v-if="type==='long'"
+         class="screen-title-image"
+         src="./../../assets/icon/title-content.png" />
+    <img v-else
+         class="screen-title-image"
+         src="./../../assets/icon/title-content-half.png" />
+    <div class="screen-title-name"> {{titleName}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'screen-title',
+  data () {
+    return {
+      dataList: [],
+      dropdownMenuVisible: true
+    }
+  },
+  props: {
+    titleName: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'long'
+    }
+
+  },
+  watch: {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-title {
+  height: 50px;
+  width: 620px;
+  overflow: hidden;
+  position: relative;
+
+  &-image {
+    height: 100%;
+  }
+  &-name {
+    position: absolute;
+    top: 10px;
+    left: 49px;
+    letter-spacing: 2px;
+
+    font-size: 22px;
+    font-family: MF LangQian (Noncommercial);
+    font-weight: bold;
+    font-style: italic;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px #009ba9;
+  }
+}
+</style>

src/store/getter.js

@@ -1,26 +1,14 @@
 const getter = {
-  scale: state => state.basic.scale,
+  scale: (state) => state.basic.scale,
-  agencyId: state => state.anningScreen.agencyId,
+  agencyId: (state) => state.anningScreen.agencyId,
-  monthId: state => state.anningScreen.monthId,
+  monthId: (state) => state.anningScreen.monthId,
-  shibeiScale: state => state.shibeiScreen.shibeiScale,
+  shibeiScale: (state) => state.shibeiScreen.shibeiScale,
-  shibeiAId: state => state.shibeiScreen.shibeiAId,
+  shibeiAId: (state) => state.shibeiScreen.shibeiAId,
-  shibeiAgencyType: state => state.shibeiScreen.shibeiAgencyType,
+  shibeiName: (state) => state.shibeiScreen.shibeiName,
-  shibeiMapCenter: state => state.shibeiScreen.shibeiMapCenter,
+  shibeiAgencyType: (state) => state.shibeiScreen.shibeiAgencyType,
-  projectBoxVisible: state => state.shibeiScreen.projectBoxVisible,
+  shibeiMapCenter: (state) => state.shibeiScreen.shibeiMapCenter,
-  projectId: state => state.shibeiScreen.projectId,
+  projectBoxVisible: (state) => state.shibeiScreen.projectBoxVisible,
-  standardScale: state => state.standardScreen.standardScale,
+  projectId: (state) => state.shibeiScreen.projectId
-  standardAId: state => state.standardScreen.standardAId,
-  standardAgencyType: state => state.standardScreen.standardAgencyType,
-  standardMapCenter: state => state.standardScreen.standardMapCenter,
-  standardProjectBoxVisible: state => state.standardScreen.standardProjectBoxVisible,
-  standardProjectId: state => state.standardScreen.standardProjectId,
-  luzhouScale: state => state.luzhouScreen.luzhouScale,
-  luzhouAId: state => state.luzhouScreen.luzhouAId,
-  luzhouAgencyType: state => state.luzhouScreen.luzhouAgencyType,
-  luzhouMapCenter: state => state.luzhouScreen.luzhouMapCenter,
-  changjiangScale: state => state.changjiangScreen.changjiangScale,
-  changjiangDeptId: state => state.changjiangScreen.changjiangDeptId,
-  changjiangDeptName: state => state.changjiangScreen.changjiangDeptName
 }
 
 export default getter

src/store/modules/shibeiScreen.js

@@ -3,6 +3,7 @@ export default {
     shibeiScale: 1,
     shibeiAId: '1175270520603930625',
     // shibeiAId: '66f3987a8ea0261a6693689689f9e56b',
+    shibeiName: '市北区委',
     shibeiAgencyType: 'district',
     shibeiMapCenter: [120.364165, 36.103091],
     // shibeiMapCenter: [120.312565, 36.021688],
@@ -10,46 +11,53 @@ export default {
     projectId: '' // 难点堵点项目id
   },
   mutations: {
-    set_shibeiScale (state, shibeiScale) {
+    set_shibeiScale(state, shibeiScale) {
       state = Object.assign(state, { shibeiScale })
     },
     // 组织机构id
-    set_shibeiAgencyId (state, agencyId) {
+    set_shibeiAgencyId(state, agencyId) {
       state.shibeiAId = agencyId
     },
+    // 组织机构名称
+    set_shibeiAgencyName(state, agencyName) {
+      state.shibeiName = agencyName
+    },
     // 组织机构类型（街道-district，社区-community， 网格-grid）
-    set_shibeiAgencyType (state, shibeiAgencyType) {
+    set_shibeiAgencyType(state, shibeiAgencyType) {
       state.shibeiAgencyType = shibeiAgencyType
     },
-    set_shibeiMapCenter (state, shibeiMapCenter) {
+    set_shibeiMapCenter(state, shibeiMapCenter) {
       state.shibeiMapCenter = shibeiMapCenter
     },
     // 难点堵点项目详情弹窗visible
-    set_projectBoxVisible (state, projectBoxVisible) {
+    set_projectBoxVisible(state, projectBoxVisible) {
       state.projectBoxVisible = projectBoxVisible
     },
     // 难点堵点项目id
-    set_projectId (state, projectId) {
+    set_projectId(state, projectId) {
       state.projectId = projectId
     }
   },
   actions: {
-    SET_SHIBEISCALE ({ commit }, shibeiScale) {
+    SET_SHIBEISCALE({ commit }, shibeiScale) {
       commit('set_shibeiScale', shibeiScale)
     },
-    SET_SHIBEIAGENCYID ({ commit }, agencyId) {
+    SET_SHIBEIAGENCYID({ commit }, agencyId) {
       commit('set_shibeiAgencyId', agencyId)
     },
-    SET_SHIBEIAGENCYTYPE ({ commit }, agencyType) {
+    SET_SHIBEIAGENCYNAME({ commit }, agencyName) {
+      commit('set_shibeiAgencyName', agencyName)
+    },
+    SET_SHIBEIAGENCYTYPE({ commit }, agencyType) {
       commit('set_shibeiAgencyType', agencyType)
     },
-    SET_SHIBEIMAPCENTER ({ commit }, shibeiMapCenter) {
+    SET_SHIBEIMAPCENTER({ commit }, shibeiMapCenter) {
       commit('set_shibeiMapCenter', shibeiMapCenter)
     },
-    SET_PROJECTBOXVISIBLE ({ commit }, projectBoxVisible) {
+    SET_PROJECTBOXVISIBLE({ commit }, projectBoxVisible) {
       commit('set_projectBoxVisible', projectBoxVisible)
     },
-    SET_PROJECTID ({ commit }, projectId) {
+    SET_PROJECTID({ commit }, projectId) {
       commit('set_projectId', projectId)
     }
   }

src/style/global.scss

@@ -1,4 +1,20 @@
 // 维护全局通用样式
+.bg-content{
+  width: 620px;
+  height: 972px;
+  border: 1px solid;
+  border-image: linear-gradient(0deg, #4ba3da, #0097d6) 10 10;
+  background: linear-gradient(0deg, #006a90 0%, #00354b 100%);
+  box-sizing: border-box;
+}
+
+
+
+
+/**
+旧
+**/
+
 /**************去掉标签默认样式******************/
 i {
   font-style: normal;

src/utils/config.js

@@ -9,7 +9,7 @@ export default {
 function getScreenBaseUrl() {
   // 需要区分 客户端生产环境、web端生产环境、本地开发环境
   if (process.env.VUE_APP_SCREEN === 'dev') {
-    return '/screenBaseUrl'
+    return 'http://192.168.1.58:10001'
   } else if (
     process.env.VUE_APP_SCREEN === 'prod' ||
     process.env.NODE_ENV === 'production'

src/views/agencySelect copy.vue

@@ -1,236 +0,0 @@
-<template>
-  <div class="agency-select">
-    <div class="item">{{cityName}}</div>
-    <div class="item">{{districtName}}</div>
-    <div class="item"
-         ref="street"
-         @click="onChangeStreet">
-      <div>{{selectStreet.label === '全部党工委' ? '党工委' : selectStreet.label}}</div>
-      <svg-icon icon-class="bottom-sword"
-                fill="#fff">
-      </svg-icon>
-      <screen-dropdown-menu top="40px"
-                            :menuList="streetList"
-                            :visible.sync="streetDropMenuVisible"
-                            :defaultSelected="selectStreet.value"
-                            @onChooseItem="onChooseStreet">
-      </screen-dropdown-menu>
-    </div>
-    <div class="item"
-         ref="community"
-         @click="onChangeCommunity">
-      <div>{{selectCommunity.label === '全部社区' ? '社区' : selectCommunity.label}}</div>
-      <svg-icon icon-class="bottom-sword"
-                fill="#fff">
-      </svg-icon>
-      <screen-dropdown-menu top="40px"
-                            :menuList="communityList"
-                            :visible.sync="communityDropMenuVisible"
-                            :defaultSelected="selectCommunity.value"
-                            @onChooseItem="onChooseCommunity">
-      </screen-dropdown-menu>
-    </div>
-  </div>
-</template>
-
-<script>
-// import { getOrgTree } from 'api/shibeiScreen/screenContentLeft'
-import { mapGetters, mapActions } from 'vuex'
-export default {
-  name: 'agency-select',
-  data () {
-    return {
-      streetList: [],
-      communityList: [{
-        label: '全部社区',
-        value: '',
-        center: []
-      }],
-      selectStreet: {
-        label: '全部党工委',
-        value: '',
-        center: []
-      },
-      selectCommunity: {
-        label: '全部社区',
-        value: '',
-        center: []
-      },
-      streetDropMenuVisible: false,
-      communityDropMenuVisible: false,
-      cityName: '青岛市',
-      districtName: ''
-    }
-  },
-  created () {
-    // this.getOrgTree()
-  },
-  computed: {
-    ...mapGetters(['shibeiAId', 'shibeiAgencyType'])
-  },
-  watch: {
-    shibeiAId (value) {
-      if (this.shibeiAgencyType === 'district') {
-        this.communityList = [{ label: '全部社区', value: '', center: [] }]
-        this.selectStreet = { label: '全部党工委', value: '', center: [] }
-        this.selectCommunity = { label: '全部社区', value: '', center: [] }
-      } else if (this.shibeiAgencyType === 'community') {
-        const item = this.streetList.find(item => item.value === this.shibeiAId)
-        this.selectStreet = { label: item.label, value: item.value, center: item.centerMark }
-        this.selectCommunity = { label: '全部社区', value: '', center: [] }
-        this.communityList = [{
-          label: '全部社区', value: '', center: []
-        }]
-        this.communityList = [...this.communityList, ...item.children]
-      } else if (this.shibeiAgencyType === 'grid') {
-        this.recurrenceAgencyId(this.shibeiAId, this.streetList)
-      }
-    }
-  },
-  mounted () {
-    window.addEventListener('click', e => {
-      if (this.$refs.street && !this.$refs.street.contains(e.target)) {
-        if (this.streetDropMenuVisible) {
-          this.streetDropMenuVisible = !this.streetDropMenuVisible
-        }
-      }
-      if (this.$refs.community && !this.$refs.community.contains(e.target)) {
-        if (this.communityDropMenuVisible) {
-          this.communityDropMenuVisible = !this.communityDropMenuVisible
-        }
-      }
-    })
-  },
-  methods: {
-    ...mapActions({
-      set_shibeiAgencyId: 'SET_SHIBEIAGENCYID',
-      set_shibeiAgencyType: 'SET_SHIBEIAGENCYTYPE',
-      set_shibeiMapCenter: 'SET_SHIBEIMAPCENTER'
-    }),
-    async getOrgTree () {
-      try {
-        const res = await getOrgTree()
-        console.log(res)
-        this.streetList = []
-        this.streetList.push({
-          label: '全部党工委',
-          value: '',
-          center: [],
-          children: []
-        })
-        this.districtName = res.data.label
-        this.streetList = [...this.streetList, ...res.data.children]
-      } catch (err) {
-        console.error(err)
-      }
-    },
-    onChangeStreet () {
-      this.streetDropMenuVisible = !this.streetDropMenuVisible
-    },
-    onChangeCommunity () {
-      this.communityDropMenuVisible = !this.communityDropMenuVisible
-    },
-    onChooseStreet (item) {
-      this.selectStreet = {
-        label: item.label,
-        value: item.value,
-        center: item.centerMark || item.center || []
-      }
-      this.selectCommunity = {
-        label: '全部社区',
-        value: '',
-        center: []
-      }
-      this.communityList = []
-      this.communityList.push({
-        label: '全部社区',
-        value: '',
-        center: []
-      })
-      this.communityList = [...this.communityList, ...item.children]
-      if (this.selectCommunity.value) {
-        this.set_shibeiAgencyId(this.selectCommunity.value)
-        this.set_shibeiAgencyType('grid')
-        this.set_shibeiMapCenter(this.selectCommunity.center)
-      } else if (this.selectStreet.value) {
-        this.set_shibeiAgencyId(this.selectStreet.value)
-        this.set_shibeiAgencyType('community')
-        this.set_shibeiMapCenter(this.selectStreet.center)
-      } else {
-        // this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
-        this.set_shibeiAgencyId('1175270520603930625')
-        this.set_shibeiAgencyType('district')
-        // this.set_shibeiMapCenter([120.312565, 36.021688])
-        this.set_shibeiMapCenter([120.364165, 36.103091])
-      }
-    },
-    onChooseCommunity (item) {
-      this.selectCommunity = {
-        label: item.label,
-        value: item.value,
-        center: item.centerMark
-      }
-      if (this.selectCommunity.value) {
-        this.set_shibeiAgencyId(this.selectCommunity.value)
-        this.set_shibeiAgencyType('grid')
-        this.set_shibeiMapCenter(this.selectCommunity.center)
-      } else if (this.selectStreet.value) {
-        this.set_shibeiAgencyId(this.selectStreet.value)
-        this.set_shibeiAgencyType('community')
-        this.set_shibeiMapCenter(this.selectStreet.center)
-      } else {
-        // this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
-        this.set_shibeiAgencyId('1175270520603930625')
-        this.set_shibeiAgencyType('district')
-        // this.set_shibeiMapCenter([120.312565, 36.021688])
-        this.set_shibeiMapCenter([120.364165, 36.103091])
-      }
-    },
-    recurrenceAgencyId (agencyId, list) {
-      try {
-        list.forEach(item => {
-          if (item.children && item.children.length > 0) {
-            if (item.value === agencyId) {
-              throw (item)
-            } else {
-              if (item.children && item.children.length > 0) {
-                this.recurrenceAgencyId(agencyId, item.children)
-              }
-            }
-          }
-        })
-      } catch (err) {
-        this.selectCommunity = { label: err.label, value: err.value, center: err.centerMark }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.agency-select {
-  width: 100%;
-  height: 40px;
-  box-sizing: border-box;
-  padding-bottom: 8px;
-  display: flex;
-  align-items: center;
-  .item {
-    width: 100%;
-    height: 32px;
-    background: #031b3d;
-    border: 1px solid #03327e;
-    border-radius: 3px;
-    color: #fefefe;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 17px;
-    position: relative;
-    & + .item {
-      margin-left: 12px;
-    }
-  }
-}
-</style>

src/views/agencySelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="agency-select">
     <div class="name-item">{{cityName}}</div>
-    <div class="name-item">{{districtName}}</div>
+    <div class="name-item">{{district.label}}</div>
 
     <div class="item"
          ref="street"
@@ -10,7 +10,7 @@
       <svg-icon icon-class="bottom-sword"
                 fill="#8ec6d8">
       </svg-icon>
-      <screen-dropdown-menu top="50px"
+      <screen-dropdown-menu top="45px"
                             :menuList="streetList"
                             :visible.sync="streetDropMenuVisible"
                             :defaultSelected="selectStreet.value"
@@ -24,7 +24,7 @@
       <svg-icon icon-class="bottom-sword"
                 fill="#8ec6d8">
       </svg-icon>
-      <screen-dropdown-menu top="50px"
+      <screen-dropdown-menu top="45px"
                             :menuList="communityList"
                             :visible.sync="communityDropMenuVisible"
                             :defaultSelected="selectCommunity.value"
@@ -35,60 +35,50 @@
 </template>
 
 <script>
+import { getOrgTree } from "api/index"
 import { mapGetters, mapActions } from 'vuex'
 export default {
   name: "agency-select",
   data () {
     return {
       cityName: '青岛市•',
-      districtName: '市北区委',
+      district: {
+        value: '',
+        label: '市北区委',
+        centerMark: []
+      },
 
       selectStreet: {
         label: '全部党工委',
-        value: ''
+        value: '',
+        centerMark: []
       },
       selectCommunity: {
         label: '全部社区',
-        value: ''
+        value: '',
+        centerMark: []
       },
 
       streetList: [
         {
-          label: "即墨路街道党工委",
+          label: "全部党工委",
-          value: "jimo"
+          value: "",
-        },
+          center: [],
-        {
+          children: []
-          label: "兴德路街道党工委",
+        }
-          value: "xingde"
-        },
-        {
-          label: "大港街道党工委",
-          value: "dagang"
-        },
-      ],
-      communityList: [
-        {
-          label: "上海路社区党委",
-          value: "sh"
-        },
-        {
-          label: "胶州路社区党委",
-          value: "jz"
-        },
-        {
-          label: "小港社区党委",
-          value: "xg"
-        },
       ],
+      communityList: [],
 
       streetDropMenuVisible: false,
       communityDropMenuVisible: false,
     }
   },
   computed: {
-    ...mapGetters(['shibeiAId', 'shibeiAgencyType'])
+    ...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType'])
+  },
+  created () {
+    this.getOrgTree()
   },
-
   mounted () {
     window.addEventListener('click', e => {
       if (this.$refs.street && !this.$refs.street.contains(e.target)) {
@@ -106,32 +96,102 @@ export default {
     })
   },
   watch: {
+    shibeiAId (value) {
+      console.log('切换区域id:' + value)
+      console.log('切换区域Name:' + this.shibeiName)
 
+    }
   },
 
   methods: {
     ...mapActions({
       set_shibeiAgencyId: 'SET_SHIBEIAGENCYID',
+      set_shibeiAgencyName: 'SET_SHIBEIAGENCYNAME',
       set_shibeiAgencyType: 'SET_SHIBEIAGENCYTYPE',
       set_shibeiMapCenter: 'SET_SHIBEIMAPCENTER'
     }),
-    onChangeStreet () {
+    //获取组织机构树
-      this.streetDropMenuVisible = !this.streetDropMenuVisible
+    async getOrgTree () {
+      try {
+        const res = await getOrgTree()
+        this.district.label = res.data.label
+        this.district.value = res.data.value
+        this.district.centerMark = res.data.centerMark
+
+        this.streetList = [...this.streetList, ...res.data.children]
+        this.communityList = []
+
+      } catch (err) {
+        console.error(err)
+      }
     },
 
-    onChangeCommunity () {
+    onChooseStreet (streetItem) {
+      this.selectStreet = {
+        label: streetItem.label,
+        value: streetItem.value,
+        centerMark: streetItem.centerMark || streetItem.center || []
+      }
+      this.selectCommunity = {
+        label: '全部社区',
+        value: '',
+        center: []
+      }
+      this.communityList = []
+      this.communityList.push({
+        label: "全部社区",
+        value: "",
+        center: [],
+        children: []
+      })
+      this.communityList = [...this.communityList, ...streetItem.children]
+
+      if (this.selectStreet.value) {
+
+        this.set_shibeiAgencyName(this.selectStreet.label)
+        this.set_shibeiAgencyType('community')
+        this.set_shibeiMapCenter(this.selectStreet.center)
+        this.set_shibeiAgencyId(this.selectStreet.value)
+      } else {
+
+        //选择了全部街道，shibeiId=市北区id
+        this.set_shibeiAgencyId(this.district.value)
+        this.set_shibeiAgencyName(this.district.label)
+        this.set_shibeiAgencyType('district')
+        this.set_shibeiMapCenter(this.district.centerMark)
+
+      }
 
-      this.communityDropMenuVisible = !this.communityDropMenuVisible
     },
 
-    onChooseStreet (streetItem) {
+    onChooseCommunity (communityItem) {
+
+      this.selectCommunity = {
+        label: communityItem.label,
+        value: communityItem.value,
+        centerMark: communityItem.centerMark || communityItem.center || []
+      }
 
-      this.selectStreet = streetItem
+      if (this.selectCommunity.value) {
+        this.set_shibeiAgencyId(this.selectCommunity.value)
+        this.set_shibeiAgencyName(this.selectCommunity.label)
+        this.set_shibeiAgencyType('grid')
+        this.set_shibeiMapCenter(this.selectCommunity.center)
+      } else {
+        ////选择了全部社区，shibeiId=社区上一级的街道id
+        this.set_shibeiAgencyId(this.selectStreet.value)
+        this.set_shibeiAgencyName(this.selectStreet.label)
+        this.set_shibeiAgencyType('district')
+        this.set_shibeiMapCenter(this.selectStreet.centerMark)
+      }
     },
 
-    onChooseCommunity (communityItem) {
+    onChangeStreet () {
+      this.streetDropMenuVisible = !this.streetDropMenuVisible
+    },
 
-      this.selectCommunity = communityItem
+    onChangeCommunity () {
+      this.communityDropMenuVisible = !this.communityDropMenuVisible
     },
   }
 }
@@ -149,7 +209,7 @@ export default {
   font-family: PingFang SC;
   font-weight: bold;
   color: #fefefe;
-  letter-spacing: 5px;
+  letter-spacing: 3px;
   .name-item {
     height: 45px;
     align-items: center;
@@ -158,7 +218,7 @@ export default {
   .item {
     box-sizing: border-box;
     position: relative;
-    width: 220px;
+    width: 210px;
     height: 42px;
     padding: 13px 11px 15px 10px;
     margin-left: 20px;
@@ -171,7 +231,7 @@ export default {
     font-family: Alibaba PuHuiTi;
     font-weight: 400;
     color: #c1e8ff;
-    letter-spacing: 5px;
+    letter-spacing: 2px;
 
     // white-space: nowrap;
     // overflow: hidden;

src/views/index.vue

@@ -5,24 +5,28 @@
       height: height + 'px',
       transform: `scale(${shibeiScale}) translate(-50%, -50%)`
     }"> -->
+  <!--屏幕调整-->
   <div class="shibei-screen-home"
        :style="{
       width: width + 'px',
       height: height + 'px',
+       transform: `scale(0.6) `
    
     }">
     <screen-header></screen-header>
     <agency-select></agency-select>
+    <screen-content></screen-content>
     <!-- <screen-content></screen-content>
     <project-box></project-box> -->
   </div>
 </template>
 
 <script>
+//屏幕调整
 import { debounce } from './../utils/common'
 import screenHeader from './screenHeader'
 import agencySelect from './agencySelect'
-// import screenContent from './components/screenContent'
+import screenContent from './screenContent'
 // import projectBox from './components/projectBox'
 import { mapGetters, mapActions } from 'vuex'
 let width = 0
@@ -41,7 +45,7 @@ export default {
   components: {
     screenHeader,
     agencySelect,
-    // screenContent,
+    screenContent,
     // projectBox
   },
   beforeRouteEnter (to, from, next) {
@@ -65,6 +69,7 @@ export default {
   },
   mounted () {
     this.setScale()
+    //屏幕调整
     // window.addEventListener('resize', debounce(this.setScale))
 
   },
@@ -92,8 +97,8 @@ export default {
   box-sizing: border-box;
   background-image: url("./../assets/icon/bc.png");
   background-size: 100% 100%;
-  // background: #00050e;
   position: absolute;
+  //屏幕调整
   // left: 50%;
   // top: 50%;
   left: 20%;

src/views/screenCenter/screenCenter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="screen-center">
+    screen-left
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-center",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-center {
+}
+</style>

src/views/screenContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="screen-content">
+    <div class="screen-content-left">
+      <img class="screen-image"
+           src="./../assets/icon/contentLeft.png" />
+    </div>
+    <screen-left></screen-left>
+    <screen-center></screen-center>
+    <screen-right></screen-right>
+    <div class="screen-content-right">
+      <img class="screen-image"
+           src="./../assets/icon/contentRight.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+import screenLeft from "./screenLeft/screenLeft";
+import screenCenter from "./screenCenter/screenCenter";
+import screenRight from "./screenRight/screenRight";
+export default {
+  name: "screen-content",
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    screenLeft,
+    screenCenter,
+    screenRight
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-content {
+  box-sizing: border-box;
+  position: relative;
+  padding: 18px 0 0;
+  display: flex;
+  justify-content: space-between;
+
+  &-left {
+    position: absolute;
+    left: 0;
+  }
+  &-right {
+    position: absolute;
+    right: 0;
+  }
+  .screen-image {
+    height: 986px;
+    width: 30px;
+  }
+}
+</style>

src/views/screenHeader copy.vue

@@ -1,91 +0,0 @@
-<template>
-  <div id="screen-header">
-    <div class="main-title">
-      <div class="title-img"
-           :style="{
-         width: imgWidth + 'px',
-         height: imgHeight + 'px'}">
-        <img :src="titleImg" />
-
-      </div>
-      <div class="title-span">党建引领基层治理大数据</div>
-    </div>
-    <div class="subtitle-left">
-      <img src="./../assets/icon/subtitle.png" />
-    </div>
-    <div class="subtitle-right1">
-      <img src="./../assets/icon/subtitle.png" />
-    </div>
-    <div class="subtitle-right2">
-      <img src="./../assets/icon/subtitle.png" />
-    </div>
-
-  </div>
-</template>
-
-<script>
-import { debounce } from './../utils/common'
-export default {
-  name: 'screen-header',
-  data () {
-    return {
-      titleImg: require('./../assets/icon/title.png'),
-      imgWidth: 2110,
-      imgHeight: 120,
-      scale: 1
-    }
-  },
-  mounted () {
-    this.setScale()
-    window.addEventListener('resize', debounce(this.setScale))
-  },
-  methods: {
-    getScale () {
-      const oHeader = document.querySelector('#screen-header')
-      const vh = oHeader.clientHeight / this.imgHeight
-      const vw = oHeader.clientWidth / this.imgWidth
-      return vh < vw ? vw : vh
-    },
-    setScale () {
-      this.scale = this.getScale()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-img {
-  width: 100%;
-  height: 100%;
-  float: left;
-}
-.screen-header {
-  display: flex;
-}
-.main-title {
-  width: 100%;
-  height: 120px;
-  position: relative;
-  overflow: hidden;
-  .title-img {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-  }
-  .title-span {
-    font-size: 46px;
-    font-family: "HYZongYiJ";
-    font-weight: 400;
-    color: #ffffff;
-    letter-spacing: 8px;
-
-    position: absolute;
-    left: 50%;
-    top: 35%;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/views/screenLeft/left1.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="bg-content left1">
+    <div class='b-dlzz'>
+      <screen-title :titleName="'动力主轴'"></screen-title>
+      <div class="dlzz-tree">图表</div>
+      <div class="dlzz-static">
+        <div class="dlzz-static-item">
+          <img class="item-img"
+               src="./../../assets/icon/dlzz-lyxz.png" />
+          <div class="item-content">
+            <div class="item-title">{{lyxz.title}}</div>
+            <div class="item-num">{{lyxz.num}}</div>
+          </div>
+        </div>
+        <div class="dlzz-static-item">
+          <img class="item-img"
+               src="./../../assets/icon/dlzz-lyxz.png" />
+          <div class="item-content">
+            <div class="item-title">{{dyzx.title}}</div>
+            <div class="item-num">{{dyzx.num}}</div>
+          </div>
+        </div>
+
+        <div class="dlzz-static-item">
+          <img class="item-img"
+               src="./../../assets/icon/dlzz-lyxz.png" />
+          <div class="item-content">
+            <div class="item-title">{{dqff.title}}</div>
+            <div class="item-num">{{dqff.num}}</div>
+          </div>
+        </div>
+
+        <div class="dlzz-static-item">
+          <img class="item-img"
+               src="./../../assets/icon/dlzz-lyxz.png" />
+          <div class="item-content">
+            <div class="item-title">{{yz.title}}</div>
+            <div class="item-num">{{yz.num}}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class='b-dyfc'>
+      <screen-title :titleName="'党员风采'"></screen-title>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-left1",
+  data () {
+    return {
+      lyxz: {
+        title: '楼院党小组',
+        num: 32
+      },
+      dyzx: {
+        title: '党员中心户',
+        num: 187
+      },
+      dqff: {
+        title: '党群服务中心',
+        num: 32
+      },
+      yz: {
+        title: '驿站总数',
+        num: 45
+      },
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.left1 {
+  margin-right: 12px;
+
+  .b-dlzz {
+    box-sizing: border-box;
+    height: 585px;
+
+    .dlzz-tree {
+      height: 455px;
+    }
+
+    .dlzz-static {
+      background: linear-gradient(
+        0deg,
+        rgba(0, 204, 211, 0.38) 0%,
+        rgba(10, 218, 234, 0) 100%
+      );
+
+      box-sizing: border-box;
+      padding: 14px 24px 16px 17px;
+      display: flex;
+      justify-content: space-around;
+
+      &-item {
+        display: flex;
+        .item-img {
+          height: 50px;
+          width: 50px;
+        }
+
+        .item-content {
+          margin-left: 6px;
+
+          .item-title {
+            font-size: 16px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: 400;
+            color: #c1e8ff;
+            opacity: 0.75;
+          }
+
+          .item-num {
+            font-size: 24px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .b-dyfc {
+    margin-top: 8px;
+  }
+}
+</style>

src/views/screenLeft/left2.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="bg-content left2">
+    <screen-title :titleName="'一网治理'"></screen-title>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-left2",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.left2 {
+  margin-right: 12px;
+}
+</style>

src/views/screenLeft/left3.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="bg-content left3">
+    <div class='b-ljdw'>
+      <screen-title :titleName="'联建单位分析'"></screen-title>
+    </div>
+    <div class='b-ljhd'>
+      <screen-title :titleName="'联建活动'"></screen-title>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-left3",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.left3 {
+  margin-right: 12px;
+}
+
+.b-ljdw {
+  height: 461px;
+}
+</style>

src/views/screenLeft/screenLeft.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class=" screen-left">
+    <left-1></left-1>
+    <left-2></left-2>
+    <left-3></left-3>
+  </div>
+</template>
+
+<script>
+import left1 from "./left1"
+import left2 from "./left2"
+import left3 from "./left3"
+
+export default {
+  name: "screen-left",
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    left1,
+    left2,
+    left3
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-left {
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 36px;
+}
+</style>

src/views/screenRight/right1.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="bg-content right1">
+    <div class='b-qzys'>
+      <screen-title :titleName="'群众议事'"></screen-title>
+    </div>
+    <div class='b-ytal'>
+      <screen-title :titleName="'议题案例'"></screen-title>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-right1",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right1 {
+  margin-left: 12px;
+}
+.b-qzys {
+  height: 653px;
+}
+</style>

src/views/screenRight/right2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="bg-content right2">
+    <div class='b-dyxfmf'>
+      <screen-title :titleName="'党员先锋模范'"></screen-title>
+    </div>
+    <div class='b-dylxqz'>
+      <screen-title :titleName="'党员联系群众'"></screen-title>
+    </div>
+    <div class='b-xjph'>
+      <screen-title :titleName="'先进排行榜单'"></screen-title>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-right2",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right2 {
+  margin-left: 12px;
+}
+.b-dyxfmf {
+  height: 328px;
+}
+.b-dylxqz {
+  height: 327px;
+}
+</style>

src/views/screenRight/right3.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="bg-content right3">
+    <div class='b-row1'>
+      <div b-sjtj>
+        <screen-title :titleName="'数据统计'"
+                      style="width:310px"
+                      :type="'short'"></screen-title>
+      </div>
+      <div b-myd>
+        <screen-title :titleName="'满意度'"
+                      style="width:310px"
+                      :type="'short'"></screen-title>
+      </div>
+    </div>
+    <div class='b-row2'>
+      <div b-sjlx>
+        <screen-title :titleName="'事件类型分析'"
+                      style="width:310px"
+                      :type="'short'"></screen-title>
+      </div>
+      <div b-dxal>
+        <screen-title :titleName="'典型案例'"
+                      style="width:310px"
+                      :type="'short'"></screen-title>
+      </div>
+    </div>
+    <div class='b-hztj'>
+      <screen-title :titleName="'汇总统计'"></screen-title>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "screen-right3",
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right3 {
+  margin-left: 12px;
+}
+.b-row1 {
+  height: 328px;
+  display: flex;
+}
+
+.b-row2 {
+  height: 327px;
+  display: flex;
+}
+</style>

src/views/screenRight/screenRight.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="screen-right">
+    <right-1></right-1>
+    <right-2></right-2>
+    <right-3></right-3>
+  </div>
+</template>
+
+<script>
+import right1 from "./right1"
+import right2 from "./right2"
+import right3 from "./right3"
+
+export default {
+  name: "screen-right",
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    right1,
+    right2,
+    right3
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-right {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 36px;
+}
+</style>