首页修改

master
suixy 5 days ago
parent 5da3ed1078
commit ae605f350c

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="102px" height="70px" viewBox="0 0 102 70" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="gradient_1">
<stop offset="0" stop-color="#0A5655" />
<stop offset="1" stop-color="#0A575C" />
</linearGradient>
<linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="gradient_2">
<stop offset="0" stop-color="#08D859" />
<stop offset="1" stop-color="#0BE399" />
</linearGradient>
<linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="gradient_3">
<stop offset="0" stop-color="#0AA992" />
<stop offset="1" stop-color="#0BE18B" />
</linearGradient>
<linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="gradient_4">
<stop offset="0" stop-color="#0AAD92" />
<stop offset="1" stop-color="#0ADB8B" />
</linearGradient>
<path d="M50.692 65.5396C78.6884 65.5396 101.384 50.8681 101.384 32.7698C101.384 14.6715 78.6884 0 50.692 0C22.6956 0 0 14.6715 0 32.7698C0 50.8681 22.6956 65.5396 50.692 65.5396Z" transform="translate(0 3.6410906)" id="path_1" />
<path d="M38.019 43.6931C59.0163 43.6931 76.038 33.9121 76.038 21.8465C76.038 9.78103 59.0163 0 38.019 0C17.0217 0 0 9.78103 0 21.8465C0 33.9121 17.0217 43.6931 38.019 43.6931Z" transform="translate(12.672994 12.743817)" id="path_2" />
<path d="M38.019 43.6931C59.0163 43.6931 76.038 33.9121 76.038 21.8465C76.038 9.78103 59.0163 0 38.019 0C17.0217 0 0 9.78103 0 21.8465C0 33.9121 17.0217 43.6931 38.019 43.6931Z" transform="translate(12.672994 0)" id="path_3" />
<clipPath id="clip_1">
<use xlink:href="#path_1" />
</clipPath>
<clipPath id="clip_2">
<use xlink:href="#path_2" />
</clipPath>
<clipPath id="clip_3">
<use xlink:href="#path_3" />
</clipPath>
</defs>
<g id="编组-40">
<g id="编组-27">
<g id="编组-2" transform="matrix(1 0 0 1 0 1.8189894E-12)">
<g id="椭圆形">
<g clip-path="url(#clip_1)">
<use xlink:href="#path_1" fill="none" stroke="url(#gradient_1)" stroke-width="5.0526314" />
</g>
</g>
<g id="椭圆形">
<g clip-path="url(#clip_2)">
<use xlink:href="#path_2" fill="none" stroke="url(#gradient_2)" stroke-opacity="0.5" stroke-width="10.105263" />
</g>
</g>
<g id="椭圆形">
<g clip-path="url(#clip_3)">
<use xlink:href="#path_3" fill="none" stroke="url(#gradient_3)" stroke-width="10.105263" />
</g>
</g>
</g>
</g>
<path d="M19.7568 10.2277C19.7349 10.2502 19.713 10.2954 19.6692 10.318L5.70278 23.6839C5.61522 23.7516 5.52765 23.8194 5.4182 23.8645C5.1774 23.9548 4.95849 24 4.73958 24C4.38932 24 4.10474 23.8871 3.90772 23.6613C3.57935 23.3452 3.62314 22.9389 3.64503 22.826C3.64503 22.7808 3.66692 22.7357 3.68881 22.6905L6.75355 14.6754L1.17134 14.6754C0.514615 14.6754 0.230032 14.3594 0.120577 14.1787C-0.0983331 13.8175 0.0111219 13.4337 0.208141 13.1853C0.230032 13.1627 0.230032 13.1402 0.251923 13.1176L12.1606 0.361242C12.2263 0.293509 12.292 0.248354 12.3795 0.203198C12.4671 0.158043 12.8174 0 13.1895 0C13.5398 0 13.8243 0.112888 14.0433 0.338664C14.2841 0.587018 14.3935 0.94826 14.3497 1.39981L14.3497 1.46754L12.7517 8.62465L18.9468 8.6698L19.0125 8.6698C19.6036 8.71496 19.8444 9.05362 19.9319 9.18909C20.1289 9.64064 19.8444 10.0922 19.7568 10.2277L19.7568 10.2277Z" transform="translate(41 11)" id="路径备份-3" fill="url(#gradient_4)" stroke="none" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="326px" height="231px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -40 -134 )">
<path d="M 41 139 A 4 4 0 0 1 45 135 L 361 135 A 4 4 0 0 1 365 139 L 365 360 A 4 4 0 0 1 361 364 L 45 364 A 4 4 0 0 1 41 360 L 41 139 Z " fill-rule="nonzero" fill="#003366" stroke="none" fill-opacity="0.450980392156863" />
<path d="M 40.5 139 A 4.5 4.5 0 0 1 45 134.5 L 361 134.5 A 4.5 4.5 0 0 1 365.5 139 L 365.5 360 A 4.5 4.5 0 0 1 361 364.5 L 45 364.5 A 4.5 4.5 0 0 1 40.5 360 L 40.5 139 Z " stroke-width="1" stroke="#80ffff" fill="none" stroke-opacity="0.615686274509804" />
</g>
</svg>

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="208px" height="208px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -36 -512 )">
<path d="M 208 104 C 208 161.163636363636 161.454545454545 207.490909090909 104 207.490909090909 C 46.5454545454545 207.490909090909 0 161.163636363636 0 104 C 0 46.8363636363636 46.5454545454545 0.509090909090901 104 0.509090909090901 C 161.454545454545 0.509090909090901 208 46.8363636363636 208 104 Z M 203.563636363636 103.927272727273 C 203.563636363636 48.9454545454546 158.836363636364 4.36363636363636 103.636363636364 4.36363636363636 C 48.4363636363637 4.36363636363636 3.70909090909093 48.9454545454546 3.70909090909093 103.927272727273 C 3.70909090909093 158.909090909091 48.4363636363637 203.490909090909 103.636363636364 203.490909090909 C 158.836363636364 203.490909090909 203.563636363636 158.909090909091 203.563636363636 103.927272727273 Z " fill-rule="nonzero" fill="#1acdfd" stroke="none" fill-opacity="0.498039215686275" transform="matrix(1 0 0 1 36 512 )" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="195px" height="193px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -43 -518 )">
<path d="M 118.964552238806 0 C 155.636194029851 7.9812030075188 184.886194029851 35.5526315789474 195 71.1052631578947 L 190.561567164179 71.1052631578947 C 180.738805970149 37.7293233082707 153.307835820895 11.8266917293233 118.964552238806 3.91804511278196 L 118.964552238806 0 Z M 61.919776119403 193 C 32.3787313432836 182.189097744361 9.24067164179104 158.027819548872 0 127.916917293233 L 3.8563432835821 127.916917293233 C 12.8787313432836 155.996240601504 34.4160447761194 178.488721804511 61.919776119403 188.936842105263 L 61.919776119403 193 Z " fill-rule="nonzero" fill="#1acdfd" stroke="none" transform="matrix(1 0 0 1 43 518 )" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 892 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 108 KiB

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="166px" height="166px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -57 -533 )">
<path d="M 165.708771929825 83.0728070175438 C 165.708771929825 128.795614035088 128.65 165.927192982456 83 165.927192982456 C 37.35 165.927192982456 0.291228070175422 128.795614035088 0.291228070175422 83.0728070175438 C 0.291228070175422 37.2771929824561 37.35 0.218421052631556 83 0.218421052631556 C 128.65 0.218421052631556 165.708771929825 37.35 165.708771929825 83.0728070175438 Z M 159.301754385965 83 C 159.301754385965 41.3543859649123 124.5 6.47982456140351 83 6.47982456140351 C 41.4271929824561 6.47982456140351 6.69824561403508 41.3543859649123 6.69824561403508 83 C 6.69824561403508 124.645614035088 41.5 159.520175438597 83 159.520175438597 C 124.572807017544 159.520175438597 159.301754385965 124.645614035088 159.301754385965 83 Z " fill-rule="nonzero" fill="#1acdfd" stroke="none" transform="matrix(1 0 0 1 57 533 )" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="145px" height="145px" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="158.597512890507" cy="563.230512587201" r="143.55" gradientTransform="matrix(0 1 -0.999999999999999 0 721.828025477706 404.632999696694 )" gradientUnits="userSpaceOnUse" id="RadialGradient2">
<stop id="Stop3" stop-color="#1acdfd" stop-opacity="0.631372549019608" offset="0" />
<stop id="Stop4" stop-color="#1acdfd" stop-opacity="0" offset="1" />
</radialGradient>
</defs>
<g transform="matrix(1 0 0 1 -68 -543 )">
<path d="M 140.5 543.5 C 180.82 543.5 212.5 575.18 212.5 615.5 C 212.5 655.82 180.82 687.5 140.5 687.5 C 100.18 687.5 68.5 655.82 68.5 615.5 C 68.5 575.18 100.18 543.5 140.5 543.5 Z " fill-rule="nonzero" fill="url(#RadialGradient2)" stroke="none" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 914 B

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="130px" height="130px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -76 -550 )">
<image preserveAspectRatio="none" style="overflow:visible" width="130" height="130" xlink:href="data:image/png;base64,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" x="76px" y="550px" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

@ -236,38 +236,31 @@
</div>
<MyCard
class="card"
style="width: 9%;top: 40.6%;left: 35%;"
title="粉料区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
/>
<MyCard
class="card"
style="width: 9%;top: 40.6%;left: 12%;"
title="碳黑区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
/>
<MyCard
class="card"
style="width: 9%;top: 48.6%;left: 1%;"
style="top: 55.5%;left: 1%;"
title="胶料区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
:size="8"
:data="jlData"
/>
<MyCard
class="card"
style="top: 40.6%;left: 12%;"
title="碳黑区"
:size="8"
:data="th1Data"
/>
<MyCard
class="card"
style="top: 40.6%;left: 35%;"
title="碳黑区"
:size="8"
:data="th2Data"
/>
<MyCard
class="card"
:size="8"
style="width: 24%;top: 2%;lef;left: 75%;"
title="配方:---"
:data="{
设定: '---',
完成: '---',
状态: '---',
功率: '---',
压力: '---',
时间: '---',
电流: '---',
温度: '---',
转速: '---'
}"
:title="`配方:${pfName}`"
:data="pfData"
/>
</div>
</template>
@ -340,162 +333,282 @@ const gdData = ref({
});
const ssdData = ref(1);
const mljData = ref(1);
const jlData = ref({
物料名称: '---',
标准重量: '---',
实际重量: '---'
})
const th1Data = ref({
物料名称: '---',
标准重量: '---',
实际重量: '---'
})
const th2Data = ref({
物料名称: '---',
标准重量: '---',
实际重量: '---'
})
const pfName = ref('--')
const pfData = ref({
状态: '---',
时间: '---',
功率: '---',
压力: '---',
电流: '---',
温度: '---',
转速: '---'
})
const steps = [
//
{
type: 3,
data: 2,
time: 0
},
{
type: 3,
data: 1,
time: 1000 * 9
},
{
type: 3,
data: 2,
time: 1000 * 10
},
{
type: 3,
data: 1,
time: 1000 * 19
},
{
type: 3,
data: 2,
time: 1000 * 20
},
{
type: 3,
data: 1,
time: 1000 * 30
},
{
type: 6,
area: 'jl',
data: {
物料名称: 'M1SL80',
标准重量: '243.600',
实际重量: '243.600'
},
time: 1000 * 9
},
{
type: 6,
area: 'jl',
data: {
物料名称: '自动M1KB110(A)-ML2',
标准重量: '15.960',
实际重量: '16.100'
},
time: 1000 * 19
},
{
type: 6,
area: 'jl',
data: {
物料名称: '自动M1KB110(B)-ML2',
标准重量: '8.400',
实际重量: '8.500'
},
time: 1000 * 30
},
//
// 1
{
type: 1,
no: '1050000000002',
data: 1,
value: 20,
time: 0,
time2: 1000 * 10
time: 1000 * 30,
time2: 1000 * 40
},
// 1
{
type: 2,
no: 5,
data: 2,
time: 0
time: 1000 * 30
},
{
type: 2,
no: 5,
data: 1,
time: 1000 * 40
},
// 1
{
type: 2,
no: 14,
data: 2,
time: 0
time: 1000 * 43
},
{
type: 2,
no: 14,
data: 1,
time: 1000 * 46
},
{
type: 6,
area: 'th1',
data: {
物料名称: 'N36',
标准重量: '33.600',
实际重量: '33.300'
},
time: 1000 * 40
},
// 1
{
type: 2,
no: 15,
data: 2,
time: 0
time: 1000 * 46
},
{
type: 2,
no: 18,
data: 2,
time: 0
time: 1000 * 46
},
{
type: 2,
no: 22,
data: 2,
time: 0
},
{
type: 2,
no: 5,
data: 1,
time: 1000 * 10
},
{
type: 2,
no: 14,
data: 1,
time: 1000 * 10
time: 1000 * 46
},
{
type: 2,
no: 15,
data: 1,
time: 1000 * 10
time: 1000 * 50
},
{
type: 2,
no: 18,
data: 1,
time: 1000 * 10
time: 1000 * 50
},
{
type: 2,
no: 22,
data: 1,
time: 1000 * 50
},
//
// 7
{
type: 1,
no: '1050000000008',
data: 1,
value: 20,
time: 1000 * 10,
time2: 1000 * 20
time: 1000 * 50,
time2: 1000 * 60
},
// 7
{
type: 2,
no: 11,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 16,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 17,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 23,
data: 2,
time: 1000 * 10
time: 1000 * 50
},
{
type: 2,
no: 11,
data: 1,
time: 1000 * 20
time: 1000 * 60
},
// 2
{
type: 2,
no: 16,
data: 2,
time: 1000 * 63
},
{
type: 2,
no: 16,
data: 1,
time: 1000 * 20
time: 1000 * 66
},
{
type: 6,
area: 'th2',
data: {
物料名称: 'N17',
标准重量: '31.500',
实际重量: '31.300'
},
time: 1000 * 60
},
// 2
{
type: 2,
no: 17,
data: 2,
time: 1000 * 66
},
{
type: 2,
no: 23,
data: 2,
time: 1000 * 66
},
{
type: 2,
no: 22,
data: 2,
time: 1000 * 66
},
{
type: 2,
no: 17,
data: 1,
time: 1000 * 20
time: 1000 * 70
},
{
type: 2,
no: 23,
data: 1,
time: 1000 * 20
time: 1000 * 70
},
{
type: 2,
no: 22,
data: 1,
time: 1000 * 20
},
{
type: 3,
data: 2,
time: 1000 * 10
},
{
type: 3,
data: 1,
time: 1000 * 30
time: 1000 * 70
},
//
{
type: 4,
data: 2,
time: 1000 * 30
time: 1000 * 70
},
{
type: 4,
data: 1,
time: 1000 * 50
time: 1000 * 243
},
// 线
{
type: 5,
data: 2,
time: 1000 * 30,
time2: 1000 * 50
time: 1000 * 70,
time2: 1000 * 243
}
];
let time = 0;
let times = null;
let timesArr = []
let timesArr = [];
let pauseFlag = false;
const chartRef = ref();
let xData = [2.00, 3.00, 4.00, 5.00, 6.00, 7.00, 8.00, 9.00, 10.00, 11.00, 12.00, 13.00, 14.00, 15.00, 16.00, 17.00, 18.00, 19.00, 20.00, 21.00, 22.00, 23.00, 24.00, 25.00, 26.00, 28.00, 29.00, 30.00, 31.00, 32.00, 33.00, 34.00, 35.00, 36.00, 37.00, 38.00, 39.00, 40.00, 41.00, 42.00, 43.00, 44.00, 45.00, 46.00, 47.00, 48.00, 49.00, 50.00, 51.00, 52.00, 53.00, 54.00, 55.00, 56.00, 57.00, 58.00, 60.00, 61.00, 62.00, 63.00, 64.00, 65.00, 66.00, 67.00, 68.00, 69.00, 70.00, 71.00, 72.00, 73.00, 74.00, 75.00, 76.00, 77.00, 78.00, 79.00, 80.00, 81.00, 82.00, 83.00, 84.00, 85.00, 86.00, 87.00, 88.00, 89.00, 91.00, 92.00, 93.00, 94.00, 95.00, 96.00, 97.00, 98.00, 99.00, 100.00, 101.00, 102.00, 103.00, 104.00, 105.00, 106.00, 107.00, 108.00, 109.00, 110.00, 111.00, 112.00, 113.00, 114.00, 115.00, 116.00, 117.00, 118.00, 119.00, 120.00, 122.00, 123.00, 124.00, 125.00, 126.00, 127.00, 128.00, 129.00, 130.00, 131.00, 132.00, 133.00, 134.00, 135.00, 136.00, 137.00, 138.00, 139.00, 140.00, 141.00, 142.00, 143.00, 144.00, 145.00, 146.00, 147.00, 148.00, 149.00, 150.00, 152.00, 153.00, 154.00, 155.00, 156.00, 157.00, 158.00, 159.00, 160.00, 161.00, 162.00, 163.00, 164.00, 165.00, 166.00, 167.00, 168.00, 169.00, 170.00, 171.00, 172.00, 173.00];
@ -608,7 +721,7 @@ const clgRun = (e) => {
times1 = null;
}
}, 16);
timesArr.push(times1)
timesArr.push(times1);
};
const board = (e) => {
let x = [];
@ -639,15 +752,34 @@ const board = (e) => {
{ data: y5 }
]
}, false);
pfName.value = '配方1'
pfData.value = {
状态: '运行中',
时间: xData[index],
温度: y1Data[index],
功率: y2Data[index],
能耗: y3Data[index],
压力: y4Data[index],
转速: y5Data[index]
}
}
index += 1;
}
if (x.length === xData.length) {
pfData.value = {
状态: '完成',
功率: '---',
压力: '---',
时间: '---',
电流: '---',
温度: '---',
转速: '---'
}
clearInterval(times1);
times1 = null;
}
}, time);
timesArr.push(times1)
timesArr.push(times1);
};
const action = (e) => {
if (e.type === 1) {
@ -665,6 +797,17 @@ const action = (e) => {
if (e.type === 5) {
board(e);
}
if (e.type === 6) {
if(e.area === 'jl'){
jlData.value = e.data
}
if(e.area === 'th1'){
th1Data.value = e.data
}
if(e.area === 'th2'){
th2Data.value = e.data
}
}
};
const play = (e) => {
if (e === 1) {
@ -717,7 +860,7 @@ const init = () => {
}
timesArr.forEach(e => {
clearInterval(e);
})
});
time = 0;
times = null;
pauseFlag = false;
@ -879,7 +1022,7 @@ defineExpose({
});
onMounted(async () => {
await nextTick();
init();
// init();
});
</script>
<style scoped>

@ -33,7 +33,7 @@ defineProps({
<style scoped>
.card-container {
min-width: 50xpx;
min-width: 50px;
border-radius: 12px;
overflow: hidden;
background-color: rgba(39, 72, 100, 0.8); /* 半透明背景 */
@ -54,6 +54,7 @@ defineProps({
}
.card-row {
white-space: nowrap;
display: flex;
justify-content: space-between;
padding: 4px 0;

@ -4,7 +4,8 @@
<div class="b">
<div class="yw" :style="`height: ${height}%`"></div>
</div>
<div class="c"></div>
<div class="c">
<div class="name">{{name || 'N123'}}</div></div>
</div>
</template>
<script setup>
@ -12,6 +13,10 @@ defineProps({
height: {
type: [String, Number],
required: true
},
name: {
type:String,
required: true
}
});
</script>
@ -50,5 +55,17 @@ defineProps({
.c {
background-image: url("../images/clg2.png");
.name{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.6vw;
color: #fff;
white-space: nowrap;
padding: 2px;
border-radius: 2px;
background-color: #0004
}
}
</style>

@ -37,6 +37,11 @@ export const constantRoutes: RouteRecordRaw[] = [
hidden: true,
component: () => import('@/views/print/test.vue')
},
{
path: '/board3',
hidden: true,
component: () => import('@/views/board/index3.vue')
},
{
path: '/externalPrint',
hidden: true,
@ -124,11 +129,6 @@ export const constantRoutes: RouteRecordRaw[] = [
name: 'Index',
meta: { title: i18n.global.t('navbar.dashboard'), icon: 'dashboard', affix: true }
},
{
path: '/mes/mixing/productionPlayback',
hidden: true,
component: () => import('@/views/mes/productionPlayback/index.vue')
},
]
},
{

@ -0,0 +1,16 @@
<template>
<div>
<div class="chart1">
<Chart ref="chartRef" />
</div>
</div>
</template>
<script lang="ts" setup>
import Chart from '@/components/chart.vue';
import * as echarts from 'echarts';
</script>
<style scoped lang="less">
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -0,0 +1,388 @@
<template>
<div class="content">
<div class="title">工厂总体看板</div>
<div class="text text1">密炼车间</div>
<div class="text text2">计划数169150 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text3">完成数50669 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text4">半制品车间</div>
<div class="text text5">计划数274263 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text6">完成数221560 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text7">成型车间</div>
<div class="text text8">产量121855 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text9">库存875 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text10">硫化车间</div>
<div class="text text11">产量116431 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="text text12">库存489623 <span style="font-size: 0.8vw;margin-left: 12px;"></span></div>
<div class="icon icon1"></div>
<div class="text text13">工厂概括</div>
<div class="card card1"></div>
<div class="text text14">占地面积</div>
<div class="text text15">956</div>
<div class="card card2"></div>
<div class="text text16">工厂用人</div>
<div class="text text17">3350</div>
<div class="card card3"></div>
<div class="text text18">建厂时间</div>
<div class="text text19">2002.1.3</div>
<div class="card card4"></div>
<div class="text text20">
<div style="height: 33%;width: 100%">
生产半钢轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">956万条</span>
</div>
<div style="height: 33%;width: 100%">
生产全钢轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">266万条</span>
</div>
<div style="height: 33%;width: 100%">
生产特种轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">4.3万条</span>
</div>
</div>
<div class="btn btn1" @click="toDetail"></div>
<div class="btn btn2" @click="toDetail"></div>
<div class="btn btn3" @click="toDetail"></div>
<div class="btn btn4" @click="toDetail"></div>
<div class="back">
<el-button type="primary" @click="back" :icon="ArrowLeft" circle />
</div>
</div>
</template>
<script setup>
import {
ArrowLeft
} from '@element-plus/icons-vue';
const props = defineProps({
changeType: Function
});
const toDetail = () => {
props.changeType(2);
};
const back = () => {
props.changeType(0);
};
</script>
<style lang="less" scoped>
.content {
min-height: calc(100vh - 84px);
position: relative;
width: 100%;
height: 100%;
background-image: url("@/assets/images/index/bg2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title {
position: absolute;
width: 100%;
height: 10.2%;
background-image: url("@/assets/images/index/title2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
color: #40C8FF;
text-align: center;
font-size: 1.6vw;
display: flex;
justify-content: center;
align-items: center;
}
.text {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8vw;
white-space: nowrap;
color: #fff;
}
.icon {
position: absolute;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.text1 {
left: 23.49%;
top: 15.65%;
width: 4.22%;
height: 2.22%;
}
.text2 {
left: 24.27%;
top: 21.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text3 {
left: 24.27%;
top: 26.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text4 {
left: 40.42%;
top: 15.65%;
width: 5.16%;
height: 2.22%;
}
.text5 {
left: 40.99%;
top: 21.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text6 {
left: 40.99%;
top: 26.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text7 {
left: 55.57%;
top: 15.65%;
width: 4.22%;
height: 2.22%;
}
.text8 {
left: 56.93%;
top: 21.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text9 {
left: 56.93%;
top: 26.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text10 {
left: 72.03%;
top: 15.65%;
width: 4.22%;
height: 2.22%;
}
.text11 {
left: 74.90%;
top: 21.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.text12 {
left: 74.90%;
top: 26.11%;
width: 8.80%;
height: 2.96%;
font-size: 1vw;
justify-content: left;
}
.icon1 {
background-image: url("@/assets/images/index/icon17.svg");
left: 2.08%;
top: 12.41%;
width: 16.98%;
height: 21.39%;
}
.text13 {
left: 7.92%;
top: 13.24%;
width: 4.79%;
height: 2.78%;
font-size: 1vw;
}
.card {
position: absolute;
background-color: #077D92;
border-radius: 5px;
}
.card1 {
left: 3.23%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
}
.text14 {
left: 3.23%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
font-size: 0.5vw;
align-items: start;
}
.text15 {
color: #95F204;
font-size: 0.5vw;
align-items: start;
font-weight: 700;
left: 3.23%;
top: 19.4%;
width: 3.91%;
height: 3.80%;
}
.card2 {
left: 8.33%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
}
.text16 {
left: 8.33%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
font-size: 0.5vw;
align-items: start;
}
.text17 {
color: #95F204;
font-size: 0.5vw;
align-items: start;
font-weight: 700;
left: 8.33%;
top: 19.4%;
width: 3.91%;
height: 3.80%;
}
.card3 {
left: 14.06%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
}
.text18 {
left: 14.06%;
top: 17.50%;
width: 3.91%;
height: 3.80%;
font-size: 0.5vw;
align-items: start;
}
.text19 {
color: #95F204;
font-size: 0.5vw;
align-items: start;
font-weight: 700;
left: 14.06%;
top: 19.4%;
width: 3.91%;
height: 3.80%;
}
.card4 {
left: 3.44%;
top: 22.41%;
width: 14.53%;
height: 10.46%;
}
.text20 {
left: 3.44%;
top: 22.41%;
width: 14.53%;
height: 10.46%;
display: inline-block;
text-align: center;
}
.btn {
position: absolute;
background-color: #077D9299;
border-radius: 5px;
font-size: 0.6vw;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn1 {
left: 33.07%;
top: 15.28%;
width: 4.17%;
height: 2.59%;
}
.btn2 {
left: 48.44%;
top: 15.28%;
width: 4.17%;
height: 2.59%;
}
.btn3 {
left: 64.84%;
top: 15.28%;
width: 4.17%;
height: 2.59%;
}
.btn4 {
left: 85.42%;
top: 15.28%;
width: 4.17%;
height: 2.59%;
}
.back{
position: absolute;
top: 1%;
left: 1%;
}
</style>

@ -0,0 +1,40 @@
<template>
<div class="content">
<div class="back">
<el-button type="primary" @click="back" :icon="ArrowLeft" circle />
</div>
</div>
</template>
<script setup>
import {
ArrowLeft
} from '@element-plus/icons-vue';
const props = defineProps({
changeType: Function
});
const back = () => {
props.changeType(1);
};
</script>
<style lang="less" scoped>
.content {
min-height: calc(100vh - 84px);
position: relative;
width: 100%;
height: 100%;
background-image: url("@/assets/images/index/bg3.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.back {
position: absolute;
top: 1%;
left: 1%;
}
</style>

@ -1,349 +1,20 @@
<template>
<div class="dashboard">
<!-- Top Cards -->
<div class="card-row">
<StatCard title="订单" :items="[
{ label: '销售总量', value: 1000 },
{ label: '未出库量', value: 100, color: 'red' },
{ label: '已出库量', value: 100, color: 'green' }
]" />
<StatCard title="工单" :items="[
{ label: '工单总数', value: 10 },
{ label: '未投产', value: 10, color: 'red' },
{ label: '已投产', value: 10, color: 'blue' },
{ label: '已完工', value: 10, color: 'green' }
]" />
<StatCard title="任务" :items="[
{ label: '任务总数', value: 10 },
{ label: '未开工', value: 10, color: 'red' },
{ label: '执行中', value: 10, color: 'blue' },
{ label: '已完工', value: 10, color: 'green' }
]" />
<StatCard title="产量" :items="[
{ label: '产量总量', value: 10 },
{ label: '完成率', value: '10%' },
{ label: '良品率', value: '90%', color: 'green' }
]" />
</div>
<!-- Middle -->
<div class="middle-row">
<div class="panel">
<div class="head">
<div>实时报工</div>
</div>
<el-timeline style="max-width: 600px">
<el-timeline-item :timestamp="item.time" placement="top" v-for="item in timeline ">
<div class="content">
<div style="color: #9EBDFE;font-size: 0.8vw;margin-bottom: 0.4vw;">{{ item.user }} {{ item.action }}</div>
<div>工单号{{ item.order }}</div>
<div>物料{{ item.material }}</div>
<div>良品 {{ item.good }} / 不良 {{ item.bad }}</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="panel">
<div class="head">
<div>生产预警</div>
</div>
<div class="th">
<div class="td">工单计划截止日</div>
<div class="td" style="text-align: right">计划数</div>
</div>
<div v-for="(d,i) in warning" :key="d.day" class="progress-item">
<div class="td" style="width: 50px">{{ d.day }}</div>
<div class="td" style="width: calc(100% - 130px); ">
<el-progress
:text-inside="true"
:stroke-width="6"
:percentage="(d.value / d.max)*100"
:status="i > 0 ? 'exception':''"
>
<div></div>
</el-progress>
<div :style="{left:((d.value / d.max)*100)+'%'}" class="progressNum" :class="i > 0 ? 'exception':''">
{{ d.value }}
</div>
</div>
<div class="td" style="width: 80px;padding-right: 12px;text-align: right">{{ d.max }}</div>
</div>
</div>
<div style="margin-right: 0" class="panel">
<div class="head">
<div>物料库存</div>
</div>
<div class="stock-summary">
<div class="stockCard">
<div class="num">100</div>
<div class="text">物料数</div>
</div>
<div class="stockCard">
<div class="num">1000.1234</div>
<div class="text">库存总量</div>
</div>
<div class="stockCard">
<div class="num">20</div>
<div class="text">超库存上限</div>
</div>
<div class="stockCard">
<div class="num">10</div>
<div class="text">超库存下限</div>
</div>
</div>
<div ref="pieRef" class="chart"></div>
</div>
</div>
<!-- Bottom Chart -->
<div style="margin-right: 0" class="panel">
<div class="head">
<div>物料库存趋势</div>
</div>
<div ref="lineRef" class="chart"></div>
</div>
<div class="content">
<Com1 :changeType="changeType" style="width: 100%;height: 100%;" v-if="type === 0"/>
<Com2 :changeType="changeType" style="width: 100%;height: 100%;" v-if="type === 1"/>
<Com3 :changeType="changeType" style="width: 100%;height: 100%;" v-if="type === 2"/>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import StatCard from '@/components/StatCard.vue';
const timeline = [
{ time: '10:00', user: '张三', action: '印刷', order: 'GD2033322222', material: '电子标签001', good: 100, bad: 10 },
{ time: '09:00', user: '张三', action: '印刷', order: 'GD2033322222', material: '电子标签001', good: 100, bad: 10 }
];
const warning = [
{ day: '1天内', value: 1000, max: 2000 },
{ day: '2天内', value: 1000, max: 3000 },
{ day: '3天内', value: 1000, max: 3000 },
{ day: '4天内', value: 1000, max: 3000 },
{ day: '5天内', value: 1000, max: 3000 }
];
const pieRef = ref(null);
const lineRef = ref(null);
onMounted(() => {
const pie = echarts.init(pieRef.value);
pie.setOption({
tooltip: {},
series: [{
type: 'pie',
radius: '70%',
label: {
formatter: '{b}\n{c}'
},
itemStyle: {
borderRadius: 5 //
},
data: [
{
name: '原料',
value: 100,
itemStyle: {
color: '#4A63EA'
}
},
{
name: '成品',
value: 150,
itemStyle: {
color: '#86AAF4'
}
},
{
name: '半成品',
value: 208,
itemStyle: {
color: '#698CF1'
}
},
{
name: '原辅料',
value: 149,
itemStyle: {
color: '#CDDFF9'
}
}
]
}]
});
const line = echarts.init(lineRef.value);
line.setOption({
tooltip: {},
grid:{
top:40,
left:80,
right:20,
bottom:30,
},
legend: { data: ['入库', '出库'] },
xAxis: { type: 'category', data: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05'] },
yAxis: { type: 'value' },
series: [
{
name: '入库',
type: 'bar',
data: [100, 140, 230, 100, 130],
itemStyle: {
color: '#4A63EA'
}
},
{
name: '出库',
type: 'bar',
data: [150, 100, 200, 150, 100],
itemStyle: {
color: '#85ABF4'
}
},
{
name: '库存',
type: 'line',
data: [100, 140, 230, 100, 130],
itemStyle: {
color: '#4B64EA'
},
label: {
show: true,
color: '#3D59E9'
}
}
]
});
});
import Com1 from './index-1.vue'
import Com2 from './index-2.vue'
import Com3 from './index-3.vue'
const type =ref(0)
const changeType = (e)=>{
type.value = e
}
</script>
<style scoped>
.dashboard {
padding: 16px;
background: #f5f7fa;
}
.card-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.middle-row {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
margin-top: 16px;
}
.panel {
background: #fff;
padding: 16px;
border-radius: 8px;
margin-right: 16px;
.head {
color: #5291FD;
font-weight: bold;
border-bottom: 1px solid #ddd;
margin-bottom: 0.5vw;
padding-bottom: 0.5vw;
}
}
.timeline {
list-style: none;
padding: 0;
}
.timeline li {
display: flex;
margin-bottom: 12px;
}
.time {
width: 60px;
color: #409eff;
}
.content {
background: #f0f4ff;
padding: 8px;
border-radius: 6px;
flex: 1;
}
.progress-item {
width: 100%;
margin-bottom: 1.6vw;
.td {
display: inline-block;
font-size: 14px;
color: #666;
position: relative;
}
.progressNum {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 2vw;
height: 1vw;
color: #fff;
line-height: 1vw;
background-color: #419EFF;
border-radius: 1vw;
}
.exception {
background-color: #F56C6C;
}
}
.chart {
width: 100%;
height: 260px;
}
.stock-summary {
width: 100%;
height: 5vw;
.stockCard {
display: inline-block;
width: 25%;
height: 100%;
text-align: center;
.num {
height: 60%;
line-height: 3vw;
font-size: 1.4vw;
font-weight: bold;
}
.text {
height: 40%;
color: #666;
}
}
}
.th {
width: 100%;
margin-bottom: 1vw;
.td {
width: 50%;
display: inline-block;
padding-right: 12px;
font-size: 14px;
color: #666;
}
}
<style lang="less" scoped>
</style>

@ -0,0 +1,349 @@
<template>
<div class="dashboard">
<!-- Top Cards -->
<div class="card-row">
<StatCard title="订单" :items="[
{ label: '销售总量', value: 1000 },
{ label: '未出库量', value: 100, color: 'red' },
{ label: '已出库量', value: 100, color: 'green' }
]" />
<StatCard title="工单" :items="[
{ label: '工单总数', value: 10 },
{ label: '未投产', value: 10, color: 'red' },
{ label: '已投产', value: 10, color: 'blue' },
{ label: '已完工', value: 10, color: 'green' }
]" />
<StatCard title="任务" :items="[
{ label: '任务总数', value: 10 },
{ label: '未开工', value: 10, color: 'red' },
{ label: '执行中', value: 10, color: 'blue' },
{ label: '已完工', value: 10, color: 'green' }
]" />
<StatCard title="产量" :items="[
{ label: '产量总量', value: 10 },
{ label: '完成率', value: '10%' },
{ label: '良品率', value: '90%', color: 'green' }
]" />
</div>
<!-- Middle -->
<div class="middle-row">
<div class="panel">
<div class="head">
<div>实时报工</div>
</div>
<el-timeline style="max-width: 600px">
<el-timeline-item :timestamp="item.time" placement="top" v-for="item in timeline ">
<div class="content">
<div style="color: #9EBDFE;font-size: 0.8vw;margin-bottom: 0.4vw;">{{ item.user }} {{ item.action }}</div>
<div>工单号{{ item.order }}</div>
<div>物料{{ item.material }}</div>
<div>良品 {{ item.good }} / 不良 {{ item.bad }}</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="panel">
<div class="head">
<div>生产预警</div>
</div>
<div class="th">
<div class="td">工单计划截止日</div>
<div class="td" style="text-align: right">计划数</div>
</div>
<div v-for="(d,i) in warning" :key="d.day" class="progress-item">
<div class="td" style="width: 50px">{{ d.day }}</div>
<div class="td" style="width: calc(100% - 130px); ">
<el-progress
:text-inside="true"
:stroke-width="6"
:percentage="(d.value / d.max)*100"
:status="i > 0 ? 'exception':''"
>
<div></div>
</el-progress>
<div :style="{left:((d.value / d.max)*100)+'%'}" class="progressNum" :class="i > 0 ? 'exception':''">
{{ d.value }}
</div>
</div>
<div class="td" style="width: 80px;padding-right: 12px;text-align: right">{{ d.max }}</div>
</div>
</div>
<div style="margin-right: 0" class="panel">
<div class="head">
<div>物料库存</div>
</div>
<div class="stock-summary">
<div class="stockCard">
<div class="num">100</div>
<div class="text">物料数</div>
</div>
<div class="stockCard">
<div class="num">1000.1234</div>
<div class="text">库存总量</div>
</div>
<div class="stockCard">
<div class="num">20</div>
<div class="text">超库存上限</div>
</div>
<div class="stockCard">
<div class="num">10</div>
<div class="text">超库存下限</div>
</div>
</div>
<div ref="pieRef" class="chart"></div>
</div>
</div>
<!-- Bottom Chart -->
<div style="margin-right: 0" class="panel">
<div class="head">
<div>物料库存趋势</div>
</div>
<div ref="lineRef" class="chart"></div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import StatCard from '@/components/StatCard.vue';
const timeline = [
{ time: '10:00', user: '张三', action: '印刷', order: 'GD2033322222', material: '电子标签001', good: 100, bad: 10 },
{ time: '09:00', user: '张三', action: '印刷', order: 'GD2033322222', material: '电子标签001', good: 100, bad: 10 }
];
const warning = [
{ day: '1天内', value: 1000, max: 2000 },
{ day: '2天内', value: 1000, max: 3000 },
{ day: '3天内', value: 1000, max: 3000 },
{ day: '4天内', value: 1000, max: 3000 },
{ day: '5天内', value: 1000, max: 3000 }
];
const pieRef = ref(null);
const lineRef = ref(null);
onMounted(() => {
const pie = echarts.init(pieRef.value);
pie.setOption({
tooltip: {},
series: [{
type: 'pie',
radius: '70%',
label: {
formatter: '{b}\n{c}'
},
itemStyle: {
borderRadius: 5 //
},
data: [
{
name: '原料',
value: 100,
itemStyle: {
color: '#4A63EA'
}
},
{
name: '成品',
value: 150,
itemStyle: {
color: '#86AAF4'
}
},
{
name: '半成品',
value: 208,
itemStyle: {
color: '#698CF1'
}
},
{
name: '原辅料',
value: 149,
itemStyle: {
color: '#CDDFF9'
}
}
]
}]
});
const line = echarts.init(lineRef.value);
line.setOption({
tooltip: {},
grid:{
top:40,
left:80,
right:20,
bottom:30,
},
legend: { data: ['入库', '出库'] },
xAxis: { type: 'category', data: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05'] },
yAxis: { type: 'value' },
series: [
{
name: '入库',
type: 'bar',
data: [100, 140, 230, 100, 130],
itemStyle: {
color: '#4A63EA'
}
},
{
name: '出库',
type: 'bar',
data: [150, 100, 200, 150, 100],
itemStyle: {
color: '#85ABF4'
}
},
{
name: '库存',
type: 'line',
data: [100, 140, 230, 100, 130],
itemStyle: {
color: '#4B64EA'
},
label: {
show: true,
color: '#3D59E9'
}
}
]
});
});
</script>
<style scoped>
.dashboard {
padding: 16px;
background: #f5f7fa;
}
.card-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.middle-row {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
margin-top: 16px;
}
.panel {
background: #fff;
padding: 16px;
border-radius: 8px;
margin-right: 16px;
.head {
color: #5291FD;
font-weight: bold;
border-bottom: 1px solid #ddd;
margin-bottom: 0.5vw;
padding-bottom: 0.5vw;
}
}
.timeline {
list-style: none;
padding: 0;
}
.timeline li {
display: flex;
margin-bottom: 12px;
}
.time {
width: 60px;
color: #409eff;
}
.content {
background: #f0f4ff;
padding: 8px;
border-radius: 6px;
flex: 1;
}
.progress-item {
width: 100%;
margin-bottom: 1.6vw;
.td {
display: inline-block;
font-size: 14px;
color: #666;
position: relative;
}
.progressNum {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 2vw;
height: 1vw;
color: #fff;
line-height: 1vw;
background-color: #419EFF;
border-radius: 1vw;
}
.exception {
background-color: #F56C6C;
}
}
.chart {
width: 100%;
height: 260px;
}
.stock-summary {
width: 100%;
height: 5vw;
.stockCard {
display: inline-block;
width: 25%;
height: 100%;
text-align: center;
.num {
height: 60%;
line-height: 3vw;
font-size: 1.4vw;
font-weight: bold;
}
.text {
height: 40%;
color: #666;
}
}
}
.th {
width: 100%;
margin-bottom: 1vw;
.td {
width: 50%;
display: inline-block;
padding-right: 12px;
font-size: 14px;
color: #666;
}
}
</style>

@ -26,7 +26,7 @@ const value2 = ref();
const flag = ref(true);
const ProductionPlaybackRef = ref();
const start = () => {
if(flag.value){
if (flag.value) {
ProductionPlaybackRef.value.init();
flag.value = false;
}
@ -43,9 +43,10 @@ const pause = () => {
.content {
margin-left: 12px;
//width: 100%;
width: 960px;
height: 540px;
width: 100%;
//width: 960px;
//height: 540px;
height: calc(100vh - 84px - 50px);
background-color: #274864;
//background-color: #3e9122;
}

Loading…
Cancel
Save