[Style 0000] 地图滤镜调整及关联分析页面调整

src/layouts/default/feature/SimpleMap.vue

@@ -41,6 +41,7 @@
       layer: null,
       url: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
       options: {
+        className: 'light-blue-theme',
         maxZoom: 18,
         subdomains: ['1', '2', '3', '4'], // 高德底图服务器集群
         attribution: '© 高德地图', // 版权声明（必填，遵守使用规范）
@@ -106,7 +107,7 @@
   }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .map-container {
     flex: 1;
     height: 100%;
@@ -115,5 +116,11 @@
     top: 0;
     left: 0;
     z-index: @simple-map-z-index;
+    // filter: grayscale(80%) invert(0%) sepia(10%) hue-rotate(150deg) saturate(200%) brightness(100%) contrast(100%);
+  }
+
+  .light-blue-theme {
+    filter: invert(0.1) hue-rotate(190deg) saturate(2);
+    // filter: sepia(0.3) hue-rotate(180deg) saturate(1.8);
   }
 </style>

src/views/analysis/warningAnalysis/connectAnalysis/components/checkbox-nav.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="check-nav">
-    <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
-      全选
-    </Checkbox>
+    <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange"> 全选 </Checkbox>
     <CheckboxGroup v-model:value="state.checkedList" @change="onChangeGroup">
       <Checkbox v-for="item in plainOptions" :key="item.value" :value="item.value">
         {{ item.label }}
@@ -12,57 +10,55 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref,onMounted } from 'vue'
-import { Checkbox, CheckboxGroup } from 'ant-design-vue'
-import { plainOptions } from '../connectAnalysis.data'
+  import { reactive, ref, onMounted } from 'vue';
+  import { Checkbox, CheckboxGroup } from 'ant-design-vue';
+  import { plainOptions } from '../connectAnalysis.data';
 
-const state = reactive({
-  indeterminate: true,
-  checkAll:false,
-  checkedList: ['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'],
-});
-let $emit = defineEmits(['checkBoxChange'])
-const onCheckAllChange = (e: any) => {
-  let checkVal = plainOptions.map(v => v.value)
-  Object.assign(state, {
-    checkedList: e.target.checked ? checkVal : [],
-    indeterminate: false,
+  const state = reactive({
+    indeterminate: true,
+    checkAll: false,
+    checkedList: ['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'],
   });
-  $emit('checkBoxChange', state)
-};
-const onChangeGroup = (val) => {
-  state.checkedList = val
-  $emit('checkBoxChange', state)
-}
-
+  let $emit = defineEmits(['checkBoxChange']);
+  const onCheckAllChange = (e: any) => {
+    let checkVal = plainOptions.map((v) => v.value);
+    Object.assign(state, {
+      checkedList: e.target.checked ? checkVal : [],
+      indeterminate: false,
+    });
+    $emit('checkBoxChange', state);
+  };
+  const onChangeGroup = (val) => {
+    state.checkedList = val;
+    $emit('checkBoxChange', state);
+  };
 </script>
 
 <style lang="less" scoped>
-.check-nav {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  .check-nav {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 
-  .ant-checkbox-wrapper {
-    width: 130px;
-  }
+    .ant-checkbox-wrapper {
+      width: 130px;
+    }
 
-  .ant-checkbox-group {
-    width: calc(100% - 130px);
-    display: flex;
-    justify-content: space-between;
+    .ant-checkbox-group {
+      width: calc(100% - 130px);
+      display: flex;
+      justify-content: space-between;
+    }
   }
 
-}
-
-:deep(.ant-checkbox .ant-checkbox-inner) {
-  background-color: transparent;
-  border: 1px solid #fff;
-}
+  :deep(.ant-checkbox .ant-checkbox-inner) {
+    background-color: transparent;
+    border: 1px solid @white;
+  }
 
-:deep(.ant-checkbox-checked .ant-checkbox-inner) {
-  background-color: #2b5ff0;
-  border-color: #2b5ff0;
-}
+  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+    background-color: @primary-color;
+    border-color: @primary-color;
+  }
 </style>

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -7,8 +7,14 @@
           <div class="filter-section param-section">
             <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
-              <MineCascader v-model:value="innerValue" style="width: 330px" :sync-to-store="false"
-                :init-from-store="false" :change-on-select="false" @change="changeCascader"></MineCascader>
+              <MineCascader
+                v-model:value="innerValue"
+                style="width: 330px"
+                :sync-to-store="false"
+                :init-from-store="false"
+                :change-on-select="false"
+                @change="changeCascader"
+              ></MineCascader>
             </div>
           </div>
         </Col>
@@ -17,23 +23,28 @@
           <div class="filter-section param-section">
             <span class="filter-label">密闭名称：</span>
             <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择老空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }}
-              </SelectOption>
+              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
             </Select>
           </div>
         </Col>
         <Col :span="7">
           <div class="filter-section param-section">
             <span class="filter-label">时间选择：</span>
-            <RangePicker v-model:value="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
+            <RangePicker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              style="width: 300px"
+              :show-time="{ format: 'HH:mm:ss' }"
+              @change="changeTime"
+            />
           </div>
         </Col>
         <Col :span="2">
           <div class="filter-section">
             <Button type="primary" @click="generateChart">
               <template #icon>
-                <SvgIcon style="margin-right: 10px;" name="shencen" />
+                <SvgIcon style="margin-right: 10px" name="shencen" />
               </template>
               生成
             </Button>
@@ -63,176 +74,179 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watchEffect, reactive, } from 'vue';
-import dayjs from 'dayjs';
-import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
-import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
-import CheckboxNav from './components/checkbox-nav.vue'
-import echartLengend from './components/echart-lengend.vue'
-import echartContent from './components/echart-content.vue'
-import echartDivder from './components/echart-divder.vue'
-import { getGoafHistory, getGoafList } from './connectAnalysis.api';
-import { useRouter } from 'vue-router';
-import { useMineDepartmentStore } from '/@/store/modules/mine';
-import { SvgIcon } from '/@/components/Icon';
-
-// 组件注册
-const RangePicker: any = DatePicker.RangePicker;
-const { currentRoute } = useRouter();
-// 筛选相关响应式数据
-const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
-const goafId = ref(''); //采空区id
-const goafOption = ref<any[]>([]); //采空区列表
-const mineStore = useMineDepartmentStore();
-const innerValue = ref('');
-const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); //当前选中要进行显示的选项
-const echartData = reactive({
-  xData: [] as any,
-  yData: [] as any,
-});
-
-//煤矿选项切换
-function changeCascader(val) {
-  console.log(val, '111---')
-  innerValue.value = val;
-  getGoafListData();
-}
-//时间选择选项切换
-function changeTime(val) {
-  dateRange.value[0] = val[0];
-  dateRange.value[1] = val[1];
-}
-//图表选项标签切换
-function checkBoxChange(val) {
-  checkList.value = val.checkedList;
-  generateChart();
-}
-
-// 生成折线图核心逻辑
-async function generateChart() {
-  echartData.yData.length = 0;
-  let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
-  let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
-  let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
-  if (res) {
-    let data = res.records || [];
-    if (data.length) {
-      echartData.xData = data.map((e) => e.createTime);
-      if (checkList.value.length) {
-        checkList.value.forEach((el) => {
-          echartData.yData.push({
-            label: el,
-            value: data,
+  import { computed, ref, onMounted, watchEffect, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
+  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+  import CheckboxNav from './components/checkbox-nav.vue';
+  import echartLengend from './components/echart-lengend.vue';
+  import echartContent from './components/echart-content.vue';
+  import echartDivder from './components/echart-divder.vue';
+  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+  import { useRouter } from 'vue-router';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import { SvgIcon } from '/@/components/Icon';
+
+  // 组件注册
+  const RangePicker: any = DatePicker.RangePicker;
+  const { currentRoute } = useRouter();
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
+  const goafId = ref(''); //采空区id
+  const goafOption = ref<any[]>([]); //采空区列表
+  const mineStore = useMineDepartmentStore();
+  const innerValue = ref('');
+  const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); //当前选中要进行显示的选项
+  const echartData = reactive({
+    xData: [] as any,
+    yData: [] as any,
+  });
+
+  //煤矿选项切换
+  function changeCascader(val) {
+    console.log(val, '111---');
+    innerValue.value = val;
+    getGoafListData();
+  }
+  //时间选择选项切换
+  function changeTime(val) {
+    dateRange.value[0] = val[0];
+    dateRange.value[1] = val[1];
+  }
+  //图表选项标签切换
+  function checkBoxChange(val) {
+    checkList.value = val.checkedList;
+    generateChart();
+  }
+
+  // 生成折线图核心逻辑
+  async function generateChart() {
+    echartData.yData.length = 0;
+    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+    let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
+    if (res) {
+      let data = res.records || [];
+      if (data.length) {
+        echartData.xData = data.map((e) => e.createTime);
+        if (checkList.value.length) {
+          checkList.value.forEach((el) => {
+            echartData.yData.push({
+              label: el,
+              value: data,
+            });
           });
-        });
+        }
       }
     }
   }
 
-
-}
-
-//获取采空区列表
-async function getGoafListData() {
-  let res = await getGoafList({ mineCode: innerValue.value });
-  console.log(res,'90')
-    goafOption.value = res.map((el) => {
-      return {
-        label: el.devicePos,
-        value: el.id,
-      };
-    }) || [];
-    goafId.value = goafOption.value.length ?  goafId.value ?  goafId.value : goafOption.value[0]['value'] : '';
-  
-}
-
-onMounted(async () => {
-  const mineCode = currentRoute.value['query']['mineCode']; //传递过来的矿ID
-  if (mineCode) {
-    innerValue.value = mineCode as any;
-  } else {
-    innerValue.value = mineStore.getMineCode.split(',')[0];
-    console.log(innerValue.value, 'innerValue.value')
-    await generateChart();
+  //获取采空区列表
+  async function getGoafListData() {
+    let res = await getGoafList({ mineCode: innerValue.value });
+    console.log(res, '90');
+    goafOption.value =
+      res.map((el) => {
+        return {
+          label: el.devicePos,
+          value: el.id,
+        };
+      }) || [];
+    goafId.value = goafOption.value.length ? (goafId.value ? goafId.value : goafOption.value[0]['value']) : '';
   }
-});
+
+  onMounted(async () => {
+    const mineCode = currentRoute.value['query']['mineCode']; //传递过来的矿ID
+    if (mineCode) {
+      innerValue.value = mineCode as any;
+    } else {
+      innerValue.value = mineStore.getMineCode.split(',')[0];
+      console.log(innerValue.value, 'innerValue.value');
+      await generateChart();
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.connectAnalysis {
-  width: calc(100% - 10px);
-  height: calc(100% - 10px);
-  margin: 10px 0px 0px 10px;
-  padding: 10px;
-  box-sizing: border-box;
-  border: 1px solid #c8d0dd;
-  border-radius: 4px;
-
-  .filter-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding: 20px;
-    border: 1px solid #cad3e1;
+  .connectAnalysis {
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+    margin: 10px 0px 0px 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid @border-color-base;
     border-radius: 4px;
     // background: @card-bg-color;
-    background-color: #f8f9fc;
+    background-color: @card-bg-color;
     align-items: center;
     // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
 
   }
 
-  .filter-section {
-    display: flex;
-    align-items: center;
-  }
+    .filter-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      padding: 20px;
+      border: 1px solid @border-color-base;
+      border-radius: 4px;
+      // background: @card-bg-color;
+      background-color: @card-bg-color;
+      align-items: center;
+      // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
+    }
 
-  .filter-label {
-    color: #666;
-    min-width: 70px;
-    flex-shrink: 0;
-    font-weight: 500;
-  }
+    .filter-section {
+      display: flex;
+      align-items: center;
+    }
 
-  .param-section {
-    flex: 1;
-    // min-width: 300px;
-  }
+    .filter-label {
+      color: #666;
+      min-width: 70px;
+      flex-shrink: 0;
+      font-weight: 500;
+    }
 
-  .param-selector {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
+    .param-section {
+      flex: 1;
+      // min-width: 300px;
+    }
 
-  .echart-box {
-    width: 100%;
-    height: calc(100% - 95px);
-  }
+    .param-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+    }
 
-  .check-title {
-    height: 40px;
-    line-height: 40px;
-    background-color: #d0e1fa;
-    border-radius: 4px;
-    padding: 0px 20px;
-    box-sizing: border-box;
-    margin: 15px 0px;
-  }
+    .echart-box {
+      width: 100%;
+      height: calc(100% - 95px);
+    }
 
-  .check-line {
-    width: 100%;
-  }
+    .check-title {
+      height: 40px;
+      line-height: 40px;
+      background-color: @table-thead-bg-color;
+      border-radius: 4px;
+      padding: 0px 20px;
+      box-sizing: border-box;
+      margin: 15px 0px;
+    }
 
-  .echart-content {
-    width: 100%;
-    height: calc(100% - 112px);
+    .check-line {
+      width: 100%;
+    }
+
+    .echart-content {
+      width: 100%;
+      height: calc(100% - 112px);
+    }
   }
-}
 
-:deep(.ant-btn-primary) {
-  display: flex !important;
-  align-items: center !important;
-}
+  :deep(.ant-btn-primary) {
+    display: flex !important;
+    align-items: center !important;
+  }
 </style>