-
Settings
+设置
-
Theme Option
+色彩选择
{
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
@@ -54,12 +54,12 @@ const ThemeSettings = () => {
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-
Theme Colors
+主题颜色
{themeColors.map((item, index) => (
diff --git a/lazy-timer-fe/src/data/dummy.js b/lazy-timer-fe/src/data/dummy.js
index ab89b28..67cb64b 100644
--- a/lazy-timer-fe/src/data/dummy.js
+++ b/lazy-timer-fe/src/data/dummy.js
@@ -1,5889 +1,5091 @@
-import React from 'react';
-import { AiOutlineCalendar, AiOutlineShoppingCart, AiOutlineAreaChart, AiOutlineBarChart, AiOutlineStock } from 'react-icons/ai';
-import { FiShoppingBag, FiEdit, FiPieChart, FiBarChart, FiCreditCard, FiStar, FiShoppingCart } from 'react-icons/fi';
-import { BsKanban, BsBarChart, BsCurrencyDollar, BsShield, BsChatLeft, BsFillLaptopFill } from 'react-icons/bs';
+import React from 'react'
+import { AiOutlineCalendar, AiOutlineShoppingCart, AiOutlineAreaChart, AiOutlineBarChart, AiOutlineStock } from 'react-icons/ai'
+import { FiShoppingBag, FiEdit, FiPieChart, FiBarChart, FiCreditCard, FiStar, FiShoppingCart } from 'react-icons/fi'
+import { BsKanban, BsBarChart, BsCurrencyDollar, BsShield, BsChatLeft, BsFillLaptopFill } from 'react-icons/bs'
import { FaSortAmountDown } from 'react-icons/fa'
-import { BiColorFill } from 'react-icons/bi';
-import { IoMdContacts } from 'react-icons/io';
-import { RiContactsLine, RiStockLine } from 'react-icons/ri';
-import { MdWbSunny, MdBedtime } from 'react-icons/md';
-import { HiOutlineRefresh } from 'react-icons/hi';
-import { TiTick } from 'react-icons/ti';
-import { GiLouvrePyramid } from 'react-icons/gi';
-import { GrLocation } from 'react-icons/gr';
-import avatar from './avatar.jpg';
-import avatar2 from './avatar2.jpg';
-import avatar3 from './avatar3.png';
-import avatar4 from './avatar4.jpg';
-import product1 from './product1.jpg';
-import product2 from './product2.jpg';
-import product3 from './product3.jpg';
-import product4 from './product4.jpg';
-import product5 from './product5.jpg';
-import product6 from './product6.jpg';
-import product7 from './product7.jpg';
-import product8 from './product8.jpg';
-
-export const gridOrderImage = (props) => (
-
- {/* eslint-disable-next-line react/jsx-props-no-spreading */}
{customersGrid.map((item, index) =>
- 
-
-);
+import { BiColorFill } from 'react-icons/bi'
+import { IoMdContacts } from 'react-icons/io'
+import { RiContactsLine, RiStockLine } from 'react-icons/ri'
+import { MdWbSunny, MdBedtime } from 'react-icons/md'
+import { HiOutlineRefresh } from 'react-icons/hi'
+import { TiTick } from 'react-icons/ti'
+import { GiLouvrePyramid } from 'react-icons/gi'
+import { GrLocation } from 'react-icons/gr'
+import avatar from './avatar.jpg'
+import avatar2 from './avatar2.jpg'
+import avatar3 from './avatar3.png'
+import avatar4 from './avatar4.jpg'
+import product1 from './product1.jpg'
+import product2 from './product2.jpg'
+import product3 from './product3.jpg'
+import product4 from './product4.jpg'
+import product5 from './product5.jpg'
+import product6 from './product6.jpg'
+import product7 from './product7.jpg'
+import product8 from './product8.jpg'
+
+export const gridOrderImage = props => (
+
+
+
+)
-export const gridOrderStatus = (props) => (
-
-);
+export const gridOrderStatus = props => (
+
+)
export const kanbanGrid = [
- { headerText: 'To Do',
- keyField: 'Open',
- allowToggle: true },
+ { headerText: 'To Do', keyField: 'Open', allowToggle: true },
- { headerText: 'In Progress',
- keyField: 'InProgress',
- allowToggle: true },
+ { headerText: 'In Progress', keyField: 'InProgress', allowToggle: true },
- { headerText: 'Testing',
- keyField: 'Testing',
- allowToggle: true,
- isExpanded: false },
+ { headerText: 'Testing', keyField: 'Testing', allowToggle: true, isExpanded: false },
- { headerText: 'Done',
- keyField: 'Close',
- allowToggle: true },
-];
-const gridEmployeeProfile = (props) => (
-
- 
-
-);
+ { headerText: 'Done', keyField: 'Close', allowToggle: true }
+]
+const gridEmployeeProfile = props => (
+ {props.Name}
-
+
+
+)
-const gridEmployeeCountry = (props) => (
- {props.Name}
+
-
-);
+const gridEmployeeCountry = props => (
+
+
+)
export const EditorData = () => (
-
-
-);
-const customerGridImage = (props) => (
- - Try React - React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started. - - Online Playgrounds - If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz. - - If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos. - - Add React to a Website - You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. - - Create a New React App - When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up! - - As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how. - - Learn React - People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful. - - If you prefer to learn by doing, start with our practical tutorial. - If you prefer to learn concepts step by step, start with our guide to main concepts. - Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it. - - First Examples - The React homepage contains a few small React examples with a live editor. Even if you don’t know anything about React yet, try changing their code and see how it affects the result. - - React for Beginners - If you feel that the React documentation goes at a faster pace than you’re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you’re done, give the documentation another try! - - React for Designers - If you’re coming from a design background, these resources are a great place to get started. - - JavaScript Resources - The React documentation assumes some familiarity with programming in the JavaScript language. You don’t have to be an expert, but it’s harder to learn both React and JavaScript at the same time. - - We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React. -
-
- 
-);
-
-const customerGridStatus = (props) => (
-
-
- {props.CustomerName}
-{props.CustomerEmail}
++ Try React React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help + you get started. Online Playgrounds If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz. If you prefer to use your own text editor, you can also download this HTML file, edit it, and + open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos. Add React to a Website You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it + contained to a few dynamic widgets. Create a New React App When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up! As your application grows, you might want to consider a more integrated setup. There are several + JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how. Learn React People come to React from different backgrounds and with different learning styles. + Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful. If you prefer to learn by doing, start with our practical tutorial. If you prefer to learn concepts step by step, start with our guide to main concepts. Like any unfamiliar + technology, React does have a learning curve. With practice and some patience, you will get the hang of it. First Examples The React homepage contains a few small React examples with a live editor. Even if you don’t know anything about React yet, try changing their code and see how it + affects the result. React for Beginners If you feel that the React documentation goes at a faster pace than you’re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you’re done, + give the documentation another try! React for Designers If you’re coming from a design background, these resources are a great place to get started. JavaScript Resources The React documentation assumes some familiarity with programming in the JavaScript language. You don’t have to be an + expert, but it’s harder to learn both React and JavaScript at the same time. We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React. +
-
-
-);
+)
+const customerGridImage = props => (
+ {props.Status}
-
+
+
+)
+
+const customerAppImage = props => {
+ return (
+
+
+ {props.CustomerName}
+{props.CustomerEmail}
+
+ 
+
+ )
+}
+
+const customerGridStatus = props => (
+
+
+ {props.AppName}
+
+
+
+)
export const areaPrimaryXAxis = {
- valueType: 'DateTime',
- labelFormat: 'y',
- majorGridLines: { width: 0 },
- intervalType: 'Years',
- edgeLabelPlacement: 'Shift',
- labelStyle: { color: 'gray' },
-};
+ valueType: 'DateTime',
+ labelFormat: 'y',
+ majorGridLines: { width: 0 },
+ intervalType: 'Years',
+ edgeLabelPlacement: 'Shift',
+ labelStyle: { color: 'gray' }
+}
export const areaPrimaryYAxis = {
- labelFormat: '{value}%',
- lineStyle: { width: 0 },
- maximum: 4,
- interval: 1,
- majorTickLines: { width: 0 },
- minorTickLines: { width: 0 },
- labelStyle: { color: 'gray' },
-
-};
+ labelFormat: '{value}%',
+ lineStyle: { width: 0 },
+ maximum: 4,
+ interval: 1,
+ majorTickLines: { width: 0 },
+ minorTickLines: { width: 0 },
+ labelStyle: { color: 'gray' }
+}
export const barPrimaryXAxis = {
- valueType: 'Category',
- interval: 1,
- majorGridLines: { width: 0 },
-};
+ valueType: 'Category',
+ interval: 1,
+ majorGridLines: { width: 0 }
+}
export const barPrimaryYAxis = {
- majorGridLines: { width: 0 },
- majorTickLines: { width: 0 },
- lineStyle: { width: 0 },
- labelStyle: { color: 'transparent' },
-};
+ majorGridLines: { width: 0 },
+ majorTickLines: { width: 0 },
+ lineStyle: { width: 0 },
+ labelStyle: { color: 'transparent' }
+}
const areaChartData = [
- [
- { x: new Date(2002, 0, 1), y: 2.2 },
- { x: new Date(2003, 0, 1), y: 3.4 },
- { x: new Date(2004, 0, 1), y: 2.8 },
- { x: new Date(2005, 0, 1), y: 1.6 },
- { x: new Date(2006, 0, 1), y: 2.3 },
- { x: new Date(2007, 0, 1), y: 2.5 },
- { x: new Date(2008, 0, 1), y: 2.9 },
- { x: new Date(2009, 0, 1), y: 3.8 },
- { x: new Date(2010, 0, 1), y: 1.4 },
- { x: new Date(2011, 0, 1), y: 3.1 },
- ],
- [
- { x: new Date(2002, 0, 1), y: 2 },
- { x: new Date(2003, 0, 1), y: 1.7 },
- { x: new Date(2004, 0, 1), y: 1.8 },
- { x: new Date(2005, 0, 1), y: 2.1 },
- { x: new Date(2006, 0, 1), y: 2.3 },
- { x: new Date(2007, 0, 1), y: 1.7 },
- { x: new Date(2008, 0, 1), y: 1.5 },
- { x: new Date(2009, 0, 1), y: 2.8 },
- { x: new Date(2010, 0, 1), y: 1.5 },
- { x: new Date(2011, 0, 1), y: 2.3 },
- ],
- [
- { x: new Date(2002, 0, 1), y: 0.8 },
- { x: new Date(2003, 0, 1), y: 1.3 },
- { x: new Date(2004, 0, 1), y: 1.1 },
- { x: new Date(2005, 0, 1), y: 1.6 },
- { x: new Date(2006, 0, 1), y: 2 },
- { x: new Date(2007, 0, 1), y: 1.7 },
- { x: new Date(2008, 0, 1), y: 2.3 },
- { x: new Date(2009, 0, 1), y: 2.7 },
- { x: new Date(2010, 0, 1), y: 1.1 },
- { x: new Date(2011, 0, 1), y: 2.3 },
- ],
-];
+ [
+ { x: new Date(2002, 0, 1), y: 2.2 },
+ { x: new Date(2003, 0, 1), y: 3.4 },
+ { x: new Date(2004, 0, 1), y: 2.8 },
+ { x: new Date(2005, 0, 1), y: 1.6 },
+ { x: new Date(2006, 0, 1), y: 2.3 },
+ { x: new Date(2007, 0, 1), y: 2.5 },
+ { x: new Date(2008, 0, 1), y: 2.9 },
+ { x: new Date(2009, 0, 1), y: 3.8 },
+ { x: new Date(2010, 0, 1), y: 1.4 },
+ { x: new Date(2011, 0, 1), y: 3.1 }
+ ],
+ [
+ { x: new Date(2002, 0, 1), y: 2 },
+ { x: new Date(2003, 0, 1), y: 1.7 },
+ { x: new Date(2004, 0, 1), y: 1.8 },
+ { x: new Date(2005, 0, 1), y: 2.1 },
+ { x: new Date(2006, 0, 1), y: 2.3 },
+ { x: new Date(2007, 0, 1), y: 1.7 },
+ { x: new Date(2008, 0, 1), y: 1.5 },
+ { x: new Date(2009, 0, 1), y: 2.8 },
+ { x: new Date(2010, 0, 1), y: 1.5 },
+ { x: new Date(2011, 0, 1), y: 2.3 }
+ ],
+ [
+ { x: new Date(2002, 0, 1), y: 0.8 },
+ { x: new Date(2003, 0, 1), y: 1.3 },
+ { x: new Date(2004, 0, 1), y: 1.1 },
+ { x: new Date(2005, 0, 1), y: 1.6 },
+ { x: new Date(2006, 0, 1), y: 2 },
+ { x: new Date(2007, 0, 1), y: 1.7 },
+ { x: new Date(2008, 0, 1), y: 2.3 },
+ { x: new Date(2009, 0, 1), y: 2.7 },
+ { x: new Date(2010, 0, 1), y: 1.1 },
+ { x: new Date(2011, 0, 1), y: 2.3 }
+ ]
+]
export const areaCustomSeries = [
- {
- dataSource: areaChartData[0],
- xName: 'x',
- yName: 'y',
- name: 'USA',
- opacity: '0.8',
- type: 'SplineArea',
- width: '2',
-
- },
- {
- dataSource: areaChartData[1],
- xName: 'x',
- yName: 'y',
- name: 'France',
- opacity: '0.8',
- type: 'SplineArea',
- width: '2',
- },
- {
- dataSource: areaChartData[2],
- xName: 'x',
- yName: 'y',
- name: 'Germany',
- opacity: '0.8',
- type: 'SplineArea',
- width: '2',
- },
-];
+ {
+ dataSource: areaChartData[0],
+ xName: 'x',
+ yName: 'y',
+ name: 'USA',
+ opacity: '0.8',
+ type: 'SplineArea',
+ width: '2'
+ },
+ {
+ dataSource: areaChartData[1],
+ xName: 'x',
+ yName: 'y',
+ name: 'France',
+ opacity: '0.8',
+ type: 'SplineArea',
+ width: '2'
+ },
+ {
+ dataSource: areaChartData[2],
+ xName: 'x',
+ yName: 'y',
+ name: 'Germany',
+ opacity: '0.8',
+ type: 'SplineArea',
+ width: '2'
+ }
+]
export const barChartData = [
- [
- { x: 'USA', y: 46 },
- { x: 'GBR', y: 27 },
- { x: 'CHN', y: 26 },
- ],
- [
- { x: 'USA', y: 37 },
- { x: 'GBR', y: 23 },
- { x: 'CHN', y: 18 },
- ],
- [
- { x: 'USA', y: 38 },
- { x: 'GBR', y: 17 },
- { x: 'CHN', y: 26 },
- ],
-];
+ [
+ { x: 'USA', y: 46 },
+ { x: 'GBR', y: 27 },
+ { x: 'CHN', y: 26 }
+ ],
+ [
+ { x: 'USA', y: 37 },
+ { x: 'GBR', y: 23 },
+ { x: 'CHN', y: 18 }
+ ],
+ [
+ { x: 'USA', y: 38 },
+ { x: 'GBR', y: 17 },
+ { x: 'CHN', y: 26 }
+ ]
+]
export const barCustomSeries = [
- {
- dataSource: barChartData[0],
- xName: 'x',
- yName: 'y',
- name: 'Gold',
- type: 'Column',
- marker: {
- dataLabel: {
- visible: true,
- position: 'Top',
- font: { fontWeight: '600', color: '#ffffff' },
- },
- },
- },
- {
- dataSource: barChartData[1],
- xName: 'x',
- yName: 'y',
- name: 'Silver',
- type: 'Column',
- marker: {
- dataLabel: {
- visible: true,
- position: 'Top',
- font: { fontWeight: '600', color: '#ffffff' },
- },
- },
- },
- {
- dataSource: barChartData[2],
- xName: 'x',
- yName: 'y',
- name: 'Bronze',
- type: 'Column',
- marker: {
- dataLabel: {
- visible: true,
- position: 'Top',
- font: { fontWeight: '600', color: '#ffffff' },
- },
- },
- },
-];
+ {
+ dataSource: barChartData[0],
+ xName: 'x',
+ yName: 'y',
+ name: 'Gold',
+ type: 'Column',
+ marker: {
+ dataLabel: {
+ visible: true,
+ position: 'Top',
+ font: { fontWeight: '600', color: '#ffffff' }
+ }
+ }
+ },
+ {
+ dataSource: barChartData[1],
+ xName: 'x',
+ yName: 'y',
+ name: 'Silver',
+ type: 'Column',
+ marker: {
+ dataLabel: {
+ visible: true,
+ position: 'Top',
+ font: { fontWeight: '600', color: '#ffffff' }
+ }
+ }
+ },
+ {
+ dataSource: barChartData[2],
+ xName: 'x',
+ yName: 'y',
+ name: 'Bronze',
+ type: 'Column',
+ marker: {
+ dataLabel: {
+ visible: true,
+ position: 'Top',
+ font: { fontWeight: '600', color: '#ffffff' }
+ }
+ }
+ }
+]
export const colorMappingData = [
- [
- { x: 'Jan', y: 6.96 },
- { x: 'Feb', y: 8.9 },
- { x: 'Mar', y: 12 },
- { x: 'Apr', y: 17.5 },
- { x: 'May', y: 22.1 },
- { x: 'June', y: 25 },
- { x: 'July', y: 29.4 },
- { x: 'Aug', y: 29.6 },
- { x: 'Sep', y: 25.8 },
- { x: 'Oct', y: 21.1 },
- { x: 'Nov', y: 15.5 },
- { x: 'Dec', y: 9.9 },
- ],
- ['#FFFF99'],
- ['#FFA500'],
- ['#FF4040'],
-];
+ [
+ { x: 'Jan', y: 6.96 },
+ { x: 'Feb', y: 8.9 },
+ { x: 'Mar', y: 12 },
+ { x: 'Apr', y: 17.5 },
+ { x: 'May', y: 22.1 },
+ { x: 'June', y: 25 },
+ { x: 'July', y: 29.4 },
+ { x: 'Aug', y: 29.6 },
+ { x: 'Sep', y: 25.8 },
+ { x: 'Oct', y: 21.1 },
+ { x: 'Nov', y: 15.5 },
+ { x: 'Dec', y: 9.9 }
+ ],
+ ['#FFFF99'],
+ ['#FFA500'],
+ ['#FF4040']
+]
export const rangeColorMapping = [
- { label: '1°C to 10°C',
- start: '1',
- end: '10',
- colors: colorMappingData[1] },
-
- { label: '11°C to 20°C',
- start: '11',
- end: '20',
- colors: colorMappingData[2] },
+ { label: '1°C to 10°C', start: '1', end: '10', colors: colorMappingData[1] },
- { label: '21°C to 30°C',
- start: '21',
- end: '30',
- colors: colorMappingData[3] },
+ { label: '11°C to 20°C', start: '11', end: '20', colors: colorMappingData[2] },
-];
+ { label: '21°C to 30°C', start: '21', end: '30', colors: colorMappingData[3] }
+]
export const ColorMappingPrimaryXAxis = {
- valueType: 'Category',
- majorGridLines: { width: 0 },
- title: 'Months',
-};
+ valueType: 'Category',
+ majorGridLines: { width: 0 },
+ title: 'Months'
+}
export const ColorMappingPrimaryYAxis = {
- lineStyle: { width: 0 },
- majorTickLines: { width: 0 },
- minorTickLines: { width: 0 },
- labelFormat: '{value}°C',
- title: 'Temperature',
-};
+ lineStyle: { width: 0 },
+ majorTickLines: { width: 0 },
+ minorTickLines: { width: 0 },
+ labelFormat: '{value}°C',
+ title: 'Temperature'
+}
export const FinancialPrimaryXAxis = {
- valueType: 'DateTime',
- minimum: new Date('2016, 12, 31'),
- maximum: new Date('2017, 9, 30'),
- crosshairTooltip: { enable: true },
- majorGridLines: { width: 0 },
-};
+ valueType: 'DateTime',
+ minimum: new Date('2016, 12, 31'),
+ maximum: new Date('2017, 9, 30'),
+ crosshairTooltip: { enable: true },
+ majorGridLines: { width: 0 }
+}
export const FinancialPrimaryYAxis = {
- title: 'Price',
- minimum: 100,
- maximum: 180,
- interval: 20,
- lineStyle: { width: 0 },
- majorTickLines: { width: 0 },
-};
+ title: 'Price',
+ minimum: 100,
+ maximum: 180,
+ interval: 20,
+ lineStyle: { width: 0 },
+ majorTickLines: { width: 0 }
+}
export const LinePrimaryXAxis = {
- valueType: 'DateTime',
- labelFormat: 'y',
- intervalType: 'Years',
- edgeLabelPlacement: 'Shift',
- majorGridLines: { width: 0 },
- background: 'white',
-};
+ valueType: 'DateTime',
+ labelFormat: 'y',
+ intervalType: 'Years',
+ edgeLabelPlacement: 'Shift',
+ majorGridLines: { width: 0 },
+ background: 'white'
+}
export const LinePrimaryYAxis = {
- labelFormat: '{value}%',
- rangePadding: 'None',
- minimum: 0,
- maximum: 100,
- interval: 20,
- lineStyle: { width: 0 },
- majorTickLines: { width: 0 },
- minorTickLines: { width: 0 },
-};
+ labelFormat: '{value}%',
+ rangePadding: 'None',
+ minimum: 0,
+ maximum: 100,
+ interval: 20,
+ lineStyle: { width: 0 },
+ majorTickLines: { width: 0 },
+ minorTickLines: { width: 0 }
+}
export const customersGrid = [
- { type: 'checkbox', width: '50' },
- { headerText: 'Name',
- width: '150',
- template: customerGridImage,
- textAlign: 'Center' },
- { field: 'ProjectName',
- headerText: 'Project Name',
- width: '150',
- textAlign: 'Center' },
- { field: 'Status',
- headerText: 'Status',
- width: '130',
- format: 'yMd',
- textAlign: 'Center',
- template: customerGridStatus },
- {
- field: 'Weeks',
- headerText: 'Weeks',
- width: '100',
- format: 'C2',
- textAlign: 'Center' },
- { field: 'Budget',
- headerText: 'Budget',
- width: '100',
- format: 'yMd',
- textAlign: 'Center' },
-
- { field: 'Location',
- headerText: 'Location',
- width: '150',
- textAlign: 'Center' },
-
- { field: 'CustomerID',
- headerText: 'Customer ID',
- width: '120',
- textAlign: 'Center',
- isPrimaryKey: true,
- },
-
-];
+ { type: 'checkbox', width: '50' },
+ {
+ field: 'StartTime',
+ headerText: '开始时间',
+ width: '100',
+ textAlign: 'center'
+ },
+ {
+ field: 'EndTime',
+ headerText: '结束时间',
+ width: '100',
+ textAlign: 'center'
+ },
+ {
+ field: 'Duration',
+ headerText: '持续时间',
+ width: '100',
+ textAlign: 'center'
+ },
+ {
+ field: 'App',
+ headerText: '应用程序',
+ width: '150',
+ textAlign: 'center',
+ template: customerAppImage
+ },
+ {
+ field: 'Text',
+ headerText: '活动',
+ width: '250',
+ textAlign: 'center'
+ },
+ {
+ field: 'Tag',
+ headerText: '标签',
+ width: '100',
+ textAlign: 'center'
+ }
+]
export const employeesGrid = [
- { headerText: 'Employee',
- width: '150',
- template: gridEmployeeProfile,
- textAlign: 'Center' },
- { field: 'Name',
- headerText: '',
- width: '0',
- textAlign: 'Center',
- },
- { field: 'Title',
- headerText: 'Designation',
- width: '170',
- textAlign: 'Center',
- },
- { headerText: 'Country',
- width: '120',
- textAlign: 'Center',
- template: gridEmployeeCountry },
+ { headerText: 'Employee', width: '150', template: gridEmployeeProfile, textAlign: 'Center' },
+ { field: 'Name', headerText: '', width: '0', textAlign: 'Center' },
+ { field: 'Title', headerText: 'Designation', width: '170', textAlign: 'Center' },
+ { headerText: 'Country', width: '120', textAlign: 'Center', template: gridEmployeeCountry },
- { field: 'HireDate',
- headerText: 'Hire Date',
- width: '135',
- format: 'yMd',
- textAlign: 'Center' },
+ { field: 'HireDate', headerText: 'Hire Date', width: '135', format: 'yMd', textAlign: 'Center' },
- { field: 'ReportsTo',
- headerText: 'Reports To',
- width: '120',
- textAlign: 'Center' },
- { field: 'EmployeeID',
- headerText: 'Employee ID',
- width: '125',
- textAlign: 'Center' },
-];
+ { field: 'ReportsTo', headerText: 'Reports To', width: '120', textAlign: 'Center' },
+ { field: 'EmployeeID', headerText: 'Employee ID', width: '125', textAlign: 'Center' }
+]
export const links = [
- {
- title: '数据面板',
- links: [
- {
- name: '总览',
- englishName: 'overview',
- icon: {props.Status}
+