巡查组件
userName
parent
c1dfe75ba4
commit
f59a28f832
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 870 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 424 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
|
|
@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
|||
|
||||
export const option = {
|
||||
secBackground: ['#0A3629', '#00611A'],
|
||||
textColor: ['#16D49D', '#FFFFFF', '#FFFFFF','#000000'],
|
||||
textColor: ['#16D49D', '#FFFFFF', '#FFFFFF','#FFFFFF'],
|
||||
textSize: 10,
|
||||
InpBackgroundColor: '#0C2411',
|
||||
InpBorderColor: '#00611A',
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const option = {
|
|||
color: [],
|
||||
legend: {
|
||||
left: 'right',
|
||||
data: ['上报个数', '处理个数'],
|
||||
data: ['未处理', '已处理'],
|
||||
textStyle:{
|
||||
fontSize: 12
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ const option = {
|
|||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: '上报个数',
|
||||
name: '未处理',
|
||||
smooth: false,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
itemStyle: {
|
||||
|
|
@ -78,7 +78,7 @@ const option = {
|
|||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: '处理个数',
|
||||
name: '已处理',
|
||||
smooth: false,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
itemStyle: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaClockInInfosConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#58FF95',
|
||||
textSize1: 14,
|
||||
textColor1: '#FFFFFF',
|
||||
textSize2: 12,
|
||||
textColor2: '#CBE6CD',
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaClockInInfosConfig.key
|
||||
public attr = { ...chartInitConfig, w: 375, h: 135, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaClockInInfosConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor = option.textColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor1 = option.textColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize1"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor2 = option.textColor2"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize2"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaClockInInfosConfig: ConfigType = {
|
||||
key: 'XunChaClockInInfos',
|
||||
chartKey: 'VXunChaClockInInfos',
|
||||
conKey: 'VCXunChaClockInInfos',
|
||||
title: '打卡信息',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'clockininfo.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<div class="titlebox">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/titlelefticon.png" />
|
||||
<span>打卡信息</span>
|
||||
</div>
|
||||
<div class="contentbox">
|
||||
<div class="header">
|
||||
<div class="label">打卡点名称</div>
|
||||
<div>{{ dataset.PointName }}</div>
|
||||
</div>
|
||||
<div class="clockdetail">
|
||||
<div class="detailbox">
|
||||
<div>
|
||||
<span class="span"></span>
|
||||
<span class="label">创建时间</span>
|
||||
</div>
|
||||
<div>{{ dataset.CreateTime }}</div>
|
||||
</div>
|
||||
<div class="detailbox">
|
||||
<div>
|
||||
<span class="span"></span>
|
||||
<span class="label">打卡点位置</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ dataset.Lng }}</span>
|
||||
<span v-if="dataset.Lat&&dataset.Lng">，</span>
|
||||
<span>{{ dataset.Lat }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, onMounted, ref } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EventBus } from '@/utils/eventBus'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
textColor,
|
||||
textSize,
|
||||
textColor1,
|
||||
textSize1,
|
||||
textColor2,
|
||||
textSize2,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
const dataset = ref({
|
||||
CreateTime: '',
|
||||
PointName: '',
|
||||
Lat: '',
|
||||
Lng: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 获取eventBus传过来的值
|
||||
EventBus.on('clockinlistsenddata', (data) => {
|
||||
console.log('data123444', data)
|
||||
dataset.value = data
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
.titlebox{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-bottom: 1px solid #0A392A;
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize + "px"');
|
||||
.img{
|
||||
width: 27px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.contentbox{
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
margin-top: 15px;
|
||||
.header{
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/clockintitlebg01.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: v-bind('textColor1');
|
||||
font-size: v-bind('textSize1 + "px"');
|
||||
.label{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.clockdetail{
|
||||
color: v-bind('textColor2');
|
||||
font-size: v-bind('textSize2+"px"');
|
||||
margin-top: 15px;
|
||||
.detailbox{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.span{
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: #C9FFC7;
|
||||
box-shadow: 0px 0px 5px 1px rgba(0,255,80,0.6);
|
||||
border: 0px solid rgba(255,255,255,0.34);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.label{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaClockInListConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 14,
|
||||
textColor: '#FFFFFF',
|
||||
textSize1: 12,
|
||||
textColor1: '#CBE6CD',
|
||||
areaOptions:[
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaClockInListConfig.key
|
||||
public attr = { ...chartInitConfig, w: 377, h: 350, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaClockInListConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor = option.textColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor1 = option.textColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize1"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaClockInListConfig: ConfigType = {
|
||||
key: 'XunChaClockInList',
|
||||
chartKey: 'VXunChaClockInList',
|
||||
conKey: 'VCXunChaClockInList',
|
||||
title: '打卡列表',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'pointlist.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<div class="selbox">
|
||||
<n-select
|
||||
v-model:value="areaValue"
|
||||
:options="areaOptions"
|
||||
placeholder="请选择行政区划"
|
||||
/>
|
||||
</div>
|
||||
<div class="searchbox flex ai-c">
|
||||
<div class="inpbox">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="searchValue"
|
||||
placeholder="请输入搜索关键字"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="searchbtn cursor flex ai-c jc-c" @click="getListData">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/btnicons01.png" />
|
||||
<span class="span">搜索</span>
|
||||
</div>
|
||||
<div class="tongjibtn cursor flex ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/btnicons02.png" />
|
||||
<span class="span">统计</span>
|
||||
</div>
|
||||
<div class="xunjianbtn cursor flex ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/btnicons03.png" />
|
||||
<span class="span">巡检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentbox">
|
||||
<div class="contentli flex" v-for="(item,index) in dataset" @click="lisClick(item)">
|
||||
<div class="icons01"></div>
|
||||
<div class="flex column jc-c seclisbox">
|
||||
<div class="header flex ai-c">
|
||||
<div class="label">打卡点名称</div>
|
||||
<div>{{ item.PointName }}</div>
|
||||
</div>
|
||||
<div class="clockdetail">
|
||||
<div class="flex ai-c">
|
||||
<span class="span"></span>
|
||||
<div class="label">创建时间</div>
|
||||
<div>{{ item.CreateTime }}</div>
|
||||
</div>
|
||||
<div class="flex ai-c">
|
||||
<span class="span"></span>
|
||||
<div class="label">负责人员</div>
|
||||
<div>{{ item.CreateUserName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, onMounted } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EventBus } from '@/utils/eventBus'
|
||||
import axios from 'axios'
|
||||
import { getAppEnvConfig } from '@/utils/env'
|
||||
var { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
textColor,
|
||||
textSize,
|
||||
textColor1,
|
||||
textSize1,
|
||||
areaOptions,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const areaValue = ref()
|
||||
const searchValue = ref()
|
||||
const dataset = ref([])
|
||||
|
||||
const getListData=()=>{
|
||||
axios({
|
||||
method: "get",
|
||||
url: VITE_GLOB_API_URL + '/api/FireGrid/GetCheckPointList',
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 9999,
|
||||
pointName: searchValue.value
|
||||
},
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res => {
|
||||
let rel = res.data.result.items
|
||||
dataset.value = rel
|
||||
})
|
||||
}
|
||||
const lisClick=(item)=>{
|
||||
EventBus.emit('clockinlistsenddata' , item);
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.selbox{
|
||||
width: 150px;
|
||||
height: 35px;
|
||||
background: #05231A;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #00611A;
|
||||
}
|
||||
.searchbox{
|
||||
height: 35px;
|
||||
margin-top: 5px;
|
||||
.inpbox{
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/gjinputbg.png");
|
||||
background-size: 100% 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.span{
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.searchbtn{
|
||||
width: 72px;
|
||||
height: 30px;
|
||||
background: linear-gradient( 95deg, #00C16B 0%, #008E39 100%), #000000;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.tongjibtn{
|
||||
width: 72px;
|
||||
height: 30px;
|
||||
background: linear-gradient( 277deg, #C14000 0%, #FF8849 100%), #000000;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.xunjianbtn{
|
||||
width: 72px;
|
||||
height: 30px;
|
||||
background: linear-gradient( 277deg, #125FE3 0%, #1C9DCA 100%), #000000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.contentbox{
|
||||
height: calc(100% - 80px);
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.contentli{
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/lisbg01.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
.icons01{
|
||||
width: 41px;
|
||||
height: 36px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/libgsicon.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 23px 19px 23px 18px;
|
||||
}
|
||||
.seclisbox{
|
||||
.header{
|
||||
width: 265px;
|
||||
height: 23px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/clockintitlebg.png");
|
||||
background-size: 100% 100%;
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
.label{
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.clockdetail{
|
||||
color: v-bind('textColor1');
|
||||
font-size: v-bind('textSize1+"px"');
|
||||
margin-top: 5px;
|
||||
.span{
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: #C9FFC7;
|
||||
box-shadow: 0px 0px 5px 1px rgba(0,255,80,0.6);
|
||||
border: 0px solid rgba(255,255,255,0.34);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.label{
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.n-input){
|
||||
background: none;
|
||||
margin-left: 5px;
|
||||
}
|
||||
:deep(.n-input__state-border){
|
||||
border-color: none;
|
||||
}
|
||||
:deep(.n-input .n-input__input-el, .n-input .n-input__textarea-el){
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.n-input .n-input__border, .n-input .n-input__state-border){
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-input:not(.n-input--disabled).n-input--focus .n-input__state-border){
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.n-base-selection .n-base-selection-label .n-base-selection-input){
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.n-base-selection .n-base-selection-label){
|
||||
background: none;
|
||||
}
|
||||
:deep(.n-base-select-menu){
|
||||
background: none;
|
||||
}
|
||||
:deep(.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border){
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #00611A; /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #0EB687; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 当鼠标悬停在滑块上时改变颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '护林员数量',
|
||||
labelSize: 16,
|
||||
labelColor: '#F8FCFF',
|
||||
valSize: 28,
|
||||
valFlod: 500,
|
||||
valColors: ['#0BA142','#FFFFFF'],
|
||||
dataset: 1245
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons01Config.key
|
||||
public attr = { ...chartInitConfig, w: 188, h: 79, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons01Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.valColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColors[index] = option.valColors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons01Config: ConfigType = {
|
||||
key: 'XunChaIcons01',
|
||||
chartKey: 'VXunChaIcons01',
|
||||
conKey: 'VCXunChaIcons01',
|
||||
title: '护林员数量',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'personsicon01.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/personsicon01.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColors,
|
||||
valFlod,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
line-height: 100%;
|
||||
}
|
||||
.valbox{
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
background: linear-gradient(to bottom, v-bind('valColors[0]'), v-bind('valColors[1]'));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
|
||||
background-clip: text; /* 标准语法 */
|
||||
color: transparent; /* 标准语法 */
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '全部巡查次数',
|
||||
labelSize: 16,
|
||||
labelColor: '#F8FCFF',
|
||||
valSize: 28,
|
||||
valFlod: 500,
|
||||
valColors: ['#135BEE','#FFFFFF'],
|
||||
dataset: 5473
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons02Config.key
|
||||
public attr = { ...chartInitConfig, w: 188, h: 79, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons02Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.valColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColors[index] = option.valColors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons02Config: ConfigType = {
|
||||
key: 'XunChaIcons02',
|
||||
chartKey: 'VXunChaIcons02',
|
||||
conKey: 'VCXunChaIcons02',
|
||||
title: '全部巡查次数',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'personsicon02.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/personsicon02.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColors,
|
||||
valFlod,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
line-height: 100%;
|
||||
}
|
||||
.valbox{
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
background: linear-gradient(to bottom, v-bind('valColors[0]'), v-bind('valColors[1]'));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
|
||||
background-clip: text; /* 标准语法 */
|
||||
color: transparent; /* 标准语法 */
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '全部打卡总数',
|
||||
labelSize: 16,
|
||||
labelColor: '#F8FCFF',
|
||||
valSize: 28,
|
||||
valFlod: 500,
|
||||
valColors: ['#EC5B13','#FFFFFF'],
|
||||
dataset: 3473
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons03Config.key
|
||||
public attr = { ...chartInitConfig, w: 188, h: 79, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons03Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.valColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColors[index] = option.valColors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons03Config: ConfigType = {
|
||||
key: 'XunChaIcons03',
|
||||
chartKey: 'VXunChaIcons03',
|
||||
conKey: 'VCXunChaIcons03',
|
||||
title: '全部打卡总数',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'personsicon03.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/personsicon03.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColors,
|
||||
valFlod,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
line-height: 100%;
|
||||
}
|
||||
.valbox{
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
background: linear-gradient(to bottom, v-bind('valColors[0]'), v-bind('valColors[1]'));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
|
||||
background-clip: text; /* 标准语法 */
|
||||
color: transparent; /* 标准语法 */
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '全部打卡点数',
|
||||
labelSize: 16,
|
||||
labelColor: '#F8FCFF',
|
||||
valSize: 28,
|
||||
valFlod: 500,
|
||||
valColors: ['#1AD09C','#FFFFFF'],
|
||||
dataset: 2133
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons04Config.key
|
||||
public attr = { ...chartInitConfig, w: 188, h: 79, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons04Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.valColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColors[index] = option.valColors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons04Config: ConfigType = {
|
||||
key: 'XunChaIcons04',
|
||||
chartKey: 'VXunChaIcons04',
|
||||
conKey: 'VCXunChaIcons04',
|
||||
title: '全部打卡点数',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'personsicon04.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/personsicon04.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColors,
|
||||
valFlod,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
line-height: 100%;
|
||||
}
|
||||
.valbox{
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
background: linear-gradient(to bottom, v-bind('valColors[0]'), v-bind('valColors[1]'));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
|
||||
background-clip: text; /* 标准语法 */
|
||||
color: transparent; /* 标准语法 */
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '在线人数',
|
||||
labelSize: 14,
|
||||
labelColor: '#CFDAE6',
|
||||
valSize: 24,
|
||||
valFlod: 500,
|
||||
valColor: '#FFFFFF',
|
||||
unitText: '人',
|
||||
unitSize: 8,
|
||||
unitColor: '#CFDAE6',
|
||||
dataset: 15
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons05Config.key
|
||||
public attr = { ...chartInitConfig, w: 179, h: 45, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons05Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<CollapseItem name="文本样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="值样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColor = option.valColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="单位样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.unitText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.unitSize"
|
||||
size="small"
|
||||
:min="8"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.unitColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.unitColor = option.unitColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons05Config: ConfigType = {
|
||||
key: 'XunChaIcons05',
|
||||
chartKey: 'VXunChaIcons05',
|
||||
conKey: 'VCXunChaIcons05',
|
||||
title: '在线人数',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'onlinenumbg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/onlinenumbg.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
<span class="unitbox">{{ unitText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColor,
|
||||
valFlod,
|
||||
unitText,
|
||||
unitSize,
|
||||
unitColor,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
}
|
||||
.valbox{
|
||||
margin-left: 12px;
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
color: v-bind('valColor');
|
||||
}
|
||||
.unitbox{
|
||||
margin-top: 5px;
|
||||
color: v-bind('unitColor');
|
||||
font-size: v-bind('unitSize+"px"');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaIcons06Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
labelText: '离线人数',
|
||||
labelSize: 14,
|
||||
labelColor: '#CFDAE6',
|
||||
valSize: 24,
|
||||
valFlod: 500,
|
||||
valColor: '#FFFFFF',
|
||||
unitText: '人',
|
||||
unitSize: 8,
|
||||
unitColor: '#CFDAE6',
|
||||
dataset: 15
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaIcons06Config.key
|
||||
public attr = { ...chartInitConfig, w: 179, h: 45, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaIcons06Config)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<CollapseItem name="文本样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.labelText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.labelSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.labelColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.labelColor = option.labelColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="值样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.valColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.valColor = option.valColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.valSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number v-model:value="optionData.valFlod" size="small" :min="400"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="单位样式" :expanded="true">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.unitText"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.unitSize"
|
||||
size="small"
|
||||
:min="8"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.unitColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.unitColor = option.unitColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaIcons06Config: ConfigType = {
|
||||
key: 'XunChaIcons06',
|
||||
chartKey: 'VXunChaIcons06',
|
||||
conKey: 'VCXunChaIcons06',
|
||||
title: '离线人数',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'outlinenumbg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<img class="img" :width="w" :height="h" src="/src/assets/images/chart/xunchaguiji/outlinenumbg.png" />
|
||||
<div class="divbox">
|
||||
<span class="labelbox">{{ labelText }}</span>
|
||||
<span class="valbox">{{ dataset }}</span>
|
||||
<span class="unitbox">{{ unitText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
labelText,
|
||||
labelSize,
|
||||
labelColor,
|
||||
valSize,
|
||||
valColor,
|
||||
valFlod,
|
||||
unitText,
|
||||
unitSize,
|
||||
unitColor,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
position: absolute;
|
||||
}
|
||||
.divbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
.labelbox{
|
||||
color: v-bind('labelColor');
|
||||
font-size: v-bind('labelSize+"px"');
|
||||
}
|
||||
.valbox{
|
||||
margin-left: 12px;
|
||||
font-size: v-bind('valSize+"px"');
|
||||
font-weight: v-bind('valFlod');
|
||||
color: v-bind('valColor');
|
||||
}
|
||||
.unitbox{
|
||||
margin-top: 5px;
|
||||
color: v-bind('unitColor');
|
||||
font-size: v-bind('unitSize+"px"');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@ export const option = {
|
|||
textColors: ['#FFFFFF','#FFFFFF'],
|
||||
textSize: [11,10],
|
||||
backgroundColors: ["#05231A","#0A392A","#06281D","#00611A"],
|
||||
headerData:["乡镇/村庄","护林员姓名","在线状态","离线时长","操作"],
|
||||
headerData:["乡镇/村庄","护林员姓名","在线状态","离线时长"],
|
||||
dataset: [
|
||||
{ town: '探沂镇' , name: '刘磊', onlinestatus: true, offlineduration: 10 },
|
||||
{ town: '梁邱镇' , name: '邵泽兰', onlinestatus: false, offlineduration: 10 },
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="go-title-03">
|
||||
<div class="headerbox">
|
||||
<div class="headerli" v-for="item in headerData">{{item}}</div>
|
||||
<div class="scopedbox headerli">操作</div>
|
||||
</div>
|
||||
<div class="sectionbox">
|
||||
<div class="secli" v-for="item in dataset">
|
||||
|
|
@ -19,11 +20,11 @@
|
|||
</div>
|
||||
<div class="li">{{ item.offlineduration }}</div>
|
||||
<div class="li scopedbox">
|
||||
<div class="locationbox">
|
||||
<div class="locationbox flex ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/locationicon.png" />
|
||||
<span>位置</span>
|
||||
</div>
|
||||
<div class="rotatebox">
|
||||
<div class="rotatebox flex ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/rotateicon.png" />
|
||||
<span>轨迹</span>
|
||||
</div>
|
||||
|
|
@ -65,6 +66,15 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.headerbox{
|
||||
display: flex;
|
||||
height: 38px;
|
||||
|
|
@ -72,7 +82,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
background-color: v-bind('backgroundColors[0]');
|
||||
|
||||
.headerli{
|
||||
width: 25%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -81,6 +91,10 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
color: v-bind('textColors[0]');
|
||||
}
|
||||
}
|
||||
.scopedbox{
|
||||
height: 100%;
|
||||
min-width: 120px;
|
||||
}
|
||||
.sectionbox{
|
||||
height: calc(100% - 38px);
|
||||
overflow: auto;
|
||||
|
|
@ -88,10 +102,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
background: v-bind('backgroundColors[1]');
|
||||
display: flex;
|
||||
height: 38px;
|
||||
.scopedbox{
|
||||
height: 100%;
|
||||
min-width: 120px;
|
||||
}
|
||||
.li{
|
||||
width: 0;
|
||||
flex: 1;
|
||||
|
|
@ -130,6 +140,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
border: 1px solid #F7CD7A;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
.img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -143,6 +154,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
border: 1px solid #8FF4B1;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
.img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { XunChaRecordListConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 16,
|
||||
textColor: '#FFFFFF',
|
||||
textSize1: 14,
|
||||
textColor1: '#FFFFFF',
|
||||
textSize2: 12,
|
||||
textColor2: '#CBE6CD',
|
||||
clockInRecordList:[
|
||||
{
|
||||
Name: '孙宗元',
|
||||
CreateTime: '2025-03-25 10:32:00',
|
||||
Lng: '118.042384994261',
|
||||
Lat: '35.41264994152264'
|
||||
}
|
||||
],
|
||||
xunChaGuiJiList:[
|
||||
{
|
||||
name: '孙宗元',
|
||||
startTime: '2025-03-25 10:32:00',
|
||||
endTime: '2025-03-25 17:32:00'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XunChaRecordListConfig.key
|
||||
public attr = { ...chartInitConfig, w: 379, h: 640, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(XunChaRecordListConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor = option.textColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor1 = option.textColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize1"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor2 = option.textColor2"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
v-model:value="optionData.textSize2"
|
||||
size="small"
|
||||
:min="10"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const XunChaRecordListConfig: ConfigType = {
|
||||
key: 'XunChaRecordList',
|
||||
chartKey: 'VXunChaRecordList',
|
||||
conKey: 'VCXunChaRecordList',
|
||||
title: '巡查轨迹-打卡记录',
|
||||
category: ChatCategoryEnum.XUNCHAGUIJI,
|
||||
categoryName: ChatCategoryEnumName.XUNCHAGUIJI,
|
||||
package: PackagesCategoryEnum.XUNCHAGUIJI,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'recordbgs.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
<template>
|
||||
<div class="go-title-xuncha">
|
||||
<div class="flex titlebox ai-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/titlelefticon.png" />
|
||||
<div class="flex">
|
||||
<div v-for="(item,index) in navsArr" class="flex navsli ai-c jc-c cursor" :class="navsIndex==index?'active':''" @click="navsClick(index)">{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="daterangebox">
|
||||
<n-date-picker
|
||||
v-model:formatted-value="rangeValue"
|
||||
type="datetimerange"
|
||||
clearable
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@update:formatted-value="dateChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="contentbox" v-if="navsIndex=='0'">
|
||||
<div class="flex fc-w ai-c jc-c" v-if="xunChaGuiJiList.length<1">暂无数据</div>
|
||||
<div class="flex contentli column jc-c" v-for="item in xunChaGuiJiList">
|
||||
<div class="flex ai-c jc-sb secbox">
|
||||
<div>
|
||||
<img class="userImg" src="/src/assets/images/chart/xunchaguiji/userimgs.png" />
|
||||
<span class="username">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex locationbox ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/btnicons04.png" />
|
||||
<span>范围</span>
|
||||
</div>
|
||||
<div class="flex rotatebox ai-c jc-c">
|
||||
<img class="img" src="/src/assets/images/chart/xunchaguiji/rotateicon.png" />
|
||||
<span>轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex datebox ai-c">
|
||||
<span>{{ item.startTime }}</span>
|
||||
<img class="line" src="/src/assets/images/chart/xunchaguiji/linerotate.png" />
|
||||
<span>{{ item.endTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentbox" v-if="navsIndex=='1'">
|
||||
<div class="flex ai-c jc-c fc-w" v-if="clockInRecordList.length<1">暂无数据</div>
|
||||
<div class="flex contentli column jc-c" v-for="item in clockInRecordList">
|
||||
<div class="flex ai-c secbox">
|
||||
<div class="flex column ai-c userbox">
|
||||
<img class="userImg1" src="/src/assets/images/chart/xunchaguiji/userimgs.png" />
|
||||
<span class="username">{{ item.Name }}</span>
|
||||
<div class="spanbox">打卡人员</div>
|
||||
</div>
|
||||
<div class="splitebox"></div>
|
||||
<div class="flex column">
|
||||
<div class="flex clockinfobox">
|
||||
<img class="iconsimg" src="/src/assets/images/chart/xunchaguiji/clockfill.png" />
|
||||
<span class="lab">打卡时间</span>
|
||||
<span class="val">{{ item.CreateTime }}</span>
|
||||
</div>
|
||||
<div class="flex clockinfobox">
|
||||
<img class="iconsimg" src="/src/assets/images/chart/xunchaguiji/positionicon.png" />
|
||||
<span class="lab">打卡点位置</span>
|
||||
<span class="val">
|
||||
<span>{{ item.Lng }}</span>
|
||||
<span v-if="item.Lat&&item.Lng">，</span>
|
||||
<span>{{ item.Lat }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, onMounted } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EventBus } from '@/utils/eventBus'
|
||||
import axios from 'axios'
|
||||
import { getAppEnvConfig } from '@/utils/env'
|
||||
var { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
textColor,
|
||||
textSize,
|
||||
textColor1,
|
||||
textSize1,
|
||||
textColor2,
|
||||
textSize2,
|
||||
clockInRecordList,
|
||||
xunChaGuiJiList
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const navsIndex = ref('1')
|
||||
const navsArr = ref(['巡查轨迹','打卡记录'])
|
||||
const rangeValue = ref()
|
||||
const userId = ref()
|
||||
const dateRange = ref([null,null])
|
||||
const navsClick = (index) =>{
|
||||
navsIndex.value = index
|
||||
}
|
||||
const dateChange = (e)=>{
|
||||
dateRange.value = e
|
||||
}
|
||||
const getRecordListData = ()=>{
|
||||
axios({
|
||||
method: "get",
|
||||
url: VITE_GLOB_API_URL + '/api/FireGrid/GetClockOnList',
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 9999,
|
||||
userId: userId.value,
|
||||
beginTime: dateRange.value[0],
|
||||
endTime: dateRange.value[1]
|
||||
},
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res => {
|
||||
let rel = res.data.result.items
|
||||
props.chartConfig.option.clockInRecordList = rel
|
||||
})
|
||||
}
|
||||
const getXunChaListData = ()=>{
|
||||
axios({
|
||||
method: "get",
|
||||
url: VITE_GLOB_API_URL + '/api/FirePatrol/GetPatrolInfoByUserId',
|
||||
params: {
|
||||
id: userId.value,
|
||||
beginTime: dateRange.value[0],
|
||||
endTime: dateRange.value[1]
|
||||
},
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res => {
|
||||
let rel = res.data.result
|
||||
props.chartConfig.option.xunChaGuiJiList = rel
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// 获取eventBus传过来的值
|
||||
EventBus.on('clockinlistsenddata', (data) => {
|
||||
userId.value = data.Id
|
||||
getRecordListData()
|
||||
getXunChaListData()
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-xuncha') {
|
||||
position: relative;
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc-w{
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.titlebox{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border-bottom: 1px solid #0A392A;
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
.img{
|
||||
width: 27px;
|
||||
height: 30px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.navsli{
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/btnbg.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.navsli.active{
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/btnbgactive.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.daterangebox{
|
||||
width: 90%;
|
||||
margin: 20px 5%;
|
||||
}
|
||||
.contentbox{
|
||||
height: calc(100% - 110px);
|
||||
overflow: auto;
|
||||
.contentli{
|
||||
width: 100%;
|
||||
height: 83px;
|
||||
background: url("/src/assets/images/chart/xunchaguiji/lisbg02.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
.secbox{
|
||||
width: 94%;
|
||||
margin-left: 3%;
|
||||
.userImg{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.userImg1{
|
||||
width: 27px;
|
||||
height: 28px;
|
||||
}
|
||||
.username{
|
||||
color: v-bind('textColor1');
|
||||
font-size: v-bind('textSize1+"px"');
|
||||
}
|
||||
.spanbox{
|
||||
width: 42px;
|
||||
height: 13px;
|
||||
background: #05954F;
|
||||
border-radius: 8px;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
}
|
||||
.userbox{
|
||||
width: 25%;
|
||||
}
|
||||
.splitebox{
|
||||
width: 1px;
|
||||
height: 57px;
|
||||
background: #05954F;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.locationbox{
|
||||
width: 47px;
|
||||
height: 22px;
|
||||
background: linear-gradient( 180deg, #1F2B1E 0%, #384232 100%);
|
||||
border-radius: 2px;
|
||||
border: 1px solid #F7CD7A;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
.img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.rotatebox{
|
||||
width: 47px;
|
||||
height: 22px;
|
||||
background: linear-gradient( 180deg, #182B20 0%, #136C3D 100%);
|
||||
border-radius: 2px;
|
||||
border: 1px solid #8FF4B1;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
.img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.clockinfobox{
|
||||
.iconsimg{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.lab{
|
||||
white-space: nowrap;
|
||||
font-size: v-bind('textSize2+"px"');
|
||||
color: v-bind('textColor2');
|
||||
margin: 0 10px 0 5px;
|
||||
}
|
||||
.val{
|
||||
font-size: v-bind('textSize2+"px"');
|
||||
color: v-bind('textColor1');
|
||||
}
|
||||
}
|
||||
}
|
||||
.datebox{
|
||||
width: 94%;
|
||||
margin-left: 3%;
|
||||
color: v-bind('textColor2');
|
||||
font-size: v-bind('textSize2+"px"');
|
||||
.line{
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
:deep(.n-input){
|
||||
background: #00611A;
|
||||
}
|
||||
:deep(.n-input__input-el) {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
:deep(.n-input__state-border){
|
||||
border-color: #00611A;
|
||||
}
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #00611A; /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #0EB687; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 当鼠标悬停在滑块上时改变颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,25 @@
|
|||
import { GoBackConfig } from './GoBack/index';
|
||||
import { XunChaPersonsConfig } from './XunChaPersons/index';
|
||||
import { XunChaIcons01Config } from './XunChaIcons01/index';
|
||||
import { XunChaIcons02Config } from './XunChaIcons02/index';
|
||||
import { XunChaIcons03Config } from './XunChaIcons03/index';
|
||||
import { XunChaIcons04Config } from './XunChaIcons04/index';
|
||||
import { XunChaIcons05Config } from './XunChaIcons05/index';
|
||||
import { XunChaIcons06Config } from './XunChaIcons06/index';
|
||||
import { XunChaClockInListConfig } from './XunChaClockInList/index';
|
||||
import { XunChaClockInInfosConfig } from './XunChaClockInInfos/index';
|
||||
import { XunChaRecordListConfig } from './XunChaRecordList/index';
|
||||
|
||||
export default [
|
||||
XunChaRecordListConfig,
|
||||
XunChaClockInInfosConfig,
|
||||
XunChaClockInListConfig,
|
||||
XunChaIcons01Config,
|
||||
XunChaIcons02Config,
|
||||
XunChaIcons03Config,
|
||||
XunChaIcons04Config,
|
||||
XunChaIcons05Config,
|
||||
XunChaIcons06Config,
|
||||
XunChaPersonsConfig,
|
||||
GoBackConfig,
|
||||
XunChaPersonsConfig
|
||||
];
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
.sectionbox{
|
||||
height: calc(100% - 38px);
|
||||
overflow: auto;
|
||||
background: v-bind('backgroundColors[0]');
|
||||
.secli{
|
||||
background: v-bind('backgroundColors[1]');
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export let packagesList: PackagesType = {
|
|||
[PackagesCategoryEnum.UNITS]: UnitsList,
|
||||
[PackagesCategoryEnum.ZHIGAN]: ZhiganList,
|
||||
[PackagesCategoryEnum.ZHILAN]: ZhilanList,
|
||||
// [PackagesCategoryEnum.XUNCHAGUIJI]: XunChaGuiJiList,
|
||||
[PackagesCategoryEnum.XUNCHAGUIJI]: XunChaGuiJiList,
|
||||
[PackagesCategoryEnum.ZHICHU]: ZhichuList,
|
||||
[PackagesCategoryEnum.ZHIKU]: ZhikuList,
|
||||
[PackagesCategoryEnum.EQUIPMENT]: EquipmentList,
|
||||
|
|
|
|||
Loading…
Reference in New Issue