提交

src/assets/png/fanx6-blue.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#4b55ae"
+                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="#4b55ae"
+                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="#4b55ae"
+                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="4s"
+            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>

src/assets/png/fanx6-gray.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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>
+    <!-- 柱 #515251 -->
+    <g>
+        <path fill="#515251" 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="#606161"
+                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="#606161"
+                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="#606161"
+                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="8s"
+            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>

src/assets/png/fanx6-green.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#05bb4c"
+                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="#05bb4c"
+                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="#05bb4c"
+                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="8s"
+            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>

src/assets/png/fanx6-orange.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#e17e23"
+                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="#e17e23"
+                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="#e17e23"
+                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="8s"
+            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>

src/assets/png/fanx6-purple-stop.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#c531c7"
+                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="#c531c7"
+                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="#c531c7"
+                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="8s"
+            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>

src/assets/png/fanx6-purple.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#c531c7"
+                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="#c531c7"
+                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="#c531c7"
+                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="8s"
+            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>

src/assets/png/fanx6-red.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#BA3237"
+                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="#BA3237"
+                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="#BA3237"
+                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="8s"
+            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>

src/assets/png/fanx6-white.svg

@@ -0,0 +1,59 @@
+<svg 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">
+    <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="#ffffff"
+                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="#ffffff"
+                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="#ffffff"
+                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="8s"
+            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>

src/assets/styles/form.less

@@ -100,44 +100,45 @@
       color: @darkgray;
     }
   }
-}
-
-input[type="checkbox"] {
-  position: relative;
-  display: inline-block;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  outline: none;
-  border: 1px solid @gray;
-  background-color: #000;
-  border-radius: 20%;
-  margin: 0;
-
-  &:checked {
-    border-color: @green;
-    background: @green;
-  }
 
-  &::after {
+  input[type="checkbox"] {
+    position: relative;
     display: inline-block;
-    content: " ";
-    position: absolute;
-    left: 30%;
-    top: 5%;
-    width: 3px;
-    height: 7px;
-    border-color: #fff;
-    border-style: solid;
-    border-width: 0px 2px 2px 0px;
-    transform: rotate(45deg);
-    opacity: 0;
-  }
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    outline: none;
+    border: 1px solid @gray;
+    background-color: #000;
+    border-radius: 20%;
+    margin: 0;
+    padding: 0;
+
+    &:checked {
+      border-color: @green;
+      background: @green;
+    }
+
+    &::after {
+      display: inline-block;
+      content: " ";
+      position: absolute;
+      left: 30%;
+      top: 5%;
+      width: 3px;
+      height: 7px;
+      border-color: #fff;
+      border-style: solid;
+      border-width: 0px 2px 2px 0px;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
 
-  &:checked::after {
-    content: "";
-    opacity: 1;
-    transition: opacity 0.3s ease-out;
+    &:checked::after {
+      content: "";
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+    }
   }
 }
 

src/components/arcgis/arcgis.vue

@@ -94,8 +94,8 @@
                         img: require("@assets/map/fan/red.png")
                     },
                     {
-                        name: "检查",
-                        code: "jc",
+                        name: "检修",
+                        code: "jx",
                         img: require("@assets/map/fan/orange.png")
                     },
                     {
@@ -244,29 +244,31 @@
                         let screenPoint = view.toScreen(graphics.geometry);
                         marker.x = screenPoint.x - marker.ox;
                         marker.y = screenPoint.y - marker.oy;
-                        marker.scale =  0.0272 / evt.height;
-                        // console.log(evt.height)
-                        if (evt.height < 0.295) { 
-                            if (!marker.show) {
-                                marker.show = true;
-                                graphics.symbol = new SimpleMarkerSymbol({
-                                    color: "transparent",
-                                    outline: {
-                                        color: [255, 255, 255],
-                                        width: 0
-                                    }
-                                });
-                            }
-                        } else {
-                            if (marker.show) {
-                                marker.show = false;
-                                graphics.symbol = new SimpleMarkerSymbol({
-                                    color: [5,187,76,0.75],
-                                    outline: {
-                                        color: [5,187,76],
-                                        width: 2
-                                    }
-                                });
+                        if (marker.canScale) {
+                            marker.scale =  0.0272 / evt.height;
+                            // console.log(evt.height)
+                            if (evt.height < 0.295) { 
+                                if (!marker.show) {
+                                    marker.show = true;
+                                    graphics.symbol = new SimpleMarkerSymbol({
+                                        color: "transparent",
+                                        outline: {
+                                            color: [255, 255, 255],
+                                            width: 0
+                                        }
+                                    });
+                                }
+                            } else {
+                                if (marker.show) {
+                                    marker.show = false;
+                                    graphics.symbol = new SimpleMarkerSymbol({
+                                        color: [5,187,76,0.75],
+                                        outline: {
+                                            color: [5,187,76],
+                                            width: 2
+                                        }
+                                    });
+                                }
                             }
                         }
                     });
@@ -284,7 +286,9 @@
                 }
             },
             // 添加html
-            addHtmlPoint: function (point, slot, ox=0, oy=0) {
+            addHtmlPoint: function (point, slot, ox=0, oy=0, scale=true) {
+                point[0] += this.oToLL(this.data.ox, this.data.oy).x;
+                point[1] += this.oToLL(this.data.ox, this.data.oy).y;
                 let item = {
                     geometry: {
                         type: "point",
@@ -315,6 +319,7 @@
                     x: screenPoint.x - ox,
                     y: screenPoint.y - oy,
                     scale: 1,
+                    canScale: scale,
                     show: true,
                 };
                 this.markers.push(marker);
@@ -422,9 +427,9 @@
                 line_graphicsLayer.add(graphic);
             },
             addFanByJson: function(jsonObj, lineJsonObj) {
-                jsonObj.forEach(item => {
-                    this.addImgPoint(item);
-                });
+                // jsonObj.forEach(item => {
+                //     this.addImgPoint(item);
+                // });
                 lineJsonObj.forEach(item => {
                     this.addLine(item);
                 });

src/components/chart/combination/area-line-chart.vue

@@ -435,11 +435,7 @@ export default {
 
       chart.setOption(option);
 
-      chart.on("click", function (e, p) {
-        if (e.seriesType == "custom") {
-          that.$emit("areaClick", { data: e.data.exData });
-        }
-      });
+      return chart;
     },
   },
   emits: {
@@ -452,7 +448,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.initChart();
+      let that = this;
+      let chart = this.initChart();
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
     });
   },
   updated () {

src/components/chart/radar/radar-chart.vue

@@ -31,10 +31,27 @@ export default {
       type: Object,
       default: () => {
         return {
-          indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+          indicator: [
+            "北(0.0/0.0)",
+            "北北西(0.0/0.0)",
+            "北西(0.0/0.0)",
+            "西北西(0.0/0.0)",
+            "西(0.0/0.0)",
+            "西南西(0.0/0.0)",
+            "南西(0.0/0.0)",
+            "南南西(0.0/0.0)",
+            "南(0.0/0.0)",
+            "南南东(0.0/0.0)",
+            "东南(0.0/0.0)",
+            "东南东(0.0/0.0)",
+            "东(0.0/0.0)",
+            "东北东(0.0/0.0)",
+            "北东(0.0/0.0)",
+            "北北东(0.0/0.0)",
+          ],
           data: [
             {
-              value: [44200, 14200, 20000, 35000, 50000, 38000],
+              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000, 20000, 35000, 50000, 38000],
               name: "NAME",
             },
           ],
@@ -88,6 +105,8 @@ export default {
           indicator.push({ name: item, max: maxValue });
         });
 
+      let baseSize = 65;
+
       let option = {
         grid: {
           left: 0,
@@ -107,14 +126,15 @@ export default {
         radar: [
           // 最低层 90
           {
-            radius: "90%",
+            radius: baseSize + "%",
             center: ["50%", "50%"],
             splitNumber: 1,
-            nameGap: "10",
+            nameGap: "4",
             name: {
               textStyle: {
-                color: partten.getColor("gray") + 99,
+                color: partten.getColor("gray"),
                 fontSize: 12,
+                padding: [0, 16],
               },
             },
             axisLine: {
@@ -137,7 +157,7 @@ export default {
           },
           // 次外层 80 - 90
           {
-            radius: ["80%", "90%"],
+            radius: ["55%", "65%"],
             center: ["50%", "50%"],
             startAngle: 90,
             splitNumber: 2,
@@ -172,7 +192,7 @@ export default {
           },
           // 渐变层 40 - 80
           {
-            radius: ["40%", "80%"],
+            radius: ["30%", "55%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -215,7 +235,7 @@ export default {
           },
           // 渐变层 0 - 40
           {
-            radius: ["0%", "40%"],
+            radius: ["0%", "30%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -285,7 +305,7 @@ export default {
           },
           // 内层 0 - 45
           {
-            radius: "45%",
+            radius: "35%",
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {

src/router/index.js

@@ -619,6 +619,11 @@ const routes = [{
         component: () =>
             import ( /* webpackChunkName: "historysearch" */ "../views/NewPages/history-search.vue"),
     },
+    {
+        path: "/new/matrix",
+        name: "matrix",
+        component: () => import(/* webpackChunkName: "matrix" */ "../views/NewPages/Matrix-Detail.vue"),
+    },
 ]
 const router = createRouter({
     history: createWebHashHistory(),

src/views/HealthControl/Health1.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="info-chart">
           <panel class="info-chart-panel" :title="'损失电量分析'">
-            <vertival-bar-line-chart :height="'310px'" />
+            <vertival-bar-line-chart :height="'250px'" />
           </panel>
         </div>
       </div>
@@ -322,7 +322,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -444,7 +444,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
-      height: calc(100vh - 592px);
+      height: calc(100vh - 500px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);

src/views/HealthControl/Health2.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
+          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>
     </div>
@@ -238,7 +238,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -524,7 +524,7 @@ export default {
       padding: 4px 0;
     }
     tbody {
-      height: calc(100vh - 880px);
+      height: calc(100vh - 820px);
     }
     th,
     td {

src/views/HealthControl/Health3.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
+          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>
     </div>
@@ -272,7 +272,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -494,12 +494,8 @@ export default {
       }
 
       .table {
-        .com-table thead tr th {
-          padding: 0.3704vh 0;
-        }
-
         tbody {
-          height: 33vh;
+          height: calc(100vh - 640px);
         }
       }
     }

src/views/HealthControl/Health7.vue

@@ -27,13 +27,13 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :height="'310px'" />
+          <vertival-bar-line-chart :height="'250px'" />
         </panel>
       </div>
     </div>
     <div class="fc-info mg-b-16">
       <panel :title="'健康走势图'" :showLine="false">
-        <normal-line-chart :height="'150px'" />
+        <normal-line-chart :height="'250px'" />
       </panel>
     </div>
     <div class="data-list">
@@ -183,7 +183,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {

src/views/NewPages/Matrix-Detail.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="matrix-detail">
+    <Row class="panel-2" type="">
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
+            <div>{{ data.test }}</div>
+            <div>{{ data.num }}</div>
+          </div>
+        </div>
+      </Col>
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon :svgid="'svg-photovoltaic'" style="margin: 3px 0px -3px 1px;"></SvgIcon>
+            </span>
+          </div>
+          <div class="item" :class="data.color" v-for="(data, index) of panel2Data.datas" :key="index">
+            <div>{{ data.test }}</div>
+            <div>{{ data.num }}</div>
+          </div>
+        </div>
+      </Col>
+    </Row>
+    <div class="panel-box">
+      <div v-for="(table, k) of newTables" :key="k">
+        <div class="panel-title">
+          <div class="panel-title-name">
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </i>
+            <span>某某某风电场</span>
+            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
+              <span class="sub-title">{{ data.text }}</span>
+              <span class="sub-count" :class="data.color">{{ data.num }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-body">
+          <div class="card" v-for="j of table.count" :key="j" :class="'green'">
+            {{ "A" + j }}
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.count" :key="i"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Row from "@/components/coms/grid/row.vue";
+import Col from "@/components/coms/grid/col.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import util from "@/helper/util.js";
+export default {
+  // 名称
+  name: "LightMatrix1",
+  // 使用组件
+  components: {
+    Row,
+    Col,
+    SvgIcon,
+  },
+  // 数据
+  data() {
+    return {
+      panel1Data: {
+        first: {
+          icon: "svg-wind-site",
+        },
+        datas: [
+          {
+            color: "write",
+            test: "接入风机",
+            num: 256,
+          },
+          {
+            color: "blue",
+            test: "· 运行",
+            num: 256,
+          },
+          {
+            color: "green",
+            test: "· 待机",
+            num: 256,
+          },
+          {
+            color: "pink",
+            test: "· 限电",
+            num: 256,
+          },
+          {
+            color: "red",
+            test: "· 故障",
+            num: 256,
+          },
+          {
+            color: "orange",
+            test: "· 检修",
+            num: 256,
+          },
+          {
+            color: "write",
+            test: "· 受累",
+            num: 256,
+          },
+          {
+            color: "gray",
+            test: "· 离线",
+            num: 256,
+          },
+        ],
+      },
+      panel2Data: {
+        first: {
+          icon: "svg-photovoltaic",
+        },
+        datas: [
+          {
+            color: "write",
+            test: "接入风机",
+            num: 256,
+          },
+          {
+            color: "blue",
+            test: "· 运行",
+            num: 256,
+          },
+          {
+            color: "green",
+            test: "· 待机",
+            num: 256,
+          },
+          {
+            color: "pink",
+            test: "· 限电",
+            num: 256,
+          },
+          {
+            color: "red",
+            test: "· 故障",
+            num: 256,
+          },
+          {
+            color: "orange",
+            test: "· 检修",
+            num: 256,
+          },
+          {
+            color: "write",
+            test: "· 受累",
+            num: 256,
+          },
+          {
+            color: "gray",
+            test: "· 离线",
+            num: 256,
+          },
+        ],
+      },
+      tables: [
+        {
+          col: 42,
+          subTitleDatas: [
+            {
+              text: "接入台数",
+              num: 256,
+              color: "write",
+            },
+            {
+              text: "待机台数",
+              num: 256,
+              color: "green",
+            },
+            {
+              text: "并网台数",
+              num: 256,
+              color: "blue",
+            },
+            {
+              text: "限电台数",
+              num: 256,
+              color: "pink",
+            },
+            {
+              text: "故障台数",
+              num: 256,
+              color: "red",
+            },
+            {
+              text: "检修台数",
+              num: 256,
+              color: "orange",
+            },
+            {
+              text: "受累台数",
+              num: 256,
+              color: "write",
+            },
+            {
+              text: "离线台数",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "风速",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "预测功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "保证功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "应发功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "实际功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "AGC指令",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "出线功率",
+              num: 256,
+              color: "gray",
+            },
+          ],
+          datas: [
+            {
+              tag: "A01",
+              color: "blue",
+            },
+          ],
+        },
+      ],
+      newTables: [
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 2,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 6,
+        },
+      ],
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    let tempData = [];
+    for (let i = 0; i < 200; i++) {
+      tempData.push(util.copy(this.tables[0].datas[0]));
+      if (i % 13 == 0) {
+        tempData[i].color = "green";
+      }
+      if (i % 17 == 0) {
+        tempData[i].color = "pink";
+      }
+      if (i % 23 == 0) {
+        tempData[i].color = "orange";
+      }
+      if (i % 29 == 0) {
+        tempData[i].color = "red";
+      }
+      if (i % 31 == 0) {
+        tempData[i].color = "write";
+      }
+      if (i % 37 == 0) {
+        tempData[i].color = "gray";
+      }
+    }
+    this.tables[0].datas = util.copy(tempData);
+    for (let i = 0; i < 5; i++) {
+      this.tables.push(util.copy(this.tables[0]));
+    }
+
+    this.newTables.forEach((value) => {
+      value.subTitleDatas = util.copy(this.tables[0].subTitleDatas);
+    });
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@panelHeight: 6.481vh;
+@titleHeight: 25px;
+
+.matrix-detail {
+  .panel-2 {
+    .left-50-16 {
+      width: calc(50% - 8px);
+    }
+  }
+
+  .panel {
+    width: 100%;
+    border: 1px solid @darkgray;
+    position: relative;
+    padding: 8px 16px;
+    background-color: fade(@darkgray, 20%);
+    display: flex;
+
+    .dot {
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background-color: @write;
+      position: absolute;
+
+      &.left {
+        left: 4px;
+      }
+
+      &.right {
+        right: 4px;
+      }
+
+      &.top {
+        top: 4px;
+      }
+
+      &.bottom {
+        bottom: 4px;
+      }
+    }
+
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      color: @write;
+      position: relative;
+
+      .loop {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        border: 1px solid @darkgray;
+        background-color: fade(@darkgray, 20);
+        left: calc(50% - 21px);
+        top: calc(50% - 21px);
+      }
+
+      &.write {
+        color: @write;
+      }
+
+      &.green {
+        color: @green;
+      }
+
+      &.blue {
+        color: @darkBlue;
+      }
+
+      &.pink {
+        color: @pink;
+      }
+
+      &.red {
+        color: @red;
+      }
+
+      &.orange {
+        color: @orange;
+      }
+
+      &.gray {
+        color: @gray;
+      }
+
+      div {
+        &:first-child {
+          font-size: 12px;
+        }
+        &:last-child {
+          font-size: 16px;
+          font-family: "Bicubik";
+        }
+      }
+    }
+
+    .item2 {
+      flex: 1;
+      display: flex;
+      width: 20%;
+      flex-wrap: wrap;
+
+      .name {
+        color: @gray;
+        width: 50%;
+        text-align: center;
+      }
+
+      .num2 {
+        width: 50%;
+        color: @yellow;
+        text-align: left;
+      }
+
+      .num1 {
+        width: 50%;
+        color: @yellow;
+        text-align: center;
+        position: relative;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 1.481vh;
+          height: 0.556vh;
+          background-color: @yellow;
+          left: 1.204vh;
+          top: 0.741vh;
+        }
+      }
+
+      .num3 {
+        width: 50%;
+        color: @yellow;
+        text-align: left;
+      }
+    }
+  }
+
+  .panel-box {
+    margin-top: 8px;
+    flex-grow: 1;
+
+    & > div {
+      margin: 4px 0;
+    }
+
+    .panel-title {
+      width: 100%;
+      height: @titleHeight;
+      line-height: @titleHeight;
+      background-color: fade(@darkgray, 40%);
+
+      .panel-title-name {
+        font-size: 12px;
+        color: @green;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+
+        i {
+          margin-right: 8px;
+        }
+
+        .sub-title-item {
+          display: flex;
+          flex: 1;
+
+          .sub-title {
+            flex: 0 0 auto;
+            color: @gray;
+            font-size: 12px;
+            margin: 0 8px 0 12px;
+          }
+
+          .sub-count {
+            flex: 1 0 auto;
+            font-size: 14px;
+            font-family: "Bicubik";
+            font-weight: 500;
+
+            &.write {
+              color: @write;
+            }
+
+            &.green {
+              color: @green;
+            }
+
+            &.blue {
+              color: @darkBlue;
+            }
+
+            &.pink {
+              color: @pink;
+            }
+
+            &.red {
+              color: @red;
+            }
+
+            &.orange {
+              color: @orange;
+            }
+
+            &.gray {
+              color: @gray;
+            }
+          }
+        }
+      }
+    }
+
+    .panel-body {
+      height: calc(100% - 7.407vh);
+      padding: 0;
+    //   margin: 4px 0;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      justify-content: flex-start;
+
+      .blank {
+        margin-right: 3px;
+        flex: 1 0 40px;
+      }
+
+      .card {
+        margin-right: 3px;
+        margin-top: 2px;
+        flex: 1 0 40px;
+      }
+
+      .card {
+        border-radius: 4px;
+        text-align: center;
+        border: 1px solid;
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+
+        &.write {
+          color: @black;
+          border-color: @write;
+          background-color: @write;
+        }
+
+        &.green {
+          color: @green;
+          border-color: @green;
+        }
+
+        &.blue {
+          color: @darkBlue;
+          border-color: @darkBlue;
+        }
+
+        &.pink {
+          color: @pink;
+          border-color: @pink;
+        }
+
+        &.red {
+          color: @write;
+          border-color: @red;
+          background-color: @red;
+        }
+
+        &.orange {
+          color: @orange;
+          border-color: @orange;
+        }
+
+        &.gray {
+          color: @write;
+          border-color: @darkgray;
+          background-color: @darkgray;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/dj1.vue

@@ -241,7 +241,7 @@
                     <span class="dot"></span>
                     <span>{{jfplStr}}</span>
                   </div>
-                  <direction-radar-chart :width="'60%'" :height="'152px'" :value="windResourcesData" :showLegend="true" />
+                  <direction-radar-chart :width="'80%'" :height="'180px'" :value="windResourcesData" :showLegend="true" />
                 </div>
               </panel>
             </div>
@@ -271,7 +271,7 @@
                 <span class="dot"></span>
                 <span>{{rzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -282,7 +282,7 @@
                 <span class="dot"></span>
                 <span>{{yzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -293,7 +293,7 @@
                 <span class="dot"></span>
                 <span>{{nzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -306,7 +306,7 @@
                 <span class="dot"></span>
                 <span>{{rfxplStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
             </div>
           </panel>
         </el-col>
@@ -317,7 +317,7 @@
                 <span class="dot"></span>
                 <span>{{yfxplStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
             </div>
           </panel>
         </el-col>
@@ -467,13 +467,14 @@ import AreaLineChart from "../../components/chart/combination/area-line-chart.vu
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
 import MarkerLineChart from "../../components/chart/line/multiple-line-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
-import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
+import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import RadarChart from "../../components/chart/radar/radar-chart.vue";
 import panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 export default {
-  components: { panel, AreaLineChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
-  setup () { },
-  data () {
+  components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart, RadarChart },
+  setup() {},
+  data() {
     return {
       tabIndex: 0,
       tableData: {
@@ -1326,7 +1327,7 @@ export default {
 
       .legend {
         font-size: 12px;
-        flex: 0 0 140px;
+        flex: 0 0 80px;
         height: 20px;
         display: flex;
         align-items: center;

src/views/WindSite/components/customNode.js

@@ -4048,9 +4048,9 @@ const registerFan = () => {
                     "text-anchor": "middle"
                 },
                 image: {
-                    width: 36,
+                    width: 50,
                     height: 50,
-                    refX: 2,
+                    refX: -5,
                     refY: -55,
                 },
             },
@@ -4066,7 +4066,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#05bb4c66";
         option.attrs.rect.stroke = "#05bb4c";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const gray = () =>{
@@ -4079,7 +4079,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#B3BDC066";
         option.attrs.rect.stroke = "#B3BDC0";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const blue = () =>{
@@ -4092,7 +4092,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#1a93cf66";
         option.attrs.rect.stroke = "#1a93cf";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const orange = () =>{
@@ -4105,7 +4105,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#e17e2366";
         option.attrs.rect.stroke = "#e17e23";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const red = () =>{
@@ -4118,7 +4118,46 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#BA323766";
         option.attrs.rect.stroke = "#BA3237";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const purple = () =>{
+        const color = "purple";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#c531c766";
+        option.attrs.rect.stroke = "#c531c7";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const purpleStop = () =>{
+        const color = "purple-stop";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#c531c766";
+        option.attrs.rect.stroke = "#c531c7";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const white = () =>{
+        const color = "white";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#ffffff66";
+        option.attrs.rect.stroke = "#ffffff";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     green();
@@ -4126,6 +4165,9 @@ const registerFan = () => {
     blue();
     orange();
     red();
+    purple();
+    purpleStop();
+    white();
 }
 
 // 注册自定义节点

src/views/WindSite/components/gax6.vue

@@ -725,10 +725,16 @@ export default {
             this.graph.fromJSON(data);
             this.graph.centerContent();
             setTimeout(() => {
-                this.changeFanNodeById("fanA06", "fan-red", "A01");
-            }, 5000);
+                this.changeFanNodeById("fanA06", "fan-purple", "A01");
+                setTimeout(() => {
+                    this.changeFanNodeById("fanA06", "fan-white", "A01");
+                    setTimeout(() => {
+                        this.changeFanNodeById("fanA06", "fan-purple-stop", "A01");
+                    }, 2000);
+                }, 2000);
+            }, 2000);
         },
-        // 通过id修改风机节点
+        // 通过id修改风机节点 fan-green fan-gray fan-blue fan-orange fan-red fan-purple fan-purple-stop fan-white
         changeFanNodeById: function (id, shape, label) {
             var view = this.graph.getMountedViews();
             var node = view.find(t => t.cell.id == id);

src/views/WindSite/pages/DraughtFanList.vue

@@ -77,25 +77,25 @@ export default {
             name: "风机名称",
             field: "code",
             is_num: false,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "冷却风温度",
             field: "FDJLQFWD",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "有功功率",
             field: "FJGL",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "液压油温度",
             field: "YYYW",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "Pcspp温度",

src/views/WindSite/pages/Map.vue

@@ -57,7 +57,53 @@
             </div>
         </div>
         <div class="panel-body">
-            <arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
+            <arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
+                <template v-for="(fan,index) of fans" :key="index" v-slot:[fan.attributes.code]>
+                    <svg v-if="fan.attributes.code != '升压站'" @click="clickFan(fan.attributes.code)" class="can-click esri-component" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 240"
+                        enable-background="new 0 0 200 240" xml:space="preserve" width="66" height="66">
+                        <!-- 底座 -->
+                        <g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]"
+                                d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z" />
+                        </g>
+                        <!-- 后面的脑袋 -->
+                        <g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]" d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z" />
+                        </g>
+                        <!-- 柱 -->
+                        <g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]"
+                                d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z" />
+                        </g>
+                        <!-- 风扇 -->
+                        <g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]"
+                                d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]" d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z" />
+                            <animateTransform v-if="fan.attributes.rotate" attributeName="transform" attributeType="XML" type="rotate" from="0 100 82"
+                                to="359 100 82" :dur="fan.attributes.dur+'s'" repeatCount="indefinite" />
+                        </g>
+                        <!-- 前面的尖 -->
+                        <g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]" d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z" />
+                        </g>
+                        <!-- 文字 -->
+                        <g>
+                            <text x="100"  y="240" fill="#ffffff" font-size="40" text-anchor="middle" alignment-baseline="baseline">{{fan.attributes.code}}</text>
+                        </g>
+                    </svg>
+                    <div v-if="fan.attributes.code == '升压站'">
+                        <div class="syz-img">
+                            <img :src="syzImg">
+                        </div>
+                        <div class="white font-sm mr-t-8" style="text-align: center;">{{fan.attributes.code}}</div>
+                    </div>
+                </template>
+            </arcgis>
             <div class="map-popup-panel" v-show="showPopup">
                 <div class="map-popup-panel-header">
                     <div class="map-popup-panel-title green">
@@ -227,14 +273,27 @@ export default {
             },
             showPopup: true,
             mapToolIndex: 0,
+            fans: [],
+            colors: {
+                dj: ["#05bb4c", "#4ad476", "#9fedb2"],
+                yx: ["#4b55ae", "#959dc7", "#d3d6e0"],
+                xd: ["#c531c7", "#e080dc", "#fadef7"],
+                xdStop: ["#c531c7", "#e080dc", "#fadef7"],
+                gz: ["#BA3237", "#d4807d", "#eddad8"],
+                jx: ["#e17e23", "#fabf78", "#ffebcc"],
+                lx: ["#606769", "#757575", "#AFAFAF"],
+                sl: ["#ffffff", "#D8D8D8", "#D8D8D8"],
+            },
+            syzImg: require("@assets/png/booster-station.png"),
         };
     },
     // 函数
     methods: {
         when: function () {
             let jsonObj = dataService.get("arcgis-nx-fc1");
-            let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG34", state: "gz"},{id: "MG39", state: "jc"},
+            let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG20", state: "xdStop"},{id: "MG34", state: "gz"},{id: "MG39", state: "jx"},
                         {id: "MG02", state: "lx"}, {id: "MG19", state: "sl"}]
+            this.fans = jsonObj;
             jsonObj.forEach(item => {
                 let obj = data.find(t => t.id == item.attributes.code);
                 if (obj) {
@@ -242,6 +301,28 @@ export default {
                 } else {
                     item.attributes.state = "dj";
                 }
+                switch (item.attributes.state) {
+                    case "yx":
+                        item.attributes.rotate = true;  // 转
+                        item.attributes.dur = 4; // 转一圈时间
+                        break;
+
+                    case "xd":
+                        item.attributes.rotate = true;
+                        item.attributes.dur = 8;
+                        break;
+
+                    case "xdStop":
+                        item.attributes.rotate = false; // 不转
+                        item.attributes.dur = 8;
+                        break;
+                
+                    default:
+                        item.attributes.rotate = false;
+                        item.attributes.dur = 8;
+                        break;
+                }
+                this.$refs.arcgis.addHtmlPoint([item.geometry.x, item.geometry.y], item.attributes.code,  33, 50, false);
             });
             let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
             this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
@@ -250,6 +331,10 @@ export default {
             console.log(info)
             this.showPopup = true;
         },
+        clickFan: function (code) {
+            console.log(code);
+            this.showPopup = true;
+        },
         popupBack: function () {
             this.showPopup = false;
         },
@@ -293,6 +378,20 @@ export default {
         flex-direction: row;
     }
 
+    .can-click {
+        cursor: pointer;
+    }
+
+    .syz-img {
+        width: 65px;
+        height: 47px;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
     .panel-title {
         width: 100%;
         background-color: fade(@darkgray, 40%);

src/views/WindSite/pages/Tower.vue

@@ -1,67 +1,67 @@
 <template>
-  <div class="tower">
-    <Wave></Wave>
-    <Windmill class="windmill-1"></Windmill>
-    <Windmill class="windmill-2"></Windmill>
-    <Windmill class="windmill-3"></Windmill>
-    <Windmill class="windmill-4"></Windmill>
-    <Windmill class="windmill-5"></Windmill>
-    <WindTower :data="cftmap"></WindTower>
-    <dash-pie-chart class="pie-left" title="空气密度" :value="cftmap.KQMD || 0" height="9.722vh" width="9.722vh" />
-    <dash-pie-chart class="pie-right" title="压强" :value="cftmap.FCCFTYQ || 0" height="9.722vh" width="9.722vh" />
-    <Panel class="panel-top" title="日资源玫瑰图">
-      <div class="direction-chart">
-        <DirectionRadarChart width="70%" height="152px" :value="rmgtmap" />
-        <div class="legend">
-          <span class="dot bg-purple"></span>
-          <span>{{ rmgtTitle || "" }}</span>
-        </div>
-      </div>
-    </Panel>
-    <Panel class="panel-bottom" title="月资源玫瑰图">
-      <div class="direction-chart">
-        <DirectionRadarChart width="70%" height="152px" :value="ymgtmap" />
-        <div class="legend">
-          <span class="dot bg-purple"></span>
-          <span>{{ ymgtTitle || "" }}</span>
-        </div>
-      </div>
-    </Panel>
-    <toolbar-panel class="rose-chart" title="功率曲线">
-      <template v-slot:tools>
-        <div class="tools">
-          <div class="tool-block">
-            <div class="legend bg-green"></div>
-            <div class="legend-text">应发功率</div>
-          </div>
-          <div class="tool-block">
-            <div class="legend bg-purple"></div>
-            <div class="legend-text">实际功率</div>
-          </div>
-          <div class="tool-block">
-            <div class="legend bg-orange"></div>
-            <div class="legend-text">理论功率</div>
-          </div>
-          <div class="tool-block">
-            <div class="legend bg-yellow"></div>
-            <div class="legend-text">预测功率4小时</div>
-          </div>
-          <div class="tool-block">
-            <div class="legend bg-blue"></div>
-            <div class="legend-text">保证功率</div>
-          </div>
-          <div class="tool-block">
-            <div class="legend bg-pink"></div>
-            <div class="legend-text">风速</div>
-          </div>
-        </div>
-      </template>
-      <template v-slot:default>
-        <!-- 日发电量 -->
-        <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" />
-      </template>
-    </toolbar-panel>
-  </div>
+    <div class="tower">
+        <Wave></Wave>
+        <Windmill class="windmill-1"></Windmill>
+        <Windmill class="windmill-2"></Windmill>
+        <Windmill class="windmill-3"></Windmill>
+        <Windmill class="windmill-4"></Windmill>
+        <Windmill class="windmill-5"></Windmill>
+        <WindTower :data="cftmap"></WindTower>
+        <dash-pie-chart class="pie-left" title="空气密度" :value="cftmap.KQMD || 0" height="9.722vh" width="9.722vh" />
+        <dash-pie-chart class="pie-right" title="压强" :value="cftmap.FCCFTYQ || 0" height="9.722vh" width="9.722vh" />
+        <Panel class="panel-top" title="日资源玫瑰图">
+            <div class="direction-chart">
+                <DirectionRadarChart width="100%" height="23vh" :value="rmgtmap" />
+                <div class="legend">
+                    <span class="dot bg-purple"></span>
+                    <span>{{ rmgtTitle || "" }}</span>
+                </div>
+            </div>
+        </Panel>
+        <Panel class="panel-bottom" title="月资源玫瑰图">
+            <div class="direction-chart">
+                <DirectionRadarChart width="100%" height="23vh" :value="ymgtmap" />
+                <div class="legend">
+                    <span class="dot bg-purple"></span>
+                    <span>{{ ymgtTitle || "" }}</span>
+                </div>
+            </div>
+        </Panel>
+        <toolbar-panel class="rose-chart" title="功率曲线">
+            <template v-slot:tools>
+                <div class="tools">
+                    <div class="tool-block">
+                        <div class="legend bg-green"></div>
+                        <div class="legend-text">应发功率</div>
+                    </div>
+                    <div class="tool-block">
+                        <div class="legend bg-purple"></div>
+                        <div class="legend-text">实际功率</div>
+                    </div>
+                    <div class="tool-block">
+                        <div class="legend bg-orange"></div>
+                        <div class="legend-text">理论功率</div>
+                    </div>
+                    <div class="tool-block">
+                        <div class="legend bg-yellow"></div>
+                        <div class="legend-text">预测功率4小时</div>
+                    </div>
+                    <div class="tool-block">
+                        <div class="legend bg-blue"></div>
+                        <div class="legend-text">保证功率</div>
+                    </div>
+                    <div class="tool-block">
+                        <div class="legend bg-pink"></div>
+                        <div class="legend-text">风速</div>
+                    </div>
+                </div>
+            </template>
+            <template v-slot:default>
+                <!-- 日发电量 -->
+                <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" />
+            </template>
+        </toolbar-panel>
+    </div>
 </template>
 
 <script>
@@ -259,11 +259,11 @@ export default {
 </script>
 
 <style lang="less">
-    .tower {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
+.tower {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 
   .windmill-1,
   .windmill-2,
@@ -315,6 +315,11 @@ export default {
         display: inline-block;
         margin-right: 8px;
       }
+
+      .legend-text {
+        font-size: @fontsize-s;
+        color: #909ba9;
+      }
     }
   }
 
@@ -332,12 +337,26 @@ export default {
     left: 20vh;
   }
 
+  .thermometer-left,
+  .thermometer-right {
+    position: fixed;
+    top: 20vh;
+  }
+
+  .thermometer-left {
+    left: 5vh;
+  }
+
+  .thermometer-right {
+    left: 20vh;
+  }
+
   .panel-top,
   .panel-bottom {
     position: fixed;
     right: 10vh;
-    width: 36vh;
-    height: 24vh;
+    width: 350px;
+    // height: 24.352vh;
   }
 
   .panel-top {
@@ -345,7 +364,7 @@ export default {
   }
 
   .panel-bottom {
-    top: 35vh;
+    top: 37vh;
   }
 
   .rose-chart {

src/views/layout/Menu.vue

@@ -530,7 +530,7 @@ export default {
     subMenuHide () {
       this.isShowSubMenu = false;
       this.parentIndex = null;
-      this.subMenu = [];
+      // this.subMenu = [];
     },
     subclick (index) {
       this.activeIndex = this.parentIndex;
@@ -605,7 +605,7 @@ export default {
   position: absolute;
   top: 0;
   left: 5.3704vh;
-  width: 138px;
+  width: 158px;
   height: 100%;
   padding-top: 1.481vh;
   background: fade(#192a26, 75);