风机SVG摘除封装为组件使用

src/components/other/fj/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <svg
+    :id="fjId"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5"
+    xml:space="preserve"
+    :width="fjWidth"
+    :height="fjHeight"
+  >
+    <defs>
+      <rect
+        id="SVGID_1_"
+        x="-260.14"
+        y="-365.945"
+        width="595.28"
+        height="841.89"
+      />
+      <rect
+        id="SVGID_3_"
+        x="-260.14"
+        y="-365.945"
+        width="595.28"
+        height="841.89"
+      />
+    </defs>
+    <clipPath id="SVGID_2_">
+      <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+      <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <g>
+      <path
+        fill="#D8D8D8"
+        d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z"
+      />
+    </g>
+    <g>
+      <g>
+        <path
+          :fill="background"
+          d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35"
+        />
+        <path
+          :fill="background"
+          d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821"
+        />
+        <path
+          :fill="background"
+          d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592"
+        />
+      </g>
+      <g>
+        <path
+          fill="#D8D8D8"
+          d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5"
+        />
+        <path
+          fill="#D8D8D8"
+          d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965"
+        />
+        <path
+          fill="#D8D8D8"
+          d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318"
+        />
+      </g>
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0 46.75 39.182"
+        to="359 46.75 39.182"
+        :dur="rotate"
+        repeatCount="indefinite"
+      />
+    </g>
+    <g>
+      <path
+        fill="#60BFD6"
+        d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182"
+      />
+    </g>
+    <g>
+      <path
+        fill="#B1E1EB"
+        d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "fj",
+
+  props: {
+    id: {
+      type: String,
+      default: "fj-1",
+    },
+    speed: {
+      type: Number || String,
+      default: "0.5s",
+    },
+    color: {
+      type: String,
+      default: "#4b55ae",
+    },
+    width:{
+      type: String,
+      default: "43px",
+    },
+    height:{
+      type: String,
+      default: "46px",
+    }
+  },
+
+  // 数据
+  data() {
+    return {
+      fjId: "",
+      rotate: "",
+      background: "",
+      fjWidth:"",
+      fjHeight:""
+    };
+  },
+
+  // 函数
+  methods: {},
+
+  created() {
+    this.fjId = this.id;
+    this.rotate = this.speed;
+    this.background = this.color;
+    this.fjWidth = this.width;
+    this.fjHeight = this.height;
+  },
+
+  mounted() {},
+
+  unmounted() {},
+
+  watch: {
+    id(res) {
+      this.fjId = res;
+    },
+    speed(res) {
+      this.rotate = res;
+    },
+    color(res) {
+      this.background = res;
+    },
+    width(res) {
+      this.fjWidth = res;
+    },
+    height(res) {
+      this.fjHeight = res;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/About.vue

@@ -2,6 +2,14 @@
   <div class="about">
     <h1 @click="showDialog">This is an about page</h1>
     <HealthReport :show="show" :params="{ wtId: 'QG01_11', recorddate: '2021-06-19' }" @closed="(res) => { this.show=false; }" />
+    <div class="fjBox1">
+      <!-- 风机 SVG 使用方法 -->
+      <FJ id="fj-1" speed="5s" color="red" width="43px" height="46px" />
+      <FJ :speed="0.1" color="#1890ff" width="200px" height="210px" />
+      <FJ id="fj-3" speed="2s" width="80px" height="82px" />
+      <FJ />
+      <FJ :speed="1" />
+    </div>
     <!-- <list-bar-chart /> -->
   </div>
 </template>
@@ -9,6 +17,7 @@
 <script>
 // import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
+import FJ from "@com/other/fj/index.vue";
 // 导入header.vue文件
 export default {
   data () {
@@ -19,7 +28,8 @@ export default {
 
   components: {
     // ListBarChart,
-    HealthReport
+    HealthReport,
+    FJ
   },
 
   methods: {
@@ -29,3 +39,11 @@ export default {
   }
 };
 </script>
+<style lang="less" scoped>
+.fjBox{
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+</style>