Skip to content

W
web-project
Commit eefb9eb1 authored by 裴文涛's avatar 裴文涛
Browse files
Options

Merge branch 'master' of http://gitlab.91isoft.com:90/hikvision/web-project

parents 4c8f0be6 245e4887
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 66 deletions
src/components/FormComponents/dateTimePicker.vue
View file @ eefb9eb1
......@@ -9,14 +9,15 @@ const props = defineProps({
const value = ref("");
const input = () => {
console.log(props.items);
mitter.emit("changeVal", { name: props.prop, value: value.value });
};
</script>
<template>
<div>
<el-date-picker v-bind="items" v-model="value" @input="input" />
</div>
<el-date-picker
v-bind="items"
style="width: 100%"
v-model="value"
@input="input"
/>
</template>
src/components/FormComponents/input.vue
View file @ eefb9eb1
......@@ -9,14 +9,10 @@ const props = defineProps({
const value = ref("");
const input = () => {
console.log(props.items);
mitter.emit("changeVal", { name: props.prop, value: value.value });
};
</script>
<template>
<div>
<el-input v-bind="items" v-model="value" @input="input" />
</div>
<el-input v-bind="items" v-model="value" style="width: 100%" @input="input" />
</template>
src/components/FormComponents/select.vue
View file @ eefb9eb1
......@@ -15,11 +15,10 @@ const onChangeFirstValue = (val) => {
</script>
<template>
<div>
<el-select
v-model="value"
:v-bind="items"
style="width: 240px"
style="width: 100%;"
@change="onChangeFirstValue(value)"
>
<el-option
......@@ -29,5 +28,4 @@ const onChangeFirstValue = (val) => {
:value="item.value"
/>
</el-select>
</div>
</template>
\ No newline at end of file
src/components/PageData.vue
View file @ eefb9eb1
......@@ -2,12 +2,12 @@
<div class="annual-param-container">
<el-card>
<div class="search-add-wrapper">
<el-form ref="searchForm" :inline="true" label-suffix=":">
<el-row :gutter="10">
<el-form ref="searchForm" label-suffix=":">
<el-row :gutter="20" justify="space-evenly">
<el-col
v-for="(item, index) in props.schemas"
:key="index"
:span="20"
v-bind="item.colProps"
>
<el-form-item :label="item.label" :prop="item.prop">
<component
......@@ -20,8 +20,14 @@
</el-col>
</el-row>
</el-form>
</div>
<div class="btn-list">
<div style="margin-top: 5px;">
<slot name="button">
<div>
</slot>
</div>
<div style="margin-right: -10px">
<el-button type="primary" class="add-search-btn" @click="handleSearch"
>查询</el-button
>
......@@ -39,20 +45,78 @@
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass"
>
<!-- <el-table-column label="序号" align="center" width="100" /> -->
<el-table-column
v-for="(column, key) in columns"
v-for="(column, key) in props.columns"
:key="key"
:v-bind="column"
></el-table-column>
:prop="column.prop"
:label="column.label"
:width="column.width"
:align="column.align"
>
</el-table-column>
<el-table-column label="操作" width="300">
<template #default="scope">
<template
v-for="(action, index) in actions"
:key="`${index}-${action.label}`"
>
<el-popconfirm
v-if="action.popConfirm"
v-bind="action.popConfirm"
>
<template #reference>
<el-button text size="mini" v-bind="action">{{
action.label
}}</el-button>
</template>
</el-popconfirm>
<el-button
v-else
text
size="mini"
v-bind="action"
@click="action.onClick(scope.row)"
>{{ action.label }}</el-button
>
<el-divider
direction="vertical"
v-if="index < actions.length - 1"
/>
</template>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
v-model:current-page="PagePrarms.page"
v-model:page-size="PagePrarms.limit"
:page-sizes="[30, 40, 50, 100, 200, 300]"
:small="true"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="getData"
@current-change="getData"
/>
</div>
</div>
</el-card>
</div>
</template>
<script setup>
import { defineProps, reactive, watch } from "vue";
import { defineProps, reactive, watch, ref } from "vue";
import mitter from "@/utils/mitter";
import components from "@/components/FormComponents/index"; // 将所有组件引入
import {
View,
Delete,
Edit,
Message,
Search,
Star,
} from "@element-plus/icons-vue";
import http from "@/api/http";
const emit = defineEmits(["DataChange"]);
const props = defineProps({
schemas: {
......@@ -71,19 +135,45 @@ const props = defineProps({
type: Array,
default: [],
},
actions: {
type: Array,
default: [],
},
});
const data = reactive([]);
const PagePrarms = reactive({
page: 1,
limit: 10,
});
const loading = ref(false);
let data = ref([]);
const total = ref(0);
const searchForm = reactive({});
const getData = () => {
let params = {
...PagePrarms,
...props.formData,
};
http
.post(props.api, params)
.then((res) => {
if (res.success) {
data.value = res.data;
}
})
.catch(function (error) {
console.log(error);
});
};
getData();
const handleSearch = () => {
console.log(handleSearch);
PagePrarms.page = 1;
getData();
};
const handleReset = () => {
console.log(handleReset);
};
// 监听chageVal
mitter.on("changeVal", (data) => {
console.log(data);
const { name, value } = data;
if (name) {
props.formData[name] = value;
......@@ -101,20 +191,26 @@ defineExpose({ formData: props.formData });
<style scoped lang="less">
.annual-param-container {
width: 100%;
margin: 4px;
margin: 8px;
position: relative;
clear: both;
.el-card {
width: 100%;
}
}
.search-add-wrapper {
width: 100%;
display: flex;
justify-content: start;
.el-form {
margin-bottom: -10px;
width: 100%;
}
}
.search-add-wrapper .el-row {
border: none;
display: flex;
align-items: center;
margin: 5px 10px 5px 5px;
}
.add-search-btn {
......@@ -167,28 +263,18 @@ defineExpose({ formData: props.formData });
border-right: 1px solid #a6c3e9;
border-bottom: 1px solid #a6c3e9;
width: 100%;
height: 35px;
color: #124362;
.el-form-item {
width: 100%;
margin-bottom: 10px;
}
}
.el-col[col-label] {
.btn-list {
display: flex;
justify-content: end;
align-items: center;
border-right: 1px solid #a6c3e9;
background-color: #f2f6f8;
padding-right: 5px;
justify-content: space-between;
}
.el-col[col-value] {
.pagination {
display: flex;
justify-content: start;
align-items: center;
padding-left: 5px;
}
.el-input {
color: black;
height: 24px;
justify-content: center;
margin-top: 10px;
}
</style>
src/router/index.js
View file @ eefb9eb1
......@@ -404,8 +404,8 @@ const routes = [
{
path: "/Scheduling/EnergyManage",
name: "EnergyManagePage",
// component: () => import("@/views/SmartNumbers/PipeTemperature.vue"),
component: () => import("@/views/SchedulingPage/EnergyManagePage.vue"),
component: () => import("@/views/SmartNumbers/PipeTemperature.vue"),
// component: () => import("@/views/SchedulingPage/EnergyManagePage.vue"),
meta: {
title: "能源消耗",
},
......
src/views/SmartNumbers/PipeTemperature.vue
View file @ eefb9eb1
......@@ -3,20 +3,51 @@
api="/api/Scheduling/WeatherCondition/Get"
:schemas="schemas"
:columns="columns"
:actions="actions"
:formData="formData"
@DataChange="formDataChange"
></PageData>
>
<template v-slot:button>
<el-button type="primary">添加</el-button>
<el-button type="primary">导入</el-button>
</template>
</PageData>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { ref } from "vue";
import PageData from "@/components/PageData.vue";
import { columns, schemas } from "./formSchems";
const formData = ref({
name: "",
code: "",
date: "",
name: undefined,
code: undefined,
date: undefined,
});
const formDataChange = (val) => {
formData.value = val;
};
const actions = [
{
label: "详情",
icon: "View",
onClick: (record) => {
console.log(record);
},
},
{
label: "编辑",
icon: "Edit",
onClick: () => {},
},
{
label: "删除",
type: "danger",
icon: "Delete",
popConfirm: {
title: "是否确认删除",
confirm: () => {
tableRef.value?.remove(record);
},
},
},
];
</script>
src/views/SmartNumbers/formSchems.js
View file @ eefb9eb1
......@@ -2,36 +2,74 @@ import { ref } from "vue";
export const columns = ref([
{
label: "设备名称",
prop: "name",
prop: "phenomenonName",
align: "center",
with: 200,
width: "200",
},
{
label: "设备名称",
prop: "name",
prop: "phenomenonType",
align: "center",
with: 200,
width: "200",
},
{
label: "设备名称",
prop: "phenomenonName",
align: "center",
width: "200",
},
{
label: "设备名称",
prop: "phenomenonName",
align: "center",
width: "200",
},
{
label: "设备名称",
prop: "phenomenonType",
align: "center",
width: "200",
},
{
label: "设备名称",
prop: "phenomenonType",
align: "center",
width: "200",
},
{
label: "设备名称",
prop: "name",
align: "center",
with: 200,
width: "200",
},
]);
export const schemas = ref([
{
label: "设备名称",
// label: "设备名称",
prop: "name",
type: "input",
colProps: {
xs: 12,
sm: 12,
md: 12,
lg: 6,
xl: 6,
},
componentProps: {
placeholder: "请输入设备名称",
},
},
{
label: "设备编号",
// label: "设备编号",
prop: "code",
type: "select",
colProps: {
xs: 12,
sm: 12,
md: 12,
lg: 6,
xl: 6,
},
componentProps: {
options: [
{ label: "11111", value: 1 },
......@@ -41,13 +79,38 @@ export const schemas = ref([
},
},
{
label: "设备名称",
// label: "开始日期",
prop: "date",
type: "dateTimePicker",
colProps: {
xs: 12,
sm: 12,
md: 12,
lg: 6,
xl: 6,
},
componentProps: {
type: "datetime",
placeholder: "开始日期",
format: "YYYY-MM-DD HH:mm:ss",
datFormat: "YYYY/MM/DD",
timeFormat: "HH:mm:ss",
},
},
{
// label: "结束日起",
prop: "date",
type: "dateTimePicker",
colProps: {
xs: 12,
sm: 12,
md: 12,
lg: 6,
xl: 6,
},
componentProps: {
type: "datetimerange",
startPlaceholder: "开始日起",
endPlaceholder: "结束日期",
type: "datetime",
placeholder: "结束日期",
format: "YYYY-MM-DD HH:mm:ss",
datFormat: "YYYY/MM/DD",
timeFormat: "HH:mm:ss",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment