compare dialog todo

src/api/manage.js

@@ -9,8 +9,9 @@ import store from '../store'    //引用store.js
 var axios = Axios.create({
     // baseURL: 'http://101.200.219.190:88', // 后台默认地址
     // baseURL: 'http://10.72.143.2:88', //准东后台默认地址
-    // baseURL: 'http://192.168.31.252:88', // 一厂默认地址k
-    baseURL: 'http://11.72.128.68:88', // 一厂默认地址k
+   // baseURL: 'http://192.168.31.252:88', // 一厂默认地址k
+   baseURL: 'http://192.168.31.101:88', // 一厂默认地址k
+    //  baseURL: 'http://11.72.128.68:88', // 一厂默认地址k
    // baseURL: 'http://10.184.33.224:88', // 中石油默认地址
 
     // baseURL: 'http://10.72.143.2:88', // 数据公司后台默认地址

src/components/NewWorkPage/DvhCheckedCardManage.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: "DvhCheckedCardManage",
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/NewWorkPage/DvhCheckedHistory.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: "DvhCheckedHistory"
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/NewWorkPage/DvhCompareDialog.vue

@@ -0,0 +1,236 @@
+<script>
+import mockData from "@/components/NewWorkPage/data";
+import "./css/Layout.css"
+import "./css/DvhCheck.css"
+
+export default {
+  name: "DvhCompareDialog",
+  props: ["visible", "dvhCardId", "wellId"],
+  emits: ["update:visible"],
+  data() {
+    return {
+      //功图校核页面
+      dvhCardCheck: {
+        cardId: '',
+        wellId: '',
+        rightChartOption: {
+          title: {
+            text: '#3 2024年6月13日 13:59:11',
+            textStyle: {
+              color: '#7a7a79',
+              fontSize: 12,
+            },
+            left: 50,
+            top: 10
+          },
+          xAxis: {
+            type: 'value',
+            min: 0,
+            splitLine: {
+              show: false
+            },
+            name: 'm',
+            nameLocation: 'end',
+            nameGap: 3,
+            interval: 1
+          },
+          yAxis: {
+            type: 'value',
+            max: 90,
+            min: 70,
+            splitLine: {
+              show: false
+            },
+            name: 'kN',
+            nameGap: 5,
+            nameLocation: 'end',
+            maxInterval: 5
+          },
+          tooltip: {
+            axisPointer: {
+              type: 'cross',
+            }
+          },
+          grid: {
+            show: false,
+          },
+          series: [
+            {
+              data: mockData.sgt,
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              lineStyle: {
+                color: '#f34e67'
+              }
+            },
+            {
+              data: [[0, 75.64], [8, 75.64]],
+              type: 'line',
+              // symbol: 'none',
+              symbolSize: 1,
+              lineStyle: {
+                color: '#5683f4',
+                type: 'dashed'
+              },
+              label: {
+                show: true,
+                // position: 'top',
+                position: [-30, 5],
+                formatter: function (params) {
+                  if (params.dataIndex === 1)
+                    return params.data[1];//+ 'kN';
+                  return ''
+                },
+                color: '#1b1a1a'
+              }
+            },
+            {
+              data: [[0, 85.86], [8, 85.86]],
+              type: 'line',
+              // symbol: 'none',
+              symbolSize: 1,
+              lineStyle: {
+                color: '#5683f4',
+                type: 'dashed'
+              },
+              label: {
+                show: true,
+                // position: 'top',
+                position: [-30, -12],
+                formatter: function (params) {
+                  if (params.dataIndex === 1)
+                    return params.data[1];//+ 'kN';
+                  return ''
+                },
+                color: '#1b1a1a'
+              }
+            }
+          ]
+        },
+        upload: {
+          files: []
+        }
+      }
+    }
+  },
+  mounted() {
+    this.dvhCardCheck.cardId = this.dvhCardId
+    this.dvhCardCheck.wellId = this.wellId
+    this.initView()
+  },
+  methods: {
+    closeDialog: function () {
+      this.$emit("update:visible", false);
+    },
+    initView() {
+      if (!this.dvhCardCheck.cardId) return
+      this.setLeftCard()
+    },
+    //根据数据id查询对应功图显示
+    setLeftCard() {
+
+    },
+    //上传低压测试功图
+    uploadDvhCard(file) {
+      // postAction(publicUrl.uploadCheckDvhCard,file.file).then((res) => {
+      //   console.log("ok")
+      // }).catch(reason => {
+      //   console.log(reason.message)
+      // })
+
+
+    },
+    //获取该井低压测试功图时间列表
+    setRightCardSelectList() {
+
+    },
+    //根据选择器选出的time id 调取已经录入的低压测试功图
+    setRightCard() {
+
+    },
+    //掉接口对比填充中间对比结果数据
+    compareCard() {
+
+    }
+  }
+}
+</script>
+
+<template>
+  <el-dialog title="功图校核" :visible.sync="visible" v-on:close="closeDialog" width="1200px">
+    <div class="flex-row">
+      <div class="col-in-row flex-col dvh-original">
+        <div class="f-height-30"></div>
+        <div class="row-in-col">
+          <v-chart :options="dvhCardCheck.rightChartOption"
+                   style="min-width: 400px;min-height: 400px;height: 100%;width: 100%"></v-chart>
+        </div>
+      </div>
+      <div class="col-in-row flex-col dvh-compare">
+        <table>
+          <tr>
+            <th></th>
+            <th colspan="2">左&nbsp;&nbsp;&nbsp;→&nbsp;&nbsp;&nbsp;右</th>
+            <th>校核值</th>
+          </tr>
+          <tr>
+            <td>最大载荷(kN)</td>
+            <td>123</td>
+            <td>111</td>
+            <td>-11</td>
+          </tr>
+          <tr>
+            <td>最小载荷(kN)</td>
+            <td>123</td>
+            <td>111</td>
+            <td>-11</td>
+          </tr>
+          <tr>
+            <td>载荷差(kN)</td>
+            <td>123</td>
+            <td>111</td>
+            <td>-11</td>
+          </tr>
+          <tr>
+            <td>冲程(m)</td>
+            <td>123</td>
+            <td>111</td>
+            <td>-11</td>
+          </tr>
+          <tr>
+            <td>冲次(/min)</td>
+            <td>123</td>
+            <td>111</td>
+            <td>-11</td>
+          </tr>
+        </table>
+      </div>
+      <div class="col-in-row flex-col dvh-in">
+        <div class="f-height-30">
+          <el-upload
+              accept=".dat"
+              :auto-upload="true"
+              :show-file-list="false"
+              :http-request="uploadDvhCard"
+              :file-list="dvhCardCheck.upload.files">
+            <i class="el-icon-upload"></i>
+          </el-upload>
+          <i class="el-icon-s-management">管理</i>
+        </div>
+        <div class="row-in-col">
+          <v-chart :options="dvhCardCheck.rightChartOption"
+                   style="min-width: 400px;min-height: 400px;height: 100%;width: 100%"></v-chart>
+        </div>
+      </div>
+    </div>
+    <div class="dvh-check-btn">
+      <el-button type="success" size="small">通过校核</el-button>
+      <el-button type="danger" size="small">不通过</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/components/NewWorkPage/MainLayout.vue

@@ -0,0 +1,53 @@
+<script>
+import "./css/NewWorkPage.css"
+import mockData from "@/components/NewWorkPage/data";
+import DvhCompareDialog from "@/components/NewWorkPage/DvhCompareDialog.vue";
+import WellSelector from "@/components/NewWorkPage/WellSelector.vue";
+
+export default {
+  name: "MainLayout",
+  components: {WellSelector, DvhCompareDialog},
+  data() {
+    return {
+      //井选择器
+      wellSelector: {
+        options: mockData.wellSelectorData
+      },
+      //功图校核页面
+      dvhCardCheck: {
+        visible: false
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="header">
+     <WellSelector></WellSelector>
+      <el-button type="primary" size="small">查询</el-button>
+
+
+    </div>
+    <div class="main-body">
+      <dvh-compare-dialog  :visible.sync="dvhCardCheck.visible"
+                         ></dvh-compare-dialog>
+      <el-card>
+        <div slot="header">
+          <H2 @click="dvhCardCheck.visible=true">功图数据校核</H2>
+          <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
+        </div>
+
+
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/NewWorkPage/WellSelector.vue

@@ -0,0 +1,36 @@
+<script>
+import mockData from "@/components/NewWorkPage/data";
+
+export default {
+  name: "WellSelector",
+  data() {
+    return {
+      wellSelector: {
+        selected: '',
+        options: mockData.wellSelectorData
+      },
+    }
+  },
+  methods: {
+    changeSelected(node) {
+      console.log(node);
+    }
+  }
+}
+</script>
+
+<template>
+  <el-cascader
+      v-model="wellSelector.selected"
+      placeholder="选择一口井"
+      separator=' > '
+      clearable
+      filterable
+      :options="wellSelector.options"
+      :props="{ expandTrigger: 'hover' }"
+      @change="changeSelected"></el-cascader>
+</template>
+
+<style scoped>
+
+</style>

src/components/NewWorkPage/css/DvhCheck.css

@@ -0,0 +1,20 @@
+
+.dvh-check-btn{
+    text-align: center;
+    padding-top: 10px;
+}
+
+
+
+.dvh-compare table {
+    height: 100%;
+    width: 100%;
+    min-width: 150px;
+    text-align: center;
+}
+
+.dvh-compare table tr > td:first-child {
+    text-align: right;
+    font-weight: 800;
+    width: 100px;
+}

src/components/NewWorkPage/css/Layout.css

@@ -0,0 +1,24 @@
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    min-height: 200px;
+}
+
+.col-in-row {
+    flex: 1;
+    /*border: 1px solid red;*/
+    padding: 0;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+.row-in-col {
+    flex: 1;
+    /*border: 1px solid blue;*/
+}
+
+.f-height-30 {
+    height: 30px;
+}

src/components/NewWorkPage/css/NewWorkPage.css

@@ -0,0 +1,20 @@
+.main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: whitesmoke;
+}
+
+.header {
+    height: 70px;
+    padding: 10px;
+}
+
+.main-body {
+    height: 100%;
+    padding: 10px;
+}
+
+
+

src/router/index.js

@@ -88,6 +88,7 @@ import liquidAbnormal from "../components/liquidAbnormal/liquidAbnormal";
 
 //功图叠加
 import overlay from "../components/overlay/overlay";
+import MainLayout from "@/components/NewWorkPage/MainLayout.vue";
 
 //诊断准确率分析
 // 获取cookie
@@ -108,7 +109,7 @@ function getCookie(cname) {
 
 Vue.use(VueRouter)
 // 重写路由的push方法
-const routerPush = VueRouter.prototype.push 
+const routerPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location){
 	return routerPush.call(this,location).catch(error=>error)
 };
@@ -116,9 +117,9 @@ VueRouter.prototype.push = function push(location){
 
 const routes = [
 	{
-		path: '/', 
-		redirect: { 
-			name: 'dh_denglu' 
+		path: '/',
+		redirect: {
+			name: 'dh_denglu'
 		}
 	},
 	{
@@ -127,6 +128,11 @@ const routes = [
 		component: dh_denglu
 	},
 	{
+		path: '/newpage',
+		name: 'newpage',
+		component: MainLayout
+	},
+	{
 		path: '/dh_index',
 		name: 'dh_index',
 		component: dh_index,