添加值班记录页面

ruoyi-ui/src/views/YuJing/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="yujing-index">
     <div class="yjIndexTop">
-      <div class="title">预警系统-水资源保护系统</div>
+      <div class="title">
+        <img src="@/assets/yujing/logo.png" class="yujing-logo"/>
+        <span>预警系统-水资源保护系统</span>
+      </div>
       <div class="menu">
         <div
           v-for="(item, index) in menuList"
@@ -214,13 +217,23 @@ function setLayout() {
     background: url("../../assets/images/top-bg.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
-
     .title {
-      width: 27%;
+      position: relative;
+      width: 26.5%;
       margin-left: 20px;
-      font-size: 26px;
-      line-height: 76px;
-      color: #fff;
+      .yujing-logo{
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        top: 7px;
+      }
+      span{
+        font-size: 28px;
+        line-height: 76px;
+        color: #fff;
+        position: absolute;
+        right: 20%;
+      }
     }
     .menu {
       margin-top: 10px;

ruoyi-ui/src/views/YuJing/shouye/components/StnmDialog.vue

@@ -52,10 +52,55 @@
         <el-button type="primary" size="small" @click="handelExport">导出</el-button>
       </el-form-item>
     </el-form>
+    <div id="elementChart"></div>
+    <div class="stnm-dialog-table">
+      <el-table 
+      :data="stnmDialogData" 
+      border 
+      stripe
+      style="width: 100%" 
+      :height="heightAll" 
+      :header-cell-style="{
+        background: '#d2eafa !important',
+        fontSize: '12px'
+      }"
+      >
+        <el-table-column type="index" width="60" fixed="left" align="center"/>
+        <el-table-column prop="tm" label="监测日期" width="120" align="center"/>
+        <el-table-column prop="tm" label="溶解氧(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="高锰酸盐指数(mg/L)" width="160" align="center"/>
+        <el-table-column prop="tm" label="氨氮(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="总磷(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="总氮(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="二甲基异莰醇(mg/L)" width="160" align="center"/>
+        <el-table-column prop="tm" label="氯化物(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="锑(μg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="二氯甲炕(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="蓝藻密度(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="绿藻密度(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="叶绿素a(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="总有机碳(mg/L)" width="120" align="center"/>
+        <el-table-column prop="tm" label="水温(mg/L)" width="120" align="center"/>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :size="pagination.size"
+        :total="pagination.totalCount"
+        :disabled=false
+        background
+        layout="total, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="margin-top: 1%;"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts  from "echarts";
+
 const emit = defineEmits(['close-dialog']);
 const props = defineProps({
   showStnmDialog:{type: Boolean},
@@ -85,10 +130,26 @@ const regionOptions = [
   {label:"二甲基异莰醇(mg/L)",value:'methy'},
   {label:"氯化物(mg/L)",value:'na'},
 ];
+const elementChart = ref(null);
+const heightAll = 30.8 + 'vh';
+const stnmDialogData = ref([]);
+
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+
+onMounted(() => {
+});
 
 watch(() => props.showStnmDialog, (newVal) => {
   if (newVal) {
     dialogVisible.value = newVal;
+    nextTick(() => {
+      initZheChart();
+    });
   }
 });
 watch(() => props.stnmData, (newVal) => {
@@ -99,6 +160,78 @@ watch(() => props.stnmData, (newVal) => {
     dialogType.value = newVal.type;
   }
 });
+// 查询
+const handleSearch = () => {};
+// 导出
+const handelExport = () => {};
+
+// 元素折线图
+const initZheChart = () => {
+  const option = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  };
+  elementChart.value = echarts.init(document.getElementById('elementChart'));
+  elementChart.value.setOption(option);
+};
+
+const handleSizeChange = (val) => {};
+const handleCurrentChange = (val) => {};
 const closeDialog = () => {
   dialogVisible.value = false;
   emit('close-dialog', dialogVisible.value);
@@ -142,4 +275,12 @@ const closeDialog = () => {
     display: flex;
   }
 }
+#elementChart{
+  width: 100%;
+  height: 40%;
+}
+.stnm-dialog-table{
+  width: 98%;
+  margin: 0 auto;
+}
 </style>

ruoyi-ui/src/views/YuJing/shouye/index.vue

@@ -100,7 +100,7 @@
         label-width="auto"
         size="small"
         >
-        <el-form-item label="监测图标:" prop="region">
+        <el-form-item label="监测指标:" prop="region">
           <el-select-v2
             v-model="mapForm.region"
             placeholder="请选择要监测的图标"
@@ -187,7 +187,17 @@ const mapForm = ref({
   region:'cod',
 });
 const maprRegionOptions = [
-  {label:"溶解氧(mg/L)",value:'cod'}
+  {label:"溶解氧(mg/L)",value:'cod'},
+  {label:"总磷(mg/L)",value:'tn'},
+  {label:"总氮(mg/L)",value:'tp'},
+  {label:"氢氧(mg/L)",value:'np4'},
+  {label:"高锰酸盐指数(mg/L)",value:'comdn'},
+  {label:"锑(μg/L)",value:'ti'},
+  {label:"二氯甲烷(mg/L)",value:'jia'},
+  {label:"蓝藻数量(mg/L)",value:'lanzao'},
+  {label:"电导率(mg/L)",value:'t'},
+  {label:"二甲基异莰醇(mg/L)",value:'chun'},
+  {label:"氯化物(mg/L)",value:'lv'}
 ];
 const mapPointData = [
   {

ruoyi-ui/src/views/YuJing/transaction/dutyRecord.vue

@@ -1,3 +1,178 @@
 <template>
-  <div>值班记录</div>
-</template>
+  <div class="zhiban-index">
+    <el-form ref="zhiBanFormRef" :model="zhiBanForm" :inline="true" class="zhiban-form">
+      <el-form-item label="日期：" style="margin-bottom: 0;">
+        <el-date-picker
+          v-model="zhiBanForm.date"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="请输入日期"
+          clearable
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item label="值班时间：" style="margin-bottom: 0;">
+      <el-input v-model="zhiBanForm.time" size="small"/>
+      </el-form-item>
+      <el-form-item style="margin-bottom: 0;">
+        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+        <el-button type="primary" size="small" @click="handleChangeList">转至列表</el-button>
+        <el-button type="primary" size="small" @click="handelExport">导出当前日报</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="zhiban-content">
+      <div class="zhiban-title">水质情况</div>
+      <el-table 
+        :data="zhiBanData" 
+        border 
+        stripe
+        style="width: 100%;" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+      >
+        <el-table-column prop="tm" label="取样点" align="center"/>
+        <el-table-column prop="tm" label="采样时间" align="center"/>
+        <el-table-column prop="tm" label="溶解氧(mg/L)" width="160" align="center"/>
+        <el-table-column prop="tm" label="高锰酸盐指数(mg/L)" align="center"/>
+        <el-table-column prop="tm" label="氨氮(mg/L)" align="center"/>
+        <el-table-column prop="tm" label="总磷(mg/L)" align="center"/>
+        <el-table-column prop="tm" label="总氮(mg/L)" align="center"/>
+        <el-table-column prop="tm" label="电导率(mg/L)" align="center"/>
+        <el-table-column prop="tm" label="锑浓度(μg/L)" align="center"/>
+        <el-table-column prop="tm" label="叶绿素a(mg/L)" align="center"/>
+      </el-table>
+    </div>
+    <div class="zhiban-content">
+      <div class="zhiban-title">水文情况</div>
+      <el-form ref="szFormRef" :model="szForm" :inline="true" label-width="auto" size="small" class="zhiban-shuiwen-form">
+        <el-form-item label="太湖8时水位(米):">
+          <el-input v-model="szForm.z" type="number"/>
+        </el-form-item>
+        <el-form-item label="望亭水利枢纽引/排水量(万方):">
+          <el-input v-model="szForm.wt_q"/>
+        </el-form-item>
+        <el-form-item label="太浦闸供/排水量(万方):">
+          <el-input v-model="szForm.tp_q"/>
+        </el-form-item>
+        <el-form-item label="常熟水利枢纽引/排水量(万方):">
+          <el-input v-model="szForm.cs_q"/>
+        </el-form-item>
+        <el-form-item label="新孟河江边枢纽引/排水量(万方):">
+          <el-input v-model="szForm.xmh_q"/>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="zhiban-content">
+      <div class="zhiban-title">蓝藻情况</div>
+      <el-form ref="lzFormRef" :model="lzForm" label-width="180" size="small" class="zhiban-lanzao-form">
+        <el-form-item label="中国科学院南京地理与湖泊研究所遥感卫片解析结果:">
+          <el-input v-model="lzForm.result" type="text"/>
+        </el-form-item>
+        <el-form-item label="蓝藻调查预报及打捞情况:">
+          <el-input v-model="lzForm.situation" type="text"/>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="zhiban-content">
+      <div class="zhiban-title">会商分析</div>
+      <el-form ref="hsFormRef" :model="hsForm" label-width="180" size="small" class="zhiban-lanzao-form">
+        <el-form-item label="水质水生态监测情况分析:">
+          <el-input v-model="hsForm.result" type="text"/>
+        </el-form-item>
+        <el-form-item label="水雨情形势分析:">
+          <el-input v-model="hsForm.situation" type="text"/>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-button type="primary" size="small" @click="handelSave" style="margin-left: 47%;">保存日报</el-button>
+  </div>
+</template>
+
+<script setup>
+const zhiBanForm = ref({
+  date: '',
+  time: ''
+});
+const heightAll = 30.8 + 'vh';
+const zhiBanData = ref([]);
+const szForm = ref({
+  z: '',
+  wt_q: '',
+  tp_q: '',
+  cs_q: '',
+  xmh_q: ''
+});
+const lzForm = ref({
+  result:"",
+  situation:"",
+});
+const hsForm = ref({
+  result:"",
+  situation:"",
+});
+
+const handleSearch = () => {};
+const handleChangeList = () => {};
+const handelExport = () => {};
+const handelSave = () => {};
+</script>
+
+<style scoped lang="scss">
+.zhiban-index{
+  width: 100%;
+  height: 100%;
+  background-color: #f6f6f6;
+}
+.zhiban-form{
+  width: 100%;
+  padding: 5px 0;
+  background-color: #fff;
+}
+.zhiban-content{
+  width: 100%;
+  margin-bottom: 10px;
+  border: #DCDFE6 solid 1px;
+  background-color: #fff;
+}
+.zhiban-title{
+  width: 100%;
+  background-color: #eef6ff;
+  border-left: 5px solid #4a93f5;
+  color: #333;
+  font-size: 14px;
+  font-weight: bolder;
+  line-height: 30PX;
+  padding-left: 10px;
+}
+.zhiban-shuiwen-form{
+  width: 100%;
+  margin: 10px auto; 
+  .el-form-item {
+    width: 18%;
+    text-align: right !important;
+    margin-bottom: 0 !important;
+    .el-form-item__content{
+      .el-input{
+        width: 100% !important;
+      }
+    }
+  }
+}
+.zhiban-lanzao-form{
+  width: 98%;
+  margin: 10px auto; 
+  .el-form-item {
+    width: 100%;
+    text-align: right !important;
+    .el-form-item__content{
+      .el-input{
+        width: 100% !important;
+        height: 66px !important;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/index.vue

@@ -57,12 +57,13 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay, Navigation, Pagination, A11y } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
+import YuJingLogo from "@/assets/yujing/logo.png";
 
 const router = useRouter();
 const userStore = useUserStore();
 const modules = [Autoplay, Pagination, Navigation, A11y];
 const slides = ref([
-  { image: "", title: '预警系统', secondTitle: "水资源保护系统", path: "/YuJing/shouye/index" },
+  { image: YuJingLogo, title: '预警系统', secondTitle: "水资源保护系统", path: "/YuJing/shouye/index" },
   { image: "", title: '1', },
   { image: "", title: '2', },
   { image: "", title: '3', },
@@ -165,6 +166,11 @@ function setLayout() {
         align-items: center; /* 水平居中 */
         justify-content: center; /* 垂直居中 */
         cursor: pointer;
+        .swiper-card-logo{
+          width: 10vw;
+          height: 17.5vh;
+          margin-bottom: 5vh;
+        }
         .swiper-card-title{
           font-size:24px;
           font-weight: bolder;