代码提交

src/api/szyf.js

@@ -0,0 +1,10 @@
+import request from 'utils/request'
+
+// 科技人才列表
+export function getEventRate (params) {
+  return request({
+    url: '/api/gov/project/icEvent/yifengScreen/getEventRate',
+    method: 'GET',
+    params
+  })
+}

src/store/modules/dialog.js

@@ -22,6 +22,10 @@ export default {
     ywqsShow: false,
     hsyfJzfw: false,
     ylqdShow: false,
+    sjfx: false,
+    sjcl: false,
+    zdry: false,
+    yfclz: false,
     actId: null,
     researchId: null,
     dyfcId: null
@@ -94,6 +98,19 @@ export default {
     set_ywqs_show (state, visible) {
       state.ywqsShow = visible
     },
+    set_sjfx (state, visible) {
+      state.sjfx = visible
+    },
+    set_sjcl (state, visible) {
+      state.sjcl = visible
+    },
+    set_zdry (state, visible) {
+      state.zdry = visible
+    },
+    set_yfclz (state, visible) {
+      console.log('zoule?????')
+      state.yfclz = visible
+    },
     set_dj_id (state, value) {
       state.actId = value
     },
@@ -168,6 +185,18 @@ export default {
     SET_LDGH (context, visible) {
       context.commit('set_ldgh', visible)
     },
+    SET_SJFX (context, visible) {
+      context.commit('set_sjfx', visible)
+    },
+    SET_SJCL (context, visible) {
+      context.commit('set_sjcl', visible)
+    },
+    SET_ZDRY (context, visible) {
+      context.commit('set_zdry', visible)
+    },
+    SET_YFCLZ (context, visible) {
+      context.commit('set_yfclz', visible)
+    },
     SET_DJ_ID (context, val) {
       context.commit('set_dj_id', val)
     },
@@ -182,7 +211,6 @@ export default {
     },
     // 确保当前只能显示最近点击的弹窗
     showGlobalDialog (context, type) {
-      console.log('type::', type)
       context.commit('set_yfcj', false)
       context.commit('set_garden', false)
       context.commit('set_talents', false)
@@ -204,6 +232,10 @@ export default {
       context.commit('set_gsxq', false)
       context.commit('set_qyjj', false)
       context.commit('set_ldgh', false)
+      context.commit('set_sjfx', false)
+      context.commit('set_sjcl', false)
+      context.commit('set_zdry', false)
+      context.commit('set_yfclz', false)
       if (type === 'zdyfGgqyClose') {
         context.commit('set_zdyf_ggqy', false)
       }
@@ -249,6 +281,14 @@ export default {
         context.commit('set_qyjj', true)
       } else if (type === 'gsxq') {
         context.commit('set_gsxq', true)
+      } else if (type === 'sjfx') {
+        context.commit('set_sjfx', true)
+      } else if (type === 'sjcl') {
+        context.commit('set_sjcl', true)
+      } else if (type === 'zdry') {
+        context.commit('set_zdry', true)
+      } else if (type === 'yfclz') {
+        context.commit('set_yfclz', true)
       } else if (type === 'ldgh') {
         context.commit('set_ldgh', true)
       }
@@ -278,6 +318,10 @@ export default {
     researchShow: state => state.researchShow,
     zdyfGgqy: state => state.zdyfGgqy,
     researchId: state => state.researchId,
+    sjfx: state => state.sjfx,
+    sjcl: state => state.sjcl,
+    zdry: state => state.zdry,
+    yfclz: state => state.yfclz,
     gsxq: state => state.gsxq
   }
 }

src/views/next/dialog-module/hsyf-left/company/attractions.vue

@@ -249,7 +249,7 @@ export default {
       this.currentId = res.data.list.id
       this.dataList = res.data.list
       if (this.dataList.length > 0) {
-        this.onDatils(this.dataList[0]);
+        this.onDatils(this.dataList[0])
       }
     })
   },
@@ -263,7 +263,6 @@ export default {
     onDatils (item) {
       this.currentId = item.id
       partyPlace(item.id).then(res => {
-        // console.log('res::', res);
         this.info = res.data
       })
     }

src/views/next/dialog-module/szyf-left/eventAnalysis.vue

@@ -0,0 +1,334 @@
+<template>
+    <div class="modal" v-show="sjfx">
+      <section>
+        <div class="dialog_header">
+          <div class="close-icon" @click="closeDialog">
+            <img src="@/assets/images/common/dialog-colse.png" alt="" />
+          </div>
+          <div class="title-container">
+            <div class="title">{{ dialogTitle }}</div>
+          </div>
+        </div>
+        <div class="dialog_body">
+          <div class="content">
+            <div class="left">
+              <div class="item" v-for="(item, index) in leftlist" :key="index">
+                <div class="time" v-show="item.time">
+                  {{ item.time }}
+                </div>
+                <div class="unit">
+                  {{ item.unit }}
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="item" v-for="(item, index) in rightList" :key="index">
+                <img
+                  :src="item.imageSrc"
+                  alt=""
+                  class="m-r16"
+                />
+                <section>
+                  <div class="unit">
+                    <span>{{ item.name }}</span>
+                  </div>
+                  <p class="introduce">{{ item.content }}</p>
+                </section>
+                <!-- <img
+                  :src="item.imageSrc"
+                  alt=""
+                  class="m-l16"
+                /> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: '',
+  data () {
+    return {
+      dialogTitle: '事件分析',
+      leftlist: [
+        {
+          time: '2012年03月',
+          unit: '青岛浩丰生物科技有限公司签约落户'
+        },
+        {
+          time: '2017年08月',
+          unit: '瑞克斯旺科研中心开工建设'
+        },
+        {
+          time: '2017年11月',
+          unit: '青岛硕丰源种业签约落户'
+        },
+        {
+          time: '2018年01月',
+          unit: '青岛硕丰源研发中心与育苗工厂开工建设'
+        },
+        {
+          time: '2018年09月',
+          unit: '韩国农友BIO株式会社、日本伯格地球株式会社到产业园考察、洽谈'
+        },
+        {
+          time: '2018年10月',
+          unit: '青岛美田花卉种子有限公司签约落户'
+        },
+        {
+          time: '2019年02月',
+          unit: '青岛普瑞达灵芝研发中心项 目签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '韩国农友（北京世农种苗）签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '青岛德龙种子签约落户'
+        }
+      ],
+      rightList: [
+        {
+          name: '青岛浩丰生物科技有限公司',
+          content:
+              '主要业务包括种苗培育、种植加工、仓储销售，曾先后被授予为青岛市农业产业化重点龙头企业、青岛市市控蔬菜基地、山东省现代生态循环农业示范点、青岛市绿色园艺产业园等荣誉。',
+          imageSrc: require('@/assets/images/resource/yfcj/1.jpg')
+        },
+        {
+          name: '瑞克斯旺（中国）农业科技有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/ruikesiwang.png')
+        },
+        {
+          name: '青岛硕丰源种业有限公司',
+          content:
+              '专业致力于旱黄瓜良种的研究、开发与服务为一体的农业高科技企业。是国内最大的一家专业从中国华南型黄瓜种子研发、生产、销售的科技型公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/shuofengyuan.png')
+        },
+        {
+          name: '青岛美田花卉种子有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/meitian.png')
+        },
+        {
+          name: '青岛德龙种子有限公司',
+          content:
+              '规模化新优品种花卉生产而著称。是一家种质资源丰富、技术力量雄厚，集高品质花卉生产和花卉景观设计、施工、养护为一体的综合性公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/delong.png')
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['sjfx'])
+  },
+  components: {},
+  watch: {},
+  created () {},
+  methods: {
+    ...mapActions({
+      showGlobalDialog: 'showGlobalDialog'
+    }),
+    closeDialog () {
+      this.showGlobalDialog('')
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .modal {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 150;
+
+    > section {
+      @include flex(column);
+      background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
+      background-size: 100% 100%;
+      width: 1180px;
+      height: 716px;
+      overflow: hidden;
+      padding-bottom: 16px;
+      box-sizing: border-box;
+
+      .dialog_header {
+        position: relative;
+
+        .close-icon {
+          width: 18px;
+          height: 18px;
+          position: absolute;
+          top: 10px;
+          right: 16px;
+          cursor: pointer;
+        }
+
+        .title-container {
+          align-items: center;
+          background: url("~@/assets/images/common/dialog-header.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          height: 60px;
+          font-size: 26px;
+
+          .title {
+            font-family: zaozigongfang;
+            letter-spacing: 2px;
+            line-height: 50px;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            height: 60px;
+            font-size: 26px;
+            color: #fff;
+          }
+        }
+      }
+
+      .dialog_body {
+        position: relative;
+        overflow-y: scroll;
+        padding: 40px 4px 40px 80px;
+        box-sizing: border-box;
+        flex: 1;
+
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: rgba(12, 129, 254, 0.24);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: linear-gradient(270deg, #0063fe, #0095ff);
+        }
+
+        .content {
+          color: #fff;
+          width: 100%;
+          height: 100%;
+          display: flex;
+
+          .left {
+            width: 373px;
+            height: 100%;
+            display: grid;
+
+            > .item {
+              display: flex;
+
+              .time {
+                line-height: 18px;
+                width: fit-content;
+                padding: 1px 16px;
+                box-sizing: border-box;
+                background: #dee7f3;
+                color: #073983;
+                height: 19px;
+                border-radius: 9px;
+                margin-right: 30px;
+              }
+
+              .unit {
+                border-left: solid 4px#256DD6;
+                flex: 1;
+                padding-left: 26px;
+                position: relative;
+
+                &::after {
+                  content: "";
+                  background: #ffffff;
+                  width: 13px;
+                  height: 13px;
+                  border-radius: 50%;
+                  position: absolute;
+                  left: -8px;
+                  top: 0;
+                }
+              }
+            }
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 113px;
+            overflow-y: scroll;
+            padding-right: 2px;
+            padding-right: 78px;
+            > .item {
+              display: flex;
+              height: 150px;
+              overflow: hidden;
+              border-bottom: 1px dashed #5a89f7;
+              align-items: center;
+              justify-content: center;
+              padding: 16px 0;
+              box-sizing: border-box;
+
+              img {
+                width: 200px;
+                height: 120px;
+              }
+              section {
+                flex: 1;
+                // padding-left: 18px;
+                // box-sizing: border-box;
+                .unit {
+                  width: 100%;
+                  text-align: center;
+                  span {
+                    width: fit-content;
+                    padding: 3px 12px;
+                    background: #d79328;
+                    border-radius: 12px;
+                  }
+                }
+                .introduce {
+                  font-size: 14px;
+                }
+              }
+            }
+
+            &::-webkit-scrollbar {
+              width: 3px;
+            }
+
+            &::-webkit-scrollbar-track {
+              border-radius: 10px;
+              background: rgba(12, 129, 254, 0.24);
+            }
+
+            &::-webkit-scrollbar-thumb {
+              border-radius: 10px;
+              background: linear-gradient(270deg, #0063fe, #0095ff);
+            }
+          }
+        }
+      }
+    }
+  }
+  .m-r16 {
+    margin-right: 16px;
+  }
+  .m-l16 {
+    margin-left: 16px;
+  }
+  </style>

src/views/next/dialog-module/szyf-left/eventProcessing.vue

@@ -0,0 +1,334 @@
+<template>
+    <div class="modal" v-show="sjcl">
+      <section>
+        <div class="dialog_header">
+          <div class="close-icon" @click="closeDialog">
+            <img src="@/assets/images/common/dialog-colse.png" alt="" />
+          </div>
+          <div class="title-container">
+            <div class="title">{{ dialogTitle }}</div>
+          </div>
+        </div>
+        <div class="dialog_body">
+          <div class="content">
+            <div class="left">
+              <div class="item" v-for="(item, index) in leftlist" :key="index">
+                <div class="time" v-show="item.time">
+                  {{ item.time }}
+                </div>
+                <div class="unit">
+                  {{ item.unit }}
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="item" v-for="(item, index) in rightList" :key="index">
+                <img
+                  :src="item.imageSrc"
+                  alt=""
+                  class="m-r16"
+                />
+                <section>
+                  <div class="unit">
+                    <span>{{ item.name }}</span>
+                  </div>
+                  <p class="introduce">{{ item.content }}</p>
+                </section>
+                <!-- <img
+                  :src="item.imageSrc"
+                  alt=""
+                  class="m-l16"
+                /> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: '',
+  data () {
+    return {
+      dialogTitle: '事件处理实况',
+      leftlist: [
+        {
+          time: '2012年03月',
+          unit: '青岛浩丰生物科技有限公司签约落户'
+        },
+        {
+          time: '2017年08月',
+          unit: '瑞克斯旺科研中心开工建设'
+        },
+        {
+          time: '2017年11月',
+          unit: '青岛硕丰源种业签约落户'
+        },
+        {
+          time: '2018年01月',
+          unit: '青岛硕丰源研发中心与育苗工厂开工建设'
+        },
+        {
+          time: '2018年09月',
+          unit: '韩国农友BIO株式会社、日本伯格地球株式会社到产业园考察、洽谈'
+        },
+        {
+          time: '2018年10月',
+          unit: '青岛美田花卉种子有限公司签约落户'
+        },
+        {
+          time: '2019年02月',
+          unit: '青岛普瑞达灵芝研发中心项 目签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '韩国农友（北京世农种苗）签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '青岛德龙种子签约落户'
+        }
+      ],
+      rightList: [
+        {
+          name: '青岛浩丰生物科技有限公司',
+          content:
+              '主要业务包括种苗培育、种植加工、仓储销售，曾先后被授予为青岛市农业产业化重点龙头企业、青岛市市控蔬菜基地、山东省现代生态循环农业示范点、青岛市绿色园艺产业园等荣誉。',
+          imageSrc: require('@/assets/images/resource/yfcj/1.jpg')
+        },
+        {
+          name: '瑞克斯旺（中国）农业科技有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/ruikesiwang.png')
+        },
+        {
+          name: '青岛硕丰源种业有限公司',
+          content:
+              '专业致力于旱黄瓜良种的研究、开发与服务为一体的农业高科技企业。是国内最大的一家专业从中国华南型黄瓜种子研发、生产、销售的科技型公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/shuofengyuan.png')
+        },
+        {
+          name: '青岛美田花卉种子有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/meitian.png')
+        },
+        {
+          name: '青岛德龙种子有限公司',
+          content:
+              '规模化新优品种花卉生产而著称。是一家种质资源丰富、技术力量雄厚，集高品质花卉生产和花卉景观设计、施工、养护为一体的综合性公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/delong.png')
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['sjcl'])
+  },
+  components: {},
+  watch: {},
+  created () {},
+  methods: {
+    ...mapActions({
+      showGlobalDialog: 'showGlobalDialog'
+    }),
+    closeDialog () {
+      this.showGlobalDialog('')
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .modal {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 150;
+
+    > section {
+      @include flex(column);
+      background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
+      background-size: 100% 100%;
+      width: 1180px;
+      height: 716px;
+      overflow: hidden;
+      padding-bottom: 16px;
+      box-sizing: border-box;
+
+      .dialog_header {
+        position: relative;
+
+        .close-icon {
+          width: 18px;
+          height: 18px;
+          position: absolute;
+          top: 10px;
+          right: 16px;
+          cursor: pointer;
+        }
+
+        .title-container {
+          align-items: center;
+          background: url("~@/assets/images/common/dialog-header.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          height: 60px;
+          font-size: 26px;
+
+          .title {
+            font-family: zaozigongfang;
+            letter-spacing: 2px;
+            line-height: 50px;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            height: 60px;
+            font-size: 26px;
+            color: #fff;
+          }
+        }
+      }
+
+      .dialog_body {
+        position: relative;
+        overflow-y: scroll;
+        padding: 40px 4px 40px 80px;
+        box-sizing: border-box;
+        flex: 1;
+
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: rgba(12, 129, 254, 0.24);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: linear-gradient(270deg, #0063fe, #0095ff);
+        }
+
+        .content {
+          color: #fff;
+          width: 100%;
+          height: 100%;
+          display: flex;
+
+          .left {
+            width: 373px;
+            height: 100%;
+            display: grid;
+
+            > .item {
+              display: flex;
+
+              .time {
+                line-height: 18px;
+                width: fit-content;
+                padding: 1px 16px;
+                box-sizing: border-box;
+                background: #dee7f3;
+                color: #073983;
+                height: 19px;
+                border-radius: 9px;
+                margin-right: 30px;
+              }
+
+              .unit {
+                border-left: solid 4px#256DD6;
+                flex: 1;
+                padding-left: 26px;
+                position: relative;
+
+                &::after {
+                  content: "";
+                  background: #ffffff;
+                  width: 13px;
+                  height: 13px;
+                  border-radius: 50%;
+                  position: absolute;
+                  left: -8px;
+                  top: 0;
+                }
+              }
+            }
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 113px;
+            overflow-y: scroll;
+            padding-right: 2px;
+            padding-right: 78px;
+            > .item {
+              display: flex;
+              height: 150px;
+              overflow: hidden;
+              border-bottom: 1px dashed #5a89f7;
+              align-items: center;
+              justify-content: center;
+              padding: 16px 0;
+              box-sizing: border-box;
+
+              img {
+                width: 200px;
+                height: 120px;
+              }
+              section {
+                flex: 1;
+                // padding-left: 18px;
+                // box-sizing: border-box;
+                .unit {
+                  width: 100%;
+                  text-align: center;
+                  span {
+                    width: fit-content;
+                    padding: 3px 12px;
+                    background: #d79328;
+                    border-radius: 12px;
+                  }
+                }
+                .introduce {
+                  font-size: 14px;
+                }
+              }
+            }
+
+            &::-webkit-scrollbar {
+              width: 3px;
+            }
+
+            &::-webkit-scrollbar-track {
+              border-radius: 10px;
+              background: rgba(12, 129, 254, 0.24);
+            }
+
+            &::-webkit-scrollbar-thumb {
+              border-radius: 10px;
+              background: linear-gradient(270deg, #0063fe, #0095ff);
+            }
+          }
+        }
+      }
+    }
+  }
+  .m-r16 {
+    margin-right: 16px;
+  }
+  .m-l16 {
+    margin-left: 16px;
+  }
+  </style>

src/views/next/dialog-module/szyf-left/keyPersonnel.vue

@@ -0,0 +1,329 @@
+<template>
+    <div class="modal" v-show="zdry">
+      <section>
+        <div class="dialog_header">
+          <div class="close-icon" @click="closeDialog">
+            <img src="@/assets/images/common/dialog-colse.png" alt="" />
+          </div>
+          <div class="title-container">
+            <div class="title">{{ dialogTitle }}</div>
+          </div>
+        </div>
+        <div class="dialog_body">
+          <div class="content">
+            <div class="left">
+              <div class="item" v-for="(item, index) in leftlist" :key="index">
+                <div class="time" v-show="item.time">
+                  {{ item.time }}
+                </div>
+                <div class="unit">
+                  {{ item.unit }}
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="item" v-for="(item, index) in rightList" :key="index">
+                <img
+                  :src="item.imageSrc"
+                  alt=""
+                  class="m-r16"
+                />
+                <section>
+                  <div class="unit">
+                    <span>{{ item.name }}</span>
+                  </div>
+                  <p class="introduce">{{ item.content }}</p>
+                </section>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: '',
+  data () {
+    return {
+      dialogTitle: '重点人员',
+      leftlist: [
+        {
+          time: '2012年03月',
+          unit: '青岛浩丰生物科技有限公司签约落户'
+        },
+        {
+          time: '2017年08月',
+          unit: '瑞克斯旺科研中心开工建设'
+        },
+        {
+          time: '2017年11月',
+          unit: '青岛硕丰源种业签约落户'
+        },
+        {
+          time: '2018年01月',
+          unit: '青岛硕丰源研发中心与育苗工厂开工建设'
+        },
+        {
+          time: '2018年09月',
+          unit: '韩国农友BIO株式会社、日本伯格地球株式会社到产业园考察、洽谈'
+        },
+        {
+          time: '2018年10月',
+          unit: '青岛美田花卉种子有限公司签约落户'
+        },
+        {
+          time: '2019年02月',
+          unit: '青岛普瑞达灵芝研发中心项 目签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '韩国农友（北京世农种苗）签约落户'
+        },
+        {
+          time: '2019年04月',
+          unit: '青岛德龙种子签约落户'
+        }
+      ],
+      rightList: [
+        {
+          name: '青岛浩丰生物科技有限公司',
+          content:
+              '主要业务包括种苗培育、种植加工、仓储销售，曾先后被授予为青岛市农业产业化重点龙头企业、青岛市市控蔬菜基地、山东省现代生态循环农业示范点、青岛市绿色园艺产业园等荣誉。',
+          imageSrc: require('@/assets/images/resource/yfcj/1.jpg')
+        },
+        {
+          name: '瑞克斯旺（中国）农业科技有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/ruikesiwang.png')
+        },
+        {
+          name: '青岛硕丰源种业有限公司',
+          content:
+              '专业致力于旱黄瓜良种的研究、开发与服务为一体的农业高科技企业。是国内最大的一家专业从中国华南型黄瓜种子研发、生产、销售的科技型公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/shuofengyuan.png')
+        },
+        {
+          name: '青岛美田花卉种子有限公司',
+          content:
+              '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
+          imageSrc: require('@/assets/images/resource/yfcj/meitian.png')
+        },
+        {
+          name: '青岛德龙种子有限公司',
+          content:
+              '规模化新优品种花卉生产而著称。是一家种质资源丰富、技术力量雄厚，集高品质花卉生产和花卉景观设计、施工、养护为一体的综合性公司。',
+          imageSrc: require('@/assets/images/resource/yfcj/delong.png')
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['zdry'])
+  },
+  components: {},
+  watch: {},
+  created () {},
+  methods: {
+    ...mapActions({
+      showGlobalDialog: 'showGlobalDialog'
+    }),
+    closeDialog () {
+      this.showGlobalDialog('')
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .modal {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 150;
+
+    > section {
+      @include flex(column);
+      background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
+      background-size: 100% 100%;
+      width: 1180px;
+      height: 716px;
+      overflow: hidden;
+      padding-bottom: 16px;
+      box-sizing: border-box;
+
+      .dialog_header {
+        position: relative;
+
+        .close-icon {
+          width: 18px;
+          height: 18px;
+          position: absolute;
+          top: 10px;
+          right: 16px;
+          cursor: pointer;
+        }
+
+        .title-container {
+          align-items: center;
+          background: url("~@/assets/images/common/dialog-header.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          height: 60px;
+          font-size: 26px;
+
+          .title {
+            font-family: zaozigongfang;
+            letter-spacing: 2px;
+            line-height: 50px;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            height: 60px;
+            font-size: 26px;
+            color: #fff;
+          }
+        }
+      }
+
+      .dialog_body {
+        position: relative;
+        overflow-y: scroll;
+        padding: 40px 4px 40px 80px;
+        box-sizing: border-box;
+        flex: 1;
+
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: rgba(12, 129, 254, 0.24);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: linear-gradient(270deg, #0063fe, #0095ff);
+        }
+
+        .content {
+          color: #fff;
+          width: 100%;
+          height: 100%;
+          display: flex;
+
+          .left {
+            width: 373px;
+            height: 100%;
+            display: grid;
+
+            > .item {
+              display: flex;
+
+              .time {
+                line-height: 18px;
+                width: fit-content;
+                padding: 1px 16px;
+                box-sizing: border-box;
+                background: #dee7f3;
+                color: #073983;
+                height: 19px;
+                border-radius: 9px;
+                margin-right: 30px;
+              }
+
+              .unit {
+                border-left: solid 4px#256DD6;
+                flex: 1;
+                padding-left: 26px;
+                position: relative;
+
+                &::after {
+                  content: "";
+                  background: #ffffff;
+                  width: 13px;
+                  height: 13px;
+                  border-radius: 50%;
+                  position: absolute;
+                  left: -8px;
+                  top: 0;
+                }
+              }
+            }
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 113px;
+            overflow-y: scroll;
+            padding-right: 2px;
+            padding-right: 78px;
+            > .item {
+              display: flex;
+              height: 150px;
+              overflow: hidden;
+              border-bottom: 1px dashed #5a89f7;
+              align-items: center;
+              justify-content: center;
+              padding: 16px 0;
+              box-sizing: border-box;
+
+              img {
+                width: 200px;
+                height: 120px;
+              }
+              section {
+                flex: 1;
+                // padding-left: 18px;
+                // box-sizing: border-box;
+                .unit {
+                  width: 100%;
+                  text-align: center;
+                  span {
+                    width: fit-content;
+                    padding: 3px 12px;
+                    background: #d79328;
+                    border-radius: 12px;
+                  }
+                }
+                .introduce {
+                  font-size: 14px;
+                }
+              }
+            }
+
+            &::-webkit-scrollbar {
+              width: 3px;
+            }
+
+            &::-webkit-scrollbar-track {
+              border-radius: 10px;
+              background: rgba(12, 129, 254, 0.24);
+            }
+
+            &::-webkit-scrollbar-thumb {
+              border-radius: 10px;
+              background: linear-gradient(270deg, #0063fe, #0095ff);
+            }
+          }
+        }
+      }
+    }
+  }
+  .m-r16 {
+    margin-right: 16px;
+  }
+  .m-l16 {
+    margin-left: 16px;
+  }
+  </style>

src/views/next/dialog-module/zdyf-left/yfclz.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="modal" v-show="yfclz">
+    <section>
+      <div class="dialog_header">
+        <div class="close-icon" @click="closeDialog">
+          <img src="@/assets/images/common/dialog-colse.png" alt="" />
+        </div>
+        <div class="title-container">
+          <div class="title">{{ dialogTitle }}</div>
+        </div>
+      </div>
+      <div class="dialog_body">
+        <div class="content">
+          <div class="main">
+            <div class="wrap">
+              <div class="content">
+                <div class="content-left">
+                  <div class="content-left-list">
+                    <div
+                      v-for="item in titleList"
+                      :key="item.id"
+                      @click="onDatils(item)"
+                      :class="`content-left-list-item ${
+                        currentId === item.id ? 'action' : ''
+                      }`"
+                    >
+                      {{ item.name }}
+                    </div>
+                  </div>
+                </div>
+                <div class="content-right">
+                  <!-- <div v-if="info.description" v-html="info.description"></div> -->
+                  <div
+                    class="numItem"
+                    v-for="(item, index) in numList"
+                    :key="'item' + index"
+                  >
+                    <div class="title">{{ item.company }}</div>
+                    <div class="content">
+                      <div>
+                        种植时间：<span class="txt">{{ item.zzDate }}</span>
+                      </div>
+                      <div>
+                        上市时间：<span class="txt">{{ item.ssDate }}</span>
+                      </div>
+                      <div>
+                        产量：<span class="txt">{{ item.num }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+import { partyPlacePage, partyPlace } from "@/api/hsyf";
+export default {
+  name: "",
+  data() {
+    return {
+      dialogTitle: "移风菜篮子",
+      currentId: 0,
+      titleList: [
+        {
+          name: "土豆",
+          id: 0,
+        },
+        {
+          name: "白菜",
+          id: 1,
+        },
+        {
+          name: "生菜",
+          id: 2,
+        },
+        {
+          name: "西红柿",
+          id: 3,
+        },
+        {
+          name: "西蓝花",
+          id: 4,
+        },
+      ],
+      numList: [
+        {
+          company: "XXXX种植基地有限公司",
+          zzDate: "2024-01-10",
+          ssDate: "2024-03-20",
+          num: "120万吨",
+        },
+        {
+          company: "XXXX种植基地有限公司",
+          zzDate: "2024-01-10",
+          ssDate: "2024-03-20",
+          num: "120万吨",
+        },
+        {
+          company: "XXXX种植基地有限公司",
+          zzDate: "2024-01-10",
+          ssDate: "2024-03-20",
+          num: "120万吨",
+        },
+        {
+          company: "XXXX种植基地有限公司",
+          zzDate: "2024-01-10",
+          ssDate: "2024-03-20",
+          num: "120万吨",
+        },
+        {
+          company: "XXXX种植基地有限公司",
+          zzDate: "2024-01-10",
+          ssDate: "2024-03-20",
+          num: "120万吨",
+        },
+      ],
+      loading: false,
+      info: { description: "" },
+    };
+  },
+  computed: {
+    ...mapGetters(["yfclz"]),
+  },
+  components: {},
+  mounted() {},
+  created() {
+    // partyPlacePage({ page: 1, limit: 100, type: 1 }).then((res) => {
+    //   this.currentId = res.data.list.id
+    //   this.titleList = res.data.list
+    //   if (this.titleList.length > 0) {
+    //     this.onDatils(this.titleList[0])
+    //   }
+    // })
+  },
+  methods: {
+    ...mapActions({
+      showGlobalDialog: "showGlobalDialog",
+    }),
+    closeDialog() {
+      this.showGlobalDialog("");
+    },
+    onDatils(item) {
+      this.currentId = item.id;
+      // partyPlace(item.id).then((res) => {
+      //   // console.log('res::', res);
+      //   this.info = res.data
+      // })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.modal {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 150;
+
+  section {
+    @include flex(column);
+    background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
+    // background: url("~@/assets/images/common/dialog-bg-big-red.png") no-repeat !important;
+    background-size: 100% 100% !important;
+    width: 940px;
+    height: 716px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dialog_header {
+      position: relative;
+      margin-bottom: 0px;
+
+      .close-icon {
+        width: 18px;
+        height: 18px;
+        position: absolute;
+        top: 10px;
+        right: 16px;
+        cursor: pointer;
+      }
+
+      .title-container {
+        align-items: center;
+        background: url("~@/assets/images/common/dialog-header-yfclz.png") no-repeat;
+        // background: url("~@/assets/images/common/dialog-header-big-red.png")
+        //   no-repeat;
+        // background-size: 100% 100%;
+        background-position: 160px;
+        display: flex;
+        justify-content: center;
+        padding-left: 160px;
+        align-items: center;
+        height: 60px;
+        font-size: 26px;
+
+        .title {
+          font-family: zaozigongfang;
+          letter-spacing: 2px;
+          line-height: 50px;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          height: 52px;
+          font-size: 22px;
+          color: #fff;
+        }
+      }
+    }
+
+    .dialog_body {
+      margin-top: -32px;
+      position: relative;
+
+      > .content {
+        box-sizing: border-box;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.wrap {
+  .content {
+    display: flex;
+    &-left {
+      margin-top: -6px;
+      padding-top: 38px;
+      width: 160px;
+      height: 636px;
+      background: linear-gradient(
+        270deg,
+        #1f7eff 0%,
+        rgba(13, 113, 248, 0) 100%
+      );
+      &-list {
+        &-item {
+          width: 136px;
+          height: 44px;
+          line-height: 44px;
+          font-size: 16px;
+          padding-left: 24px;
+          font-weight: 500;
+          color: #c5defb;
+          font-family: PingFang SC;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .action {
+          color: #ffffff;
+          background-image: linear-gradient(
+            to right,
+            rgba(71, 149, 255, 1) 0%,
+            rgba(71, 149, 255, 1) 6px,
+            rgba(31, 126, 255, 1) 7px,
+            rgba(249, 140, 38, 0) 160px
+          );
+        }
+      }
+    }
+    &-right {
+      width: calc(100% - 165px);
+      padding-left:39px;
+      margin-top: 68px;
+      height: 636px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: rgba(12, 129, 254, 0.24);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: linear-gradient(270deg, #0063fe, #0095ff);
+      }
+
+      .numItem {
+        width: 670px;
+        background: rgba(109, 166, 255, 0.2);
+        padding: 16px 16px;
+        border-radius: 2px;
+        margin-bottom: 10px;
+        .title {
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 18px;
+          color: #ffffff;
+          line-height: 32px;
+        }
+        .content {
+          display: flex;
+          justify-content: space-between;
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 16px;
+          color: rgba(255, 255, 255, 0.6);
+          line-height: 32px;
+          .txt {
+            font-family: PingFang SC;
+            font-weight: 500;
+            font-size: 16px;
+            color: #ffffff;
+            line-height: 32px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/next/index.vue

@@ -47,6 +47,7 @@
     <partyCommitteeDangyuan />
     <partyCommitteeDyzxh />
     <ZdyfRightResearch />
+    <ZdyfLeftYflz />
     <dyfcModal />
     <djhdModal />
     <ywqsModal />
@@ -58,6 +59,9 @@
     <ylqdModal />
     <ZdyfKeyEnterprises />
     <ZdyfKeyEnterprisesDetail />
+    <EventAnalysis />
+    <EventProcessing />
+    <KeyPersonnel />
   </div>
 </template>
 
@@ -70,6 +74,7 @@ import ScreenContent from './layout/screen-content'
 import ScreenContentLeft from './screen-content-left'
 import ScreenContentRight from './screen-content-right'
 import ZdyfLeftYfcj from './dialog-module/zdyf-left/yfcj'
+import ZdyfLeftYflz from './dialog-module/zdyf-left/yfclz.vue'
 import ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
 import ZdyfRightResearch from './dialog-module/zdyf-right/kyll/research.vue'
 import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
@@ -91,6 +96,9 @@ import ywqsModal from './dialog-module/hsyf-right/ywqsModal.vue'
 import ylqdModal from './dialog-module/hsyf-right/ylqdModal.vue'
 import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
 import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'
+import EventAnalysis from './dialog-module/szyf-left/eventAnalysis.vue'
+import EventProcessing from './dialog-module/szyf-left/eventProcessing.vue'
+import KeyPersonnel from './dialog-module/szyf-left/keyPersonnel.vue'
 
 let width = 0
 let height = 0
@@ -120,10 +128,14 @@ export default {
     dyfcModal,
     djhdModal,
     ywqsModal,
+    ZdyfLeftYflz,
     ZdyfRightResearch,
     ZdyfKeyEnterprises,
     ZdyfKeyEnterprisesDetail,
-    ylqdModal
+    ylqdModal,
+    EventAnalysis,
+    EventProcessing,
+    KeyPersonnel
   },
   data () {
     return {

src/views/next/layout/screen-bottom.vue

@@ -50,98 +50,98 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions } from "vuex";
 
 export default {
   props: {
     navId: {
       type: String,
-      default: ''
+      default: "",
-    }
+    },
   },
-  data () {
+  data() {
     return {
-      active: 'sy',
+      active: "sy",
       navList: [
         {
-          imgSrc: require('@/assets/images/home/hsyf.png'),
+          imgSrc: require("@/assets/images/home/hsyf.png"),
-          imgSrcActive: require('@/assets/images/home/hsyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/hsyf-active.png"),
-          name: '红色移风',
+          name: "红色移风",
-          id: 'hsyf'
+          id: "hsyf",
         },
         {
-          imgSrc: require('@/assets/images/home/zdyf.png'),
+          imgSrc: require("@/assets/images/home/zdyf.png"),
-          imgSrcActive: require('@/assets/images/home/zdyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/zdyf-active.png"),
-          name: '种都移风',
+          name: "种都移风",
-          id: 'zdyf'
+          id: "zdyf",
         },
         {
-          imgSrc: require('@/assets/images/home/sy.png'),
+          imgSrc: require("@/assets/images/home/sy.png"),
-          imgSrcActive: require('@/assets/images/home/sy-active.png'),
+          imgSrcActive: require("@/assets/images/home/sy-active.png"),
-          name: '首页',
+          name: "首页",
-          id: 'sy'
+          id: "sy",
         },
         {
-          imgSrc: require('@/assets/images/home/szyf.png'),
+          imgSrc: require("@/assets/images/home/szyf.png"),
-          imgSrcActive: require('@/assets/images/home/szyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/szyf-active.png"),
-          name: '善治移风',
+          name: "善治移风",
-          id: 'szyf'
+          id: "szyf",
         },
         {
-          imgSrc: require('@/assets/images/home/whyf.png'),
+          imgSrc: require("@/assets/images/home/whyf.png"),
           // imgSrcActive:require('@/assets/images/home/whyf-active.png'),
-          name: '文化移风',
+          name: "文化移风",
-          id: 'whyf'
+          id: "whyf",
-        }
+        },
       ],
       navListRed: [
         {
-          imgSrc: require('@/assets/images/home/hsyf-red.png'),
+          imgSrc: require("@/assets/images/home/hsyf-red.png"),
-          imgSrcActive: require('@/assets/images/home/hsyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/hsyf-active.png"),
-          name: '红色移风',
+          name: "红色移风",
-          id: 'hsyf'
+          id: "hsyf",
         },
         {
-          imgSrc: require('@/assets/images/home/zdyf-red.png'),
+          imgSrc: require("@/assets/images/home/zdyf-red.png"),
-          imgSrcActive: require('@/assets/images/home/zdyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/zdyf-active.png"),
-          name: '种都移风',
+          name: "种都移风",
-          id: 'zdyf'
+          id: "zdyf",
         },
         {
-          imgSrc: require('@/assets/images/home/sy-red.png'),
+          imgSrc: require("@/assets/images/home/sy-red.png"),
-          imgSrcActive: require('@/assets/images/home/sy-active.png'),
+          imgSrcActive: require("@/assets/images/home/sy-active.png"),
-          name: '首页',
+          name: "首页",
-          id: 'sy'
+          id: "sy",
         },
         {
-          imgSrc: require('@/assets/images/home/szyf-red.png'),
+          imgSrc: require("@/assets/images/home/szyf-red.png"),
-          imgSrcActive: require('@/assets/images/home/szyf-active.png'),
+          imgSrcActive: require("@/assets/images/home/szyf-active.png"),
-          name: '善治移风',
+          name: "善治移风",
-          id: 'szyf'
+          id: "szyf",
         },
         {
-          imgSrc: require('@/assets/images/home/whyf-red.png'),
+          imgSrc: require("@/assets/images/home/whyf-red.png"),
           // imgSrcActive:require('@/assets/images/home/whyf-active.png'),
-          name: '文化移风',
+          name: "文化移风",
-          id: 'whyf'
+          id: "whyf",
-        }
+        },
-      ]
+      ],
-    }
+    };
   },
-  created () {},
+  created() {},
   methods: {
     ...mapActions({
-      set_nav: 'SET_NAV'
+      set_nav: "SET_NAV",
     }),
-    handelCLickNav (item) {
+    handelCLickNav(item) {
-      this.active = item.id
+      this.active = item.id;
-      this.set_nav(item.id)
+      this.set_nav(item.id);
-    }
+    },
   },
   components: {},
   computed: {},
-  watch: {}
+  watch: {},
-}
+};
 </script>
 <style lang="scss" scoped>
 .screen-bottm {
@@ -180,20 +180,32 @@ export default {
       background-size: 100% 100%;
 
       img {
-        width: 28px !important;
+        margin-top: -14px;
-        height: 28px !important;
+        width: 50px !important;
+        height: 50px !important;
+      }
+      span {
+        margin-top: -10px;
       }
     }
 
     .active {
       background: url("~@/assets/images/home/activeBg.png") no-repeat;
       background-size: 100% 100%;
-      height: 90px;
+      height: 65px;
-      width: 108px;
+      width: 89px;
       color: #ffffff;
       font-size: 16px;
       padding-bottom: 18px;
       box-sizing: border-box;
+      img {
+        margin-top: -24px;
+        width: 56px !important;
+        height: 56px !important;
+      }
+      span {
+        margin-top: -10px;
+      }
     }
   }
   .nav-red {
@@ -215,27 +227,40 @@ export default {
       height: 56px;
       background: url("~@/assets/images/home/navBgRed.png") no-repeat;
       background-size: 100% 100%;
+      opacity: 0.9;
 
       img {
-        width: 28px !important;
+        margin-top: -14px;
-        height: 28px !important;
+        width: 50px !important;
+        height: 50px !important;
       }
 
       img {
-        width: 28px !important;
+        margin-top: -24px;
-        height: 28px !important;
+        width: 50px !important;
+        height: 50px !important;
+      }
+
+      span {
+        margin-top: -10px;
       }
     }
 
     .active {
       background: url("~@/assets/images/home/activeBg.png") no-repeat;
+      opacity: 0.8;
       background-size: 100% 100%;
-      height: 90px;
+      height: 65px;
-      width: 108px;
+      width: 89px;
       color: #ffffff;
       font-size: 16px;
       padding-bottom: 18px;
+      opacity: 1;
       box-sizing: border-box;
+      img {
+        width: 56px !important;
+        height: 56px !important;
+      }
     }
   }
 }

src/views/next/screen-content-left/szyf-left/index.vue

@@ -6,7 +6,7 @@
       </screen-title>
       <div class="card-item-sjcl1">
         <section>
-          <div class="total">
+          <div class="total" @click="set_sjcl(true)">
             <span>事件总数</span>
             <span><b>1,762</b>件</span>
           </div>
@@ -27,14 +27,14 @@
     </div>
     <div class="card h379" style="margin-top: 8px">
       <screen-title>
-        <div slot="left" class="screen-title-left">事件处理实况</div>
+        <div slot="left" class="screen-title-left">事件分析</div>
       </screen-title>
       <div class="card-item-sjcl2">
         <section>
           <div id="chart3D"></div>
           <div class="buttomCharts"></div>
         </section>
-        <div class="box">
+        <div class="box" @click="set_sjfx(true)">
           <div class="left">
             <div class="item">
               <span class="num">137</span>
@@ -83,7 +83,7 @@
             v-for="(item, index) in stabilizeList"
             :key="'key' + index"
           >
-            <div class="card-item-wwry">
+            <div class="card-item-wwry" @click="set_zdry(true)">
               <div class="item" v-for="item1 in item" :key="item1.name">
                 <div class="img">
                   <img :src="item1.imgSrc" alt="" />
@@ -102,6 +102,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
   data () {
     return {
@@ -261,6 +262,12 @@ export default {
   },
   beforeDestroy () {},
   methods: {
+    ...mapActions({
+      set_talents: 'SET_TALENTS',
+      set_sjfx: 'SET_SJFX',
+      set_sjcl: 'SET_SJCL',
+      set_zdry: 'SET_ZDRY'
+    }),
     initChartPei () {
       const myChart = this.$echarts.init(document.getElementById('chart'))
       this.peiOption = this.getPei(this.optionData)

src/views/next/screen-content-left/zdyf-left/index.vue

@@ -152,7 +152,7 @@
               :class-option="optionHover1"
               :data="shichangList"
             >
-              <div class="scroll-box">
+              <div class="scroll-box" @click="openClz">
                 <div
                   class="scroll-item"
                   v-for="(item, index) in yfclzList"
@@ -267,7 +267,7 @@ export default {
       prcCollectionListForGov({
         ...params,
         FEndDate: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
-        FStartDate: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
+        FStartDate: this.$moment().subtract(1, 'days').format('yyyy-MM-DD')
       }).then((res1) => {
         this.shichangList = this.getScData(res.priceslist, res1.priceslist)
       })
@@ -277,8 +277,13 @@ export default {
     ...mapActions({
       showGlobalDialog: 'showGlobalDialog',
       set_yfcj: 'SET_YFCJ',
+      set_yfclz: 'SET_YFCLZ',
       set_ldhg: 'SET_LDGH'
     }),
+    openClz () {
+      console.log('zoule?')
+      this.set_yfclz(true)
+    },
     deduplicationJs (arr) {
       const data = []
       arr.forEach((item, index) => {
@@ -293,7 +298,8 @@ export default {
       const dataD = this.deduplicationJs(arr)
       const dataTd = this.deduplicationJs(arr1)
       return dataD.map((item, index) => {
-        const jzrPrice = item.price - dataTd[index].price
+        const priceTd = dataTd.filter(item1 => item.Name === item1.Name)[0].price
+        const jzrPrice = item.price - priceTd
         return {
           ...item,
           jzrPrice
@@ -375,11 +381,11 @@ export default {
       color: #ffffff;
       line-height: 24px;
       div:nth-child(1) {
-        width: 79px;
+        width: 99px;
         opacity: 0.76;
       }
       div:nth-child(2) {
-        width: 109px;
+        width: 100px;
         opacity: 0.76;
       }
     }
@@ -396,10 +402,10 @@ export default {
         height: 18px;
       }
       div:nth-child(1) {
-        width: 80px;
+        width: 99px;
       }
       div:nth-child(2) {
-        width: 65px;
+        width: 100px;
       }
     }
   }

src/views/next/screen-content-map/cpt/home-map.vue

@@ -11,6 +11,7 @@ import { GaodeMap } from '@antv/l7-maps'
 import yifengJson from './yifeng.json'
 import chinaMap from './chinaMap.vue'
 import { selectConfigList } from '@/api/home'
+import jdbandaoJson from './jdbandao.json'
 import { mapActions } from 'vuex'
 let myMap
 let scene
@@ -139,13 +140,32 @@ export default {
       const { darkStyle } = this
       const styleConfig = darkStyle
       const data = yifengJson
+      const data1 = jdbandaoJson
       // 画区域面积
+      polygonLayer = new PolygonLayer({
+        autoFit: true
+      })
+        .size(1000)
+        .source(data1)
+        .color('name', ['rgba(0, 127, 241, .5)'])
+        .shape('fill')
+        .style({
+          // opacityLinear: {
+          //   enable: true, // true - false
+          //   dir: 'out' // in - out
+          // },
+          opacity: 0.6,
+          // heightfixed: true,
+          sourceColor: '#4ee8fc',
+          targetColor: '#00284e'
+        })
+      scene.addLayer(polygonLayer)
       polygonLayer = new PolygonLayer({
         autoFit: true
       })
         .size(1000)
         .source(data)
-        .color('name', styleConfig.polygonColor)
+        .color('name', ['rgba(0, 127, 241, .5)'])
         .shape('extrude')
         // .shape("fill")
         .style({
@@ -155,7 +175,7 @@ export default {
           },
           opacity: 0.8,
           heightfixed: true,
-          sourceColor: '#4ee8fc',
+          sourceColor: '#3372d0',
           targetColor: '#00284e'
           // targetColor: '#4ee8fc'
         })

src/views/next/screen-content-map/cpt/szyf-map.vue

@@ -12,14 +12,15 @@
 </template>
 <script>
 
-import { Scene } from '@antv/l7'
+import { Scene, PolygonLayer } from '@antv/l7'
 import { GaodeMap } from '@antv/l7-maps'
 import yifengJson from './yifeng.json'
+import jdbandaoJson from './jdbandao.json'
 import chinaMap from './chinaMap.vue'
 import { mapActions } from 'vuex'
 let myMap
 let scene
-let roadLayer
+let polygonLayer
 export default {
   data () {
     return {
@@ -111,6 +112,50 @@ export default {
         logoVisible: false,
         map: myMap
       })
+
+      const data = yifengJson
+      const data1 = jdbandaoJson
+      // 画区域面积
+      if (polygonLayer) {
+        scene.removeLayer(polygonLayer)
+      }
+      polygonLayer = new PolygonLayer({
+        autoFit: true
+      })
+        .size(1000)
+        .source(data1)
+        .color('name', ['rgba(0, 127, 241, .5)'])
+        .shape('fill')
+        .style({
+          // opacityLinear: {
+          //   enable: true, // true - false
+          //   dir: 'out' // in - out
+          // },
+          opacity: 0.6,
+          // heightfixed: true,
+          sourceColor: '#4ee8fc',
+          targetColor: '#00284e'
+        })
+      scene.addLayer(polygonLayer)
+      // 画区域面积
+      polygonLayer = new PolygonLayer({
+        autoFit: true
+      })
+        .size(1000)
+        .source(data)
+        .color('name', ['rgba(0, 127, 241, .0)'])
+        .shape('fill')
+        .style({
+          // opacityLinear: {
+          //   enable: true, // true - false
+          //   dir: 'out' // in - out
+          // },
+          opacity: 0,
+          // heightfixed: true,
+          sourceColor: '#4ee8fc',
+          targetColor: '#00284e'
+        })
+      scene.addLayer(polygonLayer)
       scene.on('loaded', () => {
       })
     }

src/views/next/screen-content-map/cpt/zdyf-map.vue

@@ -9,7 +9,7 @@
         <img src="@/assets/images/map/yellowPot.png" alt="" />
         <img src="@/assets/images/map/36°.png" alt="" />
       </div>
-      <div class="pot1">黄金育种带</div>
+      <div class="pot1" @click="toProvince">黄金育种带</div>
     </div>
     <div id="myMap" v-if="mapFlag == 'Amap'">
       <div v-if="mapType == 'polygon'">
@@ -326,20 +326,21 @@ export default {
       polygonLayer = new PolygonLayer({
         autoFit: true
       })
-        .size(300)
+        .size(1000)
         .source(data)
         .color('name', ['rgba(0, 127, 241, .5)'])
         .shape('extrude')
-        // .shape('fill')
+        // .shape("fill")
         .style({
           opacityLinear: {
             enable: true, // true - false
             dir: 'out' // in - out
           },
-          opacity: 1,
+          opacity: 0.8,
           heightfixed: true,
           sourceColor: '#3372d0',
           targetColor: '#00284e'
+          // targetColor: '#4ee8fc'
         })
       scene.addLayer(polygonLayer)
 
@@ -554,7 +555,7 @@ export default {
     left: -50px;
     background: url("~@/assets/images/common/yellowQuxian.png") no-repeat;
     background-position: center 13px;
-    height: 65px;
+    height: 72px;
     margin-top: 24px;
     overflow: hidden;
     display: block;

src/views/next/screen-content-right/szyf-right/index.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="card h379" style="margin-top: 8px">
       <screen-title>
-        <div slot="left" class="screen-title-left">事件处理实况</div>
+        <div slot="left" class="screen-title-left">视频监控</div>
       </screen-title>
       <div class="card-item-sjcl">
         <div class="item" v-for="(item, index) in monitorList" :key="index">