|
|
@@ -1,151 +1,31 @@
|
|
|
<template>
|
|
|
- <div class="container-app">
|
|
|
- <t-form
|
|
|
- ref="form"
|
|
|
- :rules="rules"
|
|
|
- :data="formData"
|
|
|
- :colon="true"
|
|
|
- @reset="onReset"
|
|
|
- @submit="onSubmit"
|
|
|
- >
|
|
|
- <template v-for="(item, index) in formData.curvatureList" :key="index">
|
|
|
- <t-row>
|
|
|
- <t-form-item label="开始" :name="'curvatureList.' + index + '.start'">
|
|
|
- <t-input-number
|
|
|
- v-model="item.start"
|
|
|
- theme="normal"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></t-input-number>
|
|
|
- </t-form-item>
|
|
|
- <t-form-item
|
|
|
- label="结束"
|
|
|
- :name="'curvatureList.' + index + '.end'"
|
|
|
- :rules="validatorValue(item, index)"
|
|
|
- >
|
|
|
- <t-input-number
|
|
|
- v-model="item.end"
|
|
|
- theme="normal"
|
|
|
- style="width: 200px"
|
|
|
- @change="qulvInputChange(formData.curvatureList, item, index)"
|
|
|
- :disabled="index === formData.curvatureList.length - 1"
|
|
|
- :tips="item.errorTip"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></t-input-number>
|
|
|
- </t-form-item>
|
|
|
- <t-button @click="addItem" v-if="index === 0">添加</t-button>
|
|
|
- <t-button v-else @click="removeItem(item, index)">删除</t-button>
|
|
|
- </t-row>
|
|
|
- </template>
|
|
|
-
|
|
|
- <t-form-item>
|
|
|
- <t-button theme="primary" type="submit">提交</t-button>
|
|
|
- <t-button theme="default" variant="base" type="reset">重置</t-button>
|
|
|
- </t-form-item>
|
|
|
- </t-form>
|
|
|
+ <div style="width: 100%; height: 100%">
|
|
|
+ <div id="mapContainer" style="width: 100%; height: 100%"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref, toRefs, reactive, computed } from 'vue';
|
|
|
-
|
|
|
-const validatorValue = (item, index) => {
|
|
|
- return [
|
|
|
- { required: true, message: '值必填', type: 'error' },
|
|
|
- {
|
|
|
- validator: (val) => {
|
|
|
- if (Number(val) > 30 || Number(val) < -50) {
|
|
|
- return {
|
|
|
- result: false,
|
|
|
- message: '范围在-50至30之间',
|
|
|
- type: 'error',
|
|
|
- };
|
|
|
- }
|
|
|
- if (val && val < item.start) {
|
|
|
- return {
|
|
|
- result: false,
|
|
|
- message: '结束范围不能小于开始范围',
|
|
|
- type: 'error',
|
|
|
- };
|
|
|
- }
|
|
|
- return true;
|
|
|
- },
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- return true;
|
|
|
-};
|
|
|
-// const currentIndex = ref(null);
|
|
|
-const rules = {
|
|
|
- enumVal: [
|
|
|
- { required: true, message: '值必填', type: 'error' },
|
|
|
- { validator: validatorValue },
|
|
|
- ],
|
|
|
-};
|
|
|
-const formData = reactive({
|
|
|
- sysName: '',
|
|
|
- energyStationId: '',
|
|
|
- weatherCode: '',
|
|
|
- controlModel: 1,
|
|
|
- startTemperature: 0, //起始温度
|
|
|
- targetTemperature: 0, //目标温度
|
|
|
- curvatureList: [
|
|
|
- //曲率
|
|
|
- {
|
|
|
- start: -50,
|
|
|
- end: 30,
|
|
|
- qulv: 0.5,
|
|
|
- errorTip: '',
|
|
|
- },
|
|
|
- ],
|
|
|
- amendmentList: [
|
|
|
- // 分时修正
|
|
|
- {
|
|
|
- startTime: '00:00',
|
|
|
- endTime: '23:59',
|
|
|
- value: 0,
|
|
|
- },
|
|
|
- ],
|
|
|
+<script setup lang="ts">
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import { ref, onMounted, reactive } from 'vue';
|
|
|
+const state = reactive({
|
|
|
+ map: null,
|
|
|
});
|
|
|
-
|
|
|
-const qulvInputChange = (data: any, row: any, index: number) => {
|
|
|
- const { end } = data[index];
|
|
|
- formData.curvatureList[index + 1].start = end;
|
|
|
- // row.errorTip = index !== 0 && end < row.start ? '不能小于当前值' : '';
|
|
|
-};
|
|
|
-
|
|
|
-const addItem = () => {
|
|
|
- formData.curvatureList[formData.curvatureList.length - 1].end = '';
|
|
|
- let obj = { start: '', end: 30, qulv: 0.5 };
|
|
|
- formData.curvatureList.push(obj);
|
|
|
-};
|
|
|
-
|
|
|
-const removeItem = (item, index) => {
|
|
|
- let list = formData.curvatureList;
|
|
|
- if (index == list.length - 1) {
|
|
|
- list.splice(index, 1);
|
|
|
- list[list.length - 1].end = 30;
|
|
|
- } else {
|
|
|
- list[index + 1].start = list[index - 1].end;
|
|
|
- list.splice(index, 1);
|
|
|
- }
|
|
|
-};
|
|
|
-const onSubmit = ({ validateResult, firstError, e }) => {
|
|
|
- e.preventDefault();
|
|
|
- if (validateResult === true) {
|
|
|
- console.log('提交成功');
|
|
|
- // MessagePlugin.success('提交成功');
|
|
|
- } else {
|
|
|
- console.log('Validate Errors: ', firstError, validateResult);
|
|
|
- // MessagePlugin.warning(firstError);
|
|
|
- }
|
|
|
+onMounted(() => {
|
|
|
+ initMap();
|
|
|
+});
|
|
|
+const initMap = () => {
|
|
|
+ AMapLoader.reset();
|
|
|
+ AMapLoader.load({
|
|
|
+ key: '190ca276eab6a1a369fa80e1f9977a8f', // 此处填入我们注册账号后获取的Key
|
|
|
+ version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: ['AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ }).then((AMap) => {
|
|
|
+ var GMap = new AMap.Map('mapContainer', {
|
|
|
+ zoom: 10, // 地图显示的缩放级别
|
|
|
+ center: [103.260315, 36.736032], // 初始化地图中心点位置, // 地图中心点坐标 此处填【经度，纬度】
|
|
|
+ mapStyle: 'amap://styles/normal', //设置地图的显示样式
|
|
|
+ resizeEnable: true, // 是否监控地图容器尺寸变化
|
|
|
+ });
|
|
|
+ state.map = GMap;
|
|
|
+ });
|
|
|
};
|
|
|
-
|
|
|
-const onReset = () => {};
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.dialog-content-title {
|
|
|
- padding: 0 0 10px 0;
|
|
|
-}
|
|
|
-</style>
|
123