<template> <div class="page"> <BasicForm class="form" @register="register" /> <div class="
flex"> <List :list="list" /> <div class="
flex items-center"> <pieChart :value="34" /> <div class="pos-relative
flex-col"> <Item v-for="(item, index) in list1" :key="index" v-bind="item" /> </div> </div> <div class="
flex items-center"> <pieChart :value="77" /> <div class="pos-relative
flex-col"> <Item v-for="(item, index) in list2" :key="index" v-bind="item" /> </div> </div> </div> <div class="
flex"> <div class="leftchart mt-7 w-1/2"> <div class="header1
flex justify-between pt-2"> <div class="ml-40 c-#00EAFF">配置图表</div> <div class="
flex"> <div :class="type == index ? 'active' : 'default'" v-for="(item, index) in buttons" :key="index" @click="type = index" > {{ item }}</div > </div> </div> <lineChart1 :data="data" :x="x" /> </div> <div class="leftchart mt-7 w-1/2"> <div class="header2
flex justify-between pt-2"> <div class="ml-40 c-#00EAFF">配置图表</div> <div class="
flex"> <div :class="type == index ? 'active' : 'default'" v-for="(item, index) in buttons2" :key="index" @click="type = index" > {{ item }}</div > </div> </div> <lineBarChart :data="data2" :x="x2" /> </div> </div> <div class="leftchart mt-7 w-full"> <div class="header3
flex justify-between"> </div> <div class="content
flex"> <GaugeChart /> <pieChart1 /> <lineBarChart1 /> <DetectionIndex /> </div> </div> <div class="leftchart mt-7 w-full"> <div class="header4
flex justify-between"> </div> <div class="fjsblb"> <p>风机设备列表</p> <a-input-search v-model:value="value" style="width: 326px; height: 40px; padding-left: 12px;" placeholder="按风机名称筛选" search /> </div> <TreeList /> </div> </div> </template> <script lang="ts" setup> import { BasicForm, useForm } from '/@/
components/Form'; import List from './
components/list.vue'; import pieChart from './
components/pieChart.vue'; import pieChart1 from './
components/pieChart1.vue'; import lineChart1 from './
components/lineChart.vue'; import lineBarChart from './
components/lineBarChart.vue'; import lineBarChart1 from './
components/lineBarChart1.vue'; import GaugeChart from './
components/GaugeChart.vue'; import DetectionIndex from './
components/DetectionIndex.vue'; import Item from './
components/item'; import TreeList from '/@/views/test/testTree/list.vue'; import { ref, h } from 'vue'; const type = ref(0); const buttons = ['1小时', '24小时']; const buttons2 = ['周', '月', '季', '年']; const list1 = ref([ { name: '总出力(MW)', value: 32.81, }, { name: '总容量(MW)', value: 97.36, }, ]); const list2 = ref([ { name: '当年发电量·实际/全年计划(万kWh)', value: '9460.1 / 12310', }, { name: '当年利用小时·实际/全年目标(h)', value: '1259 / 1638', }, ]); const [register] = useForm({ schemas: [ { label: '场站', field: 'fengchang',
component: 'Select',
componentProps: { placeholder: '请选择风场', }, }, ], labelWidth: 120, baseColProps: { lg: 6, md: 6 }, showResetButton: true, showSubmitButton: true, }); const list = [ { name: '正常发电', value: 154, color: '#2BFCCF', }, { name: '限功率', value: 0, color: '#F41EFF', }, { name: '用户停机', value: 1, color: '#fff', }, { name: '故障停机', value: 0, color: '#FF5B5B', }, { name: '服务停机', value: 0, color: '#FFFB97', }, { name: '电网故障', value: 0, color: '#BE56FF', }, { name: '技术待机', value: 0, color: '#C4CDA4', }, { name: '环境待命', value: 0, color: '#fff', }, { name: '未知状态', value: 0, color: '#66EFD4', }, ]; const data = ref([ { name: '风机有功功率总计', yAxisIndex: 0, data: [25, 35, 22, 29, 33, 28], color: '#D9D92E', }, { name: '风速', yAxisIndex: 1, data: [4, 6, 5, 7, 4, 3], color: '#1CD6C0', }, { name: '理论功率', yAxisIndex: 0, data: [25, 16, 32, 24, 26, 32], color: '#0E9CFF', }, { name: '场站ACG指令值', yAxisIndex: 0, data: [29, 24, 33, 19, 35, 22], color: '#FF830F', }, ]); const data2 = ref([ { name: '完成率', yAxisIndex: 1, data: [7, 9, 6, 9, 8, 7, 8], type: 'line', color: '#D9D9D9', }, { name: '计划发电量', yAxisIndex: 0, type: 'bar', data: [22, 23, 25, 27, 24, 23, 20], color: '#19C2FF', }, { name: '理论功率', yAxisIndex: 0, type: 'bar', data: [25, 16, 32, 24, 26, 32, 44], color: '#26FFC9', }, { name: '场站ACG指令值', yAxisIndex: 0, type: 'bar', data: [29, 24, 33, 19, 35, 22, 32], color: '#FBC935', }, { name: 'PBA', yAxisIndex: 1, type: 'line', data: [7, 5, 8, 5, 9, 7, 5], color: '#4476FF', }, ]); const x = ref(['18:00', '18:05', '18:10', '18:15', '18:20']); const x2 = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']); </script> <style lang="less" scoped> .page { padding: 0 3vh; .form { margin-left: 15%; } } .leftchart { .header(@bg) { background: url(@bg); background-size: cover; width: 100%; height: 41px; } .common1 { width: 60px; height: 22px; text-align: center; margin-right: 10px; cursor: pointer; } .active { background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.95) 100%); border: 1px solid rgba(30, 123, 214, 0.8); color: #d8f0ff; text-shadow: 0px 0px 10px #0091ff, 0px 0px 4px #0091ff; .common1(); } .default { background: linear-gradient(180deg, rgba(15, 133, 159, 0) 0%, rgba(17, 100, 160, 0.95) 100%); border: 1px solid rgba(0, 66, 131, 0.8); color: rgba(216, 240, 255, 0.7); text-shadow: 0px 0px 10px #0091ff, 0px 0px 4px #0091ff; .common1(); } .header1 { .header('/@/assets/images/fj/cz/header1.png'); } .header2 { .header('/@/assets/images/fj/cz/header2.png'); } .header3 { .header('/@/assets/images/fj/cz/header3.png'); } .header4 { .header('/@/assets/images/fj/cz/header4.png'); } .content { // height: 360px; margin-top: 3px; background: linear-gradient(136deg, rgba(0, 156, 223, 0.2) 50%, rgba(0, 156, 223, 0.05) 100%); border-radius: 11px; margin-bottom: 30px; } .fjsblb { margin: 32px 37px; color: #d8f0ff; display:
flex; align-items: center; p { margin-right: 14px; font-size: 16px; color: #a6c9e3; } a-input-search { width: 200px; } } } </style> <TreeList /> 是引用的其他组件, 拿过来还有其他样式, 现在我只需要表格就可以了 下面是公共的样式<!--
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
* No deletion without permission, or be held responsible to law.
* @author ThinkGem
-->
<template>
<div>
<BasicTable @register="registerTable" @fetch-success="fetchSuccess">
<template #tableTitle>
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
<span> {{ getTitle.value }} </span>
</template>
<template #toolbar>
<a-button @click="expandAll" :title="t('展开一级')">
<Icon icon="i-bi:chevron-double-down" /> {{ t('展开') }}
</a-button>
<a-button @click="collapseAll" :title="t('折叠全部')">
<Icon icon="i-bi:chevron-double-up" /> {{ t('折叠') }}
</a-button>
<a-button type="primary" @click="handleForm({})" v-auth="'test:testTree:edit'">
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
</a-button>
</template>
<template #firstColumn="{ record }">
<span class="cursor-pointer" @click="expandCollapse(record)">
( {{ record.treeCode }} )
</span>
<a @click="handleForm({ treeCode: record.treeCode })">
{{ record.treeName }}
</a>
</template>
</BasicTable>
<InputForm @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup name="ViewsTestTestTreeList">
import { watch, nextTick, unref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { router } from '/@/router';
import { Icon } from '/@/
components/Icon';
import { BasicTable, BasicColumn, useTable } from '/@/
components/Table';
import { testTreeDelete, testTreeListData } from '/@/api/test/testTree';
import { testTreeDisable, testTreeEnable } from '/@/api/test/testTree';
import { useDrawer } from '/@/
components/Drawer';
import { FormProps } from '/@/
components/Form';
import InputForm from './form.vue';
const props = defineProps({
treeCode: String,
});
const { t } = useI18n('test.testTree');
const { showMessage } = useMessage();
const { meta } = unref(router.currentRoute);
const getTitle = {
icon: meta.icon || 'ant-design:book-outlined',
value: meta.title || t('数据管理'),
};
const searchForm: FormProps = {
baseColProps: { lg: 6, md: 8 },
labelWidth: 90,
schemas: [
{
label: t('节点名称'),
field: 'treeName',
component: 'Input',
},
{
label: t('状态'),
field: 'status',
component: 'Select',
componentProps: {
dictType: 'sys_search_status',
allowClear: true,
onChange: handleSuccess,
},
},
{
label: t('备注信息'),
field: 'remarks',
component: 'Input',
},
],
};
const tableColumns: BasicColumn[] = [
{
title: t('节点名称'),
dataIndex: 'treeName',
width: 230,
align: 'left',
slot: 'firstColumn',
},
{
title: t('排序号'),
dataIndex: 'treeSort',
width: 130,
align: 'center',
},
{
title: t('状态'),
dataIndex: 'status',
width: 130,
align: 'center',
dictType: 'sys_status',
},
{
title: t('更新时间'),
dataIndex: 'updateDate',
width: 130,
align: 'center',
},
{
title: t('备注信息'),
dataIndex: 'remarks',
width: 130,
align: 'left',
},
];
const actionColumn: BasicColumn = {
width: 160,
actions: (record: Recordable) => [
{
icon: 'i-clarity:note-edit-line',
title: t('编辑数据'),
onClick: handleForm.bind(this, { treeCode: record.treeCode }),
auth: 'test:testTree:edit',
},
{
icon: 'i-ant-design:stop-outlined',
color: 'error',
title: t('停用数据'),
popConfirm: {
title: t('是否确认停用数据'),
confirm: handleDisable.bind(this, record),
},
auth: 'test:testTree:edit',
ifShow: () => record.status === '0',
},
{
icon: 'i-ant-design:check-circle-outlined',
color: 'success',
title: t('启用数据'),
popConfirm: {
title: t('是否确认启用数据'),
confirm: handleEnable.bind(this, record),
},
auth: 'test:testTree:edit',
ifShow: () => record.status === '2',
},
{
icon: 'i-ant-design:delete-outlined',
color: 'error',
title: t('删除数据'),
popConfirm: {
title: t('是否确认删除数据'),
confirm: handleDelete.bind(this, record),
},
auth: 'test:testTree:edit',
},
{
icon: 'i-fluent:add-circle-24-regular',
title: t('新增下级数据'),
onClick: handleForm.bind(this, {
parentCode: record.treeCode,
parentName: record.treeName,
}),
auth: 'test:testTree:edit',
},
],
};
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
api: testTreeListData,
beforeFetch: (params) => {
params.id = props.treeCode;
return params;
},
columns: tableColumns,
actionColumn: actionColumn,
formConfig: searchForm,
showTableSetting: true,
useSearchForm: true,
isTreeTable: true,
pagination: false,
canResize: true,
});
watch(
() => props.treeCode,
() => {
reload();
},
);
function fetchSuccess() {
if (props.treeCode) {
nextTick(expandAll);
}
}
function handleForm(record: Recordable) {
openDrawer(true, record);
}
async function handleDisable(record: Recordable) {
const params = { treeCode: record.treeCode };
const res = await testTreeDisable(params);
showMessage(res.message);
handleSuccess(record);
}
async function handleEnable(record: Recordable) {
const params = { treeCode: record.treeCode };
const res = await testTreeEnable(params);
showMessage(res.message);
handleSuccess(record);
}
async function handleDelete(record: Recordable) {
const params = { treeCode: record.treeCode };
const res = await testTreeDelete(params);
showMessage(res.message);
handleSuccess(record);
}
function handleSuccess(record: Recordable) {
reload({ record });
}
</script>
本文详细介绍了如何使用CSS去除TextInput组件选择输入值时的边框高亮效果，提供了解决方案并附上代码示例。
扫一扫
3946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
