代码提交

src/components/screen-title-sz/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div style="height: 36px" class="screen-title-w">
+    <div class="box">
+      <div class="guang" v-if="ifTime">
+        <img
+          class="guang-img"
+          :src="require('@/assets/images/common/guang-zd.png')"
+        />
+      </div>
+      <div class="guang1" v-if="ifTime">
+        <img
+          class="guang-img1"
+          :src="require('@/assets/images/common/guang-zd.png')"
+        />
+      </div>
+    </div>
+    <div class="screen-title">
+      <div class="left">
+        <slot name="left"></slot>
+      </div>
+      <div class="right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "screen-title",
+  // mounted() {
+  //   console.log("Math.random()", Math.random());
+  //   // JavaScript Math.random()
+  // },
+  data() {
+    return {
+      ifTime: false,
+    };
+  },
+  // created() {
+  // },
+  mounted() {
+    let times = (Math.random() * 2000).toFixed(0);
+    setTimeout(() => {
+      this.ifTime = true;
+    }, times);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@keyframes run {
+  0% {
+    left: 0%;
+  }
+  100% {
+    left: calc(100% + 536px);
+  }
+}
+@keyframes run1 {
+  0% {
+    left: calc(0% - 268px);
+  }
+  100% {
+    left: calc(100% + 268px);
+  }
+}
+.screen-title-w {
+  width: 100%;
+  height: 36px;
+  background-size: 100% 100%;
+  background: url("~@/assets/images/common/card_title_sz.png") no-repeat;
+}
+.screen-title {
+  position: relative;
+  top: -36px;
+  width: 100%;
+  height: 36px;
+  background-position: 0 0;
+  @include flex();
+  align-items: center;
+  justify-content: space-between;
+  font-family: "zaozigongfang";
+  font-style: italic;
+  font-size: 16px;
+  // background-size: 100% 100%;
+  // background: url("~@/assets/images/common/card_title_red.png") no-repeat;
+  padding-right: 16px;
+  box-sizing: border-box;
+  .left {
+    margin-left: 44px;
+    height: 50px;
+    line-height: 64px;
+  }
+  .right {
+    font-style: normal;
+  }
+}
+.box {
+  position: relative;
+  height: 36px;
+  overflow: hidden;
+  .guang {
+    position: relative;
+    .guang-img {
+      width: 268px;
+      height: 26px;
+      animation: run 4s linear infinite;
+      position: relative;
+      top: -10px;
+    }
+  }
+  .guang1 {
+    position: relative;
+    .guang-img1 {
+      width: 268px;
+      height: 26px;
+      animation: run1 4s linear infinite;
+      position: relative;
+      bottom: 10px;
+    }
+  }
+}
+</style>
+
+<style scoped>
+/* .screen-title-right > span {
+  border: 1px solid #e7743b !important;
+  color: #fbe9c5 !important;
+} */
+</style>

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="card h266">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">事件处理实况</div>
-      </screen-title>
+      </screen-title-sz>
       <div class="card-item-sjcl1">
         <section>
           <div class="total" @click="set_sjcl(true)">
@@ -29,9 +29,9 @@
       </div>
     </div>
     <div class="card h379" style="margin-top: 8px">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">事件分析</div>
-      </screen-title>
+      </screen-title-sz>
       <div class="card-item-sjcl2">
         <section>
           <div id="chart3D"></div>
@@ -113,9 +113,9 @@
       </div>
     </div>
     <div class="card h232 m-top12">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">重点人员</div>
-      </screen-title>
+      </screen-title-sz>
       <div>
         <el-carousel height="190px">
           <el-carousel-item

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="card h232 m-top12">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">“移”语花开，共治有我</div>
-      </screen-title>
+      </screen-title-sz>
       <div class="card-item-zdbf">
         <div class="yygz">
           <div class="yygz-item" v-for="item in yygzList" :key="item.name">
@@ -13,9 +13,9 @@
       </div>
     </div>
     <div class="card h292" style="margin-top: 8px">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">“移”治风采</div>
-      </screen-title>
+      </screen-title-sz>
       <!-- <div class="card-item-sjcl">
         <div class="item" v-for="(item, index) in monitorList" :key="index">
           <img :src="item.src" alt="" />
@@ -46,9 +46,9 @@
       </div>
     </div>
     <div class="card h339" style="margin-top: 8px">
-      <screen-title>
+      <screen-title-sz>
         <div slot="left" class="screen-title-left">服务事项分析</div>
-      </screen-title>
+      </screen-title-sz>
       <div id="myChart" style="width: 100%; height: 100%"></div>
     </div>
   </div>
@@ -211,15 +211,16 @@ export default {
           axisLabel: {
             show: true,
             color: '#BDCEEA',
-            fontSize: '12'
+            fontSize: '12',
+            rotate: 45
           },
-          data: ['社会保障', '生产许可', '户籍', '就业', 'xxx', '其他']
+          data: ['社会保障', '生产许可', '户籍', '就业', '民生诉求', '其他']
         },
         title: {
           text: '件',
           textStyle: {
             color: '#ACBBD4',
-            fontWeight: '800',
+            fontWeight: '600',
             fontSize: 14
           },
           left: '18px',
@@ -265,7 +266,7 @@ export default {
                 barBorderRadius: [0, 0, 0, 0]
               }
             },
-            data: [220, 182, 191, 234, 290, 330]
+            data: [1687, 158, 361, 821, 3628, 58]
           },
           {
             name: 'rightA',
@@ -290,7 +291,7 @@ export default {
                 barBorderRadius: [0, 0, 0, 0]
               }
             },
-            data: [220, 182, 191, 234, 290, 330],
+            data: [1687, 158, 361, 821, 3628, 58],
             barGap: 0
           },
           {
@@ -323,7 +324,7 @@ export default {
             symbolSize: ['25', '12'],
             symbolOffset: ['0', '-8'],
             symbolPosition: 'end',
-            data: [220, 182, 191, 234, 290, 330],
+            data: [1687, 158, 361, 821, 3628, 58],
             z: 3
           },
           {
@@ -341,8 +342,8 @@ export default {
             symbolSize: [60, 2],
             symbolPosition: 'start',
             symbolOffset: [3, -4],
-            symbolBoundingData: [350, 350, 350, 350, 350, 350],
+            symbolBoundingData: [4000, 4000, 4000, 4000, 4000, 4000],
-            data: [350, 350, 350, 350, 350, 350],
+            data: [4000, 4000, 4000, 4000, 4000, 4000],
             z: 1,
             animationEasing: 'elasticOut'
           }