1404/11/04- first
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
<svg width="373" height="368" viewBox="0 0 373 368" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M187.568 367.346C283.412 367.346 361.11 289.649 361.11 193.804C361.11 97.9595 283.412 20.2622 187.568 20.2622C91.7232 20.2622 14.0259 97.9595 14.0259 193.804C14.0259 289.649 91.7232 367.346 187.568 367.346Z" fill="url(#paint0_linear_595_23892)"/>
|
||||
<path d="M281.192 60.6445H88.9443C76.9613 60.6445 67.2471 70.3587 67.2471 82.3418H302.889C302.889 70.3587 293.175 60.6445 281.192 60.6445Z" fill="url(#paint1_linear_595_23892)"/>
|
||||
<path d="M67.2471 81.7495H302.889V261.219C302.889 269.198 299.72 276.85 294.077 282.493C288.435 288.135 280.783 291.305 272.803 291.305H97.3331C89.3538 291.305 81.7013 288.135 76.0591 282.493C70.4168 276.85 67.2471 269.198 67.2471 261.219V81.7495Z" fill="url(#paint2_linear_595_23892)"/>
|
||||
<path d="M262.384 104.417H107.829C104.61 104.417 102.001 107.024 102.001 110.239C102.001 113.454 104.61 116.061 107.829 116.061H262.384C265.603 116.061 268.212 113.454 268.212 110.239C268.212 107.024 265.603 104.417 262.384 104.417Z" fill="url(#paint3_linear_595_23892)"/>
|
||||
<path d="M262.384 153.885H107.829C104.61 153.885 102.001 156.492 102.001 159.707C102.001 162.922 104.61 165.529 107.829 165.529H262.384C265.603 165.529 268.212 162.922 268.212 159.707C268.212 156.492 265.603 153.885 262.384 153.885Z" fill="url(#paint4_linear_595_23892)"/>
|
||||
<path d="M262.384 203.354H107.829C104.61 203.354 102.001 205.96 102.001 209.175C102.001 212.39 104.61 214.997 107.829 214.997H262.384C265.603 214.997 268.212 212.39 268.212 209.175C268.212 205.96 265.603 203.354 262.384 203.354Z" fill="url(#paint5_linear_595_23892)"/>
|
||||
<path d="M262.384 252.822H107.829C104.61 252.822 102.001 255.428 102.001 258.643C102.001 261.859 104.61 264.465 107.829 264.465H262.384C265.603 264.465 268.212 261.859 268.212 258.643C268.212 255.428 265.603 252.822 262.384 252.822Z" fill="url(#paint6_linear_595_23892)"/>
|
||||
<g filter="url(#filter0_d_595_23892)">
|
||||
<path d="M106.782 192.744H24.484C17.8724 192.744 12.5127 198.103 12.5127 204.715V322.347C12.5127 328.958 17.8724 334.318 24.484 334.318H106.782C113.394 334.318 118.754 328.958 118.754 322.347V204.715C118.754 198.103 113.394 192.744 106.782 192.744Z" fill="url(#paint7_linear_595_23892)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_595_23892)">
|
||||
<path d="M341.059 9H250.158C245.922 9 242.488 12.4339 242.488 16.6697V59.3957C242.488 63.6315 245.922 67.0654 250.158 67.0654H341.059C345.295 67.0654 348.729 63.6315 348.729 59.3957V16.6697C348.729 12.4339 345.295 9 341.059 9Z" fill="url(#paint8_linear_595_23892)"/>
|
||||
</g>
|
||||
<path d="M97.5989 251.591H33.6677C31.5149 251.591 29.7698 253.336 29.7698 255.489V255.501C29.7698 257.654 31.5149 259.399 33.6677 259.399H97.5989C99.7517 259.399 101.497 257.654 101.497 255.501V255.489C101.497 253.336 99.7517 251.591 97.5989 251.591Z" fill="url(#paint9_linear_595_23892)"/>
|
||||
<path d="M97.6349 306.535H34.2531C32.1188 306.535 30.3887 308.226 30.3887 310.312V310.324C30.3887 312.409 32.1188 314.1 34.2531 314.1H97.6349C99.7692 314.1 101.499 312.409 101.499 310.324V310.312C101.499 308.226 99.7692 306.535 97.6349 306.535Z" fill="url(#paint10_linear_595_23892)"/>
|
||||
<path d="M97.6349 277.789H34.2531C32.1188 277.789 30.3887 279.479 30.3887 281.565V281.577C30.3887 283.663 32.1188 285.354 34.2531 285.354H97.6349C99.7692 285.354 101.499 283.663 101.499 281.577V281.565C101.499 279.479 99.7692 277.789 97.6349 277.789Z" fill="url(#paint11_linear_595_23892)"/>
|
||||
<path d="M57.0429 210.909H38.3606C34.2222 210.909 30.8674 214.263 30.8674 218.402V223.586C30.8674 227.725 34.2222 231.08 38.3606 231.08H57.0429C61.1812 231.08 64.536 227.725 64.536 223.586V218.402C64.536 214.263 61.1812 210.909 57.0429 210.909Z" fill="url(#paint12_linear_595_23892)"/>
|
||||
<path d="M264.922 46.8443C269.792 46.8443 273.74 42.8965 273.74 38.0266C273.74 33.1568 269.792 29.209 264.922 29.209C260.053 29.209 256.105 33.1568 256.105 38.0266C256.105 42.8965 260.053 46.8443 264.922 46.8443Z" fill="#81D5E7"/>
|
||||
<path d="M296.434 46.8443C301.303 46.8443 305.251 42.8965 305.251 38.0266C305.251 33.1568 301.303 29.209 296.434 29.209C291.564 29.209 287.616 33.1568 287.616 38.0266C287.616 42.8965 291.564 46.8443 296.434 46.8443Z" fill="#81D5E7"/>
|
||||
<path d="M327.945 46.8443C332.815 46.8443 336.763 42.8965 336.763 38.0266C336.763 33.1568 332.815 29.209 327.945 29.209C323.075 29.209 319.127 33.1568 319.127 38.0266C319.127 42.8965 323.075 46.8443 327.945 46.8443Z" fill="#81D5E7"/>
|
||||
<path d="M173.889 310.14C174.407 307.996 177.457 307.996 177.974 310.14L181.812 326.038C181.997 326.804 182.595 327.403 183.361 327.588L199.26 331.425C201.404 331.943 201.404 334.993 199.26 335.51L183.361 339.348C182.595 339.533 181.997 340.131 181.812 340.897L177.974 356.796C177.457 358.94 174.407 358.94 173.889 356.796L170.052 340.897C169.867 340.131 169.269 339.533 168.502 339.348L152.604 335.51C150.46 334.993 150.46 331.943 152.604 331.425L168.502 327.588C169.269 327.403 169.867 326.804 170.052 326.038L173.889 310.14Z" fill="url(#paint13_linear_595_23892)"/>
|
||||
<path d="M48.3111 19.6453C48.8287 17.5013 51.8783 17.5013 52.3959 19.6453L56.2336 35.5436C56.4186 36.3098 57.0168 36.908 57.783 37.093L73.6813 40.9308C75.8254 41.4483 75.8254 44.4979 73.6813 45.0155L57.783 48.8533C57.0168 49.0382 56.4186 49.6364 56.2336 50.4026L52.3959 66.301C51.8783 68.445 48.8287 68.445 48.3111 66.301L44.4734 50.4026C44.2884 49.6364 43.6902 49.0382 42.924 48.8533L27.0257 45.0155C24.8816 44.4979 24.8816 41.4483 27.0257 40.9308L42.924 37.093C43.6902 36.908 44.2884 36.3098 44.4734 35.5436L48.3111 19.6453Z" fill="url(#paint14_linear_595_23892)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M180.649 25.7543C183.575 25.7543 185.947 23.3823 185.947 20.4562C185.947 17.5302 183.575 15.1581 180.649 15.1581C177.723 15.1581 175.351 17.5302 175.351 20.4562C175.351 23.3823 177.723 25.7543 180.649 25.7543ZM180.649 29.7279C185.769 29.7279 189.921 25.5768 189.921 20.4562C189.921 15.3356 185.769 11.1846 180.649 11.1846C175.528 11.1846 171.377 15.3356 171.377 20.4562C171.377 25.5768 175.528 29.7279 180.649 29.7279Z" fill="url(#paint15_linear_595_23892)"/>
|
||||
<path d="M345.008 170.135C344.675 168.829 345.881 167.652 347.179 168.016L363.426 172.582C364.723 172.947 365.139 174.579 364.175 175.521L352.097 187.308C351.133 188.249 349.511 187.794 349.178 186.488L345.008 170.135Z" fill="url(#paint16_linear_595_23892)"/>
|
||||
<path d="M36.2812 148.512C37.5876 148.181 38.7628 149.388 38.3965 150.685L33.8099 166.926C33.4436 168.223 31.8105 168.637 30.8703 167.672L19.0985 155.579C18.1584 154.613 18.6163 152.992 19.9227 152.661L36.2812 148.512Z" fill="url(#paint17_linear_595_23892)"/>
|
||||
<path d="M288.951 331.584C290.257 331.253 291.433 332.46 291.066 333.757L286.48 349.998C286.113 351.296 284.48 351.71 283.54 350.744L271.768 338.651C270.828 337.685 271.286 336.064 272.592 335.733L288.951 331.584Z" fill="url(#paint18_linear_595_23892)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M357.669 102.917C360.595 102.917 362.967 100.545 362.967 97.6188C362.967 94.6928 360.595 92.3207 357.669 92.3207C354.743 92.3207 352.371 94.6928 352.371 97.6188C352.371 100.545 354.743 102.917 357.669 102.917ZM357.669 106.89C362.789 106.89 366.941 102.739 366.941 97.6188C366.941 92.4982 362.789 88.3472 357.669 88.3472C352.548 88.3472 348.397 92.4982 348.397 97.6188C348.397 102.739 352.548 106.89 357.669 106.89Z" fill="url(#paint19_linear_595_23892)"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_595_23892" x="0.512695" y="184.744" width="136.241" height="171.575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="7"/>
|
||||
<feGaussianBlur stdDeviation="7.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.104618 0 0 0 0 0.465612 0 0 0 0 0.545833 0 0 0 0.15 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_595_23892"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_595_23892" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_595_23892" x="235.488" y="0" width="132.241" height="84.0654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="6" dy="4"/>
|
||||
<feGaussianBlur stdDeviation="6.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.104618 0 0 0 0 0.465612 0 0 0 0 0.545833 0 0 0 0.09 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_595_23892"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_595_23892" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_595_23892" x1="186.23" y1="-36.2473" x2="189.785" y2="573.205" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8EE2F4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_595_23892" x1="66.9802" y1="65.652" x2="303.007" y2="82.2949" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_595_23892" x1="60.1717" y1="238.89" x2="400.595" y2="244.942" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#BCF3FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_595_23892" x1="94.9712" y1="115.581" x2="278.043" y2="115.581" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#65C8DE"/>
|
||||
<stop offset="1" stop-color="#D2F7FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_595_23892" x1="94.9712" y1="165.048" x2="278.043" y2="165.048" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#65C8DE"/>
|
||||
<stop offset="1" stop-color="#D2F7FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_595_23892" x1="94.9712" y1="214.517" x2="278.043" y2="214.517" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#65C8DE"/>
|
||||
<stop offset="1" stop-color="#D2F7FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_595_23892" x1="94.9712" y1="263.985" x2="278.043" y2="263.985" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#65C8DE"/>
|
||||
<stop offset="1" stop-color="#D2F7FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_595_23892" x1="9.32274" y1="298.907" x2="212.951" y2="315.631" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#BCF3FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_595_23892" x1="239.298" y1="52.5419" x2="392.7" y2="56.9794" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#BCF3FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_595_23892" x1="109.821" y1="259.632" x2="23.5804" y2="259.632" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2F7FF"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_595_23892" x1="109.752" y1="314.326" x2="24.2525" y2="314.326" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2F7FF"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_595_23892" x1="109.752" y1="285.579" x2="24.2525" y2="285.579" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2F7FF"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_595_23892" x1="87.8826" y1="230.885" x2="26.6064" y2="230.885" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.243799" stop-color="#D2F7FF"/>
|
||||
<stop offset="1" stop-color="#6BCBE0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear_595_23892" x1="144.071" y1="316.352" x2="208.066" y2="316.767" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear_595_23892" x1="18.4929" y1="25.8573" x2="82.4878" y2="26.2728" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear_595_23892" x1="171.356" y1="15.4641" x2="190.021" y2="15.5853" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear_595_23892" x1="339.029" y1="180.843" x2="358.232" y2="162.343" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear_595_23892" x1="25.58" y1="142.519" x2="44.0555" y2="161.746" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear_595_23892" x1="278.25" y1="325.591" x2="296.725" y2="344.818" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear_595_23892" x1="348.376" y1="92.6267" x2="367.041" y2="92.7479" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90E3F5"/>
|
||||
<stop offset="1" stop-color="#65C8DE"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="w-full flex md:block justify-between md:justify-unset items-center">
|
||||
<div class="flex items-center gap-2 mx-2">
|
||||
<div class="p-1 h-8 aspect-square rounded-full" :class="bgColor">
|
||||
<BaseIcon icon="vuesax-linear:profile-add" :class="textColor" />
|
||||
</div>
|
||||
<div class="text-xs font-bold">{{ title }}</div>
|
||||
</div>
|
||||
<div class="flex flex-row-reverse gap-1 mt-5 items-center md:w-full pl-2 items-end">
|
||||
<div class="text-xs">{{ unit }}</div>
|
||||
<div class="font-bold text-xl">{{ count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Prop {
|
||||
color: string
|
||||
title: string
|
||||
count?: number
|
||||
unit: 'نفر' | 'گرم'
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
|
||||
const bgColor = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'fuchsia':
|
||||
return 'bg-fuchsia-100'
|
||||
case 'orange':
|
||||
return 'bg-orange-100'
|
||||
case 'green':
|
||||
return 'bg-green-100'
|
||||
case 'blue':
|
||||
return 'bg-blue-100'
|
||||
}
|
||||
})
|
||||
const textColor = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'fuchsia':
|
||||
return 'text-fuchsia-600'
|
||||
case 'orange':
|
||||
return 'text-orange-600'
|
||||
case 'green':
|
||||
return 'text-green-600'
|
||||
case 'blue':
|
||||
return 'text-blue-600'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,876 @@
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<a-spin size="large" :spinning="loading">
|
||||
<div
|
||||
class="w-full bg-[#0A1B37] flex p-2 rounded-lg md:justify-evenly flex-col md:flex-row shadow-lg"
|
||||
>
|
||||
<div class="flex text-white gap-2 items-center">
|
||||
<div>مظنه روز:</div>
|
||||
<div class="font-bold">
|
||||
{{ usePrice(parseInt(dashboardInf?.price ?? '0'), true, '') }}
|
||||
</div>
|
||||
<div class="text-xs">ریال</div>
|
||||
</div>
|
||||
<div class="flex text-white gap-2 items-center">
|
||||
<div>آخرین تاریخ به روز رسانی:</div>
|
||||
</div>
|
||||
<div class="flex text-white gap-2 items-center">
|
||||
<div>هر مثقال طلا:</div>
|
||||
<div class="font-bold"></div>
|
||||
<div class="text-xs">ریال</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-unset md:grid md:grid-cols-7 gap-4 mt-3">
|
||||
<BaseCard class="w-full md:w-none md:col-span-7">
|
||||
<div class="text-lg font-bold">مشتری</div>
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-around mt-5 justify-between items-dashboard h-full"
|
||||
>
|
||||
<DashboardItem
|
||||
class="md:w-1/3"
|
||||
color="blue"
|
||||
title="مشتری جدید"
|
||||
unit="نفر"
|
||||
:count="dashboardInf?.new_customer_single"
|
||||
/>
|
||||
<div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
|
||||
<DashboardItem
|
||||
class="md:w-1/3"
|
||||
color="green"
|
||||
title="کل مشتریان"
|
||||
unit="نفر"
|
||||
:count="dashboardInf?.all_customer_single"
|
||||
/>
|
||||
<div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
|
||||
<DashboardItem
|
||||
class="md:w-1/3"
|
||||
color="orange"
|
||||
title="مشتریان بایگانی شده"
|
||||
unit="نفر"
|
||||
:count="dashboardInf?.archive_customer_single"
|
||||
/>
|
||||
</div>
|
||||
</BaseCard>
|
||||
<BaseCard class="md:hidden w-full">
|
||||
<div class="grid grid-cols-3 gap-1 text-xs">
|
||||
<div class="bg-blue-600 text-white rounded p-1">مجموع</div>
|
||||
<div class="bg-blue-600 text-white rounded p-1">ریال</div>
|
||||
<div class="bg-blue-600 text-white rounded p-1">گرم</div>
|
||||
<div class="bg-blue-600 text-white rounded p-1">کیف طلا</div>
|
||||
<div
|
||||
class="text-white rounded p-1"
|
||||
:class="
|
||||
sums?.goldToCash >= 0
|
||||
? sums?.goldToCash === 0
|
||||
? 'bg-amber-600'
|
||||
: 'bg-green-600'
|
||||
: 'bg-red-600'
|
||||
"
|
||||
>
|
||||
{{ usePrice(sums?.goldToCash ?? 0, true, '') }}
|
||||
</div>
|
||||
<div
|
||||
class="text-white rounded p-1"
|
||||
:class="
|
||||
sums?.gold >= 0
|
||||
? sums?.gold === 0
|
||||
? 'bg-amber-600'
|
||||
: 'bg-green-600'
|
||||
: 'bg-red-600'
|
||||
"
|
||||
>
|
||||
{{ usePrice(sums?.gold ?? 0, true, '') }}
|
||||
</div>
|
||||
<div class="bg-blue-600 text-white rounded p-1">کیف پول</div>
|
||||
<div
|
||||
class="text-white rounded p-1"
|
||||
:class="
|
||||
sums?.cash >= 0
|
||||
? sums?.cash === 0
|
||||
? 'bg-amber-600'
|
||||
: 'bg-green-600'
|
||||
: 'bg-red-600'
|
||||
"
|
||||
>
|
||||
{{ usePrice(sums?.cash ?? 0, true, '') }}
|
||||
</div>
|
||||
<div
|
||||
class="text-white rounded p-1"
|
||||
:class="
|
||||
sums?.cashToGold >= 0
|
||||
? sums?.cashToGold === 0
|
||||
? 'bg-amber-600'
|
||||
: 'bg-green-600'
|
||||
: 'bg-red-600'
|
||||
"
|
||||
>
|
||||
{{ usePrice(sums?.cashToGold ?? 0, true, '') }}
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
<BaseCard class="h-full md:col-span-7">
|
||||
<ASpin :spinning="tarazLoading">
|
||||
<div class="grid md:grid-cols-3 gap-3 mt-2">
|
||||
<div>
|
||||
<div class="md:flex content-center gap-3">
|
||||
<div class="w-full md:flex items-baseline gap-10 bg-gray-100 p-2 rounded-lg">
|
||||
<p class="font-bold mr-2">تاریخ تراز</p>
|
||||
<div class="w-full flex items-baseline flex-1 gap-3">
|
||||
<p class="font-bold">از:</p>
|
||||
<BaseDatePicker
|
||||
v-model:value="startTaraz"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full flex items-baseline flex-1 gap-3">
|
||||
<p class="font-bold">تا:</p>
|
||||
<BaseDatePicker
|
||||
v-model:value="endTaraz"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<BaseButton @click="getTaraz()">ثبت تاریخ</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex font-bold p-2">
|
||||
<span>جمع واریزی : </span>
|
||||
<div class="mr-4">{{ usePrice(balance_?.income_money ?? 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col gap-3 bg-yellow-100 p-2 rounded-lg w-full cursor-pointer"
|
||||
@click="openNewTabBalance"
|
||||
>
|
||||
<span class="text-center text-base font-700 bg-yellow text-white rounded-lg">
|
||||
تراز طلایی
|
||||
</span>
|
||||
<div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
|
||||
<div class="w-full flex flex-col gap-3">
|
||||
<div class="flex justify-between mx-5">
|
||||
<span class="font-600">تراز اصلی:</span>
|
||||
<span
|
||||
class="text-base"
|
||||
:class="
|
||||
(balance_?.goldBalance ?? 0) > 0
|
||||
? 'text-green-600'
|
||||
: (balance_?.goldBalance ?? 0) === 0
|
||||
? 'text-yellow-600'
|
||||
: 'text-red'
|
||||
"
|
||||
>
|
||||
{{ balance_?.goldBalance?.toFixed(3) }} گرم
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col gap-3 bg-blue-100 p-2 rounded-lg w-full cursor-pointer"
|
||||
@click="openNewTabBalance"
|
||||
>
|
||||
<span class="text-center text-base font-700 bg-blue-6 rounded-lg text-white">
|
||||
تراز ریالی
|
||||
</span>
|
||||
<div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
|
||||
<div class="w-full flex flex-col gap-3">
|
||||
<div class="flex justify-between mx-5">
|
||||
<span class="font-600">تراز اصلی:</span>
|
||||
<span
|
||||
class="text-base"
|
||||
:class="
|
||||
(balance_?.cashBalance ?? 0) > 0
|
||||
? 'text-green-600'
|
||||
: (balance_?.cashBalance ?? 0) === 0
|
||||
? 'text-yellow-600'
|
||||
: 'text-red'
|
||||
"
|
||||
>
|
||||
{{ usePrice(balance_?.cashBalance ?? 0) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ASpin>
|
||||
</BaseCard>
|
||||
<BaseCard class="w-full md:w-none md:col-span-2">
|
||||
<div class="text-lg font-bold">تراز بدهی</div>
|
||||
<div ref="main" class="w-full aspect-square"></div>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard class="md:col-span-5">
|
||||
<div id="chart">
|
||||
<div class="font-bold text-lg mt-2 text-center md:text-right mb-2">مقایسه قیمت ها</div>
|
||||
<apexchart
|
||||
type="bar"
|
||||
height="350"
|
||||
:options="otherPricesOptions"
|
||||
:series="otherPricesSeries"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="md:grid grid-cols-4 gap-4 mt-4 justify-between text-center">
|
||||
<div class="grid-cols-1 grid gap-2 bg-blue-100 rounded-lg shadow-lg">
|
||||
<div class="flex items-center text-right p-2">
|
||||
<img src="/src/assets/img/saminLogo_.png" class="w-2rem h-2rem" />
|
||||
<div class="mr-4">
|
||||
<div>قیمت ثمین گلد</div>
|
||||
<div>
|
||||
{{ usePrice(othersPrices?.price_last ? othersPrices?.price_last : 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-1 grid gap-2 bg-red-100 rounded-lg shadow-lg">
|
||||
<div class="flex items-center text-right p-2">
|
||||
<img src="/src/assets/img/milliLogo.png" class="w-2rem h-2rem" />
|
||||
<div class="mr-4">
|
||||
<div>قیمت سایت میلی</div>
|
||||
<div>{{ usePrice(othersPrices?.milli ? othersPrices?.milli : 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
|
||||
<div class="flex items-center text-right p-2">
|
||||
<img src="/src/assets/img/henzaLogo.png" class="w-2rem h-2rem" />
|
||||
<div class="mr-4">
|
||||
<div>قیمت سایت هنزا</div>
|
||||
<div>{{ usePrice(othersPrices?.henzagold ? othersPrices?.henzagold : 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-1 grid gap-2 bg-orange-100 rounded-lg shadow-lg">
|
||||
<div class="flex items-center text-right p-2">
|
||||
<img src="/src/assets/img/talaLogo.png" class="w-2rem h-2rem" />
|
||||
<div class="mr-4">
|
||||
<div>قیمت سایت طلا</div>
|
||||
<div>{{ usePrice(othersPrices?.tala_ir ? othersPrices?.tala_ir : 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
<div class="md:col-span-7 md:grid gap-4">
|
||||
<BaseCard>
|
||||
<div class=" ">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="flex items-end">
|
||||
<div class="text-2xl font-bold ml-2">{{ usePrice(123456789123, true, '') }}</div>
|
||||
<div class="text-lg">تومان</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="flex bg-gray-50 px-1 py-1 dashboard-tabs-class border-size-[1px] border-gray-200 border-solid rounded-lg"
|
||||
>
|
||||
<div :class="type === 'week' ? 'selected_item' : ''" @click="setType('week')">
|
||||
هفتگی
|
||||
</div>
|
||||
<div :class="type === 'month' ? 'selected_item' : ''" @click="setType('month')">
|
||||
ماهانه
|
||||
</div>
|
||||
<div :class="type === 'year' ? 'selected_item' : ''" @click="setType('year')">
|
||||
سالانه
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10">جمع فروش به مشتری</div>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="350"
|
||||
ref="chart"
|
||||
:options="sumOfSellCoworkerOption"
|
||||
:series="sumOfSellCoworkerSeries"
|
||||
></apexchart>
|
||||
</BaseCard>
|
||||
<div class="flex flex-col items-center md:items-unset md:grid md:grid-cols-7 gap-4">
|
||||
<BaseCard class="w-full md:w-none md:col-span-7">
|
||||
<div>
|
||||
<div class="font-bold text-lg mt-2 text-center md:text-right">
|
||||
حسابداری ثمین گلد در یک نگاه
|
||||
</div>
|
||||
<div class="md:flex mt-6">
|
||||
<div class="flex items-baseline flex-1 gap-3">
|
||||
<p>از:</p>
|
||||
<BaseDatePicker
|
||||
v-model:value="startDate"
|
||||
@on-change="getTaraz"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-baseline flex-1 gap-3">
|
||||
<p class="md:mr-6">تا:</p>
|
||||
<BaseDatePicker
|
||||
v-model:value="endDate"
|
||||
@on-change="getTaraz"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
|
||||
<div class="p-4">
|
||||
<div class="font-bold text-lg">دریافتی</div>
|
||||
<div class="md:grid-cols-5 grid gap-2 mt-4">
|
||||
<div>
|
||||
<div>کل سود دریافت شده</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.fullPriceSood ?? 0) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>کل کارمزد</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.fullPriceKaermozd ?? 0) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>تعداد سفارشات</div>
|
||||
<div class="font-bold">{{ balance?.orderCount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ml-2">قیمت نهایی محاسبه شده با روش اول</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.fullPriceM1 ?? 0) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ml-2">قیمت نهایی محاسبه شده با روش دوم</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.fullPriceM2 ?? 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 bg-red-100 p-4 rounded-lg flex-col md:flex-row shadow-lg">
|
||||
<div class="font-bold text-lg">خروجی</div>
|
||||
<div class="md:grid-cols-2 grid mt-4">
|
||||
<div>
|
||||
<div>پاداش معرفی به گرم</div>
|
||||
<div class="font-bold">{{ balance?.Gifts }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>پاداش معرفی به ریال</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.GiftsPrise ?? 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 bg-blue-100 p-4 rounded-lg md:justify-evenly flex-col md:flex-row shadow-lg"
|
||||
>
|
||||
<div>
|
||||
<div class="font-bold text-lg">قیمت کل</div>
|
||||
<div class="flex mt-4">
|
||||
<div class="ml-4">کل درآمد :</div>
|
||||
<div class="font-bold">{{ usePrice(balance?.sumAll ?? 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-unset md:grid md:grid-cols-7 gap-4">
|
||||
<BaseCard class="w-full md:w-none md:col-span-7">
|
||||
<div>
|
||||
<div class="font-bold text-lg mt-2 text-center md:text-right">نوسانات قیمت</div>
|
||||
<div id="chart">
|
||||
<div class="toolbar mt-2 mb-2">
|
||||
<button
|
||||
id="DAILY"
|
||||
@click="updateData('DAILY')"
|
||||
:class="{ active: selection === 'DAILY' }"
|
||||
>
|
||||
24 ساعت اخیر
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="WEEKLY"
|
||||
@click="updateData('WEEKLY')"
|
||||
:class="{ active: selection === 'WEEKLY' }"
|
||||
>
|
||||
هفته گذشته
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="MONTHLY"
|
||||
@click="updateData('MONTHLY')"
|
||||
:class="{ active: selection === 'MONTHLY' }"
|
||||
>
|
||||
ماه گذشته
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="chart-timeline">
|
||||
<apexchart
|
||||
type="area"
|
||||
height="350"
|
||||
ref="chart"
|
||||
:options="priceChartOptions"
|
||||
:series="priceChartSeries"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { openNewTabBalance} from '@/core/composable/appInfo'
|
||||
import nothing from './assets/svgs/nothing.svg'
|
||||
import { usePrice } from '../../core/utils/usePrice'
|
||||
import DashboardItem from '@/pages/dashboard/components/dashboardItem.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAllPrices, getDashboard } from '@/api/dashboard'
|
||||
import { getOthersPrices } from '@/api/othersPrices'
|
||||
import type { Charts, Dashboard } from '@/model/dashboard'
|
||||
import { getWalletTable } from '@/api/wallet'
|
||||
import type { Accounting } from '@/model/accounting'
|
||||
import { getAccountingTable, getTotalAccountingTable } from '@/api/accounting'
|
||||
import { ref } from 'vue'
|
||||
import type { OthersPrices } from '@/model/othersPrices'
|
||||
import { getNow, toJalaliNoTime } from '@core/utils/useDataTime'
|
||||
import { cols } from '@/pages/menuPages/customers/base/hooks/customerColumns'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import type { PriceChart } from '@/model/priceChart'
|
||||
// import {getBalance} from "@/api/product"
|
||||
import type { Balance } from '@/model/product'
|
||||
import { getBalance } from "@/api/product";
|
||||
const tarazLoading = ref<boolean>(false)
|
||||
const main = ref(null)
|
||||
const bar = ref(null)
|
||||
const type = ref<string>('week')
|
||||
const dashboardInf = ref<Dashboard>()
|
||||
const othersPrices = ref<OthersPrices>()
|
||||
const chartDataWeekInf = reactive<Charts>({})
|
||||
const chartDataMonthInf = reactive<Charts>({})
|
||||
const chartDataYearInf = reactive<Charts>({})
|
||||
const loading = ref<boolean>(false)
|
||||
const sums = ref()
|
||||
const startDate = ref<string>('')
|
||||
const endDate = ref<string>('')
|
||||
const balance = ref<Accounting>()
|
||||
const startTaraz = ref<string>('')
|
||||
const endTaraz = ref<string>('')
|
||||
const balance_ = ref<Balance>()
|
||||
|
||||
onMounted(() => {
|
||||
startDate.value = ''
|
||||
endDate.value = ''
|
||||
startTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
|
||||
endTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
|
||||
getDate()
|
||||
getTaraz()
|
||||
})
|
||||
|
||||
async function getDate() {
|
||||
try {
|
||||
loading.value = true
|
||||
balance.value = await getAccountingTable(startDate.value, endDate.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function getTaraz() {
|
||||
try {
|
||||
loading.value = true
|
||||
balance.value = await getAccountingTable(startDate.value, endDate.value)
|
||||
balance_.value = await getBalance(startTaraz.value, endTaraz.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
//chart other prices
|
||||
function setType(val: string) {
|
||||
type.value = val
|
||||
}
|
||||
|
||||
//chart 1
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
dashboardInf.value = await getDashboard()
|
||||
const data = await getWalletTable()
|
||||
sums.value = data?.sums
|
||||
// chartDataWeekInf.buySellChart =
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
if (main.value !== null) {
|
||||
//circle
|
||||
const echart = echarts.init(main.value, null, {
|
||||
renderer: 'canvas'
|
||||
})
|
||||
echart.setOption({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
textStyle: {
|
||||
fontFamily: 'iran-sans'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'تراز',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}',
|
||||
offsetCenter: [0, '60%'],
|
||||
fontSize: 40,
|
||||
color: '#EF4444',
|
||||
valueAnimation: true
|
||||
},
|
||||
min: -50,
|
||||
max: 50,
|
||||
data: [
|
||||
{
|
||||
value: 10.25,
|
||||
name: 'گرم'
|
||||
}
|
||||
],
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
color: [[1, '#2563EB']],
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16
|
||||
},
|
||||
title: {
|
||||
color: '#000000',
|
||||
offsetCenter: [0, '75%']
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//chart 4
|
||||
const sumOfSellCoworkerSeries = [
|
||||
{
|
||||
name: 'series1',
|
||||
data: [31, 40, 28, 51, 42, 109, 100]
|
||||
}
|
||||
]
|
||||
|
||||
const sumOfSellCoworkerOption = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area'
|
||||
},
|
||||
colors: ['#2563EB'],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2018-09-19T00:00:00.000Z',
|
||||
'2018-09-19T01:30:00.000Z',
|
||||
'2018-09-19T02:30:00.000Z',
|
||||
'2018-09-19T03:30:00.000Z',
|
||||
'2018-09-19T04:30:00.000Z',
|
||||
'2018-09-19T05:30:00.000Z',
|
||||
'2018-09-19T06:30:00.000Z'
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
colors: ['#765DFF'],
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.9,
|
||||
stops: [0, 100]
|
||||
}
|
||||
}
|
||||
}
|
||||
// const priceChartSeries = ref([{name: 'قیمت', data: []}])
|
||||
// const priceChartOptions = ref({
|
||||
// chart: {
|
||||
// type: 'line',
|
||||
// height: 350,
|
||||
// zoom: {enabled: true}
|
||||
// },
|
||||
// dataLabels: {enabled: false},
|
||||
// stroke: {curve: 'smooth'},
|
||||
// title: {text: 'نمودار قیمت بر اساس تاریخ', align: 'left'},
|
||||
// xaxis: {
|
||||
// categories: [],
|
||||
// title: {text: 'تاریخ'}
|
||||
// },
|
||||
// yaxis: {
|
||||
// title: {text: 'قیمت'},
|
||||
// min: 0
|
||||
// }
|
||||
// })
|
||||
|
||||
const otherPricesSeries = ref([])
|
||||
const otherPricesOptions = ref({
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
fontFamily: "'IranSans', sans-serif"
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val) => `${usePrice(val)} `,
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'قیمت',
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
formatter: (val) => `${usePrice(val)} `,
|
||||
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['henzagold.com', 'milli.gold', 'tala.ir', 'samin.gold'],
|
||||
labels: {
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (val) => `${usePrice(val)} `,
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
othersPrices.value = await getOthersPrices()
|
||||
|
||||
const prices = [
|
||||
othersPrices.value?.henzagold ?? 0,
|
||||
othersPrices.value?.milli ?? 0,
|
||||
othersPrices.value?.tala_ir ?? 0,
|
||||
othersPrices.value?.price_last ?? 0
|
||||
]
|
||||
|
||||
otherPricesSeries.value = [
|
||||
{
|
||||
name: 'Prices',
|
||||
data: prices
|
||||
}
|
||||
]
|
||||
const minPrice = Math.min(...prices)
|
||||
const maxPrice = Math.max(...prices)
|
||||
const offset = (maxPrice - minPrice) * 0.05
|
||||
|
||||
otherPricesOptions.value = {
|
||||
...otherPricesOptions.value,
|
||||
yaxis: {
|
||||
...otherPricesOptions.value.yaxis,
|
||||
min: minPrice - offset,
|
||||
max: maxPrice + offset
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error fetching prices:', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
const selection = ref('DAILY')
|
||||
const chartRef = ref<ApexCharts | null>(null)
|
||||
const priceChartSeries = ref<{ data: [number, number][] }[]>([{ data: [] }])
|
||||
|
||||
const toPersianNumber = (num) => {
|
||||
return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
|
||||
}
|
||||
|
||||
const priceChartOptions = ref({
|
||||
chart: {
|
||||
id: 'نوسانات قیمت',
|
||||
type: 'area',
|
||||
height: 350,
|
||||
zoom: {
|
||||
autoScaleYaxis: true
|
||||
},
|
||||
events: {
|
||||
mounted(chart) {
|
||||
chartRef.value = chart
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: (val) => toPersianNumber(usePrice(val)),
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
formatter: (val) => toPersianNumber(usePrice(val)),
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
rotate: -45,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
formatter: (val) => {
|
||||
return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
formatter: (val) => {
|
||||
return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
|
||||
}
|
||||
},
|
||||
formatter: (val) => toPersianNumber(`${usePrice(val)} `),
|
||||
style: {
|
||||
fontFamily: "'IranSans', sans-serif",
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.9,
|
||||
stops: [0, 100]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fetchPrices = async () => {
|
||||
try {
|
||||
const response = await getAllPrices()
|
||||
const data = response.data.prices
|
||||
|
||||
const selectedData = data[selection.value] || []
|
||||
priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value])
|
||||
|
||||
chartRef.value?.updateOptions({ series: priceChartSeries.value })
|
||||
} catch (error) {
|
||||
console.error('خطا در دریافت دادهها', error)
|
||||
}
|
||||
}
|
||||
|
||||
const updateData = (timeline) => {
|
||||
selection.value = timeline
|
||||
fetchPrices()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPrices()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/*.items-dashboard > div:not(:last-child) {
|
||||
border-left: 1px solid black;
|
||||
}*/
|
||||
.single-border {
|
||||
border-right: 1px solid black !important;
|
||||
}
|
||||
|
||||
@keyframes swingParent {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
to {
|
||||
left: 100%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.animate.right.move {
|
||||
right: 100%;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.dashboard-tabs-class div {
|
||||
@apply text-gray-400 w-25 text-center py-2 cursor-pointer;
|
||||
}
|
||||
|
||||
.selected_item {
|
||||
@apply ! bg- [ #0A1B37 ] ! text-white rounded-lg;
|
||||
}
|
||||
|
||||
//chart
|
||||
</style>
|
||||
Reference in New Issue
Block a user