1.文件中加水印；2.井筒列表 增加定位图标 点击在地图搜索上显示；等优化

src/main/java/com/bowintek/smartsearch/controller/WellInfoController.java

@@ -12,6 +12,7 @@ import com.bowintek.smartsearch.services.service.AccountService;
 import com.bowintek.smartsearch.services.service.ApplyFormService;
 import com.bowintek.smartsearch.services.service.OrganizationService;
 import com.bowintek.smartsearch.services.service.WellInfoService;
+import com.bowintek.smartsearch.util.DateUtils;
 import com.bowintek.smartsearch.util.RemoteHelper;
 import com.bowintek.smartsearch.vo.query.WellInfoParams;
 import com.github.pagehelper.PageInfo;
@@ -46,6 +47,8 @@ public class WellInfoController {
     private RemoteHelper remoteHelper;
     @Autowired
     private AppConfig appConfig;
+    @Autowired
+    private DateUtils dateUtils;
 
     @ResponseBody
     @PostMapping("/getList")
@@ -198,6 +201,10 @@ public class WellInfoController {
         Map<String, String> getParams = new HashMap<>();
         getParams.put("fileName", fileName);
         getParams.put("filePath", filePath);
+        String watermarkText = accountService.getUserByUserID(accountService.getLoginUserID()).getName() +" "+ dateUtils.dateToStr(new Date());
+        getParams.put("isShow", (isShow != null && 1 == isShow) ? "1":"0");
+        getParams.put("watermarkText", watermarkText);
+
 
         String reData = remoteHelper.getJson(getParams, appConfig.hdfshelperurl + "read", "UTF-8");
         byte[] bytes = Base64.getMimeDecoder().decode(reData);

vue/src/components/basic/chart/chart-map.vue

@@ -2,6 +2,7 @@
   <div class="chart-map">
     <div class="chart-map-input" v-if="isSearch">
       <a-auto-complete
+        v-model:value="selectName"
         :dropdown-match-select-width="252"
         style="width: 300px"
         :options="options"
@@ -14,7 +15,9 @@
               <img src="~@/assets/icons/postion.png">
             </div>
             <div class="chart-map-item-text">
-              <div class="chart-map-item-wellname">井名：{{ item.well_common_name }}</div>
+              <div class="chart-map-item-wellname">井名：{{ item.well_common_name }}
+              <span title="x轴或y轴坐标缺失" style="color: red" v-if="item.x=='' || item.y==''">！</span>
+              </div>
               <div>地址：{{ item.geo_description }}</div>
             </div>
           </div>
@@ -38,7 +41,7 @@
   export  default defineComponent ({
     props:{
       datas: null as any,
-      isSearch : Boolean
+      isSearch: Boolean,
     },
     name : 'ChartMap',
     data() {
@@ -46,7 +49,7 @@
         loading : false,
         options:[] as any,
         iframeWindow : null,
-        value : null
+        selectName : "",
       }
     },
     setup(props, context){
@@ -117,6 +120,7 @@
           });
           console.log("getDatas", this.datas);
           this.options = this.datas;
+          this.selectName = "";
         // }
         // return this.datas;
       },
@@ -136,6 +140,13 @@
           item : JSON.stringify(item)
         },'*');
       },
+      onSetSelect:function (item){
+        console.log("onSetSelect", item);
+        (document.getElementById('iframeMap') as any).contentWindow.postMessage({
+          action:'setCenter',
+          item : JSON.stringify(item)
+        },'*');
+      },
       handleMessage:async function (event){
         try{
           console.log("parent handle Message", event.data);

vue/src/components/basic/chart/chart-prod-dynamics.vue

@@ -175,12 +175,12 @@
           {label:'年', value:'year'}];
       },
       getTypeOptions:function (){
-        return [{label:'产油量', leiLabel:'累产油量', value:'oil', unit:'(万吨)', color: '#e33e48'},
-          {label:'产水量', leiLabel:'累产水量', value:'water', unit:'(万吨)', color: '#800080'},
-          {label:'产液量', leiLabel:'累产液量', value:'fluid', unit:'(万吨)', color: '#762126'},
-          {label:'产气量', leiLabel:'累产气量', value:'gas', unit:'(立方米)', color: '#f0a1c4'},
-          {label:'含水率', leiLabel:'含水率', value:'watercut', unit:'(%)', color: '#695ef5'},
-          {label:'注水量', leiLabel:'累注水量', value:'vol', unit:'(万吨)', color: '#2af62d'}
+        return [{label:'产油量', leiLabel:'累产油量', value:'oil', unit:'(万吨)', color: '#ec1e27'},
+          {label:'产水量', leiLabel:'累产水量', value:'water', unit:'(万吨)', color: '#00B0F0'},
+          {label:'产液量', leiLabel:'累产液量', value:'fluid', unit:'(万吨)', color: '#60080e'},
+          {label:'产气量', leiLabel:'累产气量', value:'gas', unit:'(立方米)', color: '#ffc800'},
+          {label:'含水率', leiLabel:'含水率', value:'watercut', unit:'(%)', color: '#322eda'},
+          {label:'注水量', leiLabel:'累注水量', value:'vol', unit:'(万吨)', color: '#42f03e'}
         ];
       },
       getTypes:function (){

vue/src/components/common/ColumnsSetting.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <a-button html-type="submit" type="text" @click="openModel" class="open-btn">
+      <template #icon>
+        <setting-outlined/>
+      </template>
+      字段设置
+    </a-button>
+    <!-- 字段设置对话框 -->
+    <a-modal v-model:visible="columnsSettingsVisible" title="字段设置" width="600px">
+      <!-- 字段列表 -->
+      <div>
+        <a-checkbox-group v-model:value="checkedColumnsList">
+          <div class="check-div">
+            <a-checkbox v-for="(item, index) in tableColumns" :key="index" :value="item.key"
+                        :disabled="item.isDisabled">
+              {{ item.title }}
+            </a-checkbox>
+          </div>
+        </a-checkbox-group>
+      </div>
+      <!-- 功能按钮 -->
+      <template #footer>
+        <div style="width:100%;display: flex; justify-content: space-between">
+          <div>
+            <a-button key="back" @click="onCheckAll(true)">全选</a-button>
+            <a-button key="back" @click="onCheckAll(false)">全不选</a-button>
+          </div>
+          <div>
+            <a-button key="back" @click="onClose">取消</a-button>
+            <a-button key="submit" type="primary" @click="onSubmit">确定</a-button>
+          </div>
+        </div>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const props = defineProps(["tableColumns", "checkedTableColumns"]);
+const emits = defineEmits(["onCheck"]);
+
+// 对话框开关
+const columnsSettingsVisible = ref<boolean>(false)
+// 已选择的表格列
+const checkedColumnsList = ref<Array<any>>([]);
+
+// 开启对话框
+function openModel() {
+  columnsSettingsVisible.value = true;
+  checkedColumnsList.value = props.checkedTableColumns.map((item: any) => item.key);
+}
+
+// 全选 or 全不选
+function onCheckAll(isChecked: boolean) {
+  if (isChecked) {
+    checkedColumnsList.value = props.tableColumns.map((item: any) => item.key);
+  } else {
+    checkedColumnsList.value = props.tableColumns.map((item: any) => {
+      if (item.isDisabled) {
+        return item.key;
+      }
+    });
+  }
+}
+
+// 关闭对话框
+function onClose() {
+  columnsSettingsVisible.value = false;
+  checkedColumnsList.value = []
+}
+
+// 确定选择
+function onSubmit() {
+  emits("onCheck", JSON.parse(JSON.stringify(checkedColumnsList.value)));
+  onClose();
+}
+</script>
+
+<style scoped>
+.open-btn {
+  display: flex;
+  align-items: center;
+  color: #6b6b6b;
+}
+
+.check-div {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 8px;
+  row-gap: 12px;
+
+  .ant-checkbox-wrapper {
+    margin-left: 8px !important;
+  }
+}
+</style>

vue/src/views/wellinfo/columns.ts

@@ -1,20 +1,23 @@
 import {ref} from 'vue';
 
-export const defaultBoreholeInterColumns = ref(
+export const boreholeInterColumns = ref(
     [{title: '层号(序号)', dataIndex: 'zone_no', key: 'zone_no', resizable: true, width: 120},
   {title: '裸眼井解释成果类型', dataIndex: 'borehole_inter_type_name', key: 'borehole_inter_type_name', resizable: true, width: 120},
   {title: '起始深度', dataIndex: 'start_depth', key: 'start_depth', resizable: true, width: 120},
   {title: '终止深度', dataIndex: 'end_depth', key: 'end_depth', resizable: true, width: 120},
   {title: '厚度', dataIndex: 'thickness', key: 'thickness', resizable: true, width: 120},
+  {title: '解释结论', dataIndex: 'interpretation_result', key: 'interpretation_result', resizable: true, width: 120},
+  {title: '创建/更新日期', dataIndex: 'update_date', key: 'update_date', resizable: true, width: 120, customRender: ({record}) => {
+    return record.update_date == null ? record.create_date : record.update_date;}
+  },
   {title: '岩性类型', dataIndex: 'lithology_class', key: 'lithology_class', resizable: true, width: 120},
   {title: '自然电位', dataIndex: 'spontaneous_potential', key: 'spontaneous_potential', resizable: true, width: 120},
   {title: '自然伽马', dataIndex: 'sp_gamma_radiant_intensity', key: 'sp_gamma_radiant_intensity', resizable: true, width: 120},
   {title: '井径', dataIndex: 'well_diameter', key: 'well_diameter', resizable: true, width: 120},
-  {title: '体积密度', dataIndex: 'formation_volume_density', key: 'formation_volume_density', resizable: true, width: 120},
+  {title: '体积密度', dataIndex: 'fofilterColumnsrmation_volume_density', key: 'formation_volume_density', resizable: true, width: 120},
   {title: '声波时差', dataIndex: 'sonic_differential_time', key: 'sonic_differential_time', resizable: true, width: 120},
-  {title: '中子', dataIndex: 'compensated_neutron', key: 'compensated_neutron', resizable: true, width: 120}
-   ]);
-export const otherBoreholeInterColumns = ref([{key:"更多1", list:[{title: '浅电阻率', dataIndex: 'laterolog_shallow', key: 'laterolog_shallow', resizable: true, width: 120},
+  {title: '中子', dataIndex: 'compensated_neutron', key: 'compensated_neutron', resizable: true, width: 120},
+  {title: '浅电阻率', dataIndex: 'laterolog_shallow', key: 'laterolog_shallow', resizable: true, width: 120},
   {title: '深电阻率', dataIndex: 'laterolog_deep', key: 'laterolog_deep', resizable: true, width: 120},
   {title: '冲洗带电阻率', dataIndex: 'laterolog_flushed_zone', key: 'laterolog_flushed_zone', resizable: true, width: 120},
   {title: '密度孔隙度', dataIndex: 'density_porosity', key: 'density_porosity', resizable: true, width: 120},
@@ -23,7 +26,7 @@ export const otherBoreholeInterColumns = ref([{key:"更多1", list:[{title: '浅
   {title: '有效孔隙度', dataIndex: 'effective_porosity', key: 'effective_porosity', resizable: true, width: 120},
   {title: '总孔隙度', dataIndex: 'total_porosity', key: 'total_porosity', resizable: true, width: 120},
   {title: '渗透率', dataIndex: 'permeability', key: 'permeability', resizable: true, width: 120},
-   ]}, {key:"更多2", list:[{title: '含油气饱和度', dataIndex: 'oil_gas_saturation', key: 'oil_gas_saturation', resizable: true, width: 120},
+  {title: '含油气饱和度', dataIndex: 'oil_gas_saturation', key: 'oil_gas_saturation', resizable: true, width: 120},
   {title: '束缚水饱和度', dataIndex: 'irreducible_water_saturation', key: 'irreducible_water_saturation', resizable: true, width: 120},
   {title: '泥质含量', dataIndex: 'shale_content', key: 'shale_content', resizable: true, width: 120},
   {title: '砂质含量', dataIndex: 'sandy_content', key: 'sandy_content', resizable: true, width: 120},
@@ -31,17 +34,10 @@ export const otherBoreholeInterColumns = ref([{key:"更多1", list:[{title: '浅
   {title: '白云质含量', dataIndex: 'dolomitic_content', key: 'dolomitic_content', resizable: true, width: 120},
   {title: '碳酸盐岩含量', dataIndex: 'carbonate_content', key: 'carbonate_content', resizable: true, width: 120},
   {title: '指标类型', dataIndex: 'idx_type', key: 'idx_type', resizable: true, width: 120},
-  {title: '解释结论', dataIndex: 'interpretation_result', key: 'interpretation_result', resizable: true, width: 120},
   {title: '垂深顶深', dataIndex: 'start_tvd', key: 'start_tvd', resizable: true, width: 120},
   {title: '垂深底深', dataIndex: 'end_tvd', key: 'end_tvd', resizable: true, width: 120},
   {title: '垂深层厚 ', dataIndex: 'tvd_thickness', key: 'tvd_thickness', resizable: true, width: 120},
-  {title: '备注', dataIndex: 'remarks', key: 'remarks', resizable: true, width: 120},
-  {
-    title: '创建/更新日期', dataIndex: 'update_date', key: 'update_date', resizable: true, width: 120, customRender: ({record}) => {
-      return record.update_date == null ? record.create_date : record.update_date;
-    }
-  }
-]}]);
+  {title: '备注', dataIndex: 'remarks', key: 'remarks', resizable: true, width: 120}]);
 export const testHistoryColumns = ref([
   {title: '测试日期', dataIndex: 'testing_date', key: 'testing_date', resizable: true, width: 120},
   {title: '内容描述', dataIndex: 'construction_description', key: 'construction_description', resizable: true},

vue/src/views/wellinfo/detail.vue

@@ -15,9 +15,9 @@
                                 :style="cardSettings.buttonStyle"/>
           </template>
           <div v-if="cardSettings.cardSummary.expand" class="info-body">
-            <p>井名<span>{{ dataModel.well_common_name }}</span>构造位置<span>{{
-                dataModel.structure_pos
-              }}</span>
+            <p>井名<span>{{ dataModel.well_common_name }}</span>，
+              井别<span>{{ dataModel.well_purpose }}</span>，
+              构造位置<span>{{dataModel.structure_pos}}</span>
               <template v-if="dataModel.spud_date_fmt">
                 ，于<span>{{ dataModel.spud_date_fmt }}</span>开钻
               </template>
@@ -90,7 +90,7 @@
                 <a-descriptions-item label="井名：" :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}">
                   {{ dataModel.well_common_name }}
                 </a-descriptions-item>
-                <a-descriptions-item label="井别：">{{ dataModel.well_purpose }}</a-descriptions-item>
+                <a-descriptions-item style="color: well_purpose" label="井别：">{{ dataModel.well_purpose }}</a-descriptions-item>
                 <a-descriptions-item label="井型：">{{ dataModel.well_type }}</a-descriptions-item>
                 <a-descriptions-item label="开钻日期：">{{ dataModel.spud_date_fmt }}</a-descriptions-item>
                 <a-descriptions-item label="完钻日期：">{{ dataModel.end_drilling_date_fmt }}</a-descriptions-item>
@@ -325,11 +325,13 @@
                                 :style="cardSettings.buttonStyle"/>
           </template>
           <div v-if="cardSettings.cardExplain.expand">
-            <a-checkbox-group class="checkbox-group" v-model:value="checkedBoreholeInterCheckboxList" :options="boreholeInterCheckboxOptions"/>
-            <a-table :columns="boreholeInterColumns" :data-source="boreholeInterList" :scroll="{ x:'1500', y: 500 }"
+              <ColumnsSetting style="display: flex;justify-content: flex-end;"
+                              :table-columns="boreholeInterColumns" :checked-table-columns="checkBoreholeInterColumns"
+                                @on-check="boreholeInterColumnsCheckSub"></ColumnsSetting>
+              <a-table :columns="checkBoreholeInterColumns" :data-source="boreholeInterList" :scroll="{ x:'1500', y: 500 }"
                      :pagination="false" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
                      bordered>
-            </a-table>
+              </a-table>
           </div>
         </a-card>
         <a-card id="gisdt" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
@@ -369,7 +371,7 @@ import dayjs from "dayjs";
 import {useRoute} from "vue-router";
 import router from "@/router";
 import * as columns from './columns';
-import {defaultBoreholeInterColumns, otherBoreholeInterColumns} from "./columns";
+import {boreholeInterColumns} from "./columns";
 import ChartProdDynmics from '@/components/basic/chart/chart-prod-dynamics.vue'
 import ChartMap from '@/components/basic/chart/chart-map.vue'
 import filePreview from '@/components/basic/file-preview/index.vue'
@@ -378,10 +380,11 @@ import {getPaginationTotalTitle} from "@/utils/common";
 import type {TableProps} from "ant-design-vue";
 import {message} from "ant-design-vue";
 import ChartImage from "@/components/basic/chart/chart-image.vue";
+import ColumnsSetting from "@/components/common/ColumnsSetting.vue";
 
 export default defineComponent({
   name: 'wellinfoDetail',
-  components: {ChartImage, ChartProdDynmics, ChartMap, filePreview},
+  components: {ChartImage, ChartProdDynmics, ChartMap, filePreview, ColumnsSetting},
   setup() {
     const tabsViewStore = useTabsViewStore();
     const route = useRoute();
@@ -401,28 +404,7 @@ export default defineComponent({
     })
     const wellId = ref(history.state.params?.id);
 
-    const boreholeInterColumns: any = ref(defaultBoreholeInterColumns.value);
-    const checkedBoreholeInterCheckboxList: any = ref([]);
-    const boreholeInterCheckboxOptions: any = ref(["更多1","更多2"]);
-    watch(
-        () => checkedBoreholeInterCheckboxList.value,
-        val => {
-           let list = defaultBoreholeInterColumns.value;
-          otherBoreholeInterColumns.value.filter(x=>val.indexOf(x.key)>=0).forEach(item=>{
-            list = list.concat(item.list);
-          });
-
-          boreholeInterColumns.value = list;
-        },
-    );
-    const onChangeBoreholeInterCheckbox = () =>{
-      boreholeInterColumns.value = defaultBoreholeInterColumns.value;
-        boreholeInterCheckboxOptions.value.filter(check=>check.checked===true).forEach((item: any)=>{
-          debugger;
-          console.log(item)
-          // cardSettings.value.cardExplain.column.includes(boreholeInterColumns.value.filter(x=>x.key===item.value)[0].list);
-        });
-    };
+    const checkBoreholeInterColumns: any = ref(boreholeInterColumns.value);
 
     const testHistoryPage = ref({
       total: 0,
@@ -652,6 +634,12 @@ export default defineComponent({
     ]);
     //#endregin
 
+    // 字段展示列选择完毕
+    const boreholeInterColumnsCheckSub = (columnsKeys: Array<string>) => {
+      // 从原始表格定义数据中过滤出已选择的字段
+      checkBoreholeInterColumns.value = boreholeInterColumns.value.filter((item: any) => columnsKeys.includes(item.key));
+    }
+
     return {
       ...toRefs(wellData),
       loadData, cardSettings,
@@ -660,7 +648,7 @@ export default defineComponent({
       handleResizeColumn: (w, col) => {
         col.width = w;
       },
-      chartImageRef, onChangeBoreholeInterCheckbox, boreholeInterColumns, boreholeInterCheckboxOptions,checkedBoreholeInterCheckboxList,
+      chartImageRef, boreholeInterColumns, checkBoreholeInterColumns , boreholeInterColumnsCheckSub,
       getContainer, handleClickAnchor, steps
     };
   },

vue/src/views/wellinfo/index.vue

@@ -26,7 +26,7 @@
           :tree-data="subjectTrees.data"
           v-model:expandedKeys="subjectTrees.expandedKeys"
           v-model:selectedKeys="subjectTrees.selectedKeys"
-          :replace-fields="replaceFields"
+          :field-names="replaceFields"
           :autoExpandParent="subjectTrees.autoExpandParent"
           @expand="treeOnExpand" @select="treeOnSelect">
           <template #switcherIcon="{ switcherCls }">
@@ -61,25 +61,25 @@
               </a-form-item>
             </a-col>
             <a-col :span="6">
-              <a-form-item name="well_type" label="井型:">
+              <a-form-item name="well_type" label="井别:">
                 <a-tree-select
-                  v-model:value="formState.well_type"
-                  show-search
-                  allow-clear
-                  tree-line
-                  :tree-data="wellTypeTree"
-                  tree-node-filter-prop="label">
+                    v-model:value="formState.well_purpose"
+                    show-search
+                    allow-clear
+                    tree-line
+                    :tree-data="wellPurposeTree"
+                    tree-node-filter-prop="label">
                 </a-tree-select>
               </a-form-item>
             </a-col>
             <a-col :span="6">
-              <a-form-item name="well_type" label="井别:">
+              <a-form-item name="well_type" label="井型:">
                 <a-tree-select
-                  v-model:value="formState.well_purpose"
+                  v-model:value="formState.well_type"
                   show-search
                   allow-clear
                   tree-line
-                  :tree-data="wellPurposeTree"
+                  :tree-data="wellTypeTree"
                   tree-node-filter-prop="label">
                 </a-tree-select>
               </a-form-item>
@@ -211,10 +211,19 @@
                   </div>
                 </template>
                 <template v-if="column.key === 'well_common_name'">
-                  <a-button type="link" size="small" @click="detail(record.well_id)">{{
-                      record.well_common_name
+                  <div style="display: flex;justify-content: space-between">
+                    <a-button type="link" title="点击跳转井详情" size="small" @click="detail(record.well_id)">{{
+                        record.well_common_name
+                      }}
+                    </a-button>
+                    <EnvironmentOutlined title="点击定位地图井位置" v-if="record.x && record.y" style="color: #1890ff" @click="environment(record)"/>
+                  </div>
+                </template>
+                <template v-if="column.key === 'well_purpose'">
+                  <span style="color: #1890ff">{{
+                      record.well_purpose
                     }}
-                  </a-button>
+                  </span>
                 </template>
                 <template v-if="column.key === 'operation'">
                   <a-button type="link" size="small" @click="showDoc(record.well_id)">相关文档</a-button>
@@ -719,6 +728,19 @@ export default defineComponent({
     const detail = (well_id) => {
       tabsViewStore.addTabByPath('/wellinfo/detail', {id: well_id});
     }
+    const environment = (item: any) => {
+      console.log("environment",item);
+      const data = {
+        value : item.well_common_name,
+        geo_description : item.geo_description,
+        well_id : item.well_id,
+        well_common_name : item.well_common_name,
+        x : item.x,
+        y : item.y
+      };
+      chartMapRef.value.selectName = item.well_common_name
+      chartMapRef.value.onSetSelect(data);
+    }
     const onQuery = () => {
       loadData();
     }
@@ -957,6 +979,7 @@ export default defineComponent({
       viewModel,
       handleTableChange,
       detail,
+      environment,
       formState,
       openList,
       isShowDoc,

vue/src/views/wellinfo/map.vue

@@ -1,6 +1,8 @@
 
 <template>
-  <ChartMap ref="chartMapRef" :isSearch="(true)" data-v-step="5"></ChartMap>
+  <div style="width:100%;height: 800px">
+    <ChartMap ref="chartMapRef" :isSearch="(true)" data-v-step="5"></ChartMap>
+  </div>
 </template>
 
 <script setup lang="ts">

vue/src/views/wellinfo/table.ts

@@ -149,10 +149,11 @@ export const columns: TableColumnsType = [
     title: '井名',
     dataIndex: 'well_common_name',
     key: 'well_common_name',
-    width: 120,
+    width: 150,
     resizable: true,
     fixed: 'left'
   },
+  {title: '井别', dataIndex: 'well_purpose', key: 'well_purpose', width: 100,resizable: true, customHeaderCell: onHeaderCell},
   {
     title: '组织机构',
     dataIndex: 'org_name_a1',
@@ -171,7 +172,6 @@ export const columns: TableColumnsType = [
     resizable: true,
     customHeaderCell: onHeaderCell
   },
-  {title: '井别', dataIndex: 'well_purpose', key: 'well_purpose', width: 100,resizable: true, customHeaderCell: onHeaderCell},
   {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 80,resizable: true, customHeaderCell: onHeaderCell},
   {
     title: '开钻日期',

vue/vue.config.js

@@ -14,7 +14,7 @@ const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
 const IS_DEV = ['development'].includes(process.env.NODE_ENV);
 
 // port = 8098 npm run dev OR npm run dev --port = 8098
-const port = process.env.port || process.env.npm_config_port || 8071; // dev port
+const port = process.env.port || process.env.npm_config_port || 8077; // dev port
 
 const __APP_INFO__ = {
   pkg,