Skip to content

T
TC
Commit 6ebb984c by qlintonger xeno
Options

feat: 添加重设

parent 499b90b8
Showing with 661 additions and 216 deletions
src/App.vue
<script lang="ts" setup>
import CheckSlice from "./views/CheckSlice/index.vue"
</script>
<template>
<div class="w-full h-full">
<check-slice/>
</div>
</template>
<style scoped></style>
src/lib/Table2Chart/Components/global-echarts.vue deleted 100644 → 0
<template>
<div ref="chartRef" class="echarts"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ECBasicOption } from "echarts/types/dist/shared";
import { isNumber } from "lodash";
import {
computed,
getCurrentInstance,
nextTick,
onMounted,
onUnmounted,
ref,
watch,
} from "vue";
interface Props {
options?: ECBasicOption;
width?: string | number | Function;
height?: string | number | Function;
}
const ps = withDefaults(defineProps<Props>(), {
options: () => {
return {};
},
width: "100%",
height: "100%",
});
const getWidth = computed(() => {
let targetWidth = typeof ps.width === "function" ? ps.width() : ps.width;
if (isNumber(targetWidth)) {
return targetWidth + "px";
} else {
return targetWidth;
}
});
const getHeight = computed(() => {
let targetHeight = typeof ps.height === "function" ? ps.height() : ps.height;
if (isNumber(targetHeight)) {
return targetHeight + "px";
} else {
return targetHeight;
}
});
const chartRef = ref(null);
let chartInstance = null as unknown as echarts.ECharts;
const es = defineEmits(["node-inserted"]);
onMounted(() => {
const el = chartRef.value;
const inst = getCurrentInstance();
if (el) {
if (ps.options!.series?.find((item: any) => item.type === "radar")) {
console.log('the ps -radar', ps.options)
}
nextTick(() => {
chartInstance = echarts.init(el);
setOptions(ps.options);
es("node-inserted", { uid: inst!.uid, f: () => chartInstance });
chartInstance?.resize();
});
}
});
onUnmounted(() => {
chartInstance?.dispose();
});
watch(
() => ps.options,
(newVal) => {
setOptions(newVal);
},
{
deep: true,
}
);
const setOptions = (options: ECBasicOption) => {
chartInstance.setOption(options);
};
defineExpose({
getChartInstance: () => chartInstance,
getDom: () => chartRef.value,
});
</script>
<style scoped>
.echarts {
width: v-bind(getWidth);
height: v-bind(getHeight);
}
</style>
src/lib/Table2Chart/ScreenChart.vue
<script lang="ts" setup>
import {ScreenChartProps} from "./types/ScreenChart.typing";
import {onMounted, onUnmounted} from "vue";
import {onMounted, onUnmounted, provide} from "vue";
import {onNew, onRemoved} from "./funcs/hooksFunc";
import {containerRef} from "./funcs/hooksFunc";
import {
getContainerStyle,
mapWidth,
mapHeight,
mapWidthStyle,
mapHeightStyle,
getSingleGridStyle,
geoContainer
} from "./funcs/mapGEOStyle.ts";
const props = withDefaults(defineProps<ScreenChartProps>(), {
gap: 16,
containerPadding: 12,
gridItemPadding: 12,
});
const props = defineProps<ScreenChartProps>();
onUnmounted(function () {
onRemoved();
});
onMounted(function () {
console.log("passing props here", props);
geoContainer.value.designGraphWidth = props.options.designWidth
geoContainer.value.designGraphHeight = props.options.designHeight
onNew();
});
defineExpose({
mapHeight, mapWidth, mapWidthStyle, mapHeightStyle
})
provide('map', {mapHeight, mapWidth, mapWidthStyle, mapHeightStyle})
</script>
<template>
<section ref="containerRef" :class="props.options.containerClass || ''" :style="getContainerStyle(props)">
<div v-for="(q, w) in props.options.layout" :key="w" :style="getSingleGridStyle(q, props.options.layout, props)" :class="q.containerClass || ''">
<component :is="q.component()"/>
</div>
</section>
</template>
src/lib/Table2Chart/const/chartCompType.ts deleted 100644 → 0
export enum ChartCompType {
EChartsBar,
EChartsPieCenterText,
EchartsPieBottomCenterText,
BottomCenterText,
SimpleTable,
SimpleLine,
SimpleRadar,
DIY
}
src/lib/Table2Chart/const/staticConsts.ts deleted 100644 → 0
export const baseEchartOptions = (item: any) => ({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
top: "5%",
},
xAxis: {
type: "category",
data: item.category,
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
});
src/lib/Table2Chart/directive/number-animate.ts deleted 100644 → 0
import {Directive, DirectiveBinding, ref} from 'vue';
import gsap from 'gsap';
interface NumberAnimationOptions {
value?: number;
decimals?: number;
ease?: string;
formatter?: (value: number) => string;
}
type NumberAnimationBinding = number | NumberAnimationOptions;
export const vNumberAnimation: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding<NumberAnimationBinding>) {
const target = ref(0);
const duration = parseFloat(binding.arg as string) || 1;
const options = typeof binding.value === 'number'
? { value: binding.value }
: binding.value || {};
el.textContent = target.value.toString();
// @ts-ignore
el._animation = gsap.to(target, {
value: options.value || parseFloat(el.dataset.value || '0'),
duration,
ease: options.ease || 'power1.out',
onUpdate: () => {
el.textContent = options.formatter
? options.formatter(target.value)
: target.value.toFixed(options.decimals || 0);
}
});
},
updated(el: HTMLElement, binding: DirectiveBinding<NumberAnimationBinding>) {
// @ts-ignore
if (el._animation) {
// @ts-ignore
el._animation.kill();
}
// @ts-ignore
const target = ref(parseFloat(el.textContent));
const duration = parseFloat(binding.arg as string) || 1;
const options = typeof binding.value === 'number'
? { value: binding.value }
: binding.value || {};
// @ts-ignore
el._animation = gsap.to(target, {
value: options.value || parseFloat(el.dataset.value || '0'),
duration,
ease: options.ease || 'power1.out',
onUpdate: () => {
el.textContent = options.formatter
? options.formatter(target.value)
: target.value.toFixed(options.decimals || 0);
}
});
},
unmounted(el: HTMLElement) {
// @ts-ignore
if (el._animation) {
// @ts-ignore
el._animation.kill();
}
}
};
\ No newline at end of file
src/lib/Table2Chart/funcs/hooksFunc.ts
import {containerRef, startNow,} from "./procedureFunc.ts";
import {nextTick} from "vue";
import {nextTick, ref} from "vue";
import {geoContainer} from "./mapGEOStyle.ts";
let ro: ResizeObserver | null = null;
export const containerRef = ref();
const startNow = function calcGEO() {
const rect = containerRef.value.getBoundingClientRect();
geoContainer.value.width = rect.width;
geoContainer.value.height = rect.height;
};
export function onRemoved() {
if (ro) {
ro.disconnect();
......@@ -16,7 +25,7 @@ export function onNew() {
ro = new ResizeObserver(function () {
startNow();
});
ro.observe(containerRef.value, { box: "border-box" });
ro.observe(containerRef.value);
startNow();
}
}).then(function () {
......
src/lib/Table2Chart/funcs/mapGEOStyle.ts
import {ref} from "vue";
import {ScreenChartProps, SingleLayoutConfig} from "../types/ScreenChart.typing.ts";
import {containerRef} from "./hooksFunc.ts";
export function getContainerStyle(props: ScreenChartProps) {
const { containerStyle} = props.options
return {
...(containerStyle || {}),
position: 'relative',
width: 'auto',
height: props.options.designHeight + 'px',
}
}
export function getSingleGridStyle(props: SingleLayoutConfig, allLayout: SingleLayoutConfig[], compProps: ScreenChartProps) {
const maxSpanColumn = allLayout.map(v => v.x + v.w).sort((a, b) => b - a)[0];
const columnWidth = (geoContainer.value.width - (maxSpanColumn - 1) * mapWidth(compProps.options.gap)) / maxSpanColumn
const left = `${props.x * mapWidth(compProps.options.gap) + props.x * columnWidth}px`
const width = `${props.w * columnWidth}px`
const top = `${mapHeight(props.y)}px`
const height = `${mapHeight(props.h)}px`
return {
// @ts-ignore
...(props.containerStyle || {}),
position: 'absolute',
zIndex: 1,
left, width, top, height
}
}
export const geoContainer = ref({
width: 0, height: 0, designGraphWidth: 1920, designGraphHeight: 1080,
contentWidth: 0, contentHeight: 0, paddingAll: 0
})
export function mapWidth(designWidth: number) {
if (!geoContainer.value.width) return designWidth
return geoContainer.value.width / geoContainer.value.designGraphWidth * designWidth
}
......
src/lib/Table2Chart/funcs/procedureFunc.ts deleted 100644 → 0
import {ref} from "vue";
export const containerRef = ref();
export const startNow = function calcGEO() {
};
src/lib/Table2Chart/types/ScreenChart.typing.ts
export type ScreenChartProps = {
import {VNode} from "vue";
export type SingleLayoutConfig = {
x: number;
y: number;
w: number;
h: number;
component: () => VNode,
containerClass?: string | object | Array<string>;
containerStyle?: string | Record<string, any>;
}
export type LayoutConfig = Array<SingleLayoutConfig>
export type ScreenChartProps = {
options: {
designWidth: number;
designHeight: number;
containerClass?: string | Record<string, any> | string[];
containerStyle?: Record<string, any>;
layout: LayoutConfig,
gap: number
}
};
src/views/CheckSlice/assets/all.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1880)">
<path d="M8 8.8C8 6.14903 10.149 4 12.8 4H27.2C29.851 4 32 6.14903 32 8.8V23.2C32 25.851 29.851 28 27.2 28H12.8C10.149 28 8 25.851 8 23.2V8.8Z" fill="#4B8FE2"/>
<path d="M18.75 12.25H16.6667C16.4365 12.25 16.25 12.4365 16.25 12.6667V14.75C16.25 14.9801 16.4365 15.1667 16.6667 15.1667H18.75C18.9801 15.1667 19.1667 14.9801 19.1667 14.75V12.6667C19.1667 12.4365 18.9801 12.25 18.75 12.25Z" fill="white" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
<path d="M18.75 16.8333H16.6667C16.4365 16.8333 16.25 17.0199 16.25 17.25V19.3333C16.25 19.5635 16.4365 19.75 16.6667 19.75H18.75C18.9801 19.75 19.1667 19.5635 19.1667 19.3333V17.25C19.1667 17.0199 18.9801 16.8333 18.75 16.8333Z" fill="white" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
<path d="M23.3333 12.25H21.25C21.0199 12.25 20.8333 12.4365 20.8333 12.6667V14.75C20.8333 14.9801 21.0199 15.1667 21.25 15.1667H23.3333C23.5635 15.1667 23.75 14.9801 23.75 14.75V12.6667C23.75 12.4365 23.5635 12.25 23.3333 12.25Z" fill="white" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
<path d="M23.3333 16.8333H21.25C21.0199 16.8333 20.8333 17.0199 20.8333 17.25V19.3333C20.8333 19.5635 21.0199 19.75 21.25 19.75H23.3333C23.5635 19.75 23.75 19.5635 23.75 19.3333V17.25C23.75 17.0199 23.5635 16.8333 23.3333 16.8333Z" fill="white" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_d_409_1880" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1880"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1880" result="shape"/>
</filter>
</defs>
</svg>
src/views/CheckSlice/assets/higher.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1939)">
<path d="M8 23.2C8 25.851 10.149 28 12.8 28H27.2C29.851 28 32 25.851 32 23.2V8.8C32 6.14903 29.851 4 27.2 4H12.8C10.149 4 8 6.14903 8 8.8V23.2Z" fill="#9C67FF"/>
<path d="M22.5 17.5833L20 15.0833L17.5 17.5833" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5 13.4167H22.5" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_d_409_1939" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1939"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1939" result="shape"/>
</filter>
</defs>
</svg>
src/views/CheckSlice/assets/lower.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1928)">
<path d="M8 8.8C8 6.14903 10.149 4 12.8 4H27.2C29.851 4 32 6.14903 32 8.8V23.2C32 25.851 29.851 28 27.2 28H12.8C10.149 28 8 25.851 8 23.2V8.8Z" fill="#FF67CC"/>
<path d="M22.5 14.4167L20 16.9167L17.5 14.4167" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5 18.5833H22.5" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_d_409_1928" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1928"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1928" result="shape"/>
</filter>
</defs>
</svg>
src/views/CheckSlice/assets/non.plan.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1906)">
<path d="M8 8.8C8 6.14903 10.149 4 12.8 4H27.2C29.851 4 32 6.14903 32 8.8V23.2C32 25.851 29.851 28 27.2 28H12.8C10.149 28 8 25.851 8 23.2V8.8Z" fill="#F5B763"/>
<path d="M14.9231 20.2692C14.9231 20.2055 14.9748 20.1538 15.0385 20.1538H24.9616C25.0253 20.1538 25.0769 20.2055 25.0769 20.2692C25.0769 20.3329 25.0253 20.3846 24.9616 20.3846H15.0385C14.9748 20.3846 14.9231 20.3329 14.9231 20.2692Z" fill="white"/>
<path d="M15.8457 15.3078C15.8457 14.9254 16.1557 14.6155 16.538 14.6155C16.9204 14.6155 17.2303 14.9254 17.2303 15.3078V18.5386C17.2303 18.9209 16.9204 19.2309 16.538 19.2309C16.1557 19.2309 15.8457 18.9209 15.8457 18.5386V15.3078Z" fill="white"/>
<path d="M20.4619 13.923C20.4619 13.5407 20.7719 13.2307 21.1542 13.2307C21.5366 13.2307 21.8465 13.5407 21.8465 13.923V18.5384C21.8465 18.9208 21.5366 19.2307 21.1542 19.2307C20.7719 19.2307 20.4619 18.9208 20.4619 18.5384V13.923Z" fill="white"/>
<path d="M19.5381 18.5384C19.5381 18.9208 19.2281 19.2307 18.8458 19.2307C18.4634 19.2307 18.1534 18.9208 18.1534 18.5384L18.1534 12.5384C18.1534 12.1561 18.4634 11.8461 18.8458 11.8461C19.2281 11.8461 19.5381 12.1561 19.5381 12.5384L19.5381 18.5384Z" fill="white"/>
<path d="M24.1543 18.5384C24.1543 18.9208 23.8443 19.2307 23.462 19.2307C23.0796 19.2307 22.7697 18.9208 22.7697 18.5384L22.7697 17.1538C22.7697 16.7714 23.0796 16.4615 23.462 16.4615C23.8443 16.4615 24.1543 16.7714 24.1543 17.1538L24.1543 18.5384Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_409_1906" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1906"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1906" result="shape"/>
</filter>
</defs>
</svg>
src/views/CheckSlice/assets/normal.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1893)">
<path d="M8 8.8C8 6.14903 10.149 4 12.8 4H27.2C29.851 4 32 6.14903 32 8.8V23.2C32 25.851 29.851 28 27.2 28H12.8C10.149 28 8 25.851 8 23.2V8.8Z" fill="#0ED400"/>
<g clip-path="url(#clip0_409_1893)">
<path d="M20 20.1667C22.3012 20.1667 24.1667 18.3012 24.1667 16C24.1667 13.6988 22.3012 11.8333 20 11.8333C17.6989 11.8333 15.8334 13.6988 15.8334 16C15.8334 18.3012 17.6989 20.1667 20 20.1667Z" fill="white" stroke="white" stroke-width="1.33333" stroke-linejoin="round"/>
<path d="M21.4584 14.75V14.9583" stroke="#0ED400" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.5416 14.75V14.9583" stroke="#0ED400" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.5416 17.4583H21.4583" stroke="#0ED400" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<filter id="filter0_d_409_1893" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1893"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1893" result="shape"/>
</filter>
<clipPath id="clip0_409_1893">
<rect width="10" height="10" fill="white" transform="translate(15 11)"/>
</clipPath>
</defs>
</svg>
src/views/CheckSlice/assets/top.svg 0 → 100644
<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3645 0.255291C18.3792 0.19236 18.4894 0.216484 18.5251 0.196556C17.8162 0.0597372 17.0954 -0.0059639 16.3734 0.000424704C16.3734 0.000424704 18.1198 0.209142 18.3645 0.255291Z" fill="#E60012"/>
<path d="M19.3689 0.862828L19.2639 0.915274C18.6044 0.721237 18.1487 0.610058 17.5837 0.495733C18.1923 0.539074 18.7926 0.662506 19.3689 0.862828Z" fill="#E60012"/>
<path d="M10.7254 0.916875C10.7075 0.861286 10.6529 0.879122 10.6204 0.863389C11.118 0.719554 11.6271 0.618494 12.142 0.561318C11.6631 0.679838 11.2063 0.780524 10.7254 0.916875Z" fill="#E60012"/>
<path d="M11.671 0.250028L11.566 0.192341C12.0152 0.117207 12.4694 0.0761803 12.9248 0.0696211C12.4995 0.129405 12.0837 0.17556 11.671 0.250028Z" fill="#E60012"/>
<path d="M19.0319 1.20151L18.9774 1.25396C18.6984 1.13963 18.5148 1.10083 18.283 1.02426C18.5391 1.05162 18.7907 1.11118 19.0319 1.20151Z" fill="#E60012"/>
<path d="M10.8882 1.30934L10.8295 1.25166C11.065 1.17454 11.3063 1.11632 11.5511 1.07755C11.3235 1.15516 11.1127 1.216 10.8882 1.30934Z" fill="#E60012"/>
<path d="M11.6674 0.25047C9.09144 0.636715 6.69459 1.798 4.79633 3.57952C3.84749 4.46958 3.21115 5.64139 2.9817 6.92114C2.85568 7.69656 2.89991 8.49006 3.11133 9.24671C3.32276 10.0034 3.69632 10.7051 4.20616 11.3032C5.36574 12.7011 6.87149 13.7714 8.57367 14.4078C9.59335 14.8274 10.6655 15.1022 11.6842 15.5238C12.7169 15.895 13.6559 16.487 14.4355 17.2586C14.6454 17.4977 14.8321 17.7562 14.9932 18.0305C16.0124 16.605 17.5138 15.5962 19.2199 15.1903C20.5498 14.7903 21.8372 14.2609 23.0634 13.6096C24.3595 12.9085 25.4551 11.8887 26.2464 10.6467C26.8399 9.74387 27.1398 8.68011 27.1052 7.60068C27.0706 6.52126 26.7032 5.47882 26.0532 4.61578C24.9634 3.11199 23.4637 1.95278 21.7329 1.27624C20.6539 0.805126 19.5227 0.463615 18.363 0.258864C18.3557 0.209568 18.3966 0.186489 18.4891 0.19488C21.7461 0.579517 24.8184 1.91065 27.3249 4.02318C28.5702 5.05549 29.4498 6.46063 29.8337 8.03082C30.0542 8.98728 30.0555 9.98116 29.8372 10.9381C29.619 11.8951 29.187 12.7905 28.5735 13.5572C27.5542 14.8384 26.2658 15.8807 24.7993 16.6104C23.7492 17.1757 22.6308 17.5607 21.5439 18.0201C20.0215 18.6188 18.6285 19.5043 17.441 20.6285C16.2722 21.7663 15.4506 23.2121 15.0719 24.7977C15.0551 24.868 15.0289 24.9362 14.9911 25.0557C14.7443 23.9581 14.2956 22.9157 13.6679 21.9816C12.5265 20.392 10.9791 19.1373 9.18695 18.3483C8.19352 17.869 7.14128 17.5323 6.14156 17.0729C4.7099 16.4523 3.39699 15.5882 2.26131 14.519C0.955861 13.3626 0.151893 11.7444 0.0194125 10.0067C-0.113068 8.26891 0.436324 6.54781 1.55141 5.20732C2.61827 3.90401 3.95159 2.84339 5.46212 2.09644C7.3705 1.12329 9.42971 0.478975 11.5529 0.190686C11.6107 0.180198 11.6758 0.208516 11.6674 0.25047Z" fill="#E60012"/>
<path d="M10.7218 0.921454C9.2164 1.34743 7.84212 2.14408 6.72503 3.23836C5.88674 4.03013 5.37666 5.10742 5.29579 6.25694C5.24438 7.39013 5.64334 8.49771 6.40579 9.33846C7.35725 10.3858 8.55204 11.1833 9.88488 11.6606C11.0328 12.0804 12.2162 12.3963 13.4207 12.6046C13.9511 12.705 14.4501 12.9293 14.8772 13.2591C14.9423 13.3104 14.9927 13.3639 15.0873 13.2884C15.736 12.8205 16.4965 12.5311 17.2925 12.4493C19.0446 12.1666 20.7188 11.5237 22.2093 10.5614C23.2526 9.91752 24.0517 8.94521 24.4807 7.7977C24.7054 7.16073 24.768 6.47797 24.663 5.81083C24.558 5.14368 24.2885 4.51307 23.879 3.9757C22.951 2.73589 21.6815 1.793 20.2256 1.26233C19.9105 1.13123 19.5818 1.03054 19.2594 0.916213C19.2594 0.861672 19.3141 0.843839 19.3645 0.863767C21.2382 1.31603 22.9581 2.2571 24.3484 3.59077C24.8832 4.0704 25.3054 4.66196 25.5851 5.32328C25.8647 5.9846 25.9948 6.69939 25.9661 7.41669C25.9375 8.13399 25.7507 8.83615 25.4191 9.47309C25.0876 10.11 24.6194 10.6661 24.0481 11.1016C22.7099 12.1935 21.1668 13.0072 19.5094 13.495C18.7092 13.7552 17.8932 13.9702 17.0941 14.2292C16.2505 14.4155 15.5038 14.9025 14.9938 15.599C14.4291 14.8555 13.6107 14.3449 12.694 14.1642C11.4528 13.8255 10.2299 13.4232 9.03007 12.9591C7.74391 12.4485 6.56756 11.6965 5.56462 10.7439C4.65117 9.91097 4.09768 8.756 4.02106 7.523C3.94444 6.29 4.35071 5.07554 5.15403 4.13618C6.1373 2.95612 7.40093 2.04093 8.8295 1.4742C9.40715 1.22165 10.0041 1.01577 10.6147 0.858526C10.6714 0.853281 10.7281 0.816569 10.7218 0.921454Z" fill="#E60012"/>
<path d="M14.7943 25.8695C14.0152 24.8296 13.1037 23.8957 12.0829 23.0911C11.0999 22.2653 9.92789 21.695 8.671 21.4308C7.82258 21.2391 6.93482 21.3278 6.14122 21.6835C5.87984 21.7948 5.64807 21.9656 5.46431 22.1821C5.28056 22.3985 5.14988 22.6548 5.08268 22.9306C5.0068 23.2151 5.03387 23.5172 5.15912 23.7837C5.28438 24.0502 5.49977 24.264 5.76737 24.3874C6.02347 24.5026 6.3119 24.5245 6.58245 24.4491C6.853 24.3738 7.08854 24.2062 7.24807 23.9753C7.41228 23.7372 7.48715 23.4489 7.45949 23.1611C7.43182 22.8733 7.30341 22.6045 7.09684 22.402C7.04107 22.3523 6.98251 22.3056 6.92147 22.2625C7.29087 22.4014 7.61817 22.6331 7.8718 22.9352C8.12543 23.2373 8.29682 23.5996 8.36944 23.9871C8.44205 24.3747 8.41344 24.7743 8.28637 25.1476C8.15929 25.5208 7.93805 25.8551 7.64397 26.1181C7.11041 26.5895 6.44614 26.888 5.73903 26.9742C5.03191 27.0603 4.31527 26.93 3.6839 26.6006C3.09401 26.333 2.58237 25.9193 2.19754 25.3988C1.81271 24.8782 1.56747 24.268 1.48509 23.6262C1.40271 22.9844 1.48594 22.3322 1.72686 21.7316C1.96778 21.1309 2.3584 20.6017 2.86165 20.1942C3.71921 19.4852 4.7845 19.0744 5.89654 19.0237C6.98308 18.9601 8.07089 19.1248 9.08978 19.5071C10.1087 19.8893 11.036 20.4807 11.8119 21.243C13.1863 22.4459 14.2034 24.0028 14.7523 25.7436C14.7723 25.7824 14.7828 25.8265 14.7943 25.8695Z" fill="#E60012"/>
<path d="M22.8893 22.2903C22.6906 22.4899 22.5594 22.7466 22.5142 23.0244C22.469 23.3022 22.512 23.5872 22.6372 23.8394C22.7749 24.1113 23.0116 24.3203 23.2987 24.4234C23.5858 24.5264 23.9015 24.5155 24.1809 24.3932C24.4817 24.26 24.7184 24.0146 24.8405 23.7095C24.9625 23.4044 24.9603 23.0636 24.8341 22.7601C24.6792 22.3849 24.4228 22.0601 24.0936 21.8221C23.7644 21.5841 23.3754 21.4422 22.9702 21.4124C21.7015 21.2246 20.407 21.4842 19.3094 22.1466C17.7787 23.0127 16.4502 24.1944 15.4123 25.613C15.3488 25.7031 15.2786 25.7883 15.2023 25.8679C15.2904 25.4363 15.4374 25.0188 15.6391 24.6271C16.1835 23.3938 16.9778 22.2864 17.9718 21.3748C18.9659 20.4632 20.1382 19.7672 21.4149 19.3304C22.2206 19.0389 23.0788 18.9198 23.9336 18.9809C24.7884 19.0419 25.6208 19.2818 26.3768 19.6849C26.8362 19.9122 27.2454 20.2292 27.5803 20.617C27.9151 21.0048 28.1688 21.4557 28.3264 21.943C28.484 22.4303 28.5423 22.9442 28.4979 23.4543C28.4534 23.9645 28.3071 24.4606 28.0676 24.9134C27.8282 25.3662 27.5004 25.7666 27.1035 26.0908C26.7066 26.415 26.2488 26.6566 25.7569 26.8012C25.2651 26.9459 24.7493 26.9908 24.2398 26.9332C23.7303 26.8756 23.2375 26.7166 22.7906 26.4657C22.444 26.2791 22.1501 26.0084 21.9359 25.6786C21.7216 25.3487 21.5938 24.9703 21.5645 24.5782C21.5351 24.1861 21.6049 23.7929 21.7676 23.4349C21.9303 23.0768 22.1806 22.7655 22.4955 22.5294C22.6152 22.4403 22.7559 22.37 22.8893 22.2903Z" fill="#E60012"/>
<path d="M19.0326 1.20101C20.4403 1.60882 21.6964 2.42199 22.644 3.53889C23.2713 4.2582 23.5979 5.19075 23.5562 6.14376C23.5146 7.09676 23.1079 7.99735 22.4203 8.65937C21.197 9.88953 19.6319 10.7241 17.9278 11.0549C17.2148 11.2227 16.4776 11.2574 15.7666 11.4378L15.6616 11.4619C15.4022 11.5217 15.1964 11.8195 14.9959 11.8038C14.7953 11.7881 14.5821 11.5227 14.3238 11.4556C13.5887 11.2647 12.8221 11.2248 12.0807 11.0539C10.4596 10.74 8.96109 9.97292 7.75936 8.84186C7.34388 8.48315 7.01091 8.03902 6.78324 7.53985C6.55557 7.04069 6.43858 6.49828 6.44028 5.94977C6.44198 5.40125 6.56231 4.85958 6.79306 4.36183C7.02381 3.86408 7.35952 3.422 7.77721 3.06586C8.6432 2.23518 9.68874 1.61436 10.8331 1.25135C10.8919 1.23037 10.9035 1.25764 10.8919 1.30904C9.9395 1.68325 9.083 2.2656 8.38523 3.01342C7.76657 3.64368 7.41735 4.48939 7.41127 5.372C7.4052 6.2546 7.74276 7.10503 8.35269 7.74372C9.18736 8.67359 10.2665 9.35094 11.4674 9.69877C14.1307 10.6012 17.0394 10.4472 19.5923 9.26875C20.2863 8.95353 20.9155 8.51214 21.4479 7.96712C21.8093 7.64339 22.0983 7.24725 22.2962 6.8045C22.4941 6.36174 22.5964 5.88232 22.5964 5.39745C22.5964 4.91258 22.4941 4.43316 22.2962 3.99041C22.0983 3.54765 21.8093 3.1515 21.4479 2.82777C20.7442 2.13868 19.9049 1.60296 18.9832 1.2545C18.9654 1.2052 18.9738 1.17689 19.0326 1.20101Z" fill="#E60012"/>
<path d="M14.9998 7.38066C14.4278 7.38502 13.8675 7.21946 13.39 6.90502C12.9125 6.59059 12.5393 6.14146 12.3179 5.61472C12.0965 5.08798 12.0369 4.5074 12.1466 3.94674C12.2564 3.38609 12.5305 2.87067 12.9342 2.46598C13.3379 2.0613 13.853 1.78561 14.4139 1.67395C14.9748 1.56229 15.5564 1.61969 16.0846 1.83887C16.6128 2.05805 17.0638 2.42911 17.3804 2.90491C17.6969 3.3807 17.8648 3.93975 17.8625 4.51101C17.8625 5.27028 17.5612 5.99859 17.0247 6.53646C16.4881 7.07432 15.76 7.37788 14.9998 7.38066Z" fill="#E60012"/>
</svg>
src/views/CheckSlice/assets/undergo.dj.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_409_1913)">
<path d="M8 8.8C8 6.14903 10.149 4 12.8 4H27.2C29.851 4 32 6.14903 32 8.8V23.2C32 25.851 29.851 28 27.2 28H12.8C10.149 28 8 25.851 8 23.2V8.8Z" fill="#FF6767"/>
<path d="M23.3333 14.4162V12.25C23.3333 12.0199 23.1468 11.8333 22.9166 11.8333H17.0833C16.8532 11.8333 16.6666 12.0199 16.6666 12.25V19.75C16.6666 19.9801 16.8532 20.1667 17.0833 20.1667H19.1666" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.3334 13.9167H21.0417" stroke="white" stroke-width="0.8" stroke-linecap="round"/>
<path d="M18.3334 15.375H19.375" stroke="white" stroke-width="0.8" stroke-linecap="round"/>
<path d="M20 18.0833C20 19.2339 20.9327 20.1667 22.0833 20.1667C23.2339 20.1667 24.1666 19.2339 24.1666 18.0833C24.1666 16.9327 23.2339 16 22.0833 16C20.9327 16 20 16.9327 20 18.0833Z" fill="white"/>
<path d="M22.0834 18.5V19.125" stroke="#FF6767" stroke-width="0.5" stroke-linecap="round"/>
<path d="M22.0833 17.6667C22.3134 17.6667 22.5 17.4801 22.5 17.25C22.5 17.0199 22.3134 16.8333 22.0833 16.8333C21.8532 16.8333 21.6666 17.0199 21.6666 17.25C21.6666 17.4801 21.8532 17.6667 22.0833 17.6667Z" fill="#FF6767"/>
</g>
<defs>
<filter id="filter0_d_409_1913" x="0" y="0" width="40" height="40" 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 dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.211765 0 0 0 0 0.45098 0 0 0 0 0.909804 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_409_1913"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_409_1913" result="shape"/>
</filter>
</defs>
</svg>
src/views/CheckSlice/const/class.const.ts 0 → 100644
export const classConst = {
flex: 'flex',
flexCol: 'flex-col',
flexRow: 'flex-row',
flexCenter: 'flex items-center justify-center',
flexBetween: 'flex items-center justify-between',
flexAround: 'flex items-center justify-around',
flexEnd: 'flex items-center justify-end',
flexStart: 'flex items-center justify-start',
flexWrap: 'flex-wrap',
flexNoWrap: 'flex-nowrap',
flexColCenter:'flex flex-col items-center justify-center',
flexItemsCenter: 'items-center',
flexJustifyCenter: 'justify-center',
flexJustifyBetween: 'justify-between',
flexJustifyAround: 'justify-around',
flexJustifyEnd: 'justify-end',
flexJustifyStart: 'justify-start',
}
\ No newline at end of file
src/views/CheckSlice/const/props.all.ts 0 → 100644
import {h, ref} from "vue"
import AllDJ from "../assets/all.dj.svg?url"
import HigherDJ from "../assets/higher.dj.svg?url"
import LowerDJ from "../assets/lower.dj.svg?url"
import NonPlanDJ from "../assets/non.plan.dj.svg?url"
import NormalDJ from "../assets/normal.dj.svg?url"
import UnderGoDJ from "../assets/undergo.dj.svg?url"
import WhichNumberBox from "../widgets/WhichNumberBox.vue";
const numberWhichContainerStyle = {
background: '#fff',
border: '1px solid #eaecef',
borderRadius: '8px',
}
export const numberBoxConf = ref([
{
imgUrl: AllDJ, title: "全部定检", value: 99
},
{
imgUrl: HigherDJ, title: "高级别定检", value: 99
},
{
imgUrl: LowerDJ, title: "低级别定检", value: 99
},
{
imgUrl: NormalDJ, title: "正常定检", value: 99
},
{
imgUrl: NonPlanDJ, title: "非计划预警", value: 99
},
{
imgUrl: UnderGoDJ, title: "正在非计划", value: 99
}
])
export const propsAll = {
designWidth: 1920,
designHeight: 925 + 352,
containerClass: 'w-full',
gap: 24,
layout: [
{
x: 0,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[0]})
},
{
x: 1,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[1]})
},
{
x: 2,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[2]})
},
{
x: 3,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[3]})
},
{
x: 4,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[4]})
},
{
x: 5,
w: 1,
y: 0,
h: 151,
containerStyle: numberWhichContainerStyle,
component: () => h(WhichNumberBox, {ps: numberBoxConf.value[5]})
},
]
}
\ No newline at end of file
src/views/CheckSlice/const/searchBar.category.ts 0 → 100644
import {ref} from "vue"
export const allAirlines = ref([
{
label: '全部航司',
value: 'all'
},
{
label: '海南航空',
value: 'china'
},
{
label: '首都航空',
value: 'america'
},
{
label: '长安航空',
value: 'japan'
},
{
label: '天津航空',
value: 'korea'
},
{
label: '福州航空',
value: 'england'
},
{
label: '乌鲁木齐航空',
value: 'france'
},
{
label: '上海航空',
value: 'germany'
},
])
export const airlineSelections = ref<string | null>(null)
export const allBase = ref([
{
label: '全部基站',
value: 'all'
},
{
label: '上海',
value: 'shanghai'
},
{
label: '北京',
value: 'beijing'
},
{
label: '广州',
value: 'guangzhou'
},
{
label: '深圳',
value: 'shenzhen'
},
{
label: '杭州',
value: 'hangzhou'
}
]);
export const baseNow = ref<string | null>(null)
\ No newline at end of file
src/views/CheckSlice/const/top.category.ts 0 → 100644
export enum TopCategory {
All,
Current,
Plan,
UsageRate,
NonPlan,
FullProcedure,
DataMonitor,
AV
}
export const allTopCategory = [
{type: TopCategory.All, name: '定检总览'},
{type: TopCategory.Current, name: '当前定检'},
{type: TopCategory.Plan, name: '定检计划'},
{type: TopCategory.UsageRate, name: '飞机可用率'},
{type: TopCategory.NonPlan, name: '非计划'},
{type: TopCategory.FullProcedure, name: '全流程'},
{type: TopCategory.DataMonitor, name: '数据监控'},
{type: TopCategory.AV, name: '航材监控'}
]
import {ref} from "vue"
export const topIndex = ref(TopCategory.All)
\ No newline at end of file
src/views/CheckSlice/index.vue 0 → 100644
<template>
<main class="w-full h-full flex flex-col">
<top-bar />
<div class="w-full flex-1 overflow-scroll" style="background: #f7f8fa" :style="{
padding: `${mapWidth(24)}px`
}">
<screen-chart ref="chart" :options="propsAll"/>
</div>
</main>
</template>
<script setup lang="ts">
import {ref, provide} from "vue"
import ScreenChart from "../../lib/Table2Chart/ScreenChart.vue";
import {propsAll} from "./const/props.all.ts";
import TopBar from "./widgets/TopBar.vue";
import {mapWidth, mapHeight} from "../../lib/Table2Chart/funcs/mapGEOStyle.ts";
const chart = ref()
provide('map', {mapWidth, mapHeight})
</script>
\ No newline at end of file
src/views/CheckSlice/widgets/NumberBar.vue 0 → 100644
<template>
</template>
<script setup lang="ts">
</script>
\ No newline at end of file
src/views/CheckSlice/widgets/TopBar.vue 0 → 100644
<template>
<div class="w-full" :class="classConst.flexBetween" :style="outerStyle">
<div :class="classConst.flexBetween">
<img alt="" :src="TopSVG" :width="mapper.mapWidth(30)">
<div :style="{
marginLeft: mapper.mapWidth(16) + 'px',
color: '#1d2129',
fontSize: mapper.mapWidth(20) + 'px',
marginRight: mapper.mapWidth(40) + 'px'
}">定检全程可视化大屏
</div>
<div v-for="(q, w) in allTopCategory" :key="w" :style="{
fontSize: mapper.mapWidth(14) + 'px',
color: topIndex === w ? '#0ED400' : '#9b9b9b',
marginRight: mapper.mapWidth(24) + 'px',
cursor: 'pointer',
}" @click="topIndex = q.type;">{{ q.name }}
</div>
</div>
</div>
<div class="w-full" :style="innerStyle">
<div :class="classConst.flexStart" class="w-full">
<div :style="{
color: '#1D2129',
fontSize: mapper.mapWidth(14) + 'px',
marginRight: mapper.mapWidth(24) + 'px',
}">航司
</div>
<div :style="{
height: mapper.mapHeight(24) + 'px',
background: airlineSelections === null ? '#0ED400' : 'transparent',
color: airlineSelections === null ? '#fff' : '#1D2129',
width: mapper.mapWidth(77) + 'px',
textAlign: 'center',
fontSize: mapper.mapWidth(14) + 'px',
lineHeight: mapper.mapHeight(24) + 'px',
cursor: 'pointer',
marginRight: mapper.mapWidth(32) + 'px',
borderRadius: mapper.mapWidth(3) + 'px',
}" @click="airlineSelections = null">全部航司
</div>
<div :style="{flex: 1, overflow: 'scroll', display:'flex', alignItems: 'center'}">
<div v-for="(q, w) in allAirlines" :key="w" :style="{
boxSizing: 'border-box',
height: mapper.mapHeight(24) + 'px',
background: airlineSelections === q.value? '#0ED400' : 'transparent',
color: airlineSelections === q.value ? '#fff' : '#1D2129',
width: mapper.mapWidth(120) + 'px',
textAlign: 'center',
fontSize: mapper.mapWidth(14) + 'px',
lineHeight: mapper.mapHeight(24) + 'px',
cursor: 'pointer',
borderRadius: mapper.mapWidth(3) + 'px',
borderLeft: '1px solid rgba(0,0,0,0.05)'
}" @click="airlineSelections = q.value">{{ q.label }}
</div>
</div>
</div>
<div v-if="ps.needBase" :class="classConst.flexStart" class="w-full" :style="{
marginTop: mapper.mapHeight(12) + 'px'
}">
<div :style="{
color: '#1D2129',
fontSize: mapper.mapWidth(14) + 'px',
marginRight: mapper.mapWidth(24) + 'px',
}">基地
</div>
<div :style="{
height: mapper.mapHeight(24) + 'px',
background: baseNow === null ? '#0ED400' : 'transparent',
color: baseNow === null ? '#fff' : '#1D2129',
width: mapper.mapWidth(77) + 'px',
textAlign: 'center',
fontSize: mapper.mapWidth(14) + 'px',
lineHeight: mapper.mapHeight(24) + 'px',
cursor: 'pointer',
marginRight: mapper.mapWidth(32) + 'px',
borderRadius: mapper.mapWidth(3) + 'px',
}" @click="baseNow = null">全部航司
</div>
<div :style="{flex: 1, overflow: 'scroll', display:'flex', alignItems: 'center'}">
<div v-for="(q, w) in allBase" :key="w" :style="{
boxSizing: 'border-box',
height: mapper.mapHeight(24) + 'px',
background: baseNow === q.value? '#0ED400' : 'transparent',
color: baseNow === q.value ? '#fff' : '#1D2129',
width: mapper.mapWidth(120) + 'px',
textAlign: 'center',
fontSize: mapper.mapWidth(14) + 'px',
lineHeight: mapper.mapHeight(24) + 'px',
cursor: 'pointer',
borderRadius: mapper.mapWidth(3) + 'px',
borderLeft: '1px solid rgba(0,0,0,0.05)'
}" @click="baseNow = q.value">{{ q.label }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {computed, inject} from "vue";
import TopSVG from "../assets/top.svg?url"
import {classConst} from "../const/class.const.ts";
import {allTopCategory, topIndex} from "../const/top.category.ts";
import {airlineSelections, allAirlines, allBase, baseNow} from "../const/searchBar.category.ts";
const ps = withDefaults(defineProps<{
needBase?: boolean
}>(), {needBase: true})
const mapper = inject('map') as { mapWidth: (width: number) => number, mapHeight: (height: number) => number }
const outerStyle = computed(function () {
return {
padding: `${mapper.mapHeight(12)}px ${mapper.mapWidth(24)}px`,
background: '#fff',
borderBottom: `1px solid #e7e7e7`
}
})
const innerStyle = computed(function () {
return {
padding: `${mapper.mapHeight(12)}px ${mapper.mapWidth(24)}px`,
}
})
</script>
\ No newline at end of file
src/views/CheckSlice/widgets/WhichNumberBox.vue 0 → 100644
<template>
<div class="w-full h-full" :style="{
padding: `${mapper.mapWidth(16)}px`
}" :class="[classConst.flex, classConst.flexCol, classConst.flexJustifyBetween]">
<div :class="[classConst.flex, classConst.flexItemsCenter]" class="w-full" :style="{
marginBottom: `${mapper.mapHeight(12)}px`
}">
<img :src="ps.imgUrl" :width="mapper.mapWidth(24)" alt="">
<div :style="{
marginLeft: `${mapper.mapWidth(12)}px`,
fontSize: `${mapper.mapWidth(20)}px`,
color: '#55606c'
}">{{ps.title}}</div>
</div>
<div class="flex-1" :class="[classConst.flex, classConst.flexCol, classConst.flexItemsCenter, classConst.flexJustifyCenter]" :style="{
background: '#DBDBDB12',
borderRadius: '6px',
color: '#000',
fontSize: `${mapper.mapWidth(40)}px`
}">{{ps.value}}</div>
</div>
</template>
<script setup lang="ts">
import {inject} from "vue";
import {classConst} from "../const/class.const.ts";
const mapper = inject('map') as { mapWidth: (width: number) => number, mapHeight: (height: number) => number }
defineProps<{
ps: {
imgUrl: string,
title: string,
value: number
}
}>()
</script>
\ No newline at end of file
src/views/CheckSlice/widgets/WhiteBoard.vue 0 → 100644
<template>
<div :class="[classConst.flex, classConst.flexCol]" :style="{
padding: `${mapper.mapWidth(24)}px`,
boxSizing: 'border-box'
}">
<div :class="[classConst.flex, classConst.flexItemsCenter]">
<div :style="{
fontSize: `${mapper.mapWidth(24)}px`,
color: '#55606c',
}">{{ps.title}}</div>
<div class="flex-1">
<slot name="header"></slot>
</div>
</div>
<div class="flex-1">
<slot name="content"></slot>
</div>
</div>
</template>
<script setup lang="ts">
import {inject} from "vue";
import {classConst} from "../const/class.const.ts";
const mapper = inject('map') as { mapWidth: (width: number) => number, mapHeight: (height: number) => number }
defineProps<{
ps: {
title: string
}
}>()
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment