2024.8.1

riku

2024-08-01 59b6bafdf03464ad5d89a74623ec8941dec415c7

2024.8.1

 src/App.vue

@@ -82,7 +82,7 @@
}

.el-main__content {
  padding: var(--el-main-padding);
  padding: var(--el-main-padding) calc(var(--el-main-padding) / 2);
  max-height: calc(100vh - 60px - var(--el-main-padding) * 2);
  /* background-color: aqua; */
  /* overflow: auto; */

 src/api/additional-jingan/index.js

@@ -2,7 +2,8 @@
import md5 from 'md5';
import { ElMessage } from 'element-plus';

let IP = 'http://101.230.224.80:8082/';
// let IP = 'http://101.230.224.80:8082/';
let IP = 'http://47.100.191.150:8080/jingan/';

const $jingan = axios.create({
  baseURL: IP,

 src/api/fysp/deviceApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
import { $fysp } from '../index';

export default {
  fetchDevice(sceneId) {
    return $fysp
      .get(`device`, {
        params: {
          sceneId: sceneId
        }
      })
      .then((res) => res.data);
  }
};

 src/api/index.js

@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';

const debug = false;
const debug = true;

let ip1 = 'http://47.100.191.150:9005/';
let ip1_file = 'http://47.100.191.150:9005/';

 src/components.d.ts

@@ -52,6 +52,7 @@
    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScorllbar: typeof import('element-plus/es')['ElScorllbar']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSpace: typeof import('element-plus/es')['ElSpace']

 src/components/search-option/base/FYOptionText.vue

@@ -5,7 +5,7 @@
      :model-value="value"
      :placeholder="placeholder"
      @input="handleInput"
      style="width: 150px"
      :style="'width:' + width + ';'"
    />
  </el-form-item>
</template>
@@ -13,6 +13,10 @@
<script>
export default {
  props: {
    width:{
      type: String,
      default: '150px'
    },
    label: {
      type: String,
      default: '查询项'

 src/views/fysp/support/JingAnSupport.vue

@@ -1,72 +1,15 @@
<template>
  <FYOptionTime :initValue="true" type="date" v-model:value="updateTime"></FYOptionTime>
  <el-button type="primary" @click="fetchNewDevice">查询新设备</el-button>
  <el-button type="primary" @click="fetchNewConstruction">查询新工地</el-button>
  <el-row>
    <el-col :span="12">
      <el-text>新设备</el-text>
      <div v-for="item in deviceList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.createTime }} |</span>
        <span>{{ item.updateTime }} |</span>
        <span>{{ item.remark }} |</span>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
      </div>
    </el-col>
    <el-col :span="12">
      <el-text>新工地</el-text>
      <div v-for="item in constructionList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.street }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
        <span>{{ item.score }} |</span>
        <span>{{ item.grade }}</span>
        <span>{{ item.subTaskId }} |</span>
        <span>{{ item.createTime }} |</span>
      </div>
    </el-col>
  </el-row>
  <el-tabs type="border-card">
    <el-tab-pane label="新设备">
      <NewDevice></NewDevice>
    </el-tab-pane>
    <el-tab-pane label="新工地">
      <NewConstruction></NewConstruction>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import constructionApi from '@/api/additional-jingan/constructionApi';
import { useFetchData } from '@/composables/fetchData';

const { loading, fetchData } = useFetchData();

const updateTime = ref();
const deviceList = ref([]);
const constructionList = ref([]);

// æŸ¥è¯¢éœ€ç¡®è®¤çš„设备清单
function fetchNewDevice() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryDevice(param).then((res) => {
      deviceList.value = res.data;
    });
  });
}

// æŸ¥è¯¢æ–°å»ºå·¥åœ°
function fetchNewConstruction() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryGdNew(param).then((res) => {
      constructionList.value = res.data;
    });
  });
}
import NewDevice from './NewDevice.vue';
import NewConstruction from './NewConstruction.vue';
</script>
<style scoped></style>

 src/views/fysp/support/NewConstruction.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <el-form :inline="true">
    <FYOptionTime :initValue="true" type="date" v-model:value="updateTime"></FYOptionTime>
    <el-form-item>
      <el-button type="primary" :loading="loading" @click="fetchNewConstruction"
        >查询新工地</el-button
      >
    </el-form-item>
  </el-form>
  <el-row>
    <el-col :span="12">
      <el-text>新工地</el-text>
      <div v-for="item in constructionList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.createTime }} |</span>
        <span>{{ item.updateTime }} |</span>
        <span>{{ item.remark }} |</span>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
      </div>
    </el-col>
    <el-col :span="12">
      <el-text>监管工地</el-text>
      <div v-for="item in sceneList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.street }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
        <span>{{ item.score }} |</span>
        <span>{{ item.grade }}</span>
        <span>{{ item.subTaskId }} |</span>
        <span>{{ item.createTime }} |</span>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import constructionApi from '@/api/additional-jingan/constructionApi';
import { useFetchData } from '@/composables/fetchData';

const { loading, fetchData } = useFetchData();

const updateTime = ref();
const constructionList = ref([]);
const sceneList = ref([])

// æŸ¥è¯¢æ–°å»ºå·¥åœ°
function fetchNewConstruction() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryGdNew(param).then((res) => {
      constructionList.value = res.data;
    });
  });
}
</script>
<style scoped></style>

 src/views/fysp/support/NewDevice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,100 @@
<template>
  <el-row>
    <el-col :span="8">
      <el-text>新设备</el-text>
      <el-form :inline="true">
        <FYOptionTime :initValue="true" type="date" v-model:value="updateTime"></FYOptionTime>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="fetchNewDevice"
            >查询新设备</el-button
          >
        </el-form-item>
      </el-form>
      <el-scrollbar height="76vh">
        <el-space direction="vertical" alignment="normal">
          <ItemDevice v-for="item in deviceList" :key="item.id" :item="item" @add="addDevice" />
        </el-space>
      </el-scrollbar>
    </el-col>
    <el-col :span="8">
      <DeviceMatch :device="selectedDevice" :scene="selectedScene"></DeviceMatch>
    </el-col>
    <el-col :span="8">
      <el-text>监管工地</el-text>
      <el-form :inline="false">
        <FYOptionText
          label="场景名称"
          placeholder="输入名称关键字"
          width="400px"
          v-model:value="searchText"
        ></FYOptionText>
        <el-form-item>
          <el-button type="primary" :loading="loading2" @click="fetchScene">查询监管场景</el-button>
        </el-form-item>
      </el-form>
      <el-scrollbar height="70vh">
        <!-- <el-space direction="vertical" alignment="normal"> -->
        <ItemScene v-for="item in sceneList" :key="item.sguid" :item="item" @add="addScene" />
        <!-- </el-space> -->
      </el-scrollbar>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, computed } from 'vue';
import dayjs from 'dayjs';
import constructionApi from '@/api/additional-jingan/constructionApi';
import sceneApi from '@/api/fysp/sceneApi';
import { useFetchData } from '@/composables/fetchData';

import ItemDevice from './components/ItemDevice.vue';
import ItemScene from './components/ItemScene.vue';
import DeviceMatch from './components/DeviceMatch.vue';

const { loading, fetchData } = useFetchData();

const updateTime = ref();
const deviceList = ref([]);
const selectedDevice = ref(null);

const searchText = ref();
const sceneList = ref([]);
const selectedScene = ref(null);

// æŸ¥è¯¢éœ€ç¡®è®¤çš„设备清单
function fetchNewDevice() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryDevice(param).then((res) => {
      deviceList.value = res.data;
    });
  });
}

function addDevice(item) {
  selectedDevice.value = item;
  searchText.value = item.name;
  fetchScene();
}

const { loading: loading2, fetchData: fetchData2 } = useFetchData();
// æŸ¥è¯¢ç›‘管场景
function fetchScene() {
  const area = {};
  area.sceneName = searchText.value;
  fetchData2((page, pageSize) => {
    return sceneApi.searchScene(area, page, pageSize).then((res) => {
      sceneList.value = res.data;
    });
  });
}

function addScene(item) {
  selectedScene.value = item;
}
</script>
<style scoped>
.device-scene-wrap {
  border: 1px solid black;
}
</style>

 src/views/fysp/support/components/DeviceMatch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,51 @@
<template>
  <el-card shadow="hover">
    <div>新设备</div>
    <div v-if="device">{{ device.name }}</div>
    <div v-else>未选择</div>
    <el-divider></el-divider>
    <div>监管场景</div>
    <div v-if="scene">{{ scene.name }}</div>
    <div v-else>未选择</div>
    <template #footer>
      <el-row justify="space-between">
        <div>
          <!-- <el-button type="primary" plain :disabled="!enabled">名称同步</el-button> -->
          <el-button type="primary" plain :disabled="!enabled">录入设备信息</el-button>
        </div>
        <el-button type="danger" :disabled="!enabled">上传匹配信息</el-button>
      </el-row>
      <el-row></el-row>
    </template>
  </el-card>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import deviceApi from '@/api/fysp/deviceApi';

const props = defineProps({
  device: Object,
  scene: Object
});

const deviceList = ref([]);

const enabled = computed(() => {
  return props.device && props.scene;
});

watch(
  () => props.scene,
  (nV, oV) => {
    if (nV != oV) {
      fetchDeviceInfo();
    }
  }
);

function fetchDeviceInfo() {
  deviceApi.fetchDevice(props.scene.guid).then((res) => {
    deviceList.value = res.data;
  });
}
</script>

 src/views/fysp/support/components/ItemConstruction.vue

 src/views/fysp/support/components/ItemDevice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,63 @@
<template>
  <el-card shadow="hover">
    <!-- <template #header>
      <div class="card-header">
        <span>Card name</span>
      </div>
    </template> -->
    <!-- <el-descriptions :column="3" size="default" border>
      <el-descriptions-item label="序号">{{ item.id }}</el-descriptions-item>
      <el-descriptions-item label="MN编号">{{ item.code }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ item.name }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ item.address }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ item.status }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ item.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ item.updateTime }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ item.remark }}</el-descriptions-item>
      <el-descriptions-item label="经纬度">{{ item.lon }}, {{ item.lat }}</el-descriptions-item>
    </el-descriptions> -->
    <el-row justify="space-between">
      <div>
        <el-text>{{ item.id }}、</el-text>
        <el-text>{{ item.name }}</el-text>
      </div>
      <div>
        <el-text>MN编号：{{ item.code }}</el-text>
      </div>
    </el-row>
    <div>
      <el-text>地址：</el-text>
      <el-text>{{ item.address }}</el-text>
    </div>
    <el-row justify="space-between">
      <div>
        <el-text size="small" type="info">经纬度：{{ item.lon }}, {{ item.lat }}</el-text>
      </div>
      <el-space>
        <div>
          <el-text size="small" type="info">创建时间：{{ item.createTime }}</el-text>
        </div>
        <div>
          <el-text size="small" type="info">更新时间：{{ item.updateTime }}</el-text>
        </div>
      </el-space>
    </el-row>
    <el-row justify="end">
      <el-button size="small" type="success" @click="add">添加</el-button>
    </el-row>
  </el-card>
</template>
<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
});

const emit = defineEmits(['add']);

function add() {
  emit('add', props.item);
}
</script>

 src/views/fysp/support/components/ItemScene.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,34 @@
<template>
  <el-card shadow="hover">
    <el-row justify="space-between">
      <div>
        <el-text>{{ item.index }}、</el-text>
        <el-text>{{ item.name }}</el-text>
      </div>
      <div>
        <el-text>类型：{{ item.type }}</el-text>
      </div>
    </el-row>
    <div>
      <el-text>区县：</el-text>
      <el-text>{{ item.districtname }}</el-text>
    </div>
    <el-row justify="start">
      <el-button size="small" type="success" @click="add">添加</el-button>
    </el-row>
  </el-card>
</template>
<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
});

const emit = defineEmits(['add']);

function add() {
  emit('add', props.item);
}
</script>