feat:添加数据缓动效果

ZhangXianQiang

2024-03-13 2d6ec7162f446b64fe395a7e77894277b9385d96

feat:添加数据缓动效果

 package.json

@@ -45,6 +45,7 @@
    "element-ui": "2.15.14",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "gsap": "^3.12.5",
    "highlight.js": "9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",

 src/assets/map/zigong.json

New file
Diff too large

 src/views/home/data-table/index.vue

@@ -18,6 +18,12 @@
          </el-table-column>
          <el-table-column prop="date" label="运维截止时间" align="center">
          </el-table-column>
          <el-table-column prop="date" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="warning"
                disable-transitions>临期</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>

 src/views/home/data-view/components/data-hola.vue

@@ -7,7 +7,7 @@
<script>
import * as echarts from 'echarts';
let holaChart = null;

let observer = null;
const config = {
  tooltip: {
    trigger: 'item'
@@ -78,6 +78,21 @@
        holaChart.setOption(config, true);
      }

    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.hola);
    },
    // 窗口变换
    handleResize() {
      if (holaChart) {
        holaChart.resize();
      }
    }
  },
  watch: {
@@ -93,7 +108,15 @@
  mounted() {
    holaChart = echarts.init(this.$refs.hola);
    holaChart.setOption(config, true);
  }
    this.observe();

  },
  beforeDestroy() {
    if (holaChart) {
      holaChart.dispose();
      observer.unobserve(this.$refs.hola);
    }
  },
}
</script>


 src/views/home/data-view/components/data-icon.vue

@@ -7,7 +7,7 @@
          <i :class="iconList[index].icon" class="icon-font"></i>
        </div>
        <div class="data-info">
          <div class="data-num">{{ item.value }}</div>
          <div class="data-num" v-inserted :value="item.value">{{ item.value }}</div>
          <div class="data-lable">{{ item.name }}</div>
        </div>
      </div>
@@ -17,7 +17,7 @@
</template>

<script>

import gsap from 'gsap';
const nameList = {
  data1: '工单数',
  data2: '恢复数',
@@ -25,6 +25,7 @@
  data4: '产生违约事项数',
  data5: '产生违约责任数',
}



export default {
@@ -72,6 +73,38 @@
      immediate: true,
    }
  },
  directives: {
    inserted: {
      bind(el, binding) {
        let target = {
          count: 0
        };
        let finalNumber = el.innerText;
        gsap.to(target, {
          count: finalNumber,
          duration: 1,
          ease: "power2.out",
          onUpdate: () => {
            el.innerText = target.count.toFixed(0);
          }
        })
      },
      update(el, binding) {
        let target = {
          count: el.innerText
        };
        let finalNumber = el.getAttribute('value');
        gsap.to(target, {
          count: finalNumber,
          duration: 1,
          ease: "power2.out",
          onUpdate: () => {
            el.innerText = target.count.toFixed(0);
          }
        })
      }
    }
  }
}
</script>


 src/views/home/data-view/components/data-map.vue

@@ -8,14 +8,15 @@
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import mapData from '@/assets/map/dujiangyan.json';
echarts.registerMap('dujiangyan', mapData);
import mapData from '@/assets/map/zigong.json';
echarts.registerMap('zigong', mapData);
console.log(mapData);
let mapChart = null;
let tempName = '';
let observer = null;
const mapConfig = {
  series: [{
    map: "dujiangyan", //注册地图的名字
    map: "zigong", //注册地图的名字
    type: "map3D",
    bottom: 0,
    left: 0,
@@ -24,9 +25,9 @@
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 1, //透明度
      borderWidth: 1.5, // 边框宽度
      borderWidth: 1, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
      fontSize: 18, //
    },

    // 标签
@@ -37,9 +38,9 @@
    },
    // 控制器
    viewControl: {
      beta: 82,
      beta: -30,
      alpha: 90,
      distance: 180,
      distance: 100,
      maxBeta: 180
    },
    // 鼠标移入时样式
@@ -66,7 +67,7 @@
  name: 'DataMap',
  data() {
    return {
      

    }
  },
  components: {
@@ -83,6 +84,21 @@
      mapConfig.series[0].data.forEach(item => {
        item.itemStyle.color = '#4189f2';
      });
    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.map);
    },
    // 窗口变换
    handleResize() {
      if (mapChart) {
        mapChart.resize();
      }
    }
  },
  mounted() {
@@ -98,8 +114,15 @@
        tempName = params.name;
        this.filterData(params.name);
      }
    })
  }
    });
    this.observe();
  },
  beforeDestroy() {
    if (observer) {
      mapChart.dispose();
      observer.unobserve(this.$refs.map);
    }
  },
}
</script>


 src/views/home/data-view/index.vue

@@ -57,7 +57,7 @@
      ],
      totalList: [
        {
          "name": "虹口乡",
          "name": "荣县",
          "data1": 3,
          "data2": 82,
          "data3": 5,
@@ -65,7 +65,7 @@
          "data5": 50
        },
        {
          "name": "玉堂镇",
          "name": "贡井区",
          "data1": 1,
          "data2": 94,
          "data3": 38,
@@ -73,7 +73,7 @@
          "data5": 87
        },
        {
          "name": "崇义镇",
          "name": "自流井区",
          "data1": 15,
          "data2": 57,
          "data3": 81,
@@ -81,7 +81,7 @@
          "data5": 85
        },
        {
          "name": "龙池镇",
          "name": "沿滩区",
          "data1": 8,
          "data2": 7,
          "data3": 60,
@@ -89,7 +89,7 @@
          "data5": 43
        },
        {
          "name": "中兴镇",
          "name": "富顺县",
          "data1": 40,
          "data2": 75,
          "data3": 50,
@@ -97,124 +97,12 @@
          "data5": 79
        },
        {
          "name": "蒲阳镇",
          "name": "大安区",
          "data1": 68,
          "data2": 38,
          "data3": 27,
          "data4": 43,
          "data5": 95
        },
        {
          "name": "大观镇",
          "data1": 52,
          "data2": 9,
          "data3": 74,
          "data4": 40,
          "data5": 82
        },
        {
          "name": "幸福镇",
          "data1": 52,
          "data2": 10,
          "data3": 26,
          "data4": 70,
          "data5": 61
        },
        {
          "name": "天马镇",
          "data1": 66,
          "data2": 44,
          "data3": 77,
          "data4": 68,
          "data5": 51
        },
        {
          "name": "安龙镇",
          "data1": 80,
          "data2": 77,
          "data3": 84,
          "data4": 79,
          "data5": 47
        },
        {
          "name": "聚源镇",
          "data1": 85,
          "data2": 78,
          "data3": 12,
          "data4": 37,
          "data5": 32
        },
        {
          "name": "胥家镇",
          "data1": 91,
          "data2": 76,
          "data3": 30,
          "data4": 47,
          "data5": 28
        },
        {
          "name": "向峨乡",
          "data1": 32,
          "data2": 41,
          "data3": 45,
          "data4": 60,
          "data5": 54
        },
        {
          "name": "柳街镇",
          "data1": 8,
          "data2": 80,
          "data3": 4,
          "data4": 14,
          "data5": 20
        },
        {
          "name": "紫坪铺镇",
          "data1": 1,
          "data2": 88,
          "data3": 41,
          "data4": 21,
          "data5": 88
        },
        {
          "name": "灌口镇",
          "data1": 85,
          "data2": 72,
          "data3": 79,
          "data4": 27,
          "data5": 42
        },
        {
          "name": "青城山镇",
          "data1": 77,
          "data2": 1,
          "data3": 33,
          "data4": 92,
          "data5": 45
        },
        {
          "name": "滨江街道",
          "data1": 82,
          "data2": 43,
          "data3": 9,
          "data4": 34,
          "data5": 96
        },
        {
          "name": "翠月湖镇",
          "data1": 30,
          "data2": 41,
          "data3": 80,
          "data4": 9,
          "data5": 53
        },
        {
          "name": "石羊镇",
          "data1": 9,
          "data2": 15,
          "data3": 24,
          "data4": 92,
          "data5": 37
        }
      ],
      activeData: {name: '自贡市', data1: 0, data2: 0, data3: 0, data4: 0, data5:0}
@@ -227,6 +115,7 @@
      } else {
        this.countTotal();
      }

    },
    countTotal() {
      let data = {};

 src/views/home/data-wrapper/index.vue

@@ -9,10 +9,10 @@
        <data-rank></data-rank>
        <data-check></data-check>
      </el-col>
      <el-col :xs='24' :md="24" :sm="24" :lg="17" :xl="12">
      <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="12">
        <data-chart></data-chart>
      </el-col>
      <el-col :xs='24' :md="24" :sm="24" :lg="17" :xl="12">
      <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="12">
        <work-order></work-order>
      </el-col>
    </el-row>

 src/views/home/examine/index.vue

@@ -18,6 +18,12 @@
          </el-table-column>
          <el-table-column prop="rule" label="考核规则" align="center">
          </el-table-column>
          <el-table-column prop="date" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="danger"
                disable-transitions>预警</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini">详情</el-button>