qiangmj / report-ui

Commit 64e01e5e5c0414ee10521a4cb13277f6e091fe14

Authored by zhangzzzz
1 parent c3320218

新增边框组件

Inline Side-by-side
Showing 19 changed files with 922 additions and 309 deletions
src/assets/images/widget/div1.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" class="left-top border">
  4 + <polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#83bff6">
  5 + <animate attributeName="fill" values="#83bff6;#00CED1;#83bff6" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
  6 + </polygon>
  7 + <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#00CED1">
  8 + <animate attributeName="fill" values="#00CED1;#83bff6;#00CED1" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
  9 + </polygon>
  10 + <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#83bff6">
  11 + <animate attributeName="fill" values="#83bff6;#00CED1;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  12 + </polygon>
  13 +</svg>
0 \ No newline at end of file 14 \ No newline at end of file
src/assets/images/widget/div10.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" class="left-top dv-border-svg-container">
  4 + <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1"></polygon>
  5 +</svg>
0 \ No newline at end of file 6 \ No newline at end of file
src/assets/images/widget/div11.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2031" height="1297" class="dv-border-svg-container">
  4 + <defs>
  5 + <filter id="border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90" height="150%" width="150%" x="-25%" y="-25%">
  6 + <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken"></feMorphology>
  7 + <feGaussianBlur in="thicken" stdDeviation="3" result="blurred"></feGaussianBlur>
  8 + <feFlood result="glowColor" flood-color="#00CED1"></feFlood>
  9 + <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
  10 + <feMerge>
  11 + <feMergeNode in="softGlowColored"></feMergeNode>
  12 + <feMergeNode in="SourceGraphic"></feMergeNode>
  13 + </feMerge>
  14 + </filter>
  15 + </defs>
  16 + <polygon fill="transparent" points="
  17 + 20, 32 890.5, 32 910.5, 53
  18 + 1120.5, 53 1140.5, 32
  19 + 2011, 32 2023, 48 2023, 1272 2011, 1289
  20 + 20, 1289 8, 1272 8, 50
  21 +"></polygon>
  22 + <polyline filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
  23 + 890.5, 30
  24 + 20, 30 7, 50 7, 615
  25 + 13, 620 13, 700
  26 + 7, 705 7, 1270
  27 + 20, 1290 2011, 1290 2024, 1270
  28 + 2024, 705 2018, 700
  29 + 2018, 620 2024, 615
  30 + 2024, 50 2011, 30 1140.5, 30
  31 + 1120.5, 7 910.5, 7
  32 + 890.5, 30 910.5, 52
  33 + 1120.5, 52 1140.5, 30
  34 + " stroke="#83bff6"></polyline>
  35 + <polygon fill="transparent" points="
  36 + 1135.5, 30 1119.5, 11
  37 + 1113.5, 11 1132.5, 34
  38 + " stroke="#83bff6"></polygon>
  39 + <polygon fill="transparent" points="
  40 + 895.5, 30 912.5, 49
  41 + 918.5, 49 898.5, 26
  42 + " stroke="#83bff6"></polygon>
  43 + <polygon fill="rgba(0,206,209,0.3)" filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
  44 + 1129.5, 37 1108.5, 11
  45 + 913.5, 11 901.5, 23
  46 + 923.5, 49 1118.5, 49
  47 + " stroke="#83bff6"></polygon>
  48 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="1" points="
  49 + 880.5, 37 859.5, 37
  50 + 865.5, 46 886.5, 46
  51 + " fill="#83bff6">
  52 + <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  53 + </polygon>
  54 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.7" points="
  55 + 850.5, 37 829.5, 37
  56 + 835.5, 46 856.5, 46
  57 + " fill="#83bff6">
  58 + <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  59 + </polygon>
  60 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.5" points="
  61 + 820.5, 37 799.5, 37
  62 + 805.5, 46 826.5, 46
  63 + " fill="#83bff6">
  64 + <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  65 + </polygon>
  66 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="1" points="
  67 + 1170.5, 37 1149.5, 37
  68 + 1143.5, 46 1164.5, 46
  69 + " fill="#83bff6">
  70 + <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  71 + </polygon>
  72 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.7" points="
  73 + 1200.5, 37 1179.5, 37
  74 + 1173.5, 46 1194.5, 46
  75 + " fill="#83bff6">
  76 + <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  77 + </polygon>
  78 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.5" points="
  79 + 1230.5, 37 1209.5, 37
  80 + 1203.5, 46 1224.5, 46
  81 + " fill="#83bff6">
  82 + <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
  83 + </polygon>
  84 + <text x="1015.5" y="32" fill="#fff" font-size="18" text-anchor="middle" dominant-baseline="middle" class="dv-border-box-11-title"> </text>
  85 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
  86 + 7, 618 11, 622
  87 + 11, 698 7, 702
  88 + " fill="#83bff6"></polygon>
  89 + <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
  90 + 2024, 618 2020, 622
  91 + 2020, 698 2024, 702
  92 + " fill="#83bff6"></polygon>
  93 +</svg>
0 \ No newline at end of file 94 \ No newline at end of file
src/assets/images/widget/div12.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2071" height="1531" class="dv-border-svg-container">
  4 + <defs>
  5 + <filter id="borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54" height="150%" width="150%" x="-25%" y="-25%">
  6 + <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken"></feMorphology>
  7 + <feGaussianBlur in="thicken" stdDeviation="2" result="blurred"></feGaussianBlur>
  8 + <feFlood flood-color="rgba(0,206,209,0.7)" result="glowColor">
  9 + <animate attributeName="flood-color" values="
  10 + rgba(0,206,209,0.7);
  11 + rgba(0,206,209,0.3);
  12 + rgba(0,206,209,0.7);
  13 +" dur="3s" begin="0s" repeatCount="indefinite"></animate>
  14 + </feFlood>
  15 + <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
  16 + <feMerge>
  17 + <feMergeNode in="softGlowColored"></feMergeNode>
  18 + <feMergeNode in="SourceGraphic"></feMergeNode>
  19 + </feMerge>
  20 + </filter>
  21 + </defs>
  22 + <path fill="transparent" stroke-width="2" stroke="#83bff6" d="
  23 +M15 5 L 2056 5 Q 2066 5, 2066 15
  24 +L 2066 1516 Q 2066 1526, 2056 1526
  25 +L 15, 1526 Q 5 1526 5 1516 L 5 15
  26 +Q 5 5 15 5
  27 +"></path>
  28 + <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="M 20 5 L 15 5 Q 5 5 5 15 L 5 20" stroke="#00CED1"></path>
  29 + <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="M 2051 5 L 2056 5 Q 2066 5 2066 15 L 2066 20" stroke="#00CED1"></path>
  30 + <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="
  31 +M 2051 1526 L 2056 1526
  32 +Q 2066 1526 2066 1516
  33 +L 2066 1511
  34 +" stroke="#00CED1"></path>
  35 + <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="
  36 +M 20 1526 L 15 1526
  37 +Q 5 1526 5 1516
  38 +L 5 1511
  39 +" stroke="#00CED1"></path>
  40 +</svg>
0 \ No newline at end of file 41 \ No newline at end of file
src/assets/images/widget/div2.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2661" height="1737" class="dv-border-svg-container">
  4 + <polygon fill="transparent" points="
  5 + 7, 7 2654, 7 2654, 1730 7, 1730
  6 + "></polygon>
  7 + <polyline points="2, 2 2659 ,2 2659, 1735 2, 1735 2, 2" stroke="#83bff6"></polyline>
  8 + <polyline points="6, 6 2655, 6 2655, 1731 6, 1731 6, 6" stroke="#00CED1"></polyline>
  9 + <circle cx="11" cy="11" r="1" fill="#83bff6"></circle>
  10 + <circle cx="2650" cy="11" r="1" fill="#83bff6"></circle>
  11 + <circle cx="2650" cy="1726" r="1" fill="#83bff6"></circle>
  12 + <circle cx="11" cy="1726" r="1" fill="#83bff6"></circle>
  13 +</svg>
0 \ No newline at end of file 14 \ No newline at end of file
src/assets/images/widget/div3.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2058" height="1402" class="dv-border-svg-container">
  4 + <polygon fill="transparent" points="
  5 + 23, 23 2034, 23 2034, 1378 23, 1378
  6 +"></polygon>
  7 + <polyline points="4, 4 2036 ,4 2036, 1380 4, 1380 4, 4" class="dv-bb3-line1" stroke="#83bff6"></polyline>
  8 + <polyline points="10, 10 2042, 10 2042, 1386 10, 1386 10, 10" class="dv-bb3-line2" stroke="#00CED1"></polyline>
  9 + <polyline points="16, 16 2048, 16 2048, 1392 16, 1392 16, 16" class="dv-bb3-line2" stroke="#00CED1"></polyline>
  10 + <polyline points="22, 22 2054, 22 2054, 1398 22, 1398 22, 22" class="dv-bb3-line2" stroke="#00CED1"></polyline>
  11 +</svg>
0 \ No newline at end of file 12 \ No newline at end of file
src/assets/images/widget/div4.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1770" height="1483" class="dv-border-svg-container false">
  4 + <polygon fill="transparent" points="
  5 + 1755, 22 170, 22 150, 7 40, 7 28, 21 32, 24
  6 + 16, 42 16, 1451 41, 1476 1755, 1476
  7 +"></polygon>
  8 + <polyline points="145, 1478 40, 1478 10, 1448
  9 + 10, 40 40, 5 150, 5 170, 20 1755, 20" class="dv-bb4-line-1" stroke="#83bff6"></polyline>
  10 + <polyline points="245, 1482 36, 1482 14, 1460
  11 + 14, 1383" class="dv-bb4-line-2" stroke="#00CED1"></polyline>
  12 + <polyline points="7, 1443 7, 1408" class="dv-bb4-line-3" stroke="#83bff6"></polyline>
  13 + <polyline points="28, 24 13, 41 13, 64" class="dv-bb4-line-4" stroke="#83bff6"></polyline>
  14 + <polyline points="5, 45 5, 140" class="dv-bb4-line-5" stroke="#83bff6"></polyline>
  15 + <polyline points="14, 75 14, 180" class="dv-bb4-line-6" stroke="#00CED1"></polyline>
  16 + <polyline points="55, 11 147, 11 167, 26 250, 26" class="dv-bb4-line-7" stroke="#00CED1"></polyline>
  17 + <polyline points="158, 5 173, 16" class="dv-bb4-line-8" stroke="#00CED1"></polyline>
  18 + <polyline points="200, 17 1760, 17" class="dv-bb4-line-9" stroke="#83bff6"></polyline>
  19 + <polyline points="385, 17 1760, 17" class="dv-bb4-line-10" stroke="#00CED1"></polyline>
  20 +</svg>
0 \ No newline at end of file 21 \ No newline at end of file
src/assets/images/widget/div5.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2156" height="1690" class="dv-border-svg-container false">
  4 + <polygon fill="transparent" points="
  5 + 10, 22 2134, 22 2134, 1604 2072, 1666 10, 1666
  6 +"></polygon>
  7 + <polyline points="8, 5 2151, 5 2151, 1590
  8 + 2056, 1685 8, 1685 8, 5" class="dv-bb5-line-1" stroke="#83bff6"></polyline>
  9 + <polyline points="3, 5 2136, 5 2136, 1630
  10 + 2082, 1685 3, 1685 3, 5" class="dv-bb5-line-2" stroke="#00CED1"></polyline>
  11 + <polyline points="50, 13 2121, 13" class="dv-bb5-line-3" stroke="#00CED1"></polyline>
  12 + <polyline points="15, 20 2121, 20" class="dv-bb5-line-4" stroke="#00CED1"></polyline>
  13 + <polyline points="15, 1670 2046, 1670" class="dv-bb5-line-5" stroke="#00CED1"></polyline>
  14 + <polyline points="15, 1677 2046, 1677" class="dv-bb5-line-6" stroke="#00CED1"></polyline>
  15 +</svg>
0 \ No newline at end of file 16 \ No newline at end of file
src/assets/images/widget/div6.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1854" height="1242" class="dv-border-svg-container">
  4 + <polygon fill="transparent" points="
  5 + 9, 7 1845, 7 1845, 1235 9, 1235
  6 +"></polygon>
  7 + <circle cx="5" cy="5" r="2" fill="#00CED1"></circle>
  8 + <circle cx="1849" cy="5" r="2" fill="#00CED1"></circle>
  9 + <circle cx="1849" cy="1237" r="2" fill="#00CED1"></circle>
  10 + <circle cx="5" cy="1237" r="2" fill="#00CED1"></circle>
  11 + <polyline points="10, 4 1844, 4" stroke="#83bff6"></polyline>
  12 + <polyline points="10, 1238 1844, 1238" stroke="#83bff6"></polyline>
  13 + <polyline points="5, 70 5, 1172" stroke="#83bff6"></polyline>
  14 + <polyline points="1849, 70 1849, 1172" stroke="#83bff6"></polyline>
  15 + <polyline points="3, 10, 3, 50" stroke="#83bff6"></polyline>
  16 + <polyline points="7, 30 7, 80" stroke="#83bff6"></polyline>
  17 + <polyline points="1851, 10 1851, 50" stroke="#83bff6"></polyline>
  18 + <polyline points="1847, 30 1847, 80" stroke="#83bff6"></polyline>
  19 + <polyline points="3, 1232 3, 1192" stroke="#83bff6"></polyline>
  20 + <polyline points="7, 1212 7, 1162" stroke="#83bff6"></polyline>
  21 + <polyline points="1851, 1232 1851, 1192" stroke="#83bff6"></polyline>
  22 + <polyline points="1847, 1212 1847, 1162" stroke="#83bff6"></polyline>
  23 +</svg>
0 \ No newline at end of file 24 \ No newline at end of file
src/assets/images/widget/div7.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1851" height="1317" class="dv-border-svg-container">
  4 + <polyline points="0, 25 0, 0 25, 0" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
  5 + <polyline points="1826, 0 1851, 0 1851, 25" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
  6 + <polyline points="1826, 1317 1851, 1317 1851, 1292" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
  7 + <polyline points="0, 1292 0, 1317 25, 1317" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
  8 + <polyline points="0, 10 0, 0 10, 0" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
  9 + <polyline points="1841, 0 1851, 0 1851, 10" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
  10 + <polyline points="1841, 1317 1851, 1317 1851, 1307" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
  11 + <polyline points="0, 1307 0, 1317 10, 1317" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
  12 +</svg>
0 \ No newline at end of file 13 \ No newline at end of file
src/assets/images/widget/div8.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="400" height="300" class="dv-border-svg-container">
  4 + <defs>
  5 + <path id="border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" d="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" fill="transparent"></path>
  6 + <radialGradient id="border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5" cx="50%" cy="50%" r="50%">
  7 + <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
  8 + <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
  9 + </radialGradient>
  10 + <mask id="border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5">
  11 + <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5)">
  12 + <animateMotion dur="3s" path="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" rotate="auto" repeatCount="indefinite"></animateMotion>
  13 + </circle>
  14 + </mask>
  15 + </defs>
  16 + <polygon fill="transparent" points="5, 5 395, 5 395 295 5, 295"></polygon>
  17 + <use stroke-width="1" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" stroke="#83bff6"></use>
  18 + <use stroke-width="3" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" mask="url(#border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5)" stroke="#00CED1">
  19 + <animate attributeName="stroke-dasharray" from="0, 1390" to="1390, 0" dur="3s" repeatCount="indefinite"></animate>
  20 + </use>
  21 +</svg>
0 \ No newline at end of file 22 \ No newline at end of file
src/assets/images/widget/div9.svg 0 → 100644
  View file @64e01e5
  1 +<svg version="1.1"
  2 + baseProfile="full"
  3 + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="1715" height="1351" class="dv-border-svg-container">
  4 + <defs>
  5 + <linearGradient id="border-box-9-gradient-c5735993b5bc4fd6a14a3883485a32d3" x1="0%" y1="0%" x2="100%" y2="100%">
  6 + <animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
  7 + <animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
  8 + <stop offset="0%" stop-color="#83bff6">
  9 + <animate attributeName="stop-color" values="#83bff6;#00CED1;#83bff6" dur="10s" begin="0s" repeatCount="indefinite"></animate>
  10 + </stop>
  11 + <stop offset="100%" stop-color="#00CED1">
  12 + <animate attributeName="stop-color" values="#00CED1;#83bff6;#00CED1" dur="10s" begin="0s" repeatCount="indefinite"></animate>
  13 + </stop>
  14 + </linearGradient>
  15 + <mask id="border-box-9-mask-c5735993b5bc4fd6a14a3883485a32d3">
  16 + <polyline stroke="#fff" stroke-width="3" fill="transparent" points="8, 540.4 8, 3, 693, 3"></polyline>
  17 + <polyline fill="#fff" points="8, 202.65 8, 3, 178.5, 3
  18 + 171.5, 8 14, 8 14, 195.65
  19 +"></polyline>
  20 + <polyline stroke="#fff" stroke-width="3" fill="transparent" points="857.5, 3 1712, 3, 1712, 337.75"></polyline>
  21 + <polyline fill="#fff" points="
  22 + 891.8000000000001, 3 994.6999999999999, 3
  23 + 987.6999999999999, 9 898.8000000000001, 9
  24 +"></polyline>
  25 + <polyline fill="#fff" points="
  26 + 1543.5, 3 1712, 3 1712, 135.1
  27 + 1706, 128.1 1706, 9 1550.5, 9
  28 +"></polyline>
  29 + <polyline stroke="#fff" stroke-width="3" fill="transparent" points="8, 675.5 8, 1348 521.5, 1348"></polyline>
  30 + <polyline fill="#fff" points="
  31 + 8, 743.0500000000001 8, 945.6999999999999
  32 + 2, 938.6999999999999 2, 750.0500000000001
  33 +"></polyline>
  34 + <polyline stroke="#fff" stroke-width="3" fill="transparent" points="600.25, 1348 1712, 1348 1712, 472.84999999999997"></polyline>
  35 + <polyline fill="#fff" points="
  36 + 1577.8000000000002, 1348 1712, 1348 1712, 1080.8
  37 + 1706, 1087.8 1706, 1342 1584.8000000000002, 1342
  38 +"></polyline>
  39 + </mask>
  40 + </defs>
  41 + <polygon fill="transparent" points="
  42 +15, 9 172.5, 9 175.5, 6 893.8000000000001, 6
  43 +897.8000000000001, 10 987.6999999999999, 10 992.6999999999999, 6
  44 +1545.5, 6 1549.5, 10 1705, 10 1705, 129.1
  45 +1709, 134.1 1709, 1081.8 1705, 1086.8
  46 +1705, 1341 1584.8000000000002, 1341 1579.8000000000002, 1345
  47 +11, 1345 11, 200.65 15, 195.65
  48 +"></polygon>
  49 + <rect x="0" y="0" width="1715" height="1351" fill="url(#border-box-9-gradient-c5735993b5bc4fd6a14a3883485a32d3)" mask="url(#border-box-9-mask-c5735993b5bc4fd6a14a3883485a32d3)"></rect>
  50 +</svg>
0 \ No newline at end of file 51 \ No newline at end of file
src/views/bigscreenDesigner/designer/index.vue
  View file @64e01e5
@@ -7,45 +7,51 @@ @@ -7,45 +7,51 @@
7 !--> 7 !-->
8 <template> 8 <template>
9 <div class="layout"> 9 <div class="layout">
10 - <div  
11 - v-if="toolIsShow"  
12 - class="layout-left"  
13 - :style="{ width: widthLeftForTools + 'px' }"  
14 - >  
15 - <el-tabs type="border-card" :stretch="true"> 10 + <div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
  11 + <el-tabs type="border-card" :stretch="true" class="border-card">
16 <!-- 左侧组件栏--> 12 <!-- 左侧组件栏-->
17 - <el-tab-pane label="工具栏"> 13 + <el-tab-pane label="工具栏" class="toolBar">
18 <!-- <el-divider content-position="center">html</el-divider>--> 14 <!-- <el-divider content-position="center">html</el-divider>-->
19 - <li  
20 - v-for="widget in widgetTools"  
21 - :key="widget.code"  
22 - draggable="true"  
23 - @dragstart="dragStart(widget.code)"  
24 - @dragend="dragEnd()"  
25 - > 15 +
  16 + <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#242f3b" text-color="#fff"
  17 + active-text-color="#ffd04b">
  18 + <el-submenu index="1">
  19 + <template slot="title">
  20 + <i class="el-icon-location"></i>
  21 + <span>装饰</span>
  22 + </template>
  23 + <el-menu-item v-for="widget in widgetTools" :key="widget.code">
  24 + <li draggable="true" @dragstart="dragStart(widget.code)" @dragend="dragEnd()">
  25 + <div class="tools-item">
  26 + <span class="tools-item-icon">
  27 + <i class="iconfont" :class="widget.icon"></i>
  28 + </span>
  29 + <span class="tools-item-text">{{ widget.label }}</span>
  30 + </div>
  31 + </li>
  32 + </el-menu-item>
  33 + </el-submenu>
  34 + </el-menu>
  35 +
  36 +
  37 +
  38 +
  39 + <!-- <li v-for="widget in widgetTools" :key="widget.code" draggable="true" @dragstart="dragStart(widget.code)"
  40 + @dragend="dragEnd()">
26 <div class="tools-item"> 41 <div class="tools-item">
27 <span class="tools-item-icon"> 42 <span class="tools-item-icon">
28 <i class="iconfont" :class="widget.icon"></i> 43 <i class="iconfont" :class="widget.icon"></i>
29 </span> 44 </span>
30 <span class="tools-item-text">{{ widget.label }}</span> 45 <span class="tools-item-text">{{ widget.label }}</span>
31 </div> 46 </div>
32 - </li> 47 + </li> -->
33 </el-tab-pane> 48 </el-tab-pane>
34 <!-- 左侧图层--> 49 <!-- 左侧图层-->
35 <el-tab-pane label="图层"> 50 <el-tab-pane label="图层">
36 - <draggable  
37 - v-model="layerWidget"  
38 - @update="datadragEnd"  
39 - :options="{ animation: 300 }"  
40 - > 51 + <draggable v-model="layerWidget" @update="datadragEnd" :options="{ animation: 300 }">
41 <transition-group> 52 <transition-group>
42 - <div  
43 - v-for="(item, index) in layerWidget"  
44 - :key="'item' + index"  
45 - class="tools-item"  
46 - :class="widgetIndex == index ? 'is-active' : ''"  
47 - @click="layerClick(index)"  
48 - > 53 + <div v-for="(item, index) in layerWidget" :key="'item' + index" class="tools-item"
  54 + :class="widgetIndex == index ? 'is-active' : ''" @click="layerClick(index)">
49 <span class="tools-item-icon"> 55 <span class="tools-item-icon">
50 <i class="iconfont" :class="item.icon"></i> 56 <i class="iconfont" :class="item.icon"></i>
51 </span> 57 </span>
@@ -57,80 +63,40 @@ @@ -57,80 +63,40 @@
57 </el-tabs> 63 </el-tabs>
58 </div> 64 </div>
59 65
60 - <div  
61 - class="layout-left-fold"  
62 - :style="{ width: widthLeftForToolsHideButton + 'px' }"  
63 - @click="toolIsShow = !toolIsShow"  
64 - > 66 + <div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }"
  67 + @click="toolIsShow = !toolIsShow">
65 <i class="el-icon-arrow-right" /> 68 <i class="el-icon-arrow-right" />
66 </div> 69 </div>
67 70
68 - <div  
69 - class="layout-middle"  
70 - :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"  
71 - > 71 + <div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
72 <div class="top-button"> 72 <div class="top-button">
73 <span class="btn"> 73 <span class="btn">
74 - <el-tooltip  
75 - class="item"  
76 - effect="dark"  
77 - content="保存"  
78 - placement="bottom"  
79 - > 74 + <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
80 <i class="iconfont iconsave" @click="saveData"></i> 75 <i class="iconfont iconsave" @click="saveData"></i>
81 </el-tooltip> 76 </el-tooltip>
82 </span> 77 </span>
83 <span class="btn"> 78 <span class="btn">
84 - <el-tooltip  
85 - class="item"  
86 - effect="dark"  
87 - content="预览"  
88 - placement="bottom"  
89 - > 79 + <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
90 <i class="iconfont iconyulan" @click="viewScreen"></i> 80 <i class="iconfont iconyulan" @click="viewScreen"></i>
91 </el-tooltip> 81 </el-tooltip>
92 </span> 82 </span>
93 83
94 <span class="btn"> 84 <span class="btn">
95 - <el-tooltip  
96 - class="item"  
97 - effect="dark"  
98 - content="撤销"  
99 - placement="bottom"  
100 - > 85 + <el-tooltip class="item" effect="dark" content="撤销" placement="bottom">
101 <i class="iconfont iconundo" @click="handleUndo"></i> 86 <i class="iconfont iconundo" @click="handleUndo"></i>
102 </el-tooltip> 87 </el-tooltip>
103 </span> 88 </span>
104 89
105 <span class="btn"> 90 <span class="btn">
106 - <el-tooltip  
107 - class="item"  
108 - effect="dark"  
109 - content="恢复"  
110 - placement="bottom"  
111 - > 91 + <el-tooltip class="item" effect="dark" content="恢复" placement="bottom">
112 <i class="iconfont iconhuifubeifen" @click="handleRedo"></i> 92 <i class="iconfont iconhuifubeifen" @click="handleRedo"></i>
113 </el-tooltip> 93 </el-tooltip>
114 </span> 94 </span>
115 95
116 <span class="btn" v-permission="'bigScreenManage:export'"> 96 <span class="btn" v-permission="'bigScreenManage:export'">
117 - <el-tooltip  
118 - class="item"  
119 - effect="dark"  
120 - content="导入"  
121 - placement="bottom"  
122 - >  
123 - <el-upload  
124 - class="el-upload"  
125 - ref="upload"  
126 - :action="uploadUrl"  
127 - :headers="headers"  
128 - accept=".zip"  
129 - :on-success="handleUpload"  
130 - :on-error="handleError"  
131 - :show-file-list="false"  
132 - :limit="1"  
133 - > 97 + <el-tooltip class="item" effect="dark" content="导入" placement="bottom">
  98 + <el-upload class="el-upload" ref="upload" :action="uploadUrl" :headers="headers" accept=".zip"
  99 + :on-success="handleUpload" :on-error="handleError" :show-file-list="false" :limit="1">
134 <i class="iconfont icondaoru"></i> 100 <i class="iconfont icondaoru"></i>
135 </el-upload> 101 </el-upload>
136 </el-tooltip> 102 </el-tooltip>
@@ -138,26 +104,15 @@ @@ -138,26 +104,15 @@
138 <span class="btn border-left" v-permission="'bigScreenManage:import'"> 104 <span class="btn border-left" v-permission="'bigScreenManage:import'">
139 <ul class="nav"> 105 <ul class="nav">
140 <li> 106 <li>
141 - <i class="iconfont icondaochu"></i  
142 - ><i class="el-icon-arrow-down"></i> 107 + <i class="iconfont icondaochu"></i><i class="el-icon-arrow-down"></i>
143 <ul> 108 <ul>
144 <li> 109 <li>
145 - <el-tooltip  
146 - class="item"  
147 - effect="dark"  
148 - content="适合当前系统"  
149 - placement="right"  
150 - > 110 + <el-tooltip class="item" effect="dark" content="适合当前系统" placement="right">
151 <div @click="exportDashboard(1)">导出(包含数据集)</div> 111 <div @click="exportDashboard(1)">导出(包含数据集)</div>
152 </el-tooltip> 112 </el-tooltip>
153 </li> 113 </li>
154 <li> 114 <li>
155 - <el-tooltip  
156 - class="item"  
157 - effect="dark"  
158 - content="适合跨系统"  
159 - placement="right"  
160 - > 115 + <el-tooltip class="item" effect="dark" content="适合跨系统" placement="right">
161 <div @click="exportDashboard(0)">导出(不包含数据集)</div> 116 <div @click="exportDashboard(0)">导出(不包含数据集)</div>
162 </el-tooltip> 117 </el-tooltip>
163 </li> 118 </li>
@@ -166,58 +121,30 @@ @@ -166,58 +121,30 @@
166 </ul> 121 </ul>
167 </span> 122 </span>
168 </div> 123 </div>
169 - <div  
170 - class="workbench-container"  
171 - :style="{  
172 - width: bigscreenWidthInWorkbench + 'px',  
173 - height: bigscreenHeightInWorkbench + 'px'  
174 - }"  
175 - @mousedown="handleMouseDown"  
176 - >  
177 - <vue-ruler-tool  
178 - v-model="dashboard.presetLine"  
179 - class="vueRuler"  
180 - :step-length="50"  
181 - :parent="true"  
182 - :position="'relative'"  
183 - :is-scale-revise="true"  
184 - :visible.sync="dashboard.presetLineVisible"  
185 - >  
186 - <div  
187 - id="workbench"  
188 - class="workbench"  
189 - :style="{  
190 - transform: workbenchTransform,  
191 - width: bigscreenWidth + 'px',  
192 - height: bigscreenHeight + 'px',  
193 - 'background-color': dashboard.backgroundColor,  
194 - 'background-image': 'url(' + dashboard.backgroundImage + ')',  
195 - 'background-position': '0% 0%',  
196 - 'background-size': '100% 100%',  
197 - 'background-repeat': 'initial',  
198 - 'background-attachment': 'initial',  
199 - 'background-origin': 'initial',  
200 - 'background-clip': 'initial'  
201 - }"  
202 - @click.self="setOptionsOnClickScreen"  
203 - @drop="widgetOnDragged($event)"  
204 - @dragover="dragOver($event)"  
205 - > 124 + <div class="workbench-container" :style="{
  125 + width: bigscreenWidthInWorkbench + 'px',
  126 + height: bigscreenHeightInWorkbench + 'px'
  127 + }" @mousedown="handleMouseDown">
  128 + <vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true"
  129 + :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
  130 + <div id="workbench" class="workbench" :style="{
  131 + transform: workbenchTransform,
  132 + width: bigscreenWidth + 'px',
  133 + height: bigscreenHeight + 'px',
  134 + 'background-color': dashboard.backgroundColor,
  135 + 'background-image': 'url(' + dashboard.backgroundImage + ')',
  136 + 'background-position': '0% 0%',
  137 + 'background-size': '100% 100%',
  138 + 'background-repeat': 'initial',
  139 + 'background-attachment': 'initial',
  140 + 'background-origin': 'initial',
  141 + 'background-clip': 'initial'
  142 + }" @click.self="setOptionsOnClickScreen" @drop="widgetOnDragged($event)" @dragover="dragOver($event)">
206 <div v-if="grade" class="bg-grid"></div> 143 <div v-if="grade" class="bg-grid"></div>
207 - <widget  
208 - ref="widgets"  
209 - v-for="(widget, index) in widgets"  
210 - :key="index"  
211 - v-model="widget.value"  
212 - :index="index"  
213 - :step="step"  
214 - :type="widget.type"  
215 - :bigscreen="{ bigscreenWidth, bigscreenHeight }"  
216 - @onActivated="setOptionsOnClickWidget"  
217 - @contextmenu.prevent.native="rightClick($event, index)"  
218 - @mousedown.prevent.native="widgetsClick(index)"  
219 - @mouseup.prevent.native="widgetsMouseup"  
220 - /> 144 + <widget ref="widgets" v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index"
  145 + :step="step" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }"
  146 + @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)"
  147 + @mousedown.prevent.native="widgetsClick(index)" @mouseup.prevent.native="widgetsMouseup" />
221 </div> 148 </div>
222 </vue-ruler-tool> 149 </vue-ruler-tool>
223 </div> 150 </div>
@@ -225,54 +152,26 @@ @@ -225,54 +152,26 @@
225 152
226 <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }"> 153 <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
227 <el-tabs v-model="activeName" type="border-card" :stretch="true"> 154 <el-tabs v-model="activeName" type="border-card" :stretch="true">
228 - <el-tab-pane  
229 - v-if="  
230 - isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)  
231 - "  
232 - name="first"  
233 - label="配置"  
234 - >  
235 - <dynamicForm  
236 - ref="formData"  
237 - :options="widgetOptions.setup"  
238 - @onChanged="val => widgetValueChanged('setup', val)"  
239 - /> 155 + <el-tab-pane v-if="
  156 + isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
  157 + " name="first" label="配置">
  158 + <dynamicForm ref="formData" :options="widgetOptions.setup"
  159 + @onChanged="val => widgetValueChanged('setup', val)" />
240 </el-tab-pane> 160 </el-tab-pane>
241 - <el-tab-pane  
242 - v-if="isNotNull(widgetOptions.data)"  
243 - name="second"  
244 - label="数据"  
245 - >  
246 - <dynamicForm  
247 - ref="formData"  
248 - :options="widgetOptions.data"  
249 - @onChanged="val => widgetValueChanged('data', val)"  
250 - /> 161 + <el-tab-pane v-if="isNotNull(widgetOptions.data)" name="second" label="数据">
  162 + <dynamicForm ref="formData" :options="widgetOptions.data"
  163 + @onChanged="val => widgetValueChanged('data', val)" />
251 </el-tab-pane> 164 </el-tab-pane>
252 - <el-tab-pane  
253 - v-if="isNotNull(widgetOptions.position)"  
254 - name="third"  
255 - label="坐标"  
256 - >  
257 - <dynamicForm  
258 - ref="formData"  
259 - :options="widgetOptions.position"  
260 - @onChanged="val => widgetValueChanged('position', val)"  
261 - /> 165 + <el-tab-pane v-if="isNotNull(widgetOptions.position)" name="third" label="坐标">
  166 + <dynamicForm ref="formData" :options="widgetOptions.position"
  167 + @onChanged="val => widgetValueChanged('position', val)" />
262 </el-tab-pane> 168 </el-tab-pane>
263 </el-tabs> 169 </el-tabs>
264 </div> 170 </div>
265 171
266 - <content-menu  
267 - :visible.sync="visibleContentMenu"  
268 - :style-obj="styleObj"  
269 - @deletelayer="deletelayer"  
270 - @copylayer="copylayer"  
271 - @istopLayer="istopLayer"  
272 - @setlowLayer="setlowLayer"  
273 - @moveupLayer="moveupLayer"  
274 - @movedownLayer="movedownLayer"  
275 - /> 172 + <content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer"
  173 + @copylayer="copylayer" @istopLayer="istopLayer" @setlowLayer="setlowLayer" @moveupLayer="moveupLayer"
  174 + @movedownLayer="movedownLayer" />
276 </div> 175 </div>
277 </template> 176 </template>
278 177
@@ -407,9 +306,8 @@ export default { @@ -407,9 +306,8 @@ export default {
407 return Math.min(widthScale, heightScale); 306 return Math.min(widthScale, heightScale);
408 }, 307 },
409 workbenchTransform() { 308 workbenchTransform() {
410 - return `scale(${this.bigscreenScaleInWorkbench}, ${  
411 - this.bigscreenScaleInWorkbench  
412 - })`; 309 + return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench
  310 + })`;
413 }, 311 },
414 // 大屏在设计模式的大小 312 // 大屏在设计模式的大小
415 bigscreenWidthInWorkbench() { 313 bigscreenWidthInWorkbench() {
@@ -616,7 +514,7 @@ export default { @@ -616,7 +514,7 @@ export default {
616 if (type == "application/json") { 514 if (type == "application/json") {
617 let reader = new FileReader(); 515 let reader = new FileReader();
618 reader.readAsText(res, "utf-8"); 516 reader.readAsText(res, "utf-8");
619 - reader.onload = function() { 517 + reader.onload = function () {
620 const data = JSON.parse(reader.result); 518 const data = JSON.parse(reader.result);
621 that.$message.error(data.message); 519 that.$message.error(data.message);
622 }; 520 };
@@ -1021,8 +919,8 @@ export default { @@ -1021,8 +919,8 @@ export default {
1021 border: 1px solid #3a4659; 919 border: 1px solid #3a4659;
1022 background: #282a30; 920 background: #282a30;
1023 } 921 }
1024 - .tools-item-text {  
1025 - } 922 +
  923 + .tools-item-text {}
1026 } 924 }
1027 } 925 }
1028 926
@@ -1076,10 +974,14 @@ export default { @@ -1076,10 +974,14 @@ export default {
1076 974
1077 .el-icon-arrow-down { 975 .el-icon-arrow-down {
1078 transform: rotate(0deg); 976 transform: rotate(0deg);
1079 - -ms-transform: rotate(0deg); /* IE 9 */  
1080 - -moz-transform: rotate(0deg); /* Firefox */  
1081 - -webkit-transform: rotate(0deg); /* Safari 和 Chrome */  
1082 - -o-transform: rotate(0deg); /* Opera */ 977 + -ms-transform: rotate(0deg);
  978 + /* IE 9 */
  979 + -moz-transform: rotate(0deg);
  980 + /* Firefox */
  981 + -webkit-transform: rotate(0deg);
  982 + /* Safari 和 Chrome */
  983 + -o-transform: rotate(0deg);
  984 + /* Opera */
1083 transition: all 0.4s ease-in-out; 985 transition: all 0.4s ease-in-out;
1084 } 986 }
1085 987
@@ -1088,10 +990,14 @@ export default { @@ -1088,10 +990,14 @@ export default {
1088 990
1089 .el-icon-arrow-down { 991 .el-icon-arrow-down {
1090 transform: rotate(180deg); 992 transform: rotate(180deg);
1091 - -ms-transform: rotate(180deg); /* IE 9 */  
1092 - -moz-transform: rotate(180deg); /* Firefox */  
1093 - -webkit-transform: rotate(180deg); /* Safari 和 Chrome */  
1094 - -o-transform: rotate(180deg); /* Opera */ 993 + -ms-transform: rotate(180deg);
  994 + /* IE 9 */
  995 + -moz-transform: rotate(180deg);
  996 + /* Firefox */
  997 + -webkit-transform: rotate(180deg);
  998 + /* Safari 和 Chrome */
  999 + -o-transform: rotate(180deg);
  1000 + /* Opera */
1095 transition: all 0.4s ease-in-out; 1001 transition: all 0.4s ease-in-out;
1096 } 1002 }
1097 } 1003 }
@@ -1132,10 +1038,8 @@ export default { @@ -1132,10 +1038,8 @@ export default {
1132 width: 100%; 1038 width: 100%;
1133 height: 100%; 1039 height: 100%;
1134 background-size: 30px 30px, 30px 30px; 1040 background-size: 30px 30px, 30px 30px;
1135 - background-image: linear-gradient(  
1136 - hsla(0, 0%, 100%, 0.1) 1px,  
1137 - transparent 0  
1138 - ), 1041 + background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px,
  1042 + transparent 0),
1139 linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0); 1043 linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
1140 // z-index: 2; 1044 // z-index: 2;
1141 } 1045 }
@@ -1255,13 +1159,13 @@ li { @@ -1255,13 +1159,13 @@ li {
1255 clear: both; 1159 clear: both;
1256 } 1160 }
1257 1161
1258 -.nav > li { 1162 +.nav>li {
1259 width: 55px; 1163 width: 55px;
1260 text-align: left; 1164 text-align: left;
1261 position: relative; 1165 position: relative;
1262 } 1166 }
1263 1167
1264 -.nav > li a { 1168 +.nav>li a {
1265 float: left; 1169 float: left;
1266 padding: 12px 30px; 1170 padding: 12px 30px;
1267 color: #999; 1171 color: #999;
@@ -1269,11 +1173,11 @@ li { @@ -1269,11 +1173,11 @@ li {
1269 text-decoration: none; 1173 text-decoration: none;
1270 } 1174 }
1271 1175
1272 -.nav > li:hover { 1176 +.nav>li:hover {
1273 color: #788994; 1177 color: #788994;
1274 } 1178 }
1275 1179
1276 -.nav > li ul { 1180 +.nav>li ul {
1277 visibility: hidden; 1181 visibility: hidden;
1278 position: absolute; 1182 position: absolute;
1279 z-index: 1000; 1183 z-index: 1000;
@@ -1287,7 +1191,7 @@ li { @@ -1287,7 +1191,7 @@ li {
1287 transition: all 0.2s ease-in-out; 1191 transition: all 0.2s ease-in-out;
1288 } 1192 }
1289 1193
1290 -.nav > li:hover > ul { 1194 +.nav>li:hover>ul {
1291 opacity: 1; 1195 opacity: 1;
1292 visibility: visible; 1196 visibility: visible;
1293 margin: 0; 1197 margin: 0;
@@ -1320,7 +1224,7 @@ li { @@ -1320,7 +1224,7 @@ li {
1320 border: 1px solid #3c5e88; 1224 border: 1px solid #3c5e88;
1321 } 1225 }
1322 1226
1323 -.nav ul li:first-child > a:hover:before { 1227 +.nav ul li:first-child>a:hover:before {
1324 border-bottom-color: #04acec; 1228 border-bottom-color: #04acec;
1325 } 1229 }
1326 1230
@@ -1353,4 +1257,26 @@ li { @@ -1353,4 +1257,26 @@ li {
1353 /deep/ .vue-ruler-v { 1257 /deep/ .vue-ruler-v {
1354 opacity: 0.3; 1258 opacity: 0.3;
1355 } 1259 }
  1260 +
  1261 +
  1262 +.border-card {
  1263 + /deep/ .el-tabs__content {
  1264 + padding: 0;
  1265 + }
  1266 +}
  1267 +
  1268 +.toolBar {
  1269 + /deep/ .el-submenu__title {
  1270 + padding: 0 0 0 15px !important;
  1271 + }
  1272 +
  1273 + .el-menu {
  1274 + border: 0;
  1275 + }
  1276 +
  1277 + /deep/ .el-menu-item {
  1278 + padding: 0 !important;
  1279 + min-width: none !important;
  1280 + }
  1281 +}
1356 </style> 1282 </style>
src/views/bigscreenDesigner/designer/tools/configure/widget-div.js
  View file @64e01e5
@@ -17,14 +17,14 @@ export const widgetDiv = { @@ -17,14 +17,14 @@ export const widgetDiv = {
17 placeholder: '', 17 placeholder: '',
18 value: '边框', 18 value: '边框',
19 }, 19 },
20 - {  
21 - type: 'el-input-text',  
22 - label: '隐藏',  
23 - name: 'bHide',  
24 - required: false,  
25 - placeholder: '',  
26 - value: false,  
27 - }, 20 + // {
  21 + // type: 'el-input-text',
  22 + // label: '隐藏',
  23 + // name: 'bHide',
  24 + // required: false,
  25 + // placeholder: '',
  26 + // value: false,
  27 + // },
28 { 28 {
29 type: 'el-select', 29 type: 'el-select',
30 label: '边框类型', 30 label: '边框类型',
@@ -37,41 +37,48 @@ export const widgetDiv = { @@ -37,41 +37,48 @@ export const widgetDiv = {
37 {code: 'div_Style_3', name: '边框3'}, 37 {code: 'div_Style_3', name: '边框3'},
38 {code: 'div_Style_4', name: '边框4'}, 38 {code: 'div_Style_4', name: '边框4'},
39 {code: 'div_Style_5', name: '边框5'}, 39 {code: 'div_Style_5', name: '边框5'},
  40 + {code: 'div_Style_6', name: '边框6'},
  41 + {code: 'div_Style_7', name: '边框7'},
  42 + {code: 'div_Style_8', name: '边框8'},
  43 + {code: 'div_Style_9', name: '边框9'},
  44 + {code: 'div_Style_10', name: '边框10'},
  45 + {code: 'div_Style_11', name: '边框11'},
  46 + {code: 'div_Style_12', name: '边框12'},
40 ], 47 ],
41 value: 'div_Style_1' 48 value: 'div_Style_1'
42 }, 49 },
43 - {  
44 - type: 'vue-color',  
45 - label: '边框主颜色',  
46 - name: 'colorOne',  
47 - required: false,  
48 - placeholder: '',  
49 - value: '#FAD400',  
50 - },  
51 - {  
52 - type: 'vue-color',  
53 - label: '边框副颜色',  
54 - name: 'colorTwo',  
55 - required: false,  
56 - placeholder: '',  
57 - value: '#FAD400',  
58 - }, 50 + // {
  51 + // type: 'vue-color',
  52 + // label: '边框主颜色',
  53 + // name: 'colorOne',
  54 + // required: false,
  55 + // placeholder: '',
  56 + // value: '#FAD400',
  57 + // },
  58 + // {
  59 + // type: 'vue-color',
  60 + // label: '边框副颜色',
  61 + // name: 'colorTwo',
  62 + // required: false,
  63 + // placeholder: '',
  64 + // value: '#FAD400',
  65 + // },
59 { 66 {
60 type: 'vue-color', 67 type: 'vue-color',
61 label: '背景色', 68 label: '背景色',
62 name: 'background', 69 name: 'background',
63 required: false, 70 required: false,
64 placeholder: '', 71 placeholder: '',
65 - value: 'rgba(115,170,229,.5)',  
66 - },  
67 - {  
68 - type: 'el-input-text',  
69 - label: '动画时长(秒)',  
70 - name: 'time',  
71 - required: false,  
72 - placeholder: '',  
73 - value: '3', 72 + value: '',
74 }, 73 },
  74 + // {
  75 + // type: 'el-input-text',
  76 + // label: '动画时长(秒)',
  77 + // name: 'time',
  78 + // required: false,
  79 + // placeholder: '',
  80 + // value: '3',
  81 + // },
75 ], 82 ],
76 // 数据 83 // 数据
77 data: [], 84 data: [],
@@ -99,7 +106,7 @@ export const widgetDiv = { @@ -99,7 +106,7 @@ export const widgetDiv = {
99 name: 'width', 106 name: 'width',
100 required: false, 107 required: false,
101 placeholder: '该容器在1920px大屏中的宽度', 108 placeholder: '该容器在1920px大屏中的宽度',
102 - value: 100, 109 + value: 1000,
103 }, 110 },
104 { 111 {
105 type: 'el-input-number', 112 type: 'el-input-number',
@@ -107,7 +114,7 @@ export const widgetDiv = { @@ -107,7 +114,7 @@ export const widgetDiv = {
107 name: 'height', 114 name: 'height',
108 required: false, 115 required: false,
109 placeholder: '该容器在1080px大屏中的高度', 116 placeholder: '该容器在1080px大屏中的高度',
110 - value: 40, 117 + value: 600,
111 }, 118 },
112 ], 119 ],
113 } 120 }
src/views/bigscreenDesigner/designer/tools/index.js
  View file @64e01e5
@@ -6,80 +6,88 @@ @@ -6,80 +6,88 @@
6 * @LastEditors: qianlishi 6 * @LastEditors: qianlishi
7 * @LastEditTime: 2022-03-11 10:35:35 7 * @LastEditTime: 2022-03-11 10:35:35
8 */ 8 */
9 -import { widgetTool } from "./main" 9 +import { widgetTool } from "./main";
10 const screenConfig = { 10 const screenConfig = {
11 - code: 'screen',  
12 - type: 'screen',  
13 - label: '大屏设置',  
14 - icon: '', 11 + code: "screen",
  12 + type: "screen",
  13 + label: "大屏设置",
  14 + icon: "",
15 options: { 15 options: {
16 setup: [ 16 setup: [
17 { 17 {
18 - type: 'el-input-number',  
19 - label: '大屏宽度',  
20 - name: 'width', 18 + type: "el-input-number",
  19 + label: "大屏宽度",
  20 + name: "width",
21 required: false, 21 required: false,
22 - placeholder: 'px',  
23 - value: '1920', 22 + placeholder: "px",
  23 + value: "1920"
24 }, 24 },
25 { 25 {
26 - type: 'el-input-number',  
27 - label: '大屏高度',  
28 - name: 'height', 26 + type: "el-input-number",
  27 + label: "大屏高度",
  28 + name: "height",
29 required: false, 29 required: false,
30 - placeholder: 'px',  
31 - value: '1080', 30 + placeholder: "px",
  31 + value: "1080"
32 }, 32 },
33 { 33 {
34 - type: 'el-input-text',  
35 - label: '标题',  
36 - name: 'title', 34 + type: "el-input-text",
  35 + label: "标题",
  36 + name: "title",
37 require: false, 37 require: false,
38 - placeholder: '',  
39 - value: '大屏', 38 + placeholder: "",
  39 + value: "大屏"
40 }, 40 },
41 { 41 {
42 - type: 'el-input-textarea',  
43 - label: '大屏简介',  
44 - name: 'description', 42 + type: "el-input-textarea",
  43 + label: "大屏简介",
  44 + name: "description",
45 required: false, 45 required: false,
46 - placeholder: '', 46 + placeholder: ""
47 }, 47 },
48 { 48 {
49 - type: 'vue-color',  
50 - label: '背景颜色',  
51 - name: 'backgroundColor', 49 + type: "vue-color",
  50 + label: "背景颜色",
  51 + name: "backgroundColor",
52 required: false, 52 required: false,
53 - placeholder: '',  
54 - value: '#000', 53 + placeholder: "",
  54 + value: "#000"
55 }, 55 },
56 { 56 {
57 - type: 'custom-upload',  
58 - label: '图片地址',  
59 - name: 'backgroundImage', 57 + type: "custom-upload",
  58 + label: "图片地址",
  59 + name: "backgroundImage",
60 required: false, 60 required: false,
61 - placeholder: '',  
62 - value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b',  
63 - }, 61 + placeholder: "",
  62 + value:
  63 + "https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b"
  64 + }
64 ], 65 ],
65 data: [], 66 data: [],
66 - position: [], 67 + position: []
67 } 68 }
68 -}  
69 -const widgetTools = [  
70 - ...widgetTool  
71 -] 69 +};
  70 +const widgetTools = [...widgetTool];
72 71
73 -const getToolByCode = function (code) { 72 +const getToolByCode = function(code) {
74 // 获取大屏底层设置属性 73 // 获取大屏底层设置属性
75 - if (code == 'screen') {  
76 - return screenConfig 74 + if (code == "screen") {
  75 + return screenConfig;
77 } 76 }
78 // 获取组件 77 // 获取组件
79 - let item = widgetTools.find(function (item, index, arrs) {  
80 - return item.code === code  
81 - })  
82 - return item  
83 -}  
84 -console.log(widgetTools)  
85 -export {widgetTools, getToolByCode} 78 + let item = widgetTools.find(function(item, index, arrs) {
  79 + return item.code === code;
  80 + });
  81 + return item;
  82 +};
  83 +console.log(widgetTools);
  84 +
  85 +const widgetToolsGroup = () => {
  86 + let chartGroup = [];
  87 +
  88 + for (const item of widgetTools) {
  89 +
  90 + }
  91 +
  92 +};
  93 +export { widgetTools, getToolByCode, widgetToolsGroup };
src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue 0 → 100644
  View file @64e01e5
  1 +<template>
  2 + <div class="bg">
  3 + <!-- <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" fill="transparent" width="400" height="300"
  4 + class="bgColor">
  5 + <polygon :fill="bgColor" points="10, 27 10, 273 13, 276 13, 279 24, 289
  6 + 38, 289 41, 292 73, 292 75, 290 81, 290
  7 + 85, 294 315, 294 319, 290 325, 290
  8 + 327, 292 359, 292 362, 289
  9 + 376, 289 387, 279 387, 276
  10 + 390, 273 390, 27 387, 25 387, 21
  11 + 376, 11 362, 11 359, 8 327, 8 325, 10
  12 + 319, 10 315, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
  13 + </svg> -->
  14 + <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
  15 + class="top-left">
  16 + <polygon
  17 + points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
  18 + :fill="mainColor">
  19 + <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
  20 + </animate>
  21 + </polygon>
  22 + <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
  23 + <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
  24 + </animate>
  25 + </polygon>
  26 + <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
  27 + :fill="mainColor">
  28 + <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
  29 + </animate>
  30 + </polygon>
  31 + </svg>
  32 + <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
  33 + class="top-right">
  34 + <polygon
  35 + points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
  36 + :fill="mainColor">
  37 + <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
  38 + </animate>
  39 + </polygon>
  40 + <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
  41 + <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
  42 + </animate>
  43 + </polygon>
  44 + <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
  45 + :fill="mainColor">
  46 + <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
  47 + </animate>
  48 + </polygon>
  49 + </svg>
  50 + <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
  51 + class="bottom-left">
  52 + <polygon
  53 + points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
  54 + :fill="mainColor">
  55 + <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
  56 + </animate>
  57 + </polygon>
  58 + <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
  59 + <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
  60 + </animate>
  61 + </polygon>
  62 + <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
  63 + :fill="mainColor">
  64 + <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
  65 + </animate>
  66 + </polygon>
  67 + </svg>
  68 + <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
  69 + class="bottom-right">
  70 + <polygon
  71 + points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
  72 + :fill="mainColor">
  73 + <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
  74 + </animate>
  75 + </polygon>
  76 + <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
  77 + <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
  78 + </animate>
  79 + </polygon>
  80 + <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
  81 + :fill="mainColor">
  82 + <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
  83 + </animate>
  84 + </polygon>
  85 + </svg>
  86 + </div>
  87 +</template>
  88 +
  89 +<script>
  90 +export default {
  91 + name: 'widget-div-1',
  92 + props: {
  93 + mainColor: {
  94 + type: String,
  95 + default: "#83bff6",
  96 + },
  97 + secondaryColor: {
  98 + type: String,
  99 + default: "#00CED1",
  100 + },
  101 + // bgColor: {
  102 + // type: String,
  103 + // default: "transparent",
  104 + // },
  105 + },
  106 + computed: {
  107 + valuesArr() {
  108 + return [`${this.mainColor};${this.secondaryColor};${this.mainColor};`,
  109 + `${this.secondaryColor};${this.mainColor};${this.secondaryColor};`,
  110 + `${this.mainColor};${this.secondaryColor};transparent;`];
  111 + }
  112 + }
  113 +};
  114 +</script>
  115 +
  116 +<style lang="scss" scoped>
  117 +.bg {
  118 + width: 100%;
  119 + height: 100%;
  120 + position: relative;
  121 +
  122 + svg {
  123 + position: absolute;
  124 + width: 6em;
  125 + height: 6em;
  126 + }
  127 +
  128 + .bgColor {
  129 + width: 100%;
  130 + height: 100%;
  131 + top: 0;
  132 + left: 0;
  133 + }
  134 +
  135 + .top-left {
  136 + top: 0;
  137 + left: 0;
  138 + }
  139 +
  140 + .top-right {
  141 + top: 0;
  142 + right: 0;
  143 + transform: rotateY(180deg);
  144 + }
  145 +
  146 + .bottom-left {
  147 + left: 0;
  148 + bottom: 0;
  149 + transform: rotateX(180deg);
  150 + }
  151 +
  152 + .bottom-right {
  153 + bottom: 0;
  154 + right: 0;
  155 + transform: rotateX(180deg) rotateY(180deg);
  156 + }
  157 +}
  158 +</style>
0 \ No newline at end of file 159 \ No newline at end of file
src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue 0 → 100644
  View file @64e01e5
  1 +<template>
  2 + <div class="bg">
  3 + <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2661"
  4 + height="1737" class="dv-border-svg-container">
  5 + <polygon fill="transparent" points="
  6 + 7, 7 2654, 7 2654, 1730 7, 1730
  7 + "></polygon>
  8 + <polyline points="2, 2 2659 ,2 2659, 1735 2, 1735 2, 2" :stroke="mainColor"></polyline>
  9 + <polyline points="6, 6 2655, 6 2655, 1731 6, 1731 6, 6" :stroke="secondaryColor"></polyline>
  10 + <circle cx="11" cy="11" r="1" :fill="mainColor"></circle>
  11 + <circle cx="2650" cy="11" r="1" :fill="mainColor"></circle>
  12 + <circle cx="2650" cy="1726" r="1" :fill="mainColor"></circle>
  13 + <circle cx="11" cy="1726" r="1" :fill="mainColor"></circle>
  14 + </svg>
  15 + </div>
  16 +</template>
  17 +
  18 +<script>
  19 +export default {
  20 + name: 'widget-div-2',
  21 + props: {
  22 + mainColor: {
  23 + type: String,
  24 + default: "mainColor",
  25 + },
  26 + secondaryColor: {
  27 + type: String,
  28 + default: "secondaryColor",
  29 + },
  30 + },
  31 + computed: {
  32 + valuesArr() {
  33 + return [`${this.mainColor};${this.secondaryColor};${this.mainColor};`,
  34 + `${this.secondaryColor};${this.mainColor};${this.secondaryColor};`,
  35 + `${this.mainColor};${this.secondaryColor};transparent;`];
  36 + }
  37 + }
  38 +};
  39 +</script>
  40 +
  41 +<style lang="scss" scoped>
  42 +.bg {
  43 + width: 100%;
  44 + height: 100%;
  45 + position: relative;
  46 +}
  47 +</style>
0 \ No newline at end of file 48 \ No newline at end of file
src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
  View file @64e01e5
1 <!-- 1 <!--
2 Div 图层 2 Div 图层
3 --> 3 -->
4 - <template>  
5 - <div :class="[divClass]" :style="styleColor">  
6 - {{ styleColor.text }} 4 +<template>
  5 + <div :style="styleColor">
  6 +
  7 + <!-- <component :is="styleColor.divClass" :mainColor="transStyle.colorOne" :secondaryColor="transStyle.colorTwo">
  8 + </component> -->
  9 + <div :class="['div_Style', styleColor.divClass]" v-if="
  10 + styleColor.divClass === 'div_Style_1' ||
  11 + styleColor.divClass === 'div_Style_10'
  12 + ">
  13 + <div class="topLeft"></div>
  14 + <div class="topRight"></div>
  15 + <div class="bottomLeft"></div>
  16 + <div class="bottomRight"></div>
  17 + </div>
  18 + <div :class="['div_Style', styleColor.divClass]" v-else></div>
7 </div> 19 </div>
8 </template> 20 </template>
9 21
10 <script> 22 <script>
  23 +// import WidgeDiv1 from './svg/div1.vue';
  24 +// import WidgeDiv2 from './svg/div2.vue';
11 export default { 25 export default {
12 name: "WidgetDiv", 26 name: "WidgetDiv",
13 - components: {}, 27 + components: {
  28 + // div_Style_1: WidgeDiv1,
  29 + // div_Style_2: WidgeDiv2
  30 + },
14 props: { 31 props: {
15 value: Object, 32 value: Object,
16 - ispreview: Boolean 33 + ispreview: Boolean,
17 }, 34 },
18 data() { 35 data() {
19 return { 36 return {
20 options: {}, 37 options: {},
21 - optionsData: {} 38 + optionsData: {},
22 }; 39 };
23 }, 40 },
24 computed: { 41 computed: {
@@ -30,7 +47,8 @@ export default { @@ -30,7 +47,8 @@ export default {
30 position: this.ispreview ? "absolute" : "static", 47 position: this.ispreview ? "absolute" : "static",
31 color: this.transStyle.colorOne, 48 color: this.transStyle.colorOne,
32 text: this.transStyle.text, 49 text: this.transStyle.text,
33 - divClass: this.transStyle.divType == undefined 50 + divClass:
  51 + this.transStyle.divType == undefined
34 ? "div_Style_1" 52 ? "div_Style_1"
35 : this.transStyle.divType, 53 : this.transStyle.divType,
36 background: this.transStyle.background, 54 background: this.transStyle.background,
@@ -38,9 +56,9 @@ export default { @@ -38,9 +56,9 @@ export default {
38 height: this.transStyle.height + "px", 56 height: this.transStyle.height + "px",
39 left: this.transStyle.left + "px", 57 left: this.transStyle.left + "px",
40 top: this.transStyle.top + "px", 58 top: this.transStyle.top + "px",
41 - right: this.transStyle.right + "px" 59 + right: this.transStyle.right + "px",
42 }; 60 };
43 - } 61 + },
44 }, 62 },
45 watch: { 63 watch: {
46 value: { 64 value: {
@@ -49,21 +67,21 @@ export default { @@ -49,21 +67,21 @@ export default {
49 this.optionsData = val.data; 67 this.optionsData = val.data;
50 this.setOptionsData(); 68 this.setOptionsData();
51 }, 69 },
52 - deep: true  
53 - }  
54 - }, 70 + deep: true,
  71 + },
  72 + },
55 watch: { 73 watch: {
56 value: { 74 value: {
57 handler(val) { 75 handler(val) {
58 this.options = val; 76 this.options = val;
59 }, 77 },
60 - deep: true  
61 - } 78 + deep: true,
  79 + },
62 }, 80 },
63 mounted() { 81 mounted() {
64 this.options = this.value; 82 this.options = this.value;
65 }, 83 },
66 - methods: {} 84 + methods: {},
67 }; 85 };
68 </script> 86 </script>
69 87
@@ -75,4 +93,135 @@ export default { @@ -75,4 +93,135 @@ export default {
75 border-color: aqua; 93 border-color: aqua;
76 overflow: hidden; 94 overflow: hidden;
77 } 95 }
  96 +
  97 +.div_Style {
  98 + width: 100%;
  99 + height: 100%;
  100 +}
  101 +
  102 +.div_Style_1 {
  103 + fill: red;
  104 + position: relative;
  105 +
  106 + >div {
  107 + position: absolute;
  108 + width: 6em;
  109 + height: 6em;
  110 + background: url("../../../../../assets/images/widget/div1.svg") no-repeat;
  111 + background-size: 100% 100%;
  112 + }
  113 +
  114 + .topLeft {
  115 + top: 0;
  116 + left: 0;
  117 + }
  118 +
  119 + .topRight {
  120 + top: 0;
  121 + right: 0;
  122 + transform: rotateY(180deg);
  123 + }
  124 +
  125 + .bottomLeft {
  126 + left: 0;
  127 + bottom: 0;
  128 + transform: rotateX(180deg);
  129 + }
  130 +
  131 + .bottomRight {
  132 + bottom: 0;
  133 + right: 0;
  134 + transform: rotateX(180deg) rotateY(180deg);
  135 + }
  136 +}
  137 +
  138 +.div_Style_2 {
  139 + background: url("../../../../../assets/images/widget/div2.svg") no-repeat;
  140 + background-size: 100% 100%;
  141 +}
  142 +
  143 +.div_Style_3 {
  144 + background: url("../../../../../assets/images/widget/div3.svg") no-repeat;
  145 + background-size: 100% 100%;
  146 +}
  147 +
  148 +.div_Style_4 {
  149 + background: url("../../../../../assets/images/widget/div4.svg") no-repeat;
  150 + background-size: 100% 100%;
  151 +}
  152 +
  153 +.div_Style_5 {
  154 + background: url("../../../../../assets/images/widget/div5.svg") no-repeat;
  155 + background-size: 100% 100%;
  156 +}
  157 +
  158 +.div_Style_6 {
  159 + background: url("../../../../../assets/images/widget/div6.svg") no-repeat;
  160 + background-size: 100% 100%;
  161 +}
  162 +
  163 +.div_Style_7 {
  164 + box-shadow: rgb(131, 191, 246) 0px 0px 40px inset;
  165 + border: 1px solid rgb(131, 191, 246);
  166 + background: url("../../../../../assets/images/widget/div7.svg") no-repeat;
  167 + background-size: 100% 100%;
  168 +}
  169 +
  170 +.div_Style_8 {
  171 + height: 100%;
  172 + background: url("../../../../../assets/images/widget/div8.svg") no-repeat;
  173 + background-size: 100% 100%;
  174 +}
  175 +
  176 +.div_Style_9 {
  177 + background: url("../../../../../assets/images/widget/div9.svg") no-repeat;
  178 + background-size: 100% 100%;
  179 +}
  180 +
  181 +.div_Style_10 {
  182 + position: relative;
  183 + box-shadow: rgb(131, 191, 246) 0px 0px 25px 3px inset;
  184 +
  185 + >div {
  186 + position: absolute;
  187 + width: 6em;
  188 + height: 6em;
  189 + background: url("../../../../../assets/images/widget/div10.svg") no-repeat;
  190 + background-size: 100% 100%;
  191 + }
  192 +
  193 + .topLeft {
  194 + top: 0;
  195 + left: 0;
  196 + }
  197 +
  198 + .topRight {
  199 + top: 0;
  200 + right: 0;
  201 + transform: rotateY(180deg);
  202 + }
  203 +
  204 + .bottomLeft {
  205 + left: 0;
  206 + bottom: 0;
  207 + transform: rotateX(180deg);
  208 + }
  209 +
  210 + .bottomRight {
  211 + bottom: 0;
  212 + right: 0;
  213 + transform: rotateX(180deg) rotateY(180deg);
  214 + }
  215 +}
  216 +
  217 +.div_Style_11 {
  218 + width: 100%;
  219 + background: url("../../../../../assets/images/widget/div11.svg") no-repeat;
  220 + background-size: 100% 100%;
  221 +}
  222 +
  223 +.div_Style_12 {
  224 + background: url("../../../../../assets/images/widget/div12.svg") no-repeat;
  225 + background-size: 100% 100%;
  226 +}
78 </style> 227 </style>
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @64e01e5
@@ -50,6 +50,7 @@ import widgetDecoratePieChart from &quot;./decorate/widgetDecoratePieChart&quot;; @@ -50,6 +50,7 @@ import widgetDecoratePieChart from &quot;./decorate/widgetDecoratePieChart&quot;;
50 import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; 50 import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
51 import widgetWordCloud from "./wordcloud/widgetWordCloud"; 51 import widgetWordCloud from "./wordcloud/widgetWordCloud";
52 import widgetHeatmap from "./heatmap/widgetHeatmap"; 52 import widgetHeatmap from "./heatmap/widgetHeatmap";
  53 +import widgetDiv from "./div/widgetDiv"
53 54
54 export default { 55 export default {
55 name: "Widget", 56 name: "Widget",
@@ -81,7 +82,8 @@ export default { @@ -81,7 +82,8 @@ export default {
81 widgetDecoratePieChart, 82 widgetDecoratePieChart,
82 widgetMoreBarLineChart, 83 widgetMoreBarLineChart,
83 widgetWordCloud, 84 widgetWordCloud,
84 - widgetHeatmap 85 + widgetHeatmap,
  86 + widgetDiv
85 }, 87 },
86 model: { 88 model: {
87 prop: "value", 89 prop: "value",