首页完善 机具供应展示页面初步完善
This commit is contained in:
BianLzhaoMin
parent
52d14c7e55
commit
524ddc0a4e
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539542068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22600" width="200" height="200"><path d="M237.58 740.23L176.66 753 67.24 917.89l20.6 20.49 20.6 20.52 166.14-108.72 12.91-60.48L424.13 654l-49.78-49.53z m595.84-620.88a14.84 14.84 0 0 1 20.92 0 14.5 14.5 0 0 1 0 20.8L614.63 378.23 652 415.38 891.67 177.3a14.87 14.87 0 0 1 21 0 14.5 14.5 0 0 1 0 20.81l-239.7 238 33.57 33.31c0.57-0.53 1.15-0.84 1.72-1.45l25.36-25.17 203.19-201.7a102.4 102.4 0 0 0 0-145.68 104.24 104.24 0 0 0-146.75 0L588.12 295.84l-26.64 26.48c-0.51 0.6-0.9 1.23-1.4 1.76l33.51 33.37zM488.23 312.28a210.73 210.73 0 0 0 2.6-56.88 207 207 0 0 0-60.53-128.57C368.17 65.21 277 50.28 200.7 81.91L324 204.19a47.14 47.14 0 0 1-0.07 66.9l-51.44 51a47.68 47.68 0 0 1-67.14 0L84.78 202.4a207.13 207.13 0 0 0 48.39 219.39 209.7 209.7 0 0 0 115.92 58.33 213.3 213.3 0 0 0 60.66 0.63c128.25 127.44 445 441.9 445 441.9 48.06 47.64 126.14 47.64 174.15 0a121.54 121.54 0 0 0-0.07-172.85zM891 885a64.55 64.55 0 0 1-90.8 0.07 63.5 63.5 0 0 1 0.07-90 64.59 64.59 0 0 1 90.66 0 63.23 63.23 0 0 1 0.07 90z m0 0" fill="#ffffff" p-id="22601"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539407635" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18439" width="200" height="200"><path d="M1041.066667 361.813333l-484.693334-341.333333c-3.413333-3.413333-6.826667-6.826667-13.653333-10.24-13.653333-6.826667-34.133333-3.413333-44.373333 13.653333l-481.28 337.92c-13.653333 10.24-17.066667 34.133333-3.413334 51.2s34.133333 23.893333 47.786667 13.653334l34.133333-23.893334v559.786667c0 20.48 17.066667 37.546667 37.546667 37.546667s37.546667-17.066667 37.546667-37.546667v-614.4l358.4-252.586667 365.226666 256v607.573334c0 20.48 17.066667 37.546667 37.546667 37.546666s37.546667-17.066667 37.546667-37.546666v-556.373334l27.306666 17.066667c13.653333 10.24 37.546667 3.413333 47.786667-13.653333 13.653333-13.653333 10.24-34.133333-3.413333-44.373334z m-679.253334 27.306667h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c0-30.72-6.826667-37.546667-37.546667-37.546667z m0 204.8h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c0-30.72-6.826667-37.546667-37.546667-37.546667z m0 208.213333h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c0-34.133333-6.826667-37.546667-37.546667-37.546667z m215.04 0h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c0-34.133333-6.826667-37.546667-37.546667-37.546667z m215.04 0h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c3.413333-34.133333-3.413333-37.546667-37.546667-37.546667z m-215.04-208.213333h-81.92c-30.72 0-37.546667 6.826667-37.546666 37.546667v85.333333c0 30.72 6.826667 37.546667 37.546666 37.546667h81.92c30.72 0 37.546667-6.826667 37.546667-37.546667v-85.333333c0-30.72-6.826667-37.546667-37.546667-37.546667z" fill="#ffffff" p-id="18440"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539490318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20926" width="200" height="200"><path d="M910.208 0H113.792A114.304 114.304 0 0 0 0 113.792v796.416A114.048 114.048 0 0 0 113.792 1024h796.416A114.048 114.048 0 0 0 1024 910.208V113.792A114.176 114.176 0 0 0 910.208 0zM256 768H192v-64h64v64z m0-256H192V448h64v64z m78.272-329.6L214.08 302.208l-6.848 6.848-6.784-6.848-80.256-80.704-6.848-6.784 27.904-27.904 6.848 6.848 59.392 59.584 99.136-98.944L313.6 147.2l6.4 7.104 14.464 14.272 6.848 6.784zM896 768H448v-64h448v64z m0-256H448V448h448v64z m0-256H448V192h448v64z m0 0" fill="#ffffff" p-id="20927"></path></svg>
|
||||
|
After Width: | Height: | Size: 679 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742541057763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37262" width="200" height="200"><path d="M771.512499 509.49597 511.614214 959.653483 251.715929 509.49597 414.441057 509.49597 414.441057 64.132646 608.786347 64.132646 608.786347 509.49597Z" p-id="37263" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 348 B |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539612234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24591" width="200" height="200"><path d="M886.525028 478.637873v-39.369867L497.811509 141.62926 109.09799 439.204094v550.666833H0.703033V380.660592L497.811509 0l497.108476 380.660592v97.977281z" fill="#ffffff" p-id="24592"></path><path d="M769.118462 740.038447h232.000999v-102.259393H774.678817l54.133566-54.133567-72.284609-72.34852L575.912121 691.91262l72.284608 72.348521 0.255649-0.255649 108.458869 108.394957 72.348521-72.220696-60.077394-60.141306zM192.439396 512.703033h191.736362v191.736363H192.439396zM194.484584 794.619398h191.736362v191.736363h-191.736362zM446.426164 794.875047h191.736363v191.736362h-191.736363z" fill="#ffffff" p-id="24593"></path></svg>
|
||||
|
After Width: | Height: | Size: 784 B |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742540230283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30256" width="200" height="200"><path d="M907.647015 65.802682l-172.019819 0c-18.984377 0-34.403554 15.45397-34.403554 34.403554l0 825.697585c0 18.949584 15.419178 34.403554 34.403554 34.403554l172.019819 0c18.949584 0 34.403554-15.45397 34.403554-34.403554l0-825.697585C942.05057 81.257675 926.5966 65.802682 907.647015 65.802682zM873.242438 891.500267 770.030751 891.500267l0-756.889453 103.211686 0L873.242438 891.500267z" fill="#ffffff" p-id="30257"></path><path d="M598.009909 272.227078l-172.019819 0c-18.984377 0-34.403554 15.45397-34.403554 34.403554l0 619.273189c0 18.949584 15.419178 34.403554 34.403554 34.403554l172.019819 0c18.949584 0 34.404578-15.45397 34.404578-34.403554l0-619.273189C632.414487 287.682072 616.959493 272.227078 598.009909 272.227078z" fill="#ffffff" p-id="30258"></path><path d="M288.373827 478.651474 116.352985 478.651474c-18.984377 0-34.403554 15.45397-34.403554 34.403554l0 412.848793c0 18.949584 15.419178 34.403554 34.403554 34.403554l172.020842 0c18.949584 0 34.403554-15.45397 34.403554-34.403554l0-412.848793C322.777381 494.106468 307.323411 478.651474 288.373827 478.651474z" fill="#ffffff" p-id="30259"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742540367711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31467" width="200" height="200"><path d="M512 693.76c301.44 0 464-80.64 464-113.28v-134.4c-107.52 58.24-289.92 85.76-464 85.76S155.52 504.32 48 446.08v134.4c0 32.64 162.56 113.28 464 113.28zM48 704v128c0 138.88 291.84 176 464 176s464-37.12 464-176v-128c-107.52 58.24-289.92 85.76-464 85.76S155.52 762.24 48 704zM512 435.84c301.44 0 464-80.64 464-113.28V192C976 53.12 684.16 16 512 16S48 53.12 48 192v130.56c0 32.64 162.56 113.28 464 113.28z" p-id="31468" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 598 B |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539701402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26008" width="200" height="200"><path d="M915.667 959.062H108.333V365.29L512 64.938 915.667 365.29v584.627H835.33V405.651L512 165.074 188.67 405.651v473.074h726.997z" p-id="26009" fill="#ffffff"></path><path d="M689.289 852.614c-21.68 0-47.693-8.67-60.699-26.013L498.52 696.535h-4.336c-17.342 4.333-34.686 8.67-52.025 8.67-13.01 0-26.016 0-39.022-4.336-34.686-8.67-65.035-26.013-91.048-52.026-43.355-43.359-65.035-108.39-52.028-173.424 4.336-17.343 17.342-30.349 30.349-34.686h13.009c13.006 0 21.676 4.336 30.349 13.006l43.355 43.355c4.333 8.673 13.006 13.01 21.676 13.01 8.673 0 17.342-4.337 21.679-8.674 13.007-13.006 13.007-34.686 0-47.692l-47.692-43.355c-8.67-13.007-13.007-30.349-8.67-47.692 4.333-17.343 17.339-26.013 34.682-30.349 13.009-4.336 26.015-4.336 39.022-4.336 52.025 0 99.717 21.679 134.402 56.365 26.013 26.013 43.356 56.362 52.029 91.048 8.67 30.348 4.336 65.034-4.336 91.047v4.336l130.069 130.067C767.33 718.21 776 739.89 776 761.567c0 21.679-8.67 47.692-26.013 60.698-17.342 21.679-39.022 30.349-60.698 30.349zM498.521 640.169c13.007 0 26.013 4.336 30.349 13.007l134.403 134.406c4.336 4.333 13.006 8.67 21.679 8.67 8.67 0 17.343-4.337 21.676-8.67 4.336-4.336 8.673-13.006 8.673-21.679 0-8.67-4.336-17.343-8.673-21.68L576.562 609.82c-13.006-13.006-17.342-30.348-13.006-47.692 8.67-21.676 8.67-47.692 4.333-73.705-4.333-26.013-17.339-47.692-34.682-65.035-26.015-26.013-56.365-39.019-86.714-39.019H429.15l34.686 34.682c17.343 17.343 26.013 39.022 26.013 60.702 0 21.676-8.67 47.688-26.013 60.698-17.342 17.343-43.355 26.013-65.034 26.013-21.676 0-47.693-8.669-60.699-26.013l-34.682-34.686v17.343c0 34.686 17.339 65.035 39.019 86.711 17.342 17.343 43.355 30.349 65.035 39.022 8.67 0 17.342 4.334 30.349 4.334 13.006 0 30.348-4.334 43.355-8.67 4.336-4.336 8.669-4.336 17.342-4.336z m0 0" p-id="26010" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539074118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11357" width="200" height="200"><path d="M128.365987 896.000012h-18.119998c-15.685998 0-29.059997-12.038999-31.582997-28.430997L0.422 359.333065c-2.844-18.468998 8.991999-35.879996 26.434997-38.891996 1.7-0.293 3.422-0.44 5.148-0.44h12.631999l132.838987-217.129979c5.772999-9.402999 14.179999-15.068999 23.166997-15.616999 8.986999-0.6 17.736998 4.027 24.074998 12.729999l70.742993 96.345991L401.139961 16.364098c5.699999-9.667999 14.144999-15.579998 23.231998-16.261998 9.105999-0.863 18.029998 3.777 24.396997 12.689999L674.331934 320.000069h18.395998c17.672998 0 31.999997 15.169999 31.999997 33.881996 0 1.826-0.14 3.65-0.417 5.451L710.660931 448.000056h151.089985A63.999994 63.999994 0 0 1 914.999911 476.496053l98.24899 147.351986A63.999994 63.999994 0 0 1 1023.9999 659.352036V864.000016c0 17.672998-14.326999 31.999997-31.999997 31.999996h-95.633991c0 70.691993-57.306994 127.999988-127.999987 127.999988-70.691993 0-127.999988-57.307994-127.999988-127.999988h-255.999975c0 70.691993-57.306994 127.999988-127.999987 127.999988-70.691993 0-127.999988-57.307994-127.999988-127.999988z m639.999938-384.015962v191.999981l191.999981 0.016v-44.647995L862.116916 512.00005l-93.750991-0.016z m-470.359954-14.689999c-15.305999-8.837999-34.876997-3.594-43.712996 11.710999l-95.99999 166.276984c-8.836999 15.305999-3.593 34.875997 11.711998 43.712996 15.305999 8.836999 34.876997 3.593 43.712996-11.712999l95.999991-166.276984c8.836999-15.304999 3.593-34.875997-11.712999-43.711996z m255.999975 0c-15.305999-8.837999-34.876997-3.594-43.712996 11.710999l-95.99999 166.276984c-8.836999 15.305999-3.593 34.875997 11.711998 43.712996 15.305999 8.836999 34.876997 3.593 43.712996-11.712999l95.999991-166.276984c8.836999-15.304999 3.593-34.875997-11.712999-43.711996zM768.364925 960.000006c35.346997 0 63.999994-28.653997 63.999994-63.999994 0-35.345997-28.652997-63.999994-63.999994-63.999993-35.345997 0-63.999994 28.653997-63.999994 63.999993 0 35.345997 28.653997 63.999994 63.999994 63.999994z m-511.99995 0c35.346997 0 63.999994-28.653997 63.999994-63.999994 0-35.345997-28.652997-63.999994-63.999994-63.999993-35.345997 0-63.999994 28.653997-63.999994 63.999993 0 35.345997 28.653997 63.999994 63.999994 63.999994z" fill="#ffffff" p-id="11358"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742539321980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17386" width="200" height="200"><path d="M202 345.4L69 549.8a21.2 21.2 0 0 0-3.4 11.5V802c0 6.7 5.5 12.2 12.2 12.2h22.9c4.5 58.8 53.2 105.3 113.1 105.3 60 0 108.6-46.5 113.1-105.3h67.5V336.7H218c-6.4 0-12.5 3.3-16 8.7z m28.9 97.5h127.4c2 0 3.6 1.6 3.6 3.6v105.9c0 1.9-1.6 3.5-3.5 3.5H156.5c-1.7 0-2.8-1.9-1.8-3.4l69.2-106c1.6-2.2 4.2-3.6 7-3.6zM726 691.5c-63 0-114 51-114 114s51 114 114 114 114-51 114-114-51.1-114-114-114z" fill="#ffffff" p-id="17387"></path><path d="M899.1 131.4H454.3c-33 0-59.8 26.8-59.8 59.8v623h504.6c33 0 59.8-26.8 59.8-59.8V191.2c0-33-26.7-59.8-59.8-59.8z" fill="#ffffff" p-id="17388"></path></svg>
|
||||
|
After Width: | Height: | Size: 738 B |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742540424683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34260" width="200" height="200"><path d="M512 2.327273C230.4 2.327273 2.327273 230.4 2.327273 512S230.4 1021.672727 512 1021.672727c281.6 0 509.672727-228.072727 509.672727-509.672727S793.6 2.327273 512 2.327273z m139.636364 518.981818v46.545454h-100.072728v44.218182H651.636364v46.545455h-100.072728v90.763636h-81.454545v-90.763636h-100.072727v-46.545455h100.072727v-44.218182h-100.072727v-46.545454h74.472727l-116.363636-209.454546h93.090909v2.327273l88.436363 176.872727 88.436364-179.2h93.090909l-116.363636 209.454546H651.636364z" fill="#ffffff" p-id="34261"></path></svg>
|
||||
|
After Width: | Height: | Size: 692 B |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1742541104200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39079" width="200" height="200"><path d="M771.512499 514.290159 511.614214 64.132646 251.715929 514.290159 414.441057 514.290159 414.441057 959.653483 608.786347 959.653483 608.786347 514.290159Z" p-id="39080" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 353 B |
|
|
@ -64,13 +64,14 @@ export const constantRoutes = [
|
|||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'index',
|
||||
redirect: 'home/equipment-supply',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/index'),
|
||||
path: 'home/equipment-supply',
|
||||
component: () => import('@/views/home/equipment-supply/index.vue'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true },
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/views/dashboard/mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow' // 阴影指示器
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['需求', '供应'],
|
||||
icon: 'path://M 0,0 h 16 a 6,6 0 0 1 6,6 v 8 a 6,6 0 0 1 -6,6 h -16 a 6,6 0 0 1 -6,-6 v -8 a 6,6 0 0 1 6,-6 z',
|
||||
bottom: 10, // 图例放在 x 轴下方
|
||||
itemWidth: 20, // 图例项宽度
|
||||
itemHeight: 13, // 图例项高度
|
||||
itemGap: 10, // 图例项之间的间距
|
||||
padding: [5, 10], // 图例内边距
|
||||
textStyle: {
|
||||
color: '#333', // 图例文字颜色
|
||||
lineHeight: 13
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '12%', // 底部留出空间给图例
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: -15, // x 轴标签倾斜 45°
|
||||
margin: 30, // 标签与轴线的距离
|
||||
color: '#333'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#a8a7a7' // x 轴轴线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#a8a7a7' // x 轴轴线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '需求',
|
||||
type: 'bar',
|
||||
barWidth: '20%', // 柱子宽度
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration: 2000,
|
||||
itemStyle: {
|
||||
color: '#26a8ff' // 自定义颜色
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '供应',
|
||||
type: 'bar',
|
||||
barWidth: '20%', // 柱子宽度
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration: 2000,
|
||||
itemStyle: {
|
||||
color: '#ff8e9d' // 自定义颜色
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/views/dashboard/mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
boundaryGap: false, // 折线与 y 轴不留间隙
|
||||
axisTick: {
|
||||
show: true // 隐藏刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: -15, // x 轴标签倾斜 45°
|
||||
margin: 30, // 标签与轴线的距离
|
||||
padding: [0, 20, 0, 0],
|
||||
color: '#333'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#a8a7a7' // x 轴轴线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false // 隐藏刻度线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#a8a7a7' // x 轴轴线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 50,
|
||||
bottom: 50, // 底部留出空间给图例
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross' // 十字准星指示器
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
legend: {
|
||||
data: ['需求量', '待供应量'],
|
||||
icon: 'path://M 0,0 h 16 a 6,6 0 0 1 6,6 v 8 a 6,6 0 0 1 -6,6 h -16 a 6,6 0 0 1 -6,-6 v -8 a 6,6 0 0 1 6,-6 z',
|
||||
bottom: 10, // 图例放在 x 轴下方
|
||||
itemWidth: 20, // 图例项宽度
|
||||
itemHeight: 13, // 图例项高度
|
||||
itemGap: 10, // 图例项之间的间距
|
||||
padding: [5, 10], // 图例内边距
|
||||
textStyle: {
|
||||
color: '#333', // 图例文字颜色
|
||||
lineHeight: 13
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '需求量',
|
||||
type: 'line',
|
||||
smooth: false, // 平滑曲线
|
||||
data: [12, 66, 88, 90, 70, 110, 20], // 数据
|
||||
itemStyle: {
|
||||
color: '#33aeff' // 折线颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#33aeff', // 折线颜色
|
||||
width: 1 // 折线宽度
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(56, 136, 250, 0.3)' // 区域背景颜色
|
||||
},
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut',
|
||||
symbol: 'none', // 隐藏数据点圆点
|
||||
showSymbol: false // 确保不显示数据点
|
||||
},
|
||||
{
|
||||
name: '待供应量',
|
||||
type: 'line',
|
||||
smooth: false, // 平滑曲线
|
||||
data: [12, 20, 22, 30, 99, 60, 3], // 数据
|
||||
itemStyle: {
|
||||
color: '#ff8e9d' // 折线颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#ff8e9d', // 折线颜色
|
||||
width: 1 // 折线宽度
|
||||
},
|
||||
areaStyle: {
|
||||
color: ' rgba(255, 0, 90, 0.3)' // 区域背景颜色
|
||||
},
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut',
|
||||
symbol: 'none', // 隐藏数据点圆点
|
||||
showSymbol: false // 确保不显示数据点
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/views/dashboard/mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
icon: 'circle',
|
||||
data: ['待供应量', '计划需求量', '已供应量']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
// roseType: 'radius', // radius 为玫瑰饼图
|
||||
radius: [0, 95],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 320, name: '待供应量', itemStyle: { color: '#6ccaf6' } },
|
||||
{ value: 240, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
|
||||
{ value: 149, name: '已供应量', itemStyle: { color: '#ff8e9d' } }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600,
|
||||
itemStyle: {
|
||||
borderWidth: 1, // 分割线宽度
|
||||
borderColor: '#fff' // 分割线颜色（白色）
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}: {d}%', // 显示 name 和比率
|
||||
fontSize: 12, // 字体大小
|
||||
color: '#333' // 字体颜色
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/views/dashboard/mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
icon: 'circle',
|
||||
data: ['在库量', '在用量', '在修量', '新购待入库量', '修试待入库量']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
// roseType: 'radius', // radius 为玫瑰饼图
|
||||
radius: [60, 95],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 320, name: '在库量', itemStyle: { color: '#26a8ff' } },
|
||||
{ value: 240, name: '在用量', itemStyle: { color: '#45d8d9' } },
|
||||
{ value: 120, name: '在修量', itemStyle: { color: '#ff8e9d' } },
|
||||
{ value: 80, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
|
||||
{ value: 90, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600,
|
||||
itemStyle: {
|
||||
borderWidth: 1, // 分割线宽度
|
||||
borderColor: '#fff' // 分割线颜色（白色）
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}: {d}%', // 显示 name 和比率
|
||||
fontSize: 12, // 字体大小
|
||||
color: '#333' // 字体颜色
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="card-model-space">
|
||||
<div :style="{ backgroundColor: theme }" class="left-icon">
|
||||
<svg-icon :icon-class="iconType" class="icon-box" />
|
||||
</div>
|
||||
<div class="right-text">
|
||||
<div>200</div>
|
||||
<div>{{ cardTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: '#ffa94c'
|
||||
},
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
iconType: {
|
||||
type: String,
|
||||
default: 'project_num'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-model-space {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
height: 85%;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
.left-icon {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon-box {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-left: 6px;
|
||||
|
||||
& div:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
& div:last-child {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
color: #525252;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="card-model" :style="{ backgroundColor: theme }">
|
||||
<div class="f-14">
|
||||
<svg-icon :icon-class="iconType" class="icon-box" />
|
||||
{{ cardTitle }}
|
||||
</div>
|
||||
<div class="f-count">2000.00</div>
|
||||
<div class="f-14">
|
||||
较上月降低15.95
|
||||
|
||||
<svg-icon v-if="isReduce" icon-class="down_arrow" />
|
||||
<svg-icon v-else icon-class="up_arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 主题背景色
|
||||
theme: {
|
||||
type: String,
|
||||
default: '#ffa94c'
|
||||
},
|
||||
// 标题
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
// 图标类型
|
||||
iconType: {
|
||||
type: String,
|
||||
default: 'demand_count'
|
||||
},
|
||||
// 是否降低
|
||||
isReduce: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-model {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 初始阴影 */
|
||||
transition: transform 0.3s ease; /* 添加过渡效果 */
|
||||
|
||||
& div {
|
||||
width: 100%;
|
||||
// padding-left: 40px;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
|
||||
.f-14 {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
.icon-box {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
}
|
||||
|
||||
.f-count {
|
||||
margin: 4px 0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-model:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标移入时更明显的阴影 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="chart-model-box">
|
||||
<div class="chart-title">{{ chartTitle }}</div>
|
||||
<div class="chart-content">
|
||||
<!-- <PieChart /> -->
|
||||
|
||||
<component :is="ChartTypeName" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PieChart1 from './PieChart_1.vue' // 饼图 1
|
||||
import PieChart2 from './PieChart_2.vue' // 饼图 2
|
||||
import BarChart from './BarChart.vue' // 柱状图
|
||||
import LineChart from './LineChart.vue' // 折线图
|
||||
export default {
|
||||
components: {
|
||||
BarChart,
|
||||
LineChart,
|
||||
PieChart1,
|
||||
PieChart2
|
||||
},
|
||||
props: {
|
||||
chartTitle: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
ChartTypeName: {
|
||||
type: String,
|
||||
default: 'PieChart'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-model-box {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #c0bfbf;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.chart-title {
|
||||
padding: 12px 0 12px 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
background-color: #f9f9f9;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 机具供应展示 -->
|
||||
<el-form size="small" :model="queryParams">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="queryDate"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-M"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select placeholder="选择公司" style="width: 95%">
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select placeholder="选择工程" style="width: 95%">
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<div class="card-box">
|
||||
<div class="title">需求供应</div>
|
||||
<div class="card-box-content-1">
|
||||
<div v-for="(card, index) in cardList_1" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-box-space-last">
|
||||
<CardModelSpace
|
||||
:key="index"
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
v-for="(card, index) in cardList_3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
<div class="title">仓储状态</div>
|
||||
<div class="card-box-content">
|
||||
<div v-for="(card, index) in cardList_2" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
|
||||
<div class="chart-box">
|
||||
<div :key="index" v-for="(chart, index) in chartList">
|
||||
<ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardModel from './components/card-model'
|
||||
import CardModelSpace from './components/card-model-space'
|
||||
import ChartModelBox from './components/chart-model-box'
|
||||
export default {
|
||||
components: {
|
||||
CardModel,
|
||||
CardModelSpace,
|
||||
ChartModelBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单查询条件
|
||||
queryParams: {},
|
||||
// 日期查询条件
|
||||
queryDate: [],
|
||||
cardList_1: [
|
||||
{
|
||||
title: '需求量',
|
||||
theme: '#ffa94c',
|
||||
icon: 'demand_count',
|
||||
isReduce: false
|
||||
},
|
||||
{
|
||||
title: '已供应量',
|
||||
theme: '#027db4',
|
||||
icon: 'supply_ready',
|
||||
isReduce: false
|
||||
},
|
||||
{
|
||||
title: '待供应量',
|
||||
theme: '#fb6260',
|
||||
icon: 'supply_to_be',
|
||||
isReduce: true
|
||||
}
|
||||
],
|
||||
cardList_2: [
|
||||
{
|
||||
title: '在库量',
|
||||
theme: '#5ad55a',
|
||||
icon: 'In_the_library',
|
||||
isReduce: false
|
||||
},
|
||||
{
|
||||
title: '在用量',
|
||||
theme: '#0099ff',
|
||||
icon: 'In_use',
|
||||
isReduce: true
|
||||
},
|
||||
{
|
||||
title: '在修量',
|
||||
theme: '#8167f5',
|
||||
icon: 'In_repair',
|
||||
isReduce: false
|
||||
},
|
||||
{
|
||||
title: '新购待入库量',
|
||||
theme: '#bfbf00',
|
||||
icon: 'penning_store',
|
||||
isReduce: true
|
||||
},
|
||||
{
|
||||
title: '修试待入库量',
|
||||
theme: '#b8741a',
|
||||
icon: 'repair_store',
|
||||
isReduce: true
|
||||
}
|
||||
],
|
||||
cardList_3: [
|
||||
{
|
||||
title: '工程总数量(个)',
|
||||
theme: '#ffa94c',
|
||||
icon: 'project_num'
|
||||
},
|
||||
{
|
||||
title: '供应总件数(件)',
|
||||
theme: '#52c1f5',
|
||||
icon: 'quantity_num'
|
||||
},
|
||||
{
|
||||
title: '供应总价值(万元)',
|
||||
theme: '#73a0fa',
|
||||
icon: 'total_price'
|
||||
}
|
||||
],
|
||||
|
||||
// 图表区数据
|
||||
chartList: [
|
||||
{
|
||||
title: '需求供应情况统计',
|
||||
type: 'PieChart1'
|
||||
},
|
||||
{
|
||||
title: '机具状态统计',
|
||||
type: 'PieChart2'
|
||||
},
|
||||
{
|
||||
title: '机具需求占比',
|
||||
type: 'BarChart'
|
||||
},
|
||||
{
|
||||
title: '待供应占比统计',
|
||||
type: 'LineChart'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
onHandleSearch() {},
|
||||
// 重置
|
||||
onHandleReset() {
|
||||
this.queryDate = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 卡片区样式
|
||||
.card-box {
|
||||
display: flex;
|
||||
.title {
|
||||
padding: 16px 0;
|
||||
margin-right: 14px;
|
||||
writing-mode: vertical-rl;
|
||||
letter-spacing: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-box-content-1 {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-right: -12px;
|
||||
|
||||
.card-box-space-last {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
.card-box-content {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 图表区样式
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
1054
src/views/login1.vue
1054
src/views/login1.vue
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue