提交新版本

.vscode/settings.json

@@ -92,7 +92,7 @@
       "source.fixAll.eslint": "explicit",
       "source.fixAll.stylelint": "explicit"
     },
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "Vue.volar"
   },
   "i18n-ally.localesPaths": ["src/locales/lang"],
   "i18n-ally.keystyle": "nested",

babel.config.js

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
+  ]
+}

package.json

@@ -45,9 +45,10 @@
     "@vueuse/core": "^10.2.1",
     "@vueuse/shared": "^10.2.1",
     "@zxcvbn-ts/core": "^3.0.2",
-    "ant-design-vue": "next",
+    "ant-design-vue": "^4.1.2",
     "antd": "^4.24.2",
     "axios": "^1.4.0",
+    "babel-plugin-import": "^1.13.8",
     "codemirror": "^5.65.12",
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
@@ -112,6 +113,8 @@
     "cross-env": "^7.0.3",
     "cz-git": "^1.6.1",
     "czg": "^1.6.1",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.4.6",
     "rimraf": "^5.0.1",

pnpm-lock.yaml

@@ -36,14 +36,17 @@ importers:
         specifier: ^3.0.2
         version: 3.0.4
       ant-design-vue:
-        specifier: next
-        version: 4.0.0-rc.6(vue@3.3.13)
+        specifier: ^4.1.2
+        version: 4.1.2(vue@3.3.13)
       antd:
         specifier: ^4.24.2
         version: 4.24.15(react-dom@18.2.0)(react@18.2.0)
       axios:
         specifier: ^1.4.0
         version: 1.6.2
+      babel-plugin-import:
+        specifier: ^1.13.8
+        version: 1.13.8
       codemirror:
         specifier: ^5.65.12
         version: 5.65.16
@@ -122,6 +125,9 @@ importers:
       vite-plugin-qiankun:
         specifier: ^1.0.15
         version: 1.0.15(typescript@5.3.3)(vite@4.5.1)
+      vodal:
+        specifier: ^2.4.0
+        version: 2.4.0(vue@3.3.13)
       vue:
         specifier: ^3.3.4
         version: 3.3.13(typescript@5.3.3)
@@ -228,6 +234,12 @@ importers:
       czg:
         specifier: ^1.6.1
         version: 1.8.0
+      less:
+        specifier: ^4.2.0
+        version: 4.2.0
+      less-loader:
+        specifier: ^12.2.0
+        version: 12.2.0(less@4.2.0)
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -405,7 +417,7 @@ importers:
         version: 20.10.5
       vite:
         specifier: ^4.4.0
-        version: 4.5.1(@types/node@20.10.5)
+        version: 4.5.1(@types/node@20.10.5)(less@4.2.0)
 
   internal/vite-config:
     dependencies:
@@ -535,7 +547,6 @@ packages:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.3.1
       vue: 3.3.13(typescript@5.3.3)
-    dev: true
 
   /@ant-design/icons@4.8.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA==}
@@ -3809,14 +3820,14 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ant-design-vue@4.0.0-rc.6(vue@3.3.13):
-    resolution: {integrity: sha512-j+GAhgC1p1+nmQVbaEeY2miZ1h+8jBLlxTESX93MwcshVaYTkZNhiyddtl92VvEDJTedzuX+1oT3TP5wG/+tHg==}
+  /ant-design-vue@4.0.8(vue@3.3.13):
+    resolution: {integrity: sha512-SyPgbiPqxgXWHywxcstJN+j9N6PoZf6y5Gvvdbb+9od+uizmh2A+TnXmIHVJ44D1V1+YjXPz1EpLfIpxqDqu9A==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 6.1.0(vue@3.3.13)
+      '@ant-design/icons-vue': 7.0.1(vue@3.3.13)
       '@babel/runtime': 7.23.6
       '@ctrl/tinycolor': 3.6.1
       '@emotion/hash': 0.9.1
@@ -3838,10 +3849,10 @@ packages:
       vue: 3.3.13(typescript@5.3.3)
       vue-types: 3.0.2(vue@3.3.13)
       warning: 4.0.3
-    dev: false
+    dev: true
 
-  /ant-design-vue@4.0.8(vue@3.3.13):
-    resolution: {integrity: sha512-SyPgbiPqxgXWHywxcstJN+j9N6PoZf6y5Gvvdbb+9od+uizmh2A+TnXmIHVJ44D1V1+YjXPz1EpLfIpxqDqu9A==}
+  /ant-design-vue@4.1.2(vue@3.3.13):
+    resolution: {integrity: sha512-ynFkDJLlHgumeK6Hr1UZ7PvQNZ1uBcri/pmejBdS3kRqHeA5VRsxneYDwa8YxA+uYB5YfT2jpYsSHsiMiCjRGg==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
@@ -3869,7 +3880,7 @@ packages:
       vue: 3.3.13(typescript@5.3.3)
       vue-types: 3.0.2(vue@3.3.13)
       warning: 4.0.3
-    dev: true
+    dev: false
 
   /antd@4.24.15(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pXCNJB8cTSjQdqeW5RNadraiYiJkMec/Qt0Zh+fEKUK9UqwmD4TxIYs/xnEbyQIVtHHwtl0fW684xql73KhCyQ==}
@@ -4208,6 +4219,12 @@ packages:
       - supports-color
     dev: false
 
+  /babel-plugin-import@1.13.8:
+    resolution: {integrity: sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==}
+    dependencies:
+      '@babel/helper-module-imports': 7.22.15
+    dev: false
+
   /babel-plugin-istanbul@6.1.1:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
@@ -7294,6 +7311,7 @@ packages:
     resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
     engines: {node: '>=0.10.0'}
     hasBin: true
+    requiresBuild: true
 
   /immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
@@ -8601,6 +8619,22 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
+  /less-loader@12.2.0(less@4.2.0):
+    resolution: {integrity: sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      less: 4.2.0
+    dev: true
+
   /less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -11404,6 +11438,7 @@ packages:
 
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
+    requiresBuild: true
 
   /saxes@5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
@@ -13183,7 +13218,7 @@ packages:
       - rollup
     dev: true
 
-  /vite@4.5.1(@types/node@20.10.5):
+  /vite@4.5.1(@types/node@20.10.5)(less@4.2.0):
     resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -13213,6 +13248,7 @@ packages:
     dependencies:
       '@types/node': 20.10.5
       esbuild: 0.18.20
+      less: 4.2.0
       postcss: 8.4.32
       rollup: 3.29.4
     optionalDependencies:
@@ -13266,6 +13302,14 @@ packages:
       js-git: 0.7.8
     dev: true
 
+  /vodal@2.4.0(vue@3.3.13):
+    resolution: {integrity: sha512-oUrSy80Y3uE8VSSFv0fSHd7B3BZQzynvf1ZQZf3CFl8bwjDzO5UwjUFj/rEEGMSHXfk7fRjbj+NdHVsZObUkPA==}
+    peerDependencies:
+      vue: ^2.5.21
+    dependencies:
+      vue: 3.3.13(typescript@5.3.3)
+    dev: false
+
   /vue-component-type-helpers@1.8.26:
     resolution: {integrity: sha512-CIwb7s8cqUuPpHDk+0DY8EJ/x8tzdzqw8ycX8hhw1GnbngTgSsIceHAqrrLjmv8zXi+j5XaiqYRQMw8sKyyjkw==}
     dev: true

src/ant-design/index.ts

@@ -0,0 +1,35 @@
+import { 
+  Table,
+  Form,
+  DatePicker,
+  RangePicker,
+  Select,
+  Modal,
+  Button,
+  TimePicker,
+   Layout,
+   Breadcrumb,
+   Menu,
+   Switch
+  } from "ant-design-vue";
+
+const components = [
+  RangePicker,
+  Table,
+  Form,
+  Select,
+  DatePicker,
+  Modal,
+  Button,
+  TimePicker, 
+  Layout,
+  Breadcrumb,
+  Menu,
+  Switch
+]
+
+export default function Antd(app: any) {
+components.forEach((component) => {
+  app.use(component)
+})
+}

src/main.ts

@@ -19,6 +19,8 @@ import { renderWithQiankun, QiankunProps, qiankunWindow } from 'vite-plugin-qian
 import { MicroAppStateActions } from 'qiankun';
 import { useUserStore } from '@/store/modules/user';
 
+import Antd from "./ant-design/index";
+
 import App from './App.vue';
 
 type AppProps = Partial<MicroAppStateActions & QiankunProps>;
@@ -27,6 +29,9 @@ let app: any = null;
 async function bootstrap(props?: AppProps) {
   app = createApp(App);
 
+  
+Antd(app)
+
   // Configure store
   // 配置 store
   setupStore(app);

src/utils/dateUtil.ts

@@ -14,4 +14,7 @@ export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): str
   return dayjs(date).format(format);
 }
 
+
+
+
 export const dateUtil = dayjs;

src/views/vent/common/basicEchartLine.vue

@@ -88,7 +88,7 @@ function getOption() {
         type: 'plain',
         textStyle: {
           color: '#7ec7ff',
-          fontSize: 14,
+          fontSize: 12,
         },
         // icon:'rect',
         itemGap: 25,
@@ -118,7 +118,7 @@ function getOption() {
             },
           },
           axisLabel: {
-            fontSize: 14,
+            fontSize: 12,
             margin: 10,
             textStyle: {
               color: '#b3b8cc',

src/views/vent/common/basicTree.vue

@@ -1,18 +1,17 @@
 <template>
     <div class="basicTree">
-        <Tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
+        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
             v-model:expandedKeys="expandedKeys" @select="selectChange">
             <template #switcherIcon>
                 <CaretDownOutlined />
             </template>
 
-        </Tree>
+        </a-tree>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, defineProps, watch, defineEmits } from 'vue'
-import { Tree } from 'ant-design-vue';
 import { CaretDownOutlined, } from '@ant-design/icons-vue';
 
 let props = defineProps({

src/views/vent/common/danelBd.vue

@@ -20,7 +20,7 @@
       <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="commonTitle == 'selected'">
-          <Select
+          <a-select
             style="width: 140px"
             :options="selectLists"
             size="small"
@@ -32,7 +32,7 @@
         </div>
         <!-- 日期组件 -->
         <div class="common-navR-date" v-if="commonTitle == 'datePikers'">
-          <RangePicker
+          <a-range-picker
             size="small"
             style="width: 100%"
             :show-time="{ format: 'HH:mm' }"
@@ -45,7 +45,7 @@
         <!-- 开关组件 -->
         <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
           <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-          <Switch v-model:checked="checked" />
+          <a-switch v-model:checked="checked" />
           <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
         </div>
       </div>
@@ -63,7 +63,6 @@
 
 <script setup lang="ts">
   import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
-  import { Select, RangePicker, Switch } from 'ant-design-vue';
   import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
 
   let props = defineProps({
@@ -197,14 +196,14 @@
         width: 70%;
 
         img {
-          width: 18px;
-          height: 18px;
+          width: 14px;
+          height: 14px;
         }
 
         span {
           margin-left: 10px;
           color: #a1dff8;
-          font-size: 16px;
+          font-size: 14px;
         }
       }
 
@@ -215,14 +214,14 @@
         width: 50%;
 
         img {
-          width: 18px;
-          height: 18px;
+          width: 14px;
+          height: 14px;
         }
 
         span {
           margin-left: 10px;
           color: #a1dff8;
-          font-size: 16px;
+          font-size: 14px;
         }
       }
 

src/views/vent/dust/dustAtomizing/dustAtomizing.api.ts

@@ -2,9 +2,16 @@ import { defHttp } from '@/utils/http/axios';
 
 enum Api {
   realData = '/fire/show/realData',
+  getControl = '/fire/show/control'
 }
 /**
  *
  * @param params
  */
 export const realData = (params) => defHttp.post({ url: Api.realData, params });
+
+/**
+ *智能喷雾降尘装置-控制
+ * @param params
+ */
+export const getControl = (params) => defHttp.post({ url: Api.getControl, params });

src/views/vent/dust/dustAtomizing/dustAtomizing.data.ts

@@ -0,0 +1,104 @@
+
+import { reactive } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+//table 列
+export const columns = reactive<any[]>([
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'location',
+    key: 'location',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '喷雾状态',
+    dataIndex: 'stateSpray',
+    key: 'stateSpray',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'stateConn',
+    key: 'stateConn',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'deviceState',
+    key: 'deviceState',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '使用状态',
+    dataIndex: 'stateEnable',
+    key: 'stateEnable',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '控制状态',
+    dataIndex: 'stateManual',
+    key: 'stateManual',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '粉尘浓度',
+    dataIndex: 'dust',
+    key: 'dust',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '电池电量',
+    dataIndex: 'batteryLevel',
+    key: 'batteryLevel',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否定时',
+    dataIndex: 'timingSwitch',
+    key: 'timingSwitch',
+    width: 100,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 300,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])

src/views/vent/dust/dustAtomizing/index.vue

@@ -3,12 +3,14 @@
 
     <div class="dustAto-right-box">
       <div class="search-area">
-        <Form :model="formState" :label-col="{ span: 1.5 }">
-          <FormItem label="设备名称 : ">
-            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
-              style="width:240px;margin-right: 20px;" />
-          </FormItem>
-          <FormItem label="">
+        <a-form :model="formState" :label-col="{ span: 1.5 }">
+          <a-form-item label="设备名称 : ">
+            <!-- <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
+              style="width:240px;margin-right: 20px;" /> -->
+            <a-select style="width:240px;margin-right: 20px;" :options="selectAreaList" size="small" placeholder="请选择"
+              v-model:value="selectCode" allowClear @change="areaChange"></a-select>
+          </a-form-item>
+          <a-form-item label="">
             <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;"
               @click="getSearch">
               <template #icon>
@@ -16,167 +18,100 @@
               </template>
               查询
             </a-button>
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            <!-- <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
               <template #icon>
                 <PlusOutlined />
               </template>
               新增
-            </a-button>
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            </a-button> -->
+            <a-button type="primary" :disabled="disabled"
+              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(1)">
               一键开启
             </a-button>
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            <a-button type="primary" :disabled="disabled"
+              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(0)">
               一键关闭
             </a-button>
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            <a-button type="primary" :disabled="disabled"
+              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(2)">
               自动启停
             </a-button>
-          </FormItem>
-        </Form>
+          </a-form-item>
+        </a-form>
       </div>
       <div class="content-area">
-        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
-          :pagination="false">
+        <a-table :row-selection="rowSelection" size="small" :dataSource="dataSource" :columns="columns"
+          :scroll="{ y: 730 }" :pagination="false">
 
           <template #action="{ record }">
-            <a-button type="link" style="color:#3DF6FF">
+            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 1)">
               启动
             </a-button>
-            <a-button type="link" style="color:#3DF6FF">
+            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 0)">
               关闭
             </a-button>
-            <a-button type="link" style="color:#3DF6FF">
+            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 2)">
               自动
             </a-button>
           </template>
-        </Table>
+        </a-table>
       </div>
     </div>
+    <a-modal title="密码校验" ok-text="确定" cancel-text="取消" @ok="checkPwd" @cancel="clsoeMod" v-model:open="pwdModalVisible"
+      :destroyOnClose="true" style="top: 25vh" width="450px">
+      <a-input type="password" style="width:300px;margin: 20px 70px;" v-model:value="pwdValue" placeholder="请输入控制密码" />
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-import { Form, FormItem, Table } from 'ant-design-vue';
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
 import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
-import { realData } from './dustAtomizing.api'
+import { realData, getControl } from './dustAtomizing.api'
+import { getFireAreaInfo } from '../../fire/fireHome/firehome.api'
+import { columns } from './dustAtomizing.data'
 import dayjs from 'dayjs'
 
 //查询条件
 let formState = reactive({
   devicename: ''
 })
-
 //table 数据
-let dataSource = reactive<any[]>([])
-
-//table 列
-let columns = reactive<any[]>([
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'deviceName',
-    key: 'deviceName',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'location',
-    key: 'location',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '喷雾状态',
-    dataIndex: 'stateSpray',
-    key: 'stateSpray',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '链接状态',
-    dataIndex: 'stateConn',
-    key: 'stateConn',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备状态',
-    dataIndex: 'deviceState',
-    key: 'deviceState',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '使用状态',
-    dataIndex: 'stateEnable',
-    key: 'stateEnable',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '控制状态',
-    dataIndex: 'stateManual',
-    key: 'stateManual',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '粉尘浓度',
-    dataIndex: 'dust',
-    key: 'dust',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '电池电量',
-    dataIndex: 'batteryLevel',
-    key: 'batteryLevel',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '是否定时',
-    dataIndex: 'timingSwitch',
-    key: 'timingSwitch',
-    width: 100,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'time',
-    key: 'time',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 300,
-    slots: { customRender: 'action' },
-    align: 'center',
-  },
-])
-
-// https获取监测数据
+let dataSource = ref<any[]>([])
+
+let disabled = ref(true)
+
+//工作面编码选项列表
+let selectAreaList = reactive<any[]>([])
+let selectCode = ref('')
+
+//操作数据
+let pwdModalVisible = ref(false)
+let currentIsOpen = ref(false)
+let isBatchHandler = ref(false)
+let selectedRowsList = ref<any[]>([])
+let currentId = ref('')
+let pwdValue = ref('')
+
+let rowSelection = computed(() => {
+  return {
+    onChange: (selectedRowKeys, selectedRows) => {
+      selectedRowsList.value = selectedRows
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRowsList: ', selectedRowsList.value)
+    },
+    getCheckboxProps: (record) => ({
+      props: {
+        realId: record.realId,
+      },
+    }),
+  }
+})
+//https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
   timer = setTimeout(
     async () => {
+      // await getFireAreaInfoList()
       await getList()
       if (timer) {
         timer = null;
@@ -187,34 +122,114 @@ function getMonitor() {
   );
 }
 
-//获取喷雾列表
-async function getList() {
-
-  let res = await realData({ deviceName: formState.devicename, type: "DustPw" })
-  console.log(res, '喷雾列表数据------')
+//获取工作面编码
+async function getFireAreaInfoList() {
+  let res = await getFireAreaInfo({})
+  console.log(res, '工作面编码----------')
   if (res.length != 0) {
-    dataSource.length = 0
+    selectAreaList.length = 0
     res.forEach(el => {
-      el.timingSwitch = el.timingSwitch == '1' ? '是' : '否'
-      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
-      el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
-      el.deviceState = el.deviceState == '1' ? '喷雾打开' : el.deviceState == '0' ? '喷雾关闭' : '未连接'
-      el.stateEnable = el.stateEnable == '1' ? '使用' : '未使用'
-      el.stateManual = el.stateManual == '0' ? '自动控制' : '手动控制'
-      el.time = dayjs().format('YYYY-MM-DD HH:MM:ss')
-      dataSource.push(el)
+      selectAreaList.push({ label: el.areaName, value: el.areaCode })
     })
   }
+}
+//工作面选项切换
+function areaChange(val) {
+  selectCode.value = val
+  // getList()
+}
 
+//获取喷雾列表
+async function getList() {
+  let res = await realData({ deviceName: formState.devicename, type: "DustPw", areaCode: selectCode.value })
+  res.forEach((el, index) => {
+    el.key = index
+    el.timingSwitch = el.timingSwitch == '1' ? '是' : '否'
+    el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
+    el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
+    el.deviceState = el.deviceState == '1' ? '喷雾打开' : el.deviceState == '0' ? '喷雾关闭' : '未连接'
+    el.stateEnable = el.stateEnable == '1' ? '使用' : '未使用'
+    el.stateManual = el.stateManual == '0' ? '自动控制' : '手动控制'
+    el.time = dayjs().format('YYYY-MM-DD HH:MM:ss')
+  })
+  dataSource.value = res
+  console.log(res, '喷雾列表数据------')
 }
 
 //列表查询
 function getSearch() {
   getList()
+}
 
+//一键启停
+function openAll(isOpen) {
+  pwdModalVisible.value = true
+  currentIsOpen.value = isOpen
+  isBatchHandler.value = true
+  pwdValue.value = ''
 }
 
+//确定
+function checkPwd() {
+  if (!isBatchHandler.value) {
+    handlerSwitch()
+  } else {
+    selectedRowsList.value.forEach(async (row, index) => {
+      currentId.value = row.realId
+      await handlerSwitch(index)
+    })
+  }
+}
+
+async function handlerSwitch(index = 0) {
+
+  const res = await getControl({
+    type: 'DustPw',
+    id: currentId.value,
+    controlType: currentIsOpen.value ? 'run' : 'stop',
+    passWord: pwdValue.value
+  }
+  )
+  if (isBatchHandler.value) {
+    if (selectedRowsList.value.length === index + 1) {
+      if (res.success && !res.result) {
+        // that.$message.success(res.message)
+        // loadData()
+      }
+      pwdModalVisible.value = false
+      isBatchHandler.value = false
+    }
+  } else {
+    if (res.success && !res.result) {
+      // that.$message.success(res.message)
+      // that.loadData()
+    }
+    pwdModalVisible.value = false
+  }
+}
+
+function openClick(id, isOpen,) {
+  currentId.value = id
+  pwdValue.value = ''
+  currentIsOpen.value = isOpen
+  pwdModalVisible.value = true
+}
+//取消
+function clsoeMod() {
+  pwdValue.value = ''
+  pwdModalVisible.value = false
+}
+
+watch(()=>selectedRowsList.value,(newV,oldV)=>{
+  if(newV.length!=0){
+    disabled.value=false
+  }else {
+    disabled.value=true
+  }
+})
+
 onMounted(() => {
+  getFireAreaInfoList()
   getList()
   getMonitor()
 })

src/views/vent/dust/dustHome/components/dustFallDevice.vue

@@ -173,11 +173,12 @@ let props = defineProps({
 
         .item-val {
             position: absolute;
-            top: 21px;
+            top: 20px;
             width: 100%;
             color: #1fb3f7;
-            font-family: douyuFont;
-            font-size: 12px;
+            // font-family: douyuFont;
+            font-size: 14px;
+            font-weight: bold;
             text-align: center;
         }
 

src/views/vent/dust/dustHome/components/dustGlzb.vue

@@ -72,10 +72,11 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
                 position: absolute;
                 top: 50%;
                 right: 24px;
-                transform: translate(0, -40%);
+                transform: translate(0, -48%);
                 color: #1fb3f7;
-                font-family: douyuFont;
-                font-size: 12px;
+                // font-family: douyuFont;
+                font-size: 14px;
+                font-weight: bold;
             }
         }
 

src/views/vent/dust/dustHome/components/dustJtzb.vue

@@ -55,7 +55,7 @@ let contentList = reactive<any[]>([
             height: 100%;
             background: linear-gradient(to bottom, rgb(19 93 128 / 20%), rgb(19 93 128 / 90%));
             color: #1da5e3;
-            font-size: 14px;
+            font-size: 12px;
 
             &:nth-child(1) {
                 flex: 1;
@@ -91,7 +91,7 @@ let contentList = reactive<any[]>([
             justify-content: center;
             height: 100%;
             color: #fff;
-            font-size: 14px;
+            font-size: 12px;
 
             &:nth-child(1) {
                 flex: 1;

src/views/vent/dust/dustHome/components/multipleDust.vue

@@ -35,6 +35,7 @@ watch(() => props.echartData, (newE, oldE) => {
     console.log(newE, 'newE1--------')
     echartDatas.xData = newE.xData
     echartDatas.yData = newE.yData
+    echartDatas.yData1=newE.yData1
     echartDatas.legendName = newE.legendName
 }, {
     immediate: true,

src/views/vent/dust/dustHome/dustHome.api.ts

@@ -1,6 +1,7 @@
 import { defHttp } from '@/utils/http/axios';
 
 enum Api {
+  getDustWarningCntByType='/dust/dustDisasterApi/getDustWarningCntByType',
   getAreaTypeList = '/dust/dustDisasterApi/getAreaTypeList',
   getRealSensorDataByType = '/dust/dustDisasterApi/getRealSensorDataByType',
   getDustInfos = '/dust/dustDisasterApi/getDustInfos',
@@ -8,6 +9,11 @@ enum Api {
   realData = '/fire/show/realData',
 }
 /**
+ * 粉尘工作面监测图表数据
+ * @param params
+ */
+export const getDustWarningCntByType = (params) => defHttp.get({ url: Api.getDustWarningCntByType,params });
+/**
  * 粉尘菜单树
  * @param params
  */

src/views/vent/dust/dustHome/index.vue

@@ -16,7 +16,7 @@
                 <div>监测区域</div>
               </div>
               <div class="tcontent-c">
-                <div style="color: #1fb3f7; font-size: 20px">低风险</div>
+                <div style="color: #1fb3f7; font-size: 24px;font-weight:bolder;letter-spacing:10px">低风险</div>
               </div>
               <div class="tcontent-r">粉尘灾害</div>
             </div>
@@ -24,12 +24,7 @@
           <!-- 左中区域 -->
           <div class="left-c">
             <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '746px' }">
-              <workJc
-                :heightT="'18%'"
-                :heightB="'82%'"
-                :cardData="cardData"
-                :echartData="echartDataWork"
-              />
+              <workJc :heightT="'18%'" :heightB="'82%'" :cardData="cardData" :echartData="echartDataWork" />
             </DanelBd>
           </div>
           <!-- 左底部区域 -->
@@ -48,23 +43,12 @@
           <div class="center-scalc" @click="getScalc">
             <img src="../../../../assets/images/scalc.png" alt="" />
           </div>
-          <iframe
-            src="http://172.16.253.23:91/valkyrja/?type=tf"
-            width="100%"
-            height="100%"
-            frameborder="0"
-          ></iframe>
+          <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <transition name="fade" mode="out-in">
           <div class="center-b" v-if="isShow">
-            <DanelBd
-              :moduleName="'综放工作面粉尘浓度'"
-              :contentStyle="{ contentH: '309px' }"
-              :commonTitle="'selected'"
-              :selectList="selectListBd"
-              :selectValue="sensorCode"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '309px' }" :commonTitle="'selected'"
+              :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect">
               <multipleDust :echartData="echartData" />
             </DanelBd>
           </div>
@@ -76,37 +60,21 @@
           <!-- 右上区域 -->
           <div class="right-t">
             <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '306px' }">
-              <dustFallDevice
-                :deviceTotal="deviceTotal"
-                :pwTotal="pwTotal"
-                :interTotal="interTotal"
-                :unInterTotal="unInterTotal"
-                :pwData="pwData"
-              />
+              <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
+                :unInterTotal="unInterTotal" :pwData="pwData" />
             </DanelBd>
           </div>
           <!-- 右中区域 -->
           <div class="right-c">
-            <DanelBd
-              :moduleName="'粉尘关联指标'"
-              :contentStyle="{ contentH: '280px' }"
-              commonTitle="selected"
-              :selectList="selectListBd"
-              :selectValue="sensorCode"
-              @change-select="changeSelect1"
-            >
+            <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '280px' }" commonTitle="selected"
+              :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect1">
               <dustGlzb :dustGlzbData="dustGlzbData" />
             </DanelBd>
           </div>
           <!-- 右下区域 -->
           <div class="right-b">
-            <DanelBd
-              :moduleName="'粉尘静态指标'"
-              :contentStyle="{ contentH: '170px' }"
-              commonTitle="selected"
-              :selectList="selectListJt"
-              :selectValue="jtzbCode"
-            >
+            <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
+              :selectList="selectListJt" :selectValue="jtzbCode">
               <dustJtzb />
             </DanelBd>
           </div>
@@ -117,440 +85,472 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, onUnmounted } from 'vue';
-  import DanelBd from '../../common/danelBd.vue';
-  import workJc from '../../fire/fireHome/components/workJc.vue';
-  import multipleDust from './components/multipleDust.vue';
-  import dustFallDevice from './components/dustFallDevice.vue';
-  import dustGlzb from './components/dustGlzb.vue';
-  import dustJtzb from './components/dustJtzb.vue';
-  import {
-    getAreaTypeList,
-    getRealSensorDataByType,
-    getDustInfos,
-    historyAndForecast,
-    realData,
-  } from './dustHome.api';
-
-  //是否显示左侧区域和右侧区域
-  let isShow = ref(true);
-
-  //工作面风险监测数据
-  let cardData = reactive<any[]>([]);
-  let echartDataWork = reactive<any[]>([]);
-  let areaType = ref('');
-
-  //综放工作面粉尘浓度数据
-  let selectListBd = reactive<any[]>([]);
-  let sensorCode = ref('');
-  let echartData = reactive({
-    xData: [],
-    yData: [],
-    legendName: ['实时值'],
-  });
-
-  //智能喷雾降尘装置数据
-  let deviceTotal = ref(0);
-  let pwTotal = ref(0);
-  let interTotal = ref(0);
-  let unInterTotal = ref(0);
-  let pwData = reactive<any[]>([]);
-
-  //粉尘关联指标数据
-  let dustGlzbData = reactive<any[]>([
-    { label: '最高温度(℃)', val: 0 },
-    { label: '环境湿度(%)', val: 0 },
-    { label: '风速(m/s)', val: 0 },
-    { label: '采煤机', val: 0 },
-    { label: '水压(Mpa)', val: 0 },
-    { label: '水阀', val: 0 },
-  ]);
-
-  //粉尘静态指标数据
-  let selectListJt = reactive<any[]>([
-    { label: '8#煤层', value: '0' },
-    { label: '9#煤层', value: '1' },
-    { label: '10#煤层', value: '2' },
-  ]);
-  let jtzbCode = ref('0');
-
-  //隐藏和显示左右侧区域
-  function getScalc() {
-    isShow.value = !isShow.value;
-  }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor() {
-    timer = setTimeout(async () => {
-      await getFireAreaInfoList();
-      await getRealDataList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    }, 5000);
-  }
-
-  //综放工作面下拉选项切换
-  function changeSelect(data) {
-    console.log(data, '下拉选项-----');
-    sensorCode.value = data.value;
-    getDustInfosList();
-  }
-  //粉尘关联指标下拉选项切换
-  function changeSelect1(data) {
-    console.log(data, '下拉选项-----');
-    let param = selectListBd.filter((v) => v.value == data.value)[0];
-    console.log(param, 'param------');
-    dustGlzbData[0].val = param['temperature'] || '--';
-    dustGlzbData[1].val = param['humidity'] || '--';
-    dustGlzbData[2].val = param['windSpeed'] || '--';
-    dustGlzbData[3].val = '--';
-    dustGlzbData[4].val = param['waterPressure'] || '--';
-    dustGlzbData[5].val = '--';
-  }
-  //获取工作面风险监测数据
-  async function getFireAreaInfoList() {
-    let res = await getAreaTypeList();
-    console.log(res, '工作面风险监测数据');
-    if (res.length != 0) {
-      cardData.length = 0;
-      echartDataWork.length = 0;
-      res.forEach((el) => {
-        cardData.push({
-          title: '风险',
-          val:
-            el.warningLevel == 1
-              ? '低'
-              : el.warningLevel == 2
-                ? '中'
-                : el.warningLevel == 3
-                  ? '较大'
-                  : el.warningLevel == 4
-                    ? '重大'
-                    : '--',
-          label: el.typeName,
-          title1: '最大值',
-          val1: el.maxValue,
-        });
-      });
-      areaType.value = res[0]['areaType'];
-      //获取粉尘选项数据
-      getRealSensorDataByTypeList();
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import DanelBd from '../../common/danelBd.vue';
+import workJc from '../../fire/fireHome/components/workJc.vue';
+import multipleDust from './components/multipleDust.vue';
+import dustFallDevice from './components/dustFallDevice.vue';
+import dustGlzb from './components/dustGlzb.vue';
+import dustJtzb from './components/dustJtzb.vue';
+import {
+  getAreaTypeList,
+  getRealSensorDataByType,
+  getDustInfos,
+  historyAndForecast,
+  realData,
+  getDustWarningCntByType
+} from './dustHome.api';
+import { CodeSandboxCircleFilled } from '@ant-design/icons-vue';
+
+//是否显示左侧区域和右侧区域
+let isShow = ref(true);
+
+//工作面风险监测数据
+let cardData = reactive<any[]>([]);
+let echartDataWork = ref<any[]>([]);
+let areaType = ref('');
+
+//综放工作面粉尘浓度数据
+let selectListBd = reactive<any[]>([]);
+let sensorCode = ref('');
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  yData1: [],
+  legendName: ['实时值', '预测值'],
+});
+
+//智能喷雾降尘装置数据
+let deviceTotal = ref(0);
+let pwTotal = ref(0);
+let interTotal = ref(0);
+let unInterTotal = ref(0);
+let pwData = reactive<any[]>([]);
+
+//粉尘关联指标数据
+let dustGlzbData = reactive<any[]>([
+  { label: '最高温度(℃)', val: 0 },
+  { label: '环境湿度(%)', val: 0 },
+  { label: '风速(m/s)', val: 0 },
+  { label: '采煤机', val: 0 },
+  { label: '水压(Mpa)', val: 0 },
+  { label: '水阀', val: 0 },
+]);
+
+//粉尘静态指标数据
+let selectListJt = reactive<any[]>([
+  { label: '8#煤层', value: '0' },
+  { label: '9#煤层', value: '1' },
+  { label: '10#煤层', value: '2' },
+]);
+let jtzbCode = ref('0');
+
+//隐藏和显示左右侧区域
+function getScalc() {
+  isShow.value = !isShow.value;
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(async () => {
+    await getDustWarningCntByTypeList()
+    await getFireAreaInfoList();
+    await getRealDataList();
+    if (timer) {
+      timer = null;
     }
+    getMonitor();
+  }, 5000);
+}
+
+//综放工作面下拉选项切换
+function changeSelect(data) {
+  console.log(data, '下拉选项-----');
+  sensorCode.value = data.value;
+  getDustInfosList();
+}
+//粉尘关联指标下拉选项切换
+function changeSelect1(data) {
+  console.log(data, '下拉选项-----');
+  let param = selectListBd.filter((v) => v.value == data.value)[0];
+  console.log(param, 'param------');
+  dustGlzbData[0].val = param['temperature'] || '--';
+  dustGlzbData[1].val = param['humidity'] || '--';
+  dustGlzbData[2].val = param['windSpeed'] || '--';
+  dustGlzbData[3].val = '--';
+  // dustGlzbData[4].val = param['waterPressure'] || '--';
+  dustGlzbData[4].val = 10;
+  dustGlzbData[5].val = '--';
+}
+//获取工作面风险监测图表数据
+async function getDustWarningCntByTypeList() {
+  let res = await getDustWarningCntByType({ areaType: 2 })
+  console.log(res, '粉尘工作面图表数据')
+  if (res.length != 0) {
+    echartDataWork.value = res
   }
-  //获取粉尘选项数据
-  async function getRealSensorDataByTypeList() {
-    let res = await getRealSensorDataByType({ areaType: areaType.value });
-    console.log(res, '下拉选项数据---');
-    if (res.length != 0) {
-      selectListBd.length = 0;
-      res.forEach((el) => {
-        selectListBd.push({
-          label: el.name,
-          value: el.code,
-          temperature: el.temperature,
-          humidity: el.humidity,
-          windSpeed: el.windSpeed,
-          waterPressure: el.waterPressure,
-        });
+}
+//获取工作面风险监测数据
+async function getFireAreaInfoList() {
+  let res = await getAreaTypeList();
+  console.log(res, '工作面风险监测数据');
+  if (res.length != 0) {
+    cardData.length = 0;
+    res.forEach((el) => {
+      cardData.push({
+        title: '风险',
+        val:
+          el.warningLevel == 1
+            ? '低'
+            : el.warningLevel == 2
+              ? '中'
+              : el.warningLevel == 3
+                ? '较大'
+                : el.warningLevel == 4
+                  ? '重大'
+                  : '--',
+        label: el.typeName,
+        title1: '最大值',
+        val1: el.maxValue,
       });
-      sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
-      dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
-      dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
-      dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
-      dustGlzbData[3].val = '--';
-      dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
-      dustGlzbData[5].val = '--';
-
-      //获取单项数据
-      getDustInfosList();
-    }
+    });
+    areaType.value = res[0]['areaType'];
+    //获取粉尘选项数据
+    getRealSensorDataByTypeList();
   }
-  //获取单项数据
-  async function getDustInfosList() {
-    let res = await getDustInfos({ sensorCode: sensorCode.value });
-    console.log(res, '单项数据------');
-    //获取粉尘图表数据
-    historyAndForecastList(res.areaCode);
+}
+//获取粉尘选项数据
+async function getRealSensorDataByTypeList() {
+  let res = await getRealSensorDataByType({ areaType: areaType.value });
+  console.log(res, '下拉选项数据---');
+  if (res.length != 0) {
+    selectListBd.length = 0;
+    res.forEach((el) => {
+      selectListBd.push({
+        label: el.name,
+        value: el.code,
+        temperature: el.temperature,
+        humidity: el.humidity,
+        windSpeed: el.windSpeed,
+        waterPressure: el.waterPressure,
+      });
+    });
+    sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
+    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
+    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
+    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
+    dustGlzbData[3].val = '--';
+    // dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
+    dustGlzbData[4].val = 10;
+    dustGlzbData[5].val = '--';
+
+    //获取单项数据
+    getDustInfosList();
   }
+}
+//获取单项数据
+async function getDustInfosList() {
+  let res = await getDustInfos({ sensorCode: sensorCode.value });
+  console.log(res, '单项数据------');
   //获取粉尘图表数据
-  async function historyAndForecastList(params) {
-    let res = await historyAndForecast({ areaCode: params });
-    console.log(res, '粉尘图表数据----');
-    if (res.lineData.length != 0) {
-      echartData.xData.length = 0;
-      echartData.yData.length = 0;
-      res.lineData.forEach((el) => {
-        echartData.xData.push(el.time);
-        echartData.yData.push(el.value || 0);
-      });
-    }
+  historyAndForecastList(res.areaCode);
+}
+//获取粉尘图表数据
+async function historyAndForecastList(params) {
+  let res = await historyAndForecast({ areaCode: params });
+  console.log(res, '粉尘图表数据----');
+  if (res.lineData.length != 0) {
+    echartData.xData.length = 0;
+    echartData.yData.length = 0;
+    echartData.yData1.length = 0
+    let nowData = []
+    let ycDate = []
+    res.lineData.forEach((el, index) => {
+      if (el.time == '2024-03-15 01:40:12') {
+        console.log(index, '实时值与预测值分界线===========')
+        nowData = res.lineData.slice(0, index)
+        ycDate = res.lineData.slice(index)
+      }
+      console.log(nowData,'---------------------------')
+      console.log(ycDate,'============')
+      echartData.xData.push(el.time);
+      nowData.forEach(el => {
+        echartData.yData.push(el.value);
+      })
+
+      ycDate.forEach(el => {
+        echartData.yData1.push(el.valuePredict);
+      })
+    });
   }
-
-  //获取智能喷雾降尘装置数据
-  async function getRealDataList() {
-    let res = await realData({ type: 'DustPw' });
-    console.log(res, '智能喷雾降尘装置数据');
-    if (res.length != 0) {
-      pwData.length = 0;
-      deviceTotal.value = res.length;
-      pwTotal.value = res.filter((v) => v.deviceState == '1').length;
-      interTotal.value = res.filter((v) => v.stateConn == '1').length;
-      unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
-      res.forEach((el, index) => {
-        el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
-        el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
-        pwData.push(el);
-      });
-    }
+}
+
+//获取智能喷雾降尘装置数据
+async function getRealDataList() {
+  let res = await realData({ type: 'DustPw' });
+  console.log(res, '智能喷雾降尘装置数据');
+  if (res.length != 0) {
+    pwData.length = 0;
+    deviceTotal.value = res.length;
+    pwTotal.value = res.filter((v) => v.deviceState == '1').length;
+    interTotal.value = res.filter((v) => v.stateConn == '1').length;
+    unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
+    res.forEach((el, index) => {
+      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
+      el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
+      pwData.push(el);
+    });
   }
-
-  onMounted(() => {
-    getFireAreaInfoList();
-    getRealDataList();
-    getMonitor();
-  });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  });
+}
+
+onMounted(() => {
+  getDustWarningCntByTypeList()
+  getFireAreaInfoList();
+  getRealDataList();
+  getMonitor();
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: douyuFont;
-    src: url('../../../../assets/font/douyuFont.otf');
+@font-face {
+  font-family: douyuFont;
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.dustHome {
+  position: relative;
+  width: 100%;
+  height: 928px;
+
+  .moduleArea {
+    width: 100%;
+    height: 100%;
   }
 
-  .dustHome {
-    position: relative;
+  .main-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    justify-content: space-between;
     width: 100%;
-    height: 928px;
-   
-    .moduleArea {
-      width: 100%;
-      height: 100%;
-    }
+    height: 100%;
+    padding: 15px 10px;
 
-    .main-container {
+    .left-area {
       display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
+      flex-direction: column;
+      align-items: center;
       justify-content: space-between;
-      width: 100%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
-      padding: 15px 10px;
-
-      .left-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        // width: 30%;
-        width: 392px;
-        height: 100%;
-        margin-right: 15px;
+      margin-right: 15px;
 
-        .left-t {
-          position: relative;
+      .left-t {
+        position: relative;
+        width: 100%;
+        // height: 121px;
+        height: 100px;
+        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .tcontent-area {
+          display: flex;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: space-around;
           width: 100%;
-          // height: 121px;
-          height: 100px;
-          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-          background-size: 100% 100%;
+          height: 90px;
+          padding: 0 15px;
+          transform: translate(0, -50%);
 
-          .tcontent-area {
+          .tcontent-l {
             display: flex;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            box-sizing: border-box;
+            flex: 1;
+            flex-direction: column;
             align-items: center;
-            justify-content: space-around;
-            width: 100%;
-            height: 90px;
-            padding: 0 15px;
-            transform: translate(0, -50%);
-
-            .tcontent-l {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 14px;
-              letter-spacing: 2px;
-            }
-
-            .tcontent-c {
-              display: flex;
-              flex: 3;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-            }
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 14px;
+            font-weight: bold;
+            letter-spacing: 2px;
+          }
 
-            .tcontent-r {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 14px;
-              letter-spacing: 2px;
-            }
+          .tcontent-c {
+            display: flex;
+            flex: 3;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
           }
-        }
 
-        .left-c {
-          width: 100%;
+          .tcontent-r {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 14px;
+            font-weight: bold;
+            letter-spacing: 2px;
+          }
         }
+      }
 
-        // .left-f {
-        //   width: 100%;
-        // }
+      .left-c {
+        width: 100%;
       }
 
-      .center-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: calc(100% - 814px);
+      // .left-f {
+      //   width: 100%;
+      // }
+    }
 
-        .center-t {
-          position: relative;
-          width: 100%;
-          height: 60%;
-          margin-bottom: 15px;
-          overflow: hidden;
+    .center-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 814px);
 
-          .center-scalc {
+      .center-t {
+        position: relative;
+        width: 100%;
+        height: 60%;
+        margin-bottom: 15px;
+        overflow: hidden;
+
+        .center-scalc {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(30 58 117 / 41.8%);
+
+          img {
             position: absolute;
-            top: 10px;
-            left: 10px;
-            width: 50px;
-            height: 50px;
-            background-color: rgb(30 58 117 / 41.8%);
-
-            img {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              width: 37px;
-              height: 41px;
-              transform: translate(-50%, -50%);
-              cursor: pointer;
-
-              &:hover {
-                width: 43px;
-                height: 47px;
-                background-color: rgb(100 228 185 / 6.27%);
-              }
+            top: 50%;
+            left: 50%;
+            width: 37px;
+            height: 41px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+
+            &:hover {
+              width: 43px;
+              height: 47px;
+              background-color: rgb(100 228 185 / 6.27%);
             }
           }
         }
-
-        .center-b {
-          width: 100%;
-          height: calc(40% - 15px);
-        }
       }
 
-      .center-area1 {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
+      .center-b {
         width: 100%;
+        height: calc(40% - 15px);
+      }
+    }
 
-        .center-t1 {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          margin-bottom: 15px;
-          overflow: hidden;
+    .center-area1 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
 
-          .center-scalc {
+      .center-t1 {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin-bottom: 15px;
+        overflow: hidden;
+
+        .center-scalc {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(30 58 117 / 41.8%);
+
+          img {
             position: absolute;
-            top: 10px;
-            left: 10px;
-            width: 50px;
-            height: 50px;
-            background-color: rgb(30 58 117 / 41.8%);
-
-            img {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              width: 37px;
-              height: 41px;
-              transform: translate(-50%, -50%);
-              cursor: pointer;
-
-              &:hover {
-                width: 43px;
-                height: 47px;
-                background-color: rgb(100 228 185 / 6.27%);
-              }
+            top: 50%;
+            left: 50%;
+            width: 37px;
+            height: 41px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+
+            &:hover {
+              width: 43px;
+              height: 47px;
+              background-color: rgb(100 228 185 / 6.27%);
             }
           }
         }
       }
+    }
 
-      .right-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        // width: 30%;
-        width: 392px;
-        height: 100%;
-        margin-left: 15px;
+    .right-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      // width: 30%;
+      width: 392px;
+      height: 100%;
+      margin-left: 15px;
 
-        .right-t {
-          width: 100%;
-        }
+      .right-t {
+        width: 100%;
+      }
 
-        .right-c {
-          width: 100%;
-        }
+      .right-c {
+        width: 100%;
+      }
 
-        .right-b {
-          width: 100%;
-        }
+      .right-b {
+        width: 100%;
       }
     }
+  }
 
-    /* fade.css */
-    .fade-enter-active {
-      transition: opacity 2.5s ease;
+  /* fade.css */
+  .fade-enter-active {
+    transition: opacity 2.5s ease;
 
-      /* 设置过渡时间为1秒 */
-    }
+    /* 设置过渡时间为1秒 */
+  }
 
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
+  .fade-leave-active {
+    transition: opacity 0.5s ease;
 
-      /* 设置过渡时间为1秒 */
-    }
+    /* 设置过渡时间为1秒 */
+  }
 
-    .fade-enter,
-    .fade-leave-to {
-      opacity: 0;
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
 
-      /* 初始状态为不可见 */
-    }
+    /* 初始状态为不可见 */
   }
+}
 </style>

src/views/vent/dust/dustWarnAnalysis/index.vue

@@ -162,8 +162,8 @@ async function historyAndForecastList(params) {
     echartData.yData1.length = 0
     res.lineData.forEach(el => {
       echartData.xData.push(el.time)
-      echartData.yData.push(el.value || 0)
-      echartData.yData1.push(el.valuePredict || 0)
+      echartData.yData.push(el.value )
+      echartData.yData1.push(el.valuePredict)
     })
   }
 }

src/views/vent/fire/compositeWarn/index.vue

@@ -5,15 +5,17 @@
     </div>
     <!-- 光钎，束管 -->
     <div class="composite-right-box">
-      <div style="width:100%;height:100%" v-if="echartDataGx.xData.length!=0 || echartDataGx.yData.length!=0 || echartDataGx.yData1.length!=0 || card3List.length!=0 || echartData.xData.length!=0 || echartData.yData.length!=0 || echartData.yData1.length!=0">
+      <div style="width:100%;height:100%"
+        v-if="echartDataGx.xData.length != 0 || echartDataGx.yData.length != 0 || echartDataGx.yData1.length != 0 || card3List.length != 0 || echartData.xData.length != 0 || echartData.yData.length != 0 || echartData.yData1.length != 0">
         <div class="gx-top-box" v-if="flagShow == 'gx' || flagShow == 'all'">
           <basicCard :cardContentList="cardContentList" />
         </div>
-        <div :class="flagShow == 'gx' ? 'gx-center-box1' : 'gx-center-box'" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <div :class="flagShow == 'gx' ? 'gx-center-box1' : 'gx-center-box'"
+          v-if="flagShow == 'gx' || flagShow == 'all'">
           <div class="gx-center-item-title">
             <div class="item-left">光钎测温系统温度实时监测</div>
-            <Select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
-              allowClear @change="pointChange" />
+            <a-select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择"
+              v-model:value="gxSelect" allowClear @change="pointChange"></a-select>
           </div>
           <div class="gx-center-item-content">
             <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
@@ -21,13 +23,18 @@
 
         </div>
         <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
-          <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          <div class="composite-search">
+            <a-select style="width: 180px" :options="selectListSg" size="small" placeholder="请选择"
+              v-model:value="pointCode" allowClear @change="changeSg"></a-select>
+          </div>
+          <div class="composite-content">
+            <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          </div>
         </div>
         <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
           <div class="search-area">
             <div class="area-title">束管系统监测</div>
-            <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+            <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
           </div>
           <div class="content-area">
             <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
@@ -48,9 +55,8 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
-import { RangePicker, Select } from 'ant-design-vue';
 import basicCard from '../../common/basicCard.vue';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { getAssetURL } from '../../../../utils/ui';
 import { getFireAreaInfo, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData, getInfosByAreaCode, getGxcwHistoryDataByPointCode } from './composite.api'
 
@@ -80,9 +86,8 @@ let areaCode = ref('')
 let gasType = ref('')
 let pointCode = ref('')
 let flagShow = ref('')
-let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
-
-
+let dateFormat = ref('YYYY-MM-DD');
+let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime()+ 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])
 let gridV = reactive({
   top: '8%',
   left: '3%',
@@ -95,7 +100,7 @@ let echartData = reactive(
     xData: [],
     yData: [],
     yData1: [],
-    legendName: ['实时值', '预测值']
+    legendName: ['实时值']
   }
 )
 let echartDataGx = reactive(
@@ -110,6 +115,8 @@ let echartDataGx = reactive(
 let gxSelectList = reactive<any[]>([])
 let gxSelect = ref('')
 
+let selectListSg = reactive<any[]>([])
+
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
@@ -128,9 +135,9 @@ function getMonitor() {
 
 //时间选项切换
 function onDataChange(value, dateString) {
-  TimeRange.value = [dateString[0], dateString[1]]
-  console.log(TimeRange, 'TimeRange')
+  TimeRange.value = [ value[0], value[1]]
 }
+
 //获取左侧菜单树
 async function getFireAreaInfos() {
   treeData.length = 0
@@ -238,12 +245,21 @@ async function getGxcwHistoryDataByPointCodeList() {
     echartDataGx.yData1.push(el)
   })
 }
+//束管选项切换
+function changeSg(val) {
+  pointCode.value = val
+  getSgjcRealDataByPointCodeList()
+}
 //获取工作面束管测点编号列表
 async function getSgjcPointInfoList() {
   let res = await getSgjcPointInfo({ areaCode: areaCode.value })
   console.log(res, '工作面束管测点编号列表')
   if (res.length != 0) {
-    pointCode.value = res[0]['pointCode']
+    selectListSg.length = 0
+    res.forEach(el => {
+      selectListSg.push({ label: el.pointName, value: el.pointCode })
+    })
+    pointCode.value = pointCode.value ? pointCode.value : res[0]['pointCode']
     //获取工作面束管测点实时数据  
     getSgjcRealDataByPointCodeList()
   }
@@ -269,8 +285,9 @@ function toggleChange(title) {
 }
 //获取束管曲线数据
 async function getSgjcHistoryDataList() {
-
-  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  let startTime=`${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
+  let endTime=`${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: startTime, endTime:endTime  })
   console.log(res, '束管曲线数据-------')
   echartData.xData.length = 0
   echartData.yData.length = 0
@@ -284,6 +301,7 @@ async function getSgjcHistoryDataList() {
 }
 
 onMounted(() => {
+
   getFireAreaInfos()
   getMonitor()
 
@@ -326,14 +344,27 @@ onUnmounted(() => {
 
     .composite-top-box {
       width: 100%;
-      height: 250px;
+      height: 290px;
       margin-bottom: 15px;
+
+      .composite-search {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: flex-end;
+        height: 40px;
+        padding: 0 15px;
+      }
+
+      .composite-content {
+        height: calc(100% - 40px);
+      }
     }
 
     .composite-bot-box {
       box-sizing: border-box;
       width: 100%;
-      height: calc(100% - 265px);
+      height: calc(100% - 305px);
       padding: 10px 15px;
       border: 1px solid #1e96cd;
       background-color: rgb(41 49 53 / 80%);

src/views/vent/fire/fireDistributionPoint/index.vue

@@ -101,7 +101,7 @@ async function getHeadingFaceList() {
   if (res.length != 0) {
     sensorList1.length=0
     res.forEach(el => {
-      sensorList1.push({ name: el.name, nd: el.co || 0 , status: el.wd || 0 , warn: el.warningMsg, times: el.dateTime })
+      sensorList1.push({ name: el.name, nd: el.co || '-' , status: el.wd || '-' , warn: el.warningMsg, times: el.dateTime })
     })
   }
 }

src/views/vent/fire/fireGoaf/index.vue

@@ -12,8 +12,7 @@
         <div class="composite-bot-box">
           <div class="search-area">
             <div class="area-title">束管系统监测</div>
-            <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+            <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
           </div>
 
           <div class="content-area">
@@ -33,12 +32,11 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
-import { RangePicker, } from 'ant-design-vue';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { getFireAreaInfo, getMbRealData, getMbHistoryData } from './goaf.api'
 
-
-let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
+let dateFormat = ref('YYYY-MM-DD');
+let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime()+ 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])
 let card3List = reactive<any[]>([])
 
 //左侧菜单树
@@ -58,7 +56,7 @@ let echartData = reactive({
   xData: [],
   yData: [],
   yData1: [],
-  legendName: ['实时值', '预测值']
+  legendName: ['实时值']
 })
 
 // https获取监测数据
@@ -79,7 +77,7 @@ function getMonitor() {
 
 //时间选项切换
 function onDataChange(value, dateString) {
-  TimeRange.value = [dateString[0], dateString[1]]
+  TimeRange.value = [value[0], value[1]]
   console.log(TimeRange, 'TimeRange')
 }
 
@@ -132,8 +130,9 @@ function toggleChange(title) {
 }
 //获取密闭图表数据
 async function getMbHistoryDataList() {
-
-  let res = await getMbHistoryData({ areaCode: areaCode.value, type: type.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  let startTime=`${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
+  let endTime=`${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
+  let res = await getMbHistoryData({ areaCode: areaCode.value, type: type.value, startTime: startTime, endTime:endTime  })
   console.log(res, '密闭图表数据------')
   echartData.xData.length = 0
   echartData.yData.length = 0

src/views/vent/fire/fireHome/components/emptyJc.vue

@@ -47,29 +47,29 @@ watch(() => props.emptyData, (newE, oldE) => {
     background-size: 100% 100%;
 
     &:nth-child(1) {
-      top: 10px;
+      top: 32px;
       left: 0;
       width: 100px;
       height: 100px;
     }
 
     &:nth-child(2) {
-      top: 70px;
-      left: 50px;
+      top: 100px;
+      left: 45px;
       width: 80px;
       height: 80px;
     }
 
     &:nth-child(3) {
-      top: 30px;
-      left: 130px;
+      top: 70px;
+      left: 120px;
       width: 90px;
       height: 90px;
     }
 
     &:nth-child(4) {
-      top: 0;
-      left: 190px;
+      top: 40px;
+      left: 185px;
       width: 100px;
       height: 100px;
     }
@@ -97,13 +97,13 @@ watch(() => props.emptyData, (newE, oldE) => {
 
     .empty-label {
       margin-bottom: 5px;
-      color: #9da5aa;
-      font-size: 14px;
+      color: #86b9ce;
+      font-size: 12px;
     }
 
     .empty-val {
-      color: #fff;
-      font-size: 14px;
+      color: #86b9ce;
+      font-size: 12px;
     }
   }
 }

src/views/vent/fire/fireHome/components/fiberBunbleJc.vue

@@ -62,7 +62,7 @@ watch(() => props.bunbleData, (newB, oldB) => {
       transform: translate(0, -50%);
       color: #fff;
       // font-family: douyuFont;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: bolder;
     }
 
@@ -117,12 +117,12 @@ watch(() => props.bunbleData, (newB, oldB) => {
 
     .item-label {
       color: #9da5aa;
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .item-val {
       color: #fff;
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .item-dw {

src/views/vent/fire/fireHome/components/outFireJc.vue

@@ -63,9 +63,10 @@ watch(() => props.outFireData, (newO, oldO) => {
 
       .outFire-title {
         position: absolute;
-        top: 14px;
+        top: 20px;
         width: 100%;
         color: #fff;
+        font-size: 12px;
         text-align: center;
       }
 
@@ -84,9 +85,10 @@ watch(() => props.outFireData, (newO, oldO) => {
 
       .outFire-label {
         position: absolute;
-        top: 110px;
+        top: 114px;
         width: 100%;
         color: #9da5aa;
+        font-size: 12px;
         text-align: center;
       }
 

src/views/vent/fire/fireHome/components/safetyJc.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="safetyJc">
     <div class="safety-head">
-      <div :class="safetyHeadList.length == 4 ? 'safety-head-item' : 'safety-head-item1'"
+      <div
+        :class="safetyHeadList.length == 4 ? 'safety-head-item' : safetyHeadList.length == 3 ? 'safety-head-item0' : 'safety-head-item1'"
         v-for="(item, index) in safetyHeadList" :key="index">{{
           item.label
         }}</div>
     </div>
     <div class="safety-content">
       <vue3-seamless-scroll hover-stop="true" :list="safetyList" :hover="true" :step="0.15" class="seamless-warp">
-        <div :class="safetyHeadList.length == 4 ? 'safety-content-box' : 'safety-content-box1'"
+        <div
+          :class="safetyHeadList.length == 4 ? 'safety-content-box' : safetyHeadList.length == 3 ? 'safety-content-box0' : 'safety-content-box1'"
           v-for="(ite, ind) in safetyList" :key="ind">
           <span v-if="ite.address">{{ ite.address }}</span>
           <span v-if="ite.nd">{{ ite.nd }}</span>
@@ -79,6 +81,7 @@ watch(() => props.safetyList, (newL, oldL) => {
     .safety-head-item {
       height: 30px;
       color: #1fb3f7;
+      font-size: 12px;
       font-weight: bold;
       line-height: 30px;
       text-align: center;
@@ -107,6 +110,32 @@ watch(() => props.safetyList, (newL, oldL) => {
 
     }
 
+    .safety-head-item0 {
+      height: 30px;
+      color: #1fb3f7;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 30px;
+      text-align: center;
+
+      &:nth-child(1) {
+        display: inline-block;
+        width: 50%;
+
+      }
+
+      &:nth-child(2) {
+        display: inline-block;
+        width: 20%;
+
+      }
+
+      &:nth-child(3) {
+        display: inline-block;
+        width: 30%;
+      }
+    }
+
     .safety-head-item1 {
       height: 30px;
       color: #1fb3f7;
@@ -173,7 +202,7 @@ watch(() => props.safetyList, (newL, oldL) => {
 
           /* 超出部分隐藏 */
           color: #fff;
-          font-size: 14px;
+          font-size: 12px;
           line-height: 24px;
           text-align: center;
           text-overflow: ellipsis;
@@ -207,6 +236,53 @@ watch(() => props.safetyList, (newL, oldL) => {
         }
       }
 
+      .safety-content-box0 {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 24px;
+        margin-bottom: 10px;
+        padding: 0 7px;
+        background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
+        background-size: 100% 100%;
+
+        span {
+          height: 24px;
+          overflow: hidden;
+
+          /* 超出部分隐藏 */
+          color: #fff;
+          font-size: 12px;
+          line-height: 24px;
+          text-align: center;
+          text-overflow: ellipsis;
+
+          /* 超出部分显示省略号 */
+          white-space: nowrap;
+
+          /* 不换行 */
+
+          &:nth-child(1) {
+            display: inline-block;
+            width: 50%;
+            background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(2) {
+            display: inline-block;
+            width: 20%;
+          }
+
+          &:nth-child(3) {
+            display: inline-block;
+            width: 30%;
+          }
+        }
+      }
+
       .safety-content-box1 {
         display: flex;
         box-sizing: border-box;
@@ -268,4 +344,5 @@ watch(() => props.safetyList, (newL, oldL) => {
 
 
   }
-}</style>
+}
+</style>

src/views/vent/fire/fireHome/components/substationJc.vue

@@ -43,7 +43,7 @@ function getOption() {
         type: 'plain',
         textStyle: {
           color: '#7ec7ff',
-          fontSize: 14,
+          fontSize: 12,
         },
         // icon:'rect',
         itemGap: 25,
@@ -86,7 +86,7 @@ function getOption() {
             textStyle: {
               color: '#b3b8cc',
               padding: 0,
-              fontSize: 14,
+              fontSize: 12,
             },
             formatter: function (data) {
               return data;
@@ -129,7 +129,7 @@ function getOption() {
             textStyle: {
               color: '#b3b8cc',
               padding: 0,
-              fontSize: 14,
+              fontSize: 12,
             },
             formatter: function (value) {
               if (value === 0) {

src/views/vent/fire/fireHome/components/systemJc.vue

@@ -53,7 +53,7 @@ function getDetail(index) {
       left: 50%;
       transform: translate(-50%, 0);
       color: #fff;
-      font-size: 14px;
+      font-size: 12px;
     }
   }
 }

src/views/vent/fire/fireHome/components/workJc.vue

@@ -15,6 +15,7 @@
             <div class="fx-label-r">{{ item.name }}</div>
           </div>
           <div class="fx-val">{{ item.value }}</div>
+          <div class="fx-unit" v-if="!item.value"></div>
         </div>
       </div>
     </div>
@@ -61,52 +62,37 @@ let props = defineProps({
     default: () => {
       return []
     }
+  },
+  echartDataWork:{
+    type:Array,
+    default:()=>{
+      return []
+    }
   }
 });
 
 //获取dom节点
 let ring = ref();
 
-let fxLenged = reactive([
-  {
-    name: '低风险',
-    value: 1,
-  },
-  // {
-  //   name: '中风险',
-  //   value: 2,
-  // },
-  // {
-  //   name: '高风险',
-  //   value: 3,
-  // },
-  // {
-  //   name: '报警',
-  //   value: 4,
-  // },
-  // {
-  //   name: '正常',
-  //   value: 5,
-  // },
-]);
+let fxLenged =reactive<any[]>([]);//图表数据
 
 let cardList = ref<any[]>([]);
 
 function getOption() {
   nextTick(() => {
     let color = ['#1fb3f7', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
-
-    let seriesData = [
-      { name: '低风险', value: 30 },
-      // { name: '中风险', value: 10 },
-      // { name: '高风险', value: 15 },
-      // { name: '报警', value: 23 },
-      // { name: '正常', value: 10 },
-    ];
-
     let myChart = echarts.init(ring.value);
     let option = {
       color: color,
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        formatter: '{b}:{c}',
+        textStyle: {
+          color: '#fff',
+          fontSize: 14,
+        },
+      },
       grid: {
         top: '15%',
         left: 0,
@@ -117,21 +103,23 @@ function getOption() {
 
       series: [
         {
-          name: '风险占比',
+          name: '',
           type: 'pie',
           center: ['50%', '50%'],
-          radius: ['65%', '85%'],
+          radius: ['70%', '88%'],
           label: {
             normal: {
-              show: false,
+              show: true,
               position: 'center',
-              formatter: '{value|{c}}\n{label|{b}}',
+              // formatter: '{value|{c}}\n{label|{b}}',
+              formatter: '{value|{c}}',
               rich: {
                 value: {
                   padding: 5,
                   align: 'center',
                   verticalAlign: 'middle',
-                  fontSize: 16,
+                  fontSize: 18,
+                  color:'#fff',
                 },
                 label: {
                   align: 'center',
@@ -152,7 +140,7 @@ function getOption() {
             length: 0,
             length2: 0,
           },
-          data: seriesData,
+          data: fxLenged,
         },
       ],
     };
@@ -168,16 +156,27 @@ watch(() => props.cardData, (newC, oldC) => {
   cardList.value = newC
 }, { immediate: true, deep: true })
 
+watch(()=>props.echartDataWork,(newV,oldV)=>{
+  console.log(newV,'图表数据------')
+  fxLenged.length=0
+  if(newV.length!=0){
+    fxLenged.length=0
+    newV.forEach(el=>{
+      fxLenged.push({name:el.label,value:el.value})
+    })
+  }
+},{immediate:true,deep:true})
+
 onMounted(() => {
   getOption();
 });
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../../../assets/font/douyuFont.otf');
-}
+// @font-face {
+//   font-family: douyuFont;
+//   src: url('../../../../../assets/font/douyuFont.otf');
+// }
 
 .workJc {
   width: 100%;
@@ -239,20 +238,22 @@ onMounted(() => {
 
     .workJc-r {
       display: flex;
-      box-sizing: border-box;
-      align-items: center;
+      flex-wrap: wrap;
+      align-items: flex-start;
       justify-content: flex-start;
       width: calc(100% - 140px);
       height: 100%;
-      padding-left: 10px;
+      // padding-left: 10px;
+      // box-sizing: border-box;
 
       .fx-box {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        height: 80px;
-        color: #a1b6c2;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    color: #9da5aa;
 
         .fx-label {
           display: flex;
@@ -262,8 +263,8 @@ onMounted(() => {
           .fx-label-l {
             position: relative;
             box-sizing: border-box;
-            width: 14px;
-            height: 14px;
+            width: 12px;
+            height: 12px;
             margin-right: 5px;
             padding: 1px;
             border: 1px solid #1fb3f7;
@@ -275,11 +276,23 @@ onMounted(() => {
               background-color: #1fb3f7;
             }
           }
+
+          .fx-label-r{
+            font-size: 12px;
+          }
         }
 
         .fx-val {
-          font-family: douyuFont;
-          font-size: 18px;
+          // font-family: douyuFont; 
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        .fx-unit{
+      width: 20px;
+          height: 1px;
+          margin: 2px;
+          background-color: #a1b6c2;
         }
       }
     }
@@ -303,10 +316,10 @@ onMounted(() => {
 
         .card-l-label {
           position: absolute;
-          top: 9%;
-          left: 5%;
-          color: #a1b6c2;
-          font-size: 14px;
+          top: 12%;
+          left: 5.5%;
+          color:  #9da5aa;
+          font-size: 12px;
           letter-spacing: 2px;
         }
 
@@ -320,19 +333,20 @@ onMounted(() => {
 
         .card-r-label {
           position: absolute;
-          top: 8%;
+          top: 11%;
           left: 20%;
           border-bottom: 1px solid #d0d2d3;
-          color: #d0d2d3;
-          font-size: 14px;
+          color:  #d0d2d3;
+          font-size: 12px;
         }
 
         .card-r-content {
           position: absolute;
           // top: 42%;
-          top: 52%;
+          top: 54%;
           left: 20%;
           color: #9da5aa;
+          font-size: 12px;
         }
 
         .card-r-content1 {

src/views/vent/fire/fireHome/firehome.api.ts

@@ -1,6 +1,7 @@
 import { defHttp } from '@/utils/http/axios';
 
 enum Api {
+  getFireWarningCntByType='/fire/fireDisasterApi/getFireWarningCntByType',
   getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
   getMbRealData = '/fire/fireDisasterApi/getMbRealData',
   getSgjcPointInfo = '/fire/fireDisasterApi/getSgjcPointInfo',
@@ -13,6 +14,11 @@ enum Api {
   getDsWd = '/fire/fireDisasterApi/getDsWd',
 }
 /**
+ * 工作面风险监测图表数据
+ * @param params
+ */
+export const getFireWarningCntByType = (params) => defHttp.get({ url: Api.getFireWarningCntByType, params });
+/**
  * 工作面风险监测
  * @param params
  */

src/views/vent/fire/fireHome/index.vue

@@ -15,21 +15,21 @@
                 <div>监测区域</div>
               </div>
               <div class="tcontent-c">
-                <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
-                <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
+                <div style="margin-bottom: 15px;color: #1fb3f7; font-size: 24px;font-weight:bolder;letter-spacing:10px;">低风险</div>
+                <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
               </div>
               <div class="tcontent-r">火灾风险</div>
             </div>
           </div>
           <!-- 左中区域 -->
           <div class="left-c">
-            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '525px' }">
-              <workJc :heightT="'25%'" :heightB="'75%'" :echartData="echartDataWork" :cardData="cardData" />
+            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '450px' }">
+              <workJc :heightT="'30%'" :heightB="'70%'"  :echartData="echartDataWork" :cardData="cardData" />
             </DanelBd>
           </div>
           <!-- 左下区域 -->
           <div class="left-b">
-            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
+            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '245px' }" commonTitle="selected"
               :selectValue="areaCodeMb" :selectList="selectListMb" @change-select="changeSelect">
               <emptyJc :emptyData="emptyData" />
             </DanelBd>
@@ -115,6 +115,7 @@ import {
   getHeadingFace,
   getMainTrafficYw,
   getDsWd,
+  getFireWarningCntByType
 } from './firehome.api';
 
 let moduleSelect = reactive([
@@ -134,7 +135,7 @@ let pointCodeBd = ref('');
 let pointCodeAq = ref('one');
 
 //工作面风险监测数据
-let echartDataWork = reactive<any[]>([]);
+let echartDataWork = ref<any[]>([]);
 let cardData = reactive<any[]>([]);
 let selectList = reactive<any[]>([]);
 let bunbleData = reactive<any[]>([]);
@@ -175,6 +176,7 @@ let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
   timer = setTimeout(async () => {
     //工作面
+    await getFireWarningCntByTypeList();
     await getFireAreaInfoList();
     //密闭
     await getFireAreaInfoListMb();
@@ -217,13 +219,18 @@ function changeSelect(data) {
       break;
   }
 }
-
+//获取工作面风险监测图表数据
+async function getFireWarningCntByTypeList(){
+  let res=await getFireWarningCntByType({areaType:2})
+  if(res.length!=0){
+    echartDataWork.value=res
+  }
+}
 //获取工作面风险监测数据
 async function getFireAreaInfoList() {
   let res = await getFireAreaInfo({ fireCauseType: 2 });
 
   if (res.length != 0) {
-    echartDataWork.length = 0;
     cardData.length = 0;
     let data = res.filter((v) => v.areaType == 2);
     data.forEach((el) => {
@@ -417,15 +424,15 @@ async function getZcHfWdList() {
     { label: '测点位置' },
     { label: '温度(°C)' },
     { label: '预警级别' },
-    { label: '时间' },
+    // { label: '时间' },
   );
   if (res.length != 0) {
     res.forEach((el) => {
       safetyList.push({
         address: el.nodePlacement,
-        temp: el.detectValue + '',
+        temp: el.detectValue || '-',
         grade: el.warningMsg,
-        time: el.dateTime,
+        // time: el.dateTime,
       });
     });
   }
@@ -441,17 +448,17 @@ async function getHeadingFaceList() {
     { label: 'CO浓度(%)' },
     { label: '温度' },
     { label: '预警级别' },
-    { label: '时间' },
+    // { label: '时间' },
   );
   console.log(res, '掘进工作面传感器监测数据');
   if (res.length != 0) {
     res.forEach((el) => {
       safetyList.push({
         address: el.name,
-        nd: el.co + '',
-        temp: el.wd + '',
+        nd: el.co || '-',
+        temp: el.wd || '-',
         grade: el.warningMsg,
-        time: el.dateTime,
+        // time: el.dateTime,
       });
     });
   }
@@ -465,16 +472,16 @@ async function getMainTrafficYwList() {
     { label: '测点位置' },
     { label: '温度(°C)' },
     { label: '预警级别' },
-    { label: '时间' },
+    // { label: '时间' },
   );
   console.log(res, '运输系统烟雾传感器数据');
   if (res.length != 0) {
     res.forEach((el) => {
       safetyList.push({
         address: el.nodePlacement,
-        temp: el.detectValue + '',
+        temp: el.detectValue || '-',
         grade: el.warningMsg,
-        time: el.dateTime,
+        // time: el.dateTime,
       });
     });
   }
@@ -490,15 +497,15 @@ async function getDsWdList() {
     { label: '测点位置' },
     { label: '温度(°C)' },
     { label: '预警级别' },
-    { label: '时间' },
+    // { label: '时间' },
   );
   if (res.length != 0) {
     res.forEach((el) => {
       safetyList.push({
         address: el.nodePlacement,
-        temp: el.detectValue + '',
+        temp: el.detectValue || '-',
         grade: el.warningMsg,
-        time: el.dateTime,
+        // time: el.dateTime,
       });
     });
   }
@@ -506,6 +513,7 @@ async function getDsWdList() {
 
 onMounted(() => {
   //工作面
+  getFireWarningCntByTypeList();
   getFireAreaInfoList();
   //密闭
   getFireAreaInfoListMb();
@@ -586,16 +594,17 @@ onUnmounted(() => {
           transform: translate(0, -50%);
 
           .tcontent-l {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 14px;
-            letter-spacing: 2px;
-          }
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 14px;
+              font-weight: bold;
+              letter-spacing: 2px;
+            }
 
           .tcontent-c {
             display: flex;
@@ -607,16 +616,17 @@ onUnmounted(() => {
           }
 
           .tcontent-r {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 14px;
-            letter-spacing: 2px;
-          }
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 14px;
+              font-weight: bold;
+              letter-spacing: 2px;
+            }
         }
       }
 

src/views/vent/fire/fireMonitor/index.vue

@@ -12,8 +12,7 @@
         <div :class="flagShow == 'gx' ? 'fire-bot-box' : 'fire-bot-box1'" v-if="flagShow == 'gx' || flagShow == 'all'">
           <div class="gx-center-item-title">
             <div class="item-left">光钎测温系统温度实时监测</div>
-            <Select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
-              allowClear @change="pointChange" />
+              <a-select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"  allowClear @change="pointChange"></a-select>
           </div>
           <div class="gx-center-item-content">
             <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
@@ -22,13 +21,18 @@
         </div>
         <!-- 束管 -->
         <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
-          <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          <div class="composite-search">
+              <a-select  style="width: 180px" :options="selectListSg" size="small" placeholder="请选择" v-model:value="pointCode"  allowClear @change="changeSg" ></a-select>
+          </div>
+          <div class="composite-content">
+            <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          </div>
+          
         </div>
         <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
           <div class="search-area">
             <div class="area-title">束管系统监测</div>
-            <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+            <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
           </div>
           <div class="content-area">
             <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
@@ -49,9 +53,8 @@ import basicTree from '../../common/basicTree.vue'
 import basicCard2 from '../../common/basicCard2.vue';
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
-import { RangePicker, Select } from 'ant-design-vue';
 import { getAssetURL } from '../../../../utils/ui';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { getFireAreaInfo, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './fireMonitor.api'
 
 let cardContentList2 = reactive([
@@ -65,7 +68,8 @@ let warningLevel = ref('')//风险等级
 let flagShow = ref('')
 let gasType = ref('')
 let pointCode = ref('')
-let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
+let dateFormat = ref('YYYY-MM-DD');
+let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime()+ 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])
 //数据随便写的，不符合实际情况，因为懒得改
 const treeData = reactive<any[]>([])
 
@@ -83,7 +87,7 @@ let echartData = reactive(
     xData: [],
     yData: [],
     yData1: [],
-    legendName: ['实时值', '预测值']
+    legendName: ['实时值']
   }
 )
 
@@ -99,6 +103,8 @@ let echartDataGx = reactive(
 let gxSelectList = reactive<any[]>([])
 let gxSelect = ref('')
 
+let selectListSg=reactive<any[]>([])
+
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
@@ -117,7 +123,7 @@ function getMonitor() {
 
 //时间选项切换
 function onDataChange(value, dateString) {
-  TimeRange.value = [dateString[0], dateString[1]]
+  TimeRange.value = [value[0], value[1]]
   console.log(TimeRange, 'TimeRange')
 }
 
@@ -235,16 +241,21 @@ async function getGxcwHistoryDataByPointCodeList() {
   })
 }
 
-
-
-
-
+//束管选项切换
+function changeSg(val){
+  pointCode.value =val
+  getSgjcRealDataByPointCodeList()
+}
 //获取束管测点编号列表
 async function getSgjcPointInfoList() {
   let res = await getSgjcPointInfo({ areaCode: areaCode.value })
   console.log(res, '束管测点编号列表')
   if (res.length != 0) {
-    pointCode.value = res[0]['pointCode']
+    selectListSg.length=0
+    res.forEach(el=>{
+      selectListSg.push({label:el.pointName,value:el.pointCode})
+    })
+    pointCode.value = pointCode.value ? pointCode.value : res[0]['pointCode']
     //获取工作面束管测点实时数据  
     getSgjcRealDataByPointCodeList()
   }
@@ -267,7 +278,9 @@ async function getSgjcRealDataByPointCodeList() {
 }
 //获取束管曲线数据
 async function getSgjcHistoryDataList() {
-  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  let startTime=`${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
+  let endTime=`${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: startTime, endTime: endTime })
   console.log(res, '束管曲线数据-------')
   echartData.xData.length = 0
   echartData.yData.length = 0
@@ -383,14 +396,27 @@ onMounted(() => {
 
     .composite-top-box {
       width: 100%;
-      height: 250px;
+      height: 290px;
       margin-bottom: 15px;
+
+      .composite-search{
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: flex-end;
+        height: 40px;
+        padding: 0 15px;
+      }
+
+      .composite-content{
+        height: calc(100% - 40px);
+      }
     }
 
     .composite-bot-box {
       box-sizing: border-box;
       width: 100%;
-      height: calc(100% - 265px);
+      height: calc(100% - 305px);
       padding: 10px 15px;
       border: 1px solid #1e96cd;
       background-color: rgb(41 49 53 / 80%);

src/views/vent/fire/wokeFace/index.vue

@@ -20,13 +20,18 @@
 
         <!-- 束管 -->
         <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
-          <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          <div class="composite-search">
+              <a-select style="width: 180px" :options="selectListSg" size="small" placeholder="请选择" v-model:value="pointCode"  allowClear @change="changeSg"></a-select>
+          </div>
+          <div class="composite-content">
+            <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+          </div>
+         
         </div>
         <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
           <div class="search-area">
             <div class="area-title">束管系统监测</div>
-            <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+            <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
           </div>
           <div class="content-area">
             <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
@@ -57,8 +62,7 @@ import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicSensor from '../../common/basicSensor.vue';
 import basicTree from '../../common/basicTree.vue'
 import { getFireAreaInfo, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getYwRealData, getHyRealData, getPlzzRealData, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './workeFace.api'
-import dayjs from 'dayjs';
-import { RangePicker, Select } from 'ant-design-vue';
+import dayjs, { Dayjs } from 'dayjs';
 import basicCard3 from '../../common/basicCard3.vue';
 
 let areaCode = ref('')
@@ -68,7 +72,8 @@ let gxSelect = ref('')
 let pointCode = ref('')
 let gasType = ref('')
 let card3List = reactive<any[]>([])
-let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
+  let dateFormat = ref('YYYY-MM-DD');
+  let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime()+ 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])
 let cardContentList = reactive([
   { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '' },
   { id: 1, imgSrc: getAssetURL('workPlaceWarn/jd-zdwd.png'), label: '最低温度(℃)', val: '' },
@@ -104,6 +109,8 @@ let headList = reactive([
 //数据随便写的，不符合实际情况，因为懒得改
 const treeData = reactive<any[]>([])
 
+let selectListSg=reactive<any[]>([])
+
 let gridV = reactive({
   top: '15%',
   left: '4%',
@@ -115,7 +122,7 @@ let echartData = reactive({
   xData: [],
   yData: [],
   yData1: [],
-  legendName: ['实时值', '预测值']
+  legendName: ['实时值']
 })
 
 let echartDataGx = reactive(
@@ -145,7 +152,7 @@ function getMonitor() {
 
 //时间选项切换
 function onDataChange(value, dateString) {
-  TimeRange.value = [dateString[0], dateString[1]]
+  TimeRange.value = [value[0], value[1]]
   console.log(TimeRange, 'TimeRange')
 }
 
@@ -318,13 +325,21 @@ async function getPlzzRealDataList() {
   }
 
 }
-
+//束管选项切换
+function changeSg(val){
+  pointCode.value =val
+  getSgjcRealDataByPointCodeList()
+}
 //获取束管测点编号列表
 async function getSgjcPointInfoList() {
   let res = await getSgjcPointInfo({ areaCode: areaCode.value })
   console.log(res, '束管测点编号列表')
   if (res.length != 0) {
-    pointCode.value = res[0]['pointCode']
+    selectListSg.length=0
+    res.forEach(el=>{
+      selectListSg.push({label:el.pointName,value:el.pointCode})
+    })
+    pointCode.value = pointCode.value ? pointCode.value : res[0]['pointCode']
     //获取束管测点实时数据  
     getSgjcRealDataByPointCodeList()
   }
@@ -354,8 +369,9 @@ async function getSgjcRealDataByPointCodeList() {
 
 //获取束管曲线数据
 async function getSgjcHistoryDataList() {
-
-  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  let startTime=`${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
+  let endTime=`${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: startTime, endTime: endTime })
   console.log(res, '束管曲线数据-------')
   echartData.xData.length = 0
   echartData.yData.length = 0
@@ -446,15 +462,28 @@ onMounted(() => {
 
     .composite-top-box {
       width: 100%;
-      height: 235px;
+      height: 275px;
       margin-bottom: 15px;
+
+      .composite-search{
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: flex-end;
+        height: 40px;
+        padding: 0 15px;
+      }
+
+      .composite-content{
+        height: calc(100% - 40px);
+      }
     }
 
     .composite-bot-box {
       box-sizing: border-box;
       width: 100%;
       // height: calc(100% - 250px);
-      height: 280px;
+      height: 240px;
       margin-bottom: 15px;
       padding: 10px 15px;
       border: 1px solid #1e96cd;