diff --git a/package-lock.json b/package-lock.json
index 7ba2362..4c996ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3385,6 +3385,11 @@
         }
       }
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.2.tgz",
@@ -4367,6 +4372,31 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -11898,6 +11928,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index ff31042..8e0e2a9 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   "dependencies": {
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.13",
     "js-cookie": "^3.0.5",
     "node-gyp": "^9.4.0",
diff --git a/src/assets/icon/chartBg.png b/src/assets/icon/chartBg.png
new file mode 100644
index 0000000..619e393
Binary files /dev/null and b/src/assets/icon/chartBg.png differ
diff --git a/src/assets/icon/dyxf-bg.png b/src/assets/icon/dyxf-bg.png
new file mode 100644
index 0000000..d694839
Binary files /dev/null and b/src/assets/icon/dyxf-bg.png differ
diff --git a/src/assets/icon/headerBg.png b/src/assets/icon/headerBg.png
new file mode 100644
index 0000000..1406b79
Binary files /dev/null and b/src/assets/icon/headerBg.png differ
diff --git a/src/assets/icon/提出议题@2x.png b/src/assets/icon/qzys-1.png
similarity index 100%
rename from src/assets/icon/提出议题@2x.png
rename to src/assets/icon/qzys-1.png
diff --git a/src/assets/icon/线上讨论@2x.png b/src/assets/icon/qzys-2.png
similarity index 100%
rename from src/assets/icon/线上讨论@2x.png
rename to src/assets/icon/qzys-2.png
diff --git a/src/assets/icon/形成诉求@2x.png b/src/assets/icon/qzys-3.png
similarity index 100%
rename from src/assets/icon/形成诉求@2x.png
rename to src/assets/icon/qzys-3.png
diff --git a/src/assets/icon/推动实施@2x.png b/src/assets/icon/qzys-4.png
similarity index 100%
rename from src/assets/icon/推动实施@2x.png
rename to src/assets/icon/qzys-4.png
diff --git a/src/assets/icon/效果评估@2x.png b/src/assets/icon/qzys-5.png
similarity index 100%
rename from src/assets/icon/效果评估@2x.png
rename to src/assets/icon/qzys-5.png
diff --git a/src/assets/icon/箭头@2x.png b/src/assets/icon/qzys-arrow.png
similarity index 100%
rename from src/assets/icon/箭头@2x.png
rename to src/assets/icon/qzys-arrow.png
diff --git a/src/assets/icon/台@2x.png b/src/assets/icon/qzys-bg.png
similarity index 100%
rename from src/assets/icon/台@2x.png
rename to src/assets/icon/qzys-bg.png
diff --git a/src/assets/icon/低@2x.png b/src/assets/icon/tableTdBg.png
similarity index 100%
rename from src/assets/icon/低@2x.png
rename to src/assets/icon/tableTdBg.png
diff --git a/src/components/screen-custom-table/index.vue b/src/components/screen-custom-table/index.vue
new file mode 100644
index 0000000..c24279a
--- /dev/null
+++ b/src/components/screen-custom-table/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="screen-custom-table"
+       @mouseenter="tableMouseEnter"
+       @mouseleave="tableMouseLeave"
+       :style="{'--pageSize': pageSize}">
+    <ul>
+      <li class="table-header"
+          :style="{height:headerHeight}">
+        <div class="table-td"
+             @click="sortTable(item, index)"
+             v-for="(item, index) in headerList"
+             :style="{width: Object.prototype.toString.call(item) == '[object Object]' ? item.width : '100%',
+             color: columnIndex === index ? columnHoverColor : Object.prototype.toString.call(item) == '[object Object]' ? item.color ? item.color : headerColor : headerColor,
+             fontSize: headerFontSize,
+             cursor:  Object.prototype.toString.call(item) == '[object Object]' ? item.sort ? 'pointer' : 'default' : 'default'}"
+             :key="index">{{Object.prototype.toString.call(item) == '[object Object]' ? item.title : item}}
+          <svg-icon icon-class="paixu"
+                    v-if="item.sort"
+                    :fill="columnIndex === index ? columnHoverColor : 'rgb(42, 112, 225)'">
+          </svg-icon>
+        </div>
+      </li>
+      <div class="loading-box"
+           v-if="dataList.length === 0 && !noData">
+        <screen-loading>加载中, 请稍后...</screen-loading>
+      </div>
+      <li class="table-body"
+          v-else-if="dataList.length > 0">
+        <div class="scroll-view"
+             id="scroll-view"
+             :style="{top: top, transition: transition}">
+          <div class="table-tr"
+               :style="{background: isChangeColor ?rowColor:'',
+                 '--isChangeColor': isChangeColor}"
+               v-for="(item, index) in dataList"
+               :key="index">
+            <div class="table-td"
+                 :style="{
+                    width: Object.prototype.toString.call(headerList[order]) == '[object Object]' ? headerList[order].width : '100%',
+                    color:bodyTdColor,fontSize:bodyTdFontSize
+                  }"
+                 v-for="(td, order) in item"
+                 :key="order"
+                 v-html="td"></div>
+          </div>
+        </div>
+      </li>
+      <div v-else
+           class="no-data">暂无数据~</div>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'screen-custom-table',
+  data () {
+    return {
+      top: 0,
+      scrollTime: 0,
+      transition: 'top 1s linear',
+      timer: '',
+      sort: 'asc',
+      columnIndex: '',
+      columnHoverColor: '#29cdff'
+    }
+  },
+  props: {
+    headerList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    //列表内容高度，用于滚动时计算向上滚动的高度
+    tableHeight: {
+      type: Number,
+      default: 99
+    },
+    pageSize: {
+      type: Number,
+      default: 8
+    },
+    noData: {
+      type: Boolean,
+      default: false
+    },
+    // 表头高度
+    headerHeight: {
+      type: String,
+      default: '35px'
+    },
+    // 表头字体颜色
+    headerColor: {
+      type: String,
+      default: '#2a70e1'
+    },
+    // 表头字体大小
+    headerFontSize: {
+      type: String,
+      default: '#2a70e1'
+    },
+    // 表单字体颜色
+    bodyTdColor: {
+      type: String,
+      default: '#fff'
+    },
+    // 表单字体大小
+    bodyTdFontSize: {
+      type: String,
+      default: '14px'
+    },
+    // 是否隔行换色
+    isChangeColor: {
+      type: Boolean,
+      default: false
+    },
+    // 隔行换色更换的颜色
+    rowColor: {
+      type: String,
+      default: ''
+    },
+    // 是否调用动画
+    animationShow: {
+      type: Boolean,
+      default: true // true 调用  false 不调用
+    }
+  },
+  watch: {
+    dataList: {
+      immediate: true,
+      handler: function (newvalue) {
+        if (newvalue.length > 0) {
+          if (!this.animationShow) return
+          this.scrollView()
+        } else {
+          clearInterval(this.timer)
+        }
+      }
+    }
+  },
+  methods: {
+    scrollView () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+
+        if (this.dataList.length % this.pageSize === 0) {
+
+          if (this.scrollTime < this.dataList.length / this.pageSize - 1) {
+            this.transition = 'top 1s linear'
+            this.scrollTime += 1
+            this.top = `-${this.tableHeight * this.scrollTime}%`
+          } else {
+            this.transition = 'top 1s ease-in-out'
+            this.top = '0px'
+            this.scrollTime = 0
+          }
+        } else {
+          if (
+            this.scrollTime < Math.floor(this.dataList.length / this.pageSize)
+          ) {
+            this.transition = 'top 1s linear'
+            this.scrollTime += 1
+            this.top = `-${this.tableHeight * this.scrollTime}%`
+          } else {
+            this.transition = 'top 1s ease-in-out'
+            this.top = '0px'
+            this.scrollTime = 0
+          }
+        }
+      }, 5000)
+    },
+    tableMouseEnter () {
+      clearInterval(this.timer)
+    },
+    tableMouseLeave () {
+      this.scrollView()
+    },
+    sortTable (item, index) {
+      clearInterval(this.timer)
+      this.top = '0px'
+      this.scrollTime = 0
+      this.sort = this.sort === 'asc' ? 'desc' : 'asc'
+      if (Object.prototype.hasOwnProperty.call(item, 'sort') && item.sort) {
+        if (this.sort === 'asc') {
+          this.dataList.sort((a, b) => {
+            return this.splitInnerHtml(b[index]) - this.splitInnerHtml(a[index])
+          })
+        } else if (this.sort === 'desc') {
+          this.dataList.sort((a, b) => this.splitInnerHtml(a[index]) - this.splitInnerHtml(b[index]))
+        }
+        this.$emit('sortTable', this.dataList)
+        this.columnIndex = index
+      }
+    },
+    splitInnerHtml (str) {
+      if (str.toString().indexOf('>') > -1 && str.toString().lastIndexOf('<') > -1 && str.toString().indexOf('>') <= str.toString().lastIndexOf('<')) {
+        return str.toString().substring(str.toString().indexOf('>') + 1, str.toString().lastIndexOf('<'))
+      } else {
+        return str
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.screen-custom-table {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  ul {
+    width: 100%;
+    height: 100%;
+    .table-header {
+      height: 35px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      color: #2a70e1;
+      font-size: 15px;
+      background-image: url("./../../assets/icon/headerBg.png");
+      background-size: 100% 100%;
+
+      .table-td {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 0 5px;
+      }
+    }
+    .table-body {
+      width: 100%;
+      height: 399px;
+      // height: calc(100% - 35px);
+      overflow: hidden;
+      position: relative;
+      .scroll-view {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        .table-tr {
+          width: 100%;
+          box-sizing: border-box;
+          // height: calc(100% / var(--pageSize));
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          margin-top: 19px;
+
+          .table-td {
+            padding: 0 5px;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            // display: flex;
+            align-items: start;
+            justify-content: center;
+            color: #fff;
+            font-size: 14px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            line-height: 18px;
+            cursor: pointer;
+          }
+          & + .table-tr {
+            border-top: 1px solid #47556f9b;
+          }
+          // &:hover {
+          //   background: rgba(255, 255, 255, 0.1);
+          // }
+        }
+      }
+    }
+    .loading-box {
+      width: 100%;
+      height: calc(100% - 35px);
+    }
+    .no-data {
+      width: 100%;
+      height: calc(100% - 35px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 18px;
+    }
+  }
+}
+</style>
diff --git a/src/components/screen-loading/index.vue b/src/components/screen-loading/index.vue
new file mode 100644
index 0000000..cc8bda6
--- /dev/null
+++ b/src/components/screen-loading/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/data/index.js b/src/data/index.js
new file mode 100644
index 0000000..afbc848
--- /dev/null
+++ b/src/data/index.js
@@ -0,0 +1,198 @@
+export function loadLjhdList() {
+  let ljhdList = [
+    {
+      gridName: '第一网格',
+      title: '标题标题标题标题标题标题标题标题标题标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二网格第二网格第二网格第二网格第二网格第二网格',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第三网格',
+      title: '标题',
+      unitName: '单位单位单位单位单位单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第四网格',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第一网格',
+      title: '标题标题标题标题标题标题标题标题标题标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二网格第二网格第二网格第二网格第二网格第二网格',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第三网格',
+      title: '标题',
+      unitName: '单位单位单位单位单位单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第四网格',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-01',
+      title: '标题标题标题标题标题标题标题标题标题标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-02',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-03',
+      title: '标题',
+      unitName: '单位单位单位单位单位单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-04',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-05',
+      title: '标题标题标题标题标题标题标题标题标题标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-06',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-07',
+      title: '标题',
+      unitName: '单位单位单位单位单位单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第二页-08',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第三页-01',
+      title: '标题',
+      unitName: '单位单位单位单位单位单位',
+      member: 10,
+      data: '2023-03-22'
+    },
+    {
+      gridName: '第三页-02',
+      title: '标题',
+      unitName: '单位',
+      member: 10,
+      data: '2023-03-22'
+    }
+  ]
+
+  return ljhdList
+}
+
+export function loadYtalList() {
+  let ytalList = [
+    {
+      detail:
+        '1-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail: '1-2很多烟头，看到很多吸烟人员都不往垃圾桶里投放，请尽快处理。'
+    },
+    {
+      detail:
+        '1-3小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '1-4小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '1-5小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '1-6小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '1-7小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-2小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-3小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-4小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-5小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-6小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '2-7小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    },
+    {
+      detail:
+        '3-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的'
+    }
+  ]
+
+  return ytalList
+}
diff --git a/src/style/left3.scss b/src/style/left3.scss
new file mode 100644
index 0000000..822b25d
--- /dev/null
+++ b/src/style/left3.scss
@@ -0,0 +1,136 @@
+.left3 {
+  margin-right: 12px;
+}
+
+.b-ljdw {
+  height: 461px;
+}
+
+//饼图(外面的容器)
+.container {
+  position: relative;
+  // width: 100%;
+  // height: 100%;
+
+  //饼图的大小
+  .chartsGl {
+    position: absolute;
+    top: 59px;
+    left: 130px;
+    // margin-top: -150px;
+    // margin-left: 18%;
+    height: 370px;
+    width: 450px;
+  }
+  //饼图底座（我也想给你们底座图片 可是我不知道咋给）
+  .buttomCharts {
+    background: center top url(/src/assets/icon/chartBg.png) no-repeat;
+    background-size: cover;
+    height: 172px;
+    width: 402px;
+    // margin-top: -150px;
+    // margin-left: 18%;
+    position: absolute;
+    top: 149px;
+    left: 80px;
+  }
+  .legend {
+    position: absolute;
+    left: 110px;
+    top: 340px;
+    display: flex;
+    flex-wrap: wrap;
+    width: 450px;
+
+    .legend-item {
+      display: flex;
+      margin-top: 12px;
+      width: 142px;
+
+      .item-icon {
+        width: 10px;
+        height: 10px;
+        border-radius: 2px;
+      }
+
+      .item-name {
+        flex: 0 0 122px;
+        margin-left: 2px;
+        font-size: 14px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 10px;
+      }
+    }
+  }
+
+  .static {
+    position: absolute;
+    top: 33px;
+    left: 32px;
+
+    &-num {
+      font-size: 32px;
+      font-family: Arial;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    &-title {
+      font-size: 18px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+.b-ljhd {
+  height: 461px;
+
+  .table {
+    box-sizing: border-box;
+    padding: 17px 11px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    .screen-custom-table {
+      ::v-deep ul {
+        .table-body .scroll-view .table-tr + .table-tr {
+          border: none;
+        }
+        .table-header {
+          font-size: 16px;
+          font-family: PingFang-SC-Bold;
+        }
+        .table-body {
+          .table-tr {
+            background-image: url('./../assets/icon/tableTdBg.png');
+            background-size: 100% 100%;
+          }
+          // .table-tr:nth-child(2n) {
+          //   background: rgba(11, 68, 135, 0.1);
+          //   &:hover {
+          //     .table-td {
+          //       color: #fff !important;
+          //     }
+          //   }
+          // }
+          // .table-tr:nth-child(2n + 1) {
+          //   &:hover {
+          //     .table-td {
+          //       color: #fff !important;
+          //     }
+          //   }
+          // }
+          // .table-tr {
+          //   .table-td:nth-child(2) {
+          //     white-space: nowrap;
+          //     overflow: hidden;
+          //     text-overflow: ellipsis;
+          //   }
+          // }
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/right1.scss b/src/style/right1.scss
new file mode 100644
index 0000000..5e2feb9
--- /dev/null
+++ b/src/style/right1.scss
@@ -0,0 +1,116 @@
+.right1 {
+  margin-left: 12px;
+}
+.b-qzys {
+  height: 628px;
+
+  .main {
+    box-sizing: border-box;
+    padding: 33px 75px;
+
+    .item {
+      margin-top: 22px;
+      display: flex;
+      justify-content: flex-start;
+      // align-content: center;
+      align-items: center;
+
+      &:first-child {
+        margin-top: 0px;
+      }
+
+      .item-icon {
+        width: 70px;
+        height: 70px;
+      }
+
+      .item-arrow {
+        margin-left: 7px;
+        width: 30px;
+        height: 30px;
+      }
+
+      .item-line {
+        margin-left: 7px;
+        flex: 0 0 63px;
+        // width: 63px;
+        height: 0px;
+        border-bottom: 1px dashed #2df3ff;
+      }
+
+      .item-right {
+        margin-left: 7px;
+        width: 300px;
+        text-align: center;
+
+        .item-title {
+          margin-bottom: -24px;
+          font-size: 20px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 38px;
+        }
+
+        .item-bg {
+          width: 300px;
+          height: 54px;
+        }
+        .item-content {
+          margin-top: -26px;
+          font-size: 18px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #aacbe2;
+          line-height: 38px;
+        }
+      }
+    }
+  }
+}
+
+.b-ytal {
+  .ytal-list {
+    margin-top: 19px;
+    margin-left: 18px;
+    // padding: 19px 18px;
+    overflow: hidden;
+    position: relative;
+    height: 258px;
+
+    .ytal-list-tran {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+
+      .ytal-item {
+        margin-top: 8px;
+
+        .ytal-item-detail {
+          width: 571px;
+          font-size: 16px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #ffffff;
+
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .ytal-item-line {
+          height: 0px;
+          border-bottom: 1px dashed #609ab9;
+          margin-top: 8px;
+          opacity: 0.5;
+        }
+
+        &:first-child {
+          margin-top: 0px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/index.vue b/src/views/index.vue
index 3341343..dea8804 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -101,8 +101,8 @@ export default {
   //屏幕调整
   // left: 50%;
   // top: 50%;
-  left: 20%;
-  top: 20%;
+  left: -110%;
+  top: 10%;
   transition: 0.2s;
   transform-origin: 0 0;
 }
diff --git a/src/views/screenLeft/left3.vue b/src/views/screenLeft/left3.vue
index ae0546d..b67206a 100644
--- a/src/views/screenLeft/left3.vue
+++ b/src/views/screenLeft/left3.vue
@@ -2,32 +2,484 @@
   <div class="bg-content left3">
     <div class='b-ljdw'>
       <screen-title :titleName="'联建单位分析'"></screen-title>
+      <div class="container">
+        <div class="static">
+          <div class="static-num">32</div>
+          <div class="static-title">{{'联建单位总数'}}</div>
+        </div>
+        <div class="chartsGl"
+             id="charts"></div>
+        <!-- 饼图下面的底座 -->
+        <div class="buttomCharts"></div>
+        <div class="legend">
+          <div class="legend-item"
+               v-for="(item,index) in optionData"
+               :key="index">
+            <div class="item-icon"
+                 :style="{background:item.itemStyle.color}"></div>
+            <div class="item-name">{{item.name}}</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class='b-ljhd'>
       <screen-title :titleName="'联建活动'"></screen-title>
+      <div class="table">
+        <screen-custom-table :headerColor="'#BDE8FF'"
+                             :headerHeight="'36px'"
+                             :bodyTdColor="'#FFFFFF'"
+                             :bodyTdFontSize="'18px'"
+                             :tableHeight="99"
+                             :dataList="dataListResult"
+                             :isChangeColor=false
+                             :rowColor="'rgba(11,68,135,0.16)'"
+                             :noData="noData"
+                             :pageSize="pageSize"
+                             :headerList="headerList">
+        </screen-custom-table>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
+import 'echarts-gl'
 
+import { loadLjhdList } from './../../data/index'
 
 export default {
   name: "screen-left3",
   data () {
     return {
+      //饼图数据+颜色
+      optionData: [
+        {
+          name: '两新组织',//名称
+          value: 19,//值
+          itemStyle: {//颜色 紫色
+            color: 'rgba(227,235,45,1)'
+          }
+        }, {
+          name: '楼宇党建',//蓝色
+          value: 13,
+          itemStyle: {
+            color: 'rgba(19,141,255,1)',
+          }
+        }, {
+          name: '区域单位党建',//绿色
+          value: 15,
+          itemStyle: {
+            color: 'rgba(253, 112, 0, 1)'
+          }
+        },
+        {
+          name: '机关直属部门',//橙色
+          value: 16,
+          itemStyle: {
+            color: 'rgba(21, 214, 131, 1)'
+          }
+        },
+        {
+          name: '其他',//黄色
+          value: 5,
+          itemStyle: {
+            color: 'rgba(208, 47, 255, 1)'
+          }
+        }
+      ],
 
+      headerList: ['所属网格', { title: '活动标题', width: '1000px' }, '单位名称', { title: '人员', width: '200px' }, '活动时间'],
+      dataList: [],
+      dataListResult: [],
+      noData: false,
+      pageSize: 8
     }
+  },
+
+  mounted () {
+    this.dataList = loadLjhdList()
+    this.$nextTick(function () {
+      this.initChart();
+      this.initList()
+    });
+  },
+
+  methods: {
+    initList () {
+      this.dataListResult = []
+      this.dataList.forEach(element => {
+        this.dataListResult.push([
+          element.gridName,
+          element.title,
+          element.unitName,
+          element.member,
+          element.data,
+        ])
+      });
+
+      console.log(this.dataListResult)
+    },
+    initChart () {
+      //构建3d饼状图
+      let myChart = echarts.init(document.getElementById('charts'));
+      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+      this.option = this.getPie3D(this.optionData, 0.75);
+      //将配置项设置进去
+      myChart.setOption(this.option);
+      //鼠标移动上去特效效果
+      this.bindListen(myChart);
+    },
+
+    //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    getPie3D (pieData, internalDiameterRatio) {
+      let that = this;
+      let series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      let legendData = [];
+      let legendBfb = [];
+      let k = 1 - internalDiameterRatio;
+      pieData.sort((a, b) => {
+        return (b.value - a.value);
+      });
+      // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+        let seriesItem = {
+          //系统名称
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          //是否为参数曲面（是）
+          parametric: true,
+          //曲面图网格线（否）上面一根一根的
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          //设置饼图在容器中的位置(目前没发现啥用)
+          //   center: ['50%', '100%']
+        };
+
+        //曲面的颜色、不透明度等样式。
+        if (typeof pieData[i].itemStyle != 'undefined') {
+          let itemStyle = {};
+          typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
+          typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = [];
+      legendBfb = [];
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value);
+        startValue = endValue;
+        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        });
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        });
+      }
+      //(第二个参数可以设置你这个环形的高低程度)
+      let boxHeight = this.getHeight3D(series, 13);//通过传参设定3d饼/环的高度
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        //图例组件
+        legend: {
+          data: legendData,
+          //图例列表的布局朝向。
+          orient: 'horizontal',
+          left: 10,
+          top: 140,
+          //图例文字每项之间的间隔
+          itemGap: 15,
+          textStyle: {
+            color: '#A1E2FF',
+          },
+          show: false,
+          icon: "circle",
+          //格式化图例文本（我是数值什么显示什么）
+          formatter: function (name) {
+            var target;
+            for (var i = 0, l = pieData.length; i < l; i++) {
+              if (pieData[i].name == name) {
+                target = pieData[i].value;
+              }
+            }
+            return `${name}: ${target}`;
+          }
+          // 这个可以显示百分比那种（可以根据你想要的来配置）
+          //   formatter: function(param) {
+          //       let item = legendBfb.filter(item => item.name == param)[0];
+          //       let bfs = that.fomatFloat(item.value * 100, 2) + "%";
+          //       console.log(item.name)
+          //       return `${item.name} :${bfs}`;
+          //   }
+        },
+        //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2);
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}`;
+            }
+          }
+        },
+        //这个可以变形
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        //此处是修改样式的重点
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          //这是饼图的位置
+          top: '-20.5%',
+          left: '-15%',
+          viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 30, //角度(这个很重要 调节角度的)
+            distance: 190,//调整视角到主体的距离，类似调整zoom(这是整体大小)
+            rotateSensitivity: 0, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: false //自动旋转
+          }
+        },
+        series: series
+      };
+      return option;
+    },
+
+    //获取3d丙图的最高扇区的高度
+    getHeight3D (series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value);
+      })
+      return height * 15 / series[0].pieData.value;
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2;
+      let startRadian = startRatio * Math.PI * 2;
+      let endRadian = endRatio * Math.PI * 2;
+      let midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * .1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * .1 : -1;
+        }
+      };
+    },
+
+    //这是一个自定义计算的方法
+    fomatFloat (num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
+      var s = f.toString();
+      var rs = s.indexOf('.');
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += '.';
+      }
+      while (s.length <= rs + n) {
+        s += '0';
+      }
+      return s;
+    },
+
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen (myChart) {
+      let that = this;
+      let selectedIndex = '';
+      let hoveredIndex = '';
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+              selectedIndex].pieData
+            .value);
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value);
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value);
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = '';
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    }
+
   }
+
 }
 </script>
-
+<style lang="scss" src="style/left3.scss" scoped></style>
 <style lang="scss" scoped>
-.left3 {
-  margin-right: 12px;
-}
-
-.b-ljdw {
-  height: 461px;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/screenRight/right1.vue b/src/views/screenRight/right1.vue
index 14510ce..c53fe0e 100644
--- a/src/views/screenRight/right1.vue
+++ b/src/views/screenRight/right1.vue
@@ -1,32 +1,145 @@
 <template>
   <div class="bg-content right1">
     <div class='b-qzys'>
-      <screen-title :titleName="'群众议事'"></screen-title>
+      <screen-title :titleName="'群众议事'"> </screen-title>
+      <div class="main">
+        <div class="item"
+             v-for="(item,index) in qzysList"
+             :key="index">
+          <img class="item-icon"
+               :src="item.src" />
+          <img class="item-arrow"
+               src="./../../assets/icon/qzys-arrow.png" />
+          <div class="item-line"></div>
+          <div class="item-right">
+            <div class="item-title">{{item.title}}</div>
+            <img class="item-bg"
+                 src="./../../assets/icon/qzys-bg.png" />
+            <div class="item-content">{{item.content}}</div>
+          </div>
+        </div>
+      </div>
+
     </div>
     <div class='b-ytal'>
       <screen-title :titleName="'议题案例'"></screen-title>
+      <div @mouseenter="tableMouseEnter"
+           @mouseleave="tableMouseLeave"
+           class="ytal-list">
+        <div class="ytal-list-tran"
+             :style="{top: top, transition: transition}">
+          <div class="ytal-item"
+               v-for="(item,index) in ytalList"
+               :key="index">
+            <div class="ytal-item-detail">{{item.detail}}</div>
+            <div class="ytal-item-line"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import { loadYtalList } from './../../data/index'
 
 export default {
   name: "screen-right1",
   data () {
     return {
+      qzysList: [
+        {
+          src: require("./../../assets/icon/qzys-1.png"),
+          title: '提出议题',
+          content: '群众议事出题目'
+        },
+        {
+          src: require("./../../assets/icon/qzys-2.png"),
+          title: '线上讨论',
+          content: '党群评议想办法'
+        },
+        {
+          src: require("./../../assets/icon/qzys-3.png"),
+          title: '形成诉求',
+          content: '综合研判成诉求'
+        },
+        {
+          src: require("./../../assets/icon/qzys-4.png"),
+          title: '推动实施',
+          content: '综合研判成诉求'
+        },
+        {
+          src: require("./../../assets/icon/qzys-5.png"),
+          title: '效果评估',
+          content: '群众来把满意评'
+        },
+      ],
+      ytalList: [],
 
+      top: 0,
+      scrollTime: 0,
+      transition: 'top 1s linear',
+      timer: '',
+      pageSize: 7,
+      tableHeight: 104,
     }
+  },
+  mounted () {
+    this.ytalList = loadYtalList()
+  },
+  watch: {
+    ytalList: {
+      immediate: true,
+      handler: function (newvalue) {
+        if (newvalue.length > 0) {
+
+          this.scrollView()
+        } else {
+          clearInterval(this.timer)
+        }
+      }
+    }
+  },
+  methods: {
+    tableMouseEnter () {
+      clearInterval(this.timer)
+    },
+    tableMouseLeave () {
+      this.scrollView()
+    },
+    scrollView () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+
+        if (this.ytalList.length % this.pageSize === 0) {
+
+          if (this.scrollTime < this.ytalList.length / this.pageSize - 1) {
+            this.transition = 'top 1s linear'
+            this.scrollTime += 1
+            this.top = `-${this.tableHeight * this.scrollTime}%`
+          } else {
+            this.transition = 'top 1s ease-in-out'
+            this.top = '0px'
+            this.scrollTime = 0
+          }
+        } else {
+          if (
+            this.scrollTime < Math.floor(this.ytalList.length / this.pageSize)
+          ) {
+            this.transition = 'top 1s linear'
+            this.scrollTime += 1
+            this.top = `-${this.tableHeight * this.scrollTime}%`
+          } else {
+            this.transition = 'top 1s ease-in-out'
+            this.top = '0px'
+            this.scrollTime = 0
+          }
+        }
+      }, 5000)
+    },
   }
 }
 </script>
-
+<style lang="scss" src="style/right1.scss" scoped></style>
 <style lang="scss" scoped>
-.right1 {
-  margin-left: 12px;
-}
-.b-qzys {
-  height: 653px;
-}
 </style>
\ No newline at end of file