Merge branch 'develop' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop

TEAMModelOS/ClientApp/app.js

@@ -7,19 +7,21 @@ import App from 'components/app-root'
 import { FontAwesomeIcon } from './icons'
 import iView from 'iview';
 import 'iview/dist/styles/iview.css';
-import i18n from '@/locale'
+import i18n from '@/locale';
+import commons from "@/utils/public.js"
 
 //新添加的
 import vuescroll from 'vue-scroll'
 import echarts from 'echarts'
 import { post, fetch } from './utils/http'
-
-
 Vue.prototype.$post = post;
 Vue.prototype.$get = fetch;
 Vue.use(vuescroll)
 Vue.prototype.$echarts = echarts
 
+//ZXJ
+Vue.prototype.common = commons;
+
 // Registration of global components
 Vue.component('icon', FontAwesomeIcon)
 

TEAMModelOS/ClientApp/common/Ztree.vue

@@ -0,0 +1,746 @@
+<template>
+  <div>
+    <Row>
+    <Select v-model="bookSelect" class="slideSelect">
+      <Option v-for="item in slideGradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+    </Select>
+      <Button type="primary" class="btn-addClass" @click="handleAddBook">添加教材</Button>
+    </Row>
+    <Tree :data="treeData" :render="renderContent" ref="tree"></Tree>
+    <Modal v-model="modalFlag" title="添加新节点" ok-text="确认" cancel-text="取消" @on-ok="handleAddNode">
+      <Row class="modelRow">
+        <span>当前章节:
+          <span style="margin-left:10px;">{{currentNode.title}}</span>
+        </span>
+      </Row>
+      <Row class="modelRow">
+        <span>章节类型：</span>
+        <RadioGroup v-model="nodeType" type="button">
+          <Radio label="章节"></Radio>
+          <Radio label="课件"></Radio>
+        </RadioGroup>
+      </Row>
+      <Row class="modelRow">
+        <span>章节名称：</span>
+        <Input v-model="inputValue" placeholder="输入新节点名称" style="width: 100%"/>
+      </Row>
+    </Modal>
+    <Modal v-model="editFlag" title="修改节点" ok-text="确认" cancel-text="取消" @on-ok="handleUpdateNode">
+      <Row class="modelRow">
+        <span>当前名称:
+          <span style="margin-left:10px;">{{currentNode.title}}</span>
+        </span>
+      </Row>
+      <Row class="modelRow">
+        <span>章节类型：</span>
+        <RadioGroup v-model="nodeType" type="button">
+          <Radio label="章节"></Radio>
+          <Radio label="课件"></Radio>
+        </RadioGroup>
+      </Row>
+      <Row class="modelRow">
+        <span>章节名称：</span>
+        <Input v-model="editValue" placeholder="输入节点新名称" style="width: 100%"/>
+      </Row>
+    </Modal>
+    <Modal v-model="addBookFlag" title="添加教材" ok-text="确认" cancel-text="取消" @on-ok="handleAddConfirm">
+      <Row class="modelRow" >
+          <Tabs value="standard" class="addBookArea" :animated="false">
+              <TabPane label="标准教材" name="standard">
+                <Row>
+                  <span>学段</span>
+                  <Select v-model="periodSelect" @on-change="periodChange">
+                      <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </Row>
+                <Row>
+                  <span>学科</span>
+                  <Select v-model="subjectSelect" @on-change="subjectChange">
+                      <Option v-for="item in subjectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </Row>
+                <Row>
+                  <span>版本</span>
+                  <Select v-model="versionSelect" @on-change="versionChange">
+                      <Option v-for="item in versionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </Row>
+                <Row>
+                  <span>册别</span>
+                  <Select v-model="gradeSelect" @on-change="gradeChange">
+                      <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </Row>
+              </TabPane>
+              <TabPane label="自定教材" name="custom" >标签二的内容</TabPane>
+          </Tabs>
+      </Row>
+    </Modal>
+  </div>
+</template>
+<script>
+import animate from "animate.css";
+export default {
+  data() {
+    return {
+      bookSelect: "语文人教课标版四年级上册",
+      periodList:[],
+      subjectList:[],
+      versionList:[],
+      gradeList:[],
+      slideGradeList: [
+        {
+          value: "语文人教课标版四年级上册",
+          label: "语文人教课标版四年级上册"
+        },
+        {
+          value: "语文人教课标版五年级上册",
+          label: "语文人教课标版五年级上册"
+        },
+        {
+          value: "语文人教课标版六年级上册",
+          label: "语文人教课标版六年级上册"
+        },
+        {
+          value: "语文人教课标版七年级上册",
+          label: "语文人教课标版七年级上册"
+        },
+        {
+          value: "语文人教课标版八年级上册",
+          label: "语文人教课标版八年级上册"
+        },
+        {
+          value: "语文人教课标版九年级上册",
+          label: "语文人教课标版九年级上册"
+        }
+      ],
+      treeData: [
+        {
+          title: "语文人教课标版四年级上册",
+          order: 0,
+          expand: true,
+          render: (h, { root, node, data }) => {
+            return h(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  position:"relative",
+                  width: "94%",
+                  textAlign: "left",
+                  marginLeft: "2%",
+                  cursor: "pointer",
+                  height:"40px",
+                  lineHeight:"40px"
+                },
+                on: {
+                  click: () => {
+                    this.rootClick(data);
+                  }
+                }
+              },
+              [
+                h("span", [
+                  h("Icon", {
+                    props: {
+                      type: "md-filing"
+                    },
+                    style: {
+                      marginRight: "5px",
+                      marginBottom: "5px"
+                    }
+                  }),
+                  h("span", { on: { click: () => {} } }, data.title)
+                ]),
+
+                    h("Button", {
+                      props: Object.assign({}, this.buttonProps, {
+                        icon: "ios-add",
+                        type: "primary"
+                      }),
+                      style: {
+                        position: "absolute",
+                        right: "30px",
+                        top:"10px",
+                        padding:"0 10px"
+                      },
+                      on: {
+                        click: e => {
+                          e.stopPropagation();
+                          this.appendClick(data);
+                        }
+                      }
+                    })
+                  
+                
+              ]
+            );
+          },
+          children: [
+            {
+              title: "第一章语文语文",
+              order: 0,
+              expand: true,
+              children: [
+                {
+                  title: "大苏打",
+                  order: 0,
+                  expand: true,
+                  children: []
+                },
+                {
+                  title: "三大",
+                  order: 1,
+                  expand: true,
+                  children: []
+                }
+              ]
+            },
+            {
+              title: "第二章",
+              expand: true,
+              order: 1,
+              children: [
+                {
+                  title: "第一节",
+                  order: 0,
+                  expand: true,
+                  children: []
+                },
+                {
+                  title: "第二节",
+                  order: 1,
+                  expand: true,
+                  children:[]
+                },
+                {
+                  title: "第三节",
+                  order: 2,
+                  expand: true,
+                  children: []
+                }
+              ]
+            },
+            {
+              title: "第三章",
+              expand: true,
+              order: 1,
+              children: []
+            }
+          ]
+        }
+      ],
+      inputValue: "",
+      editValue: "",
+      modalFlag: false,
+      editFlag: false,
+      addBookFlag:false,
+      nodeType: "章节",
+      currentNode: "",
+      currentLiNode:"",
+      buttonProps: {
+        type: "default",
+        size: "small"
+      },
+      periodSelect:"语文人教课标版四年级上册",
+      subjectSelect:"语文人教课标版四年级上册",
+      versionSelect:"语文人教课标版四年级上册",
+      gradeSelect:"语文人教课标版四年级上册",
+    };
+  },
+  
+  methods: {
+    renderContent(h, { root, node, data }) {
+      let that = this;
+      return h(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: "95%",
+            textAlign: "left",
+            paddingLeft: "2%",
+            cursor: "pointer",
+            position: "relative",
+            boxSizing:"border-box"
+          },
+          domProps: {
+            className: "singleClass"
+          },
+          on: {
+            click: () => {
+              this.titleClick(root, node, data, event);
+            },
+            mouseover: e => {
+                  e.stopPropagation();
+                  this.handleLiOver(event);
+              },
+            mouseleave:e =>{
+                  e.stopPropagation();
+                  this.handleLiLeave(node,event);
+            }
+          }
+        },
+        [
+          h("span", [
+            h("Icon", {
+              props: {
+                type:
+                  data.children && data.children.length > 0
+                    ? "md-albums"
+                    : "ios-paper-outline"
+              },
+              style: {
+                marginRight: "5px"
+              }
+            }),
+            h("span", data.title)
+          ]),
+          h(
+            "button",
+            {
+              style: {
+                position: "absolute",
+                right: "30px",
+              },
+              domProps: {
+                className: "ivu-btn ivu-btn-default ivu-btn-small btn-more"
+              },
+              on: {
+                click: e => {
+                  e.stopPropagation();
+                  this.handleTools(root, node, data, event);
+                }
+              }
+            },
+            [
+              h(
+                "span",
+                {
+                  style: {
+                    float: "right",
+                    fontWeight:"bold",
+                    letterSpacing:"1px"
+                  }
+                },
+                "..."
+              )
+            ]
+          ),
+          h(
+            "span",
+            {
+              style: {
+                display: "none",
+                float: "right"
+              },
+              on:{
+                mouseleave: e => {
+                  e.stopPropagation();
+                  this.hideTools(event);
+                },
+              },
+              domProps: {
+                className: "tools"
+              }
+            },
+            [
+              h(
+                "Button",
+                {
+                  props: Object.assign({}, this.buttonProps, {
+                    icon: "ios-add"
+                  }),
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: e => {
+                      e.stopPropagation();
+                      this.appendClick(data);
+                    }
+                  }
+                },
+                "添加"
+              ),
+              h(
+                "Button",
+                {
+                  props: Object.assign({}, this.buttonProps, {
+                    icon: "ios-remove"
+                  }),
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: e => {
+                      e.stopPropagation();
+                      this.remove(root, node, data);
+                    }
+                  }
+                },
+                "移除"
+              ),
+              h(
+                "Button",
+                {
+                  props: Object.assign({}, this.buttonProps, {
+                    icon: "ios-arrow-round-up"
+                  }),
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: e => {
+                      e.stopPropagation();
+                      this.moveUp(root, node, data);
+                    }
+                  }
+                },
+                "上移"
+              ),
+              h(
+                "Button",
+                {
+                  props: Object.assign({}, this.buttonProps, {
+                    icon: "ios-arrow-round-down"
+                  }),
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: e => {
+                      e.stopPropagation();
+                      this.moveDown(root, node, data);
+                    }
+                  }
+                },
+                "下移"
+              ),
+              h(
+                "Button",
+                {
+                  props: Object.assign({}, this.buttonProps, {
+                    icon: "ios-create-outline"
+                  }),
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: e => {
+                      e.stopPropagation();
+                      this.editClick(node, data);
+                    }
+                  }
+                },
+                "编辑"
+              )
+            ]
+          )
+        ]
+      );
+    },
+    // 添加节点
+    append(data, value) {
+      const children = data.children || [];
+      children.push({
+        title: value,
+        order: children.length,
+        children: [],
+        expand: true
+      });
+      this.$set(data, "children", children);
+      console.log(data);
+    },
+    // 删除节点
+    remove(root, node, data) {
+      const parentKey = root.find(el => el === node).parent;
+      const parent = root.find(el => el.nodeKey === parentKey).node;
+      const index = parent.children.indexOf(data);
+      parent.children.splice(index, 1);
+    },
+    // 点击编辑
+    editClick(node, data) {
+      this.currentNode = data;
+      this.editFlag = true;
+      this.editValue = "";
+    },
+    //添加节点 弹出输入框
+    appendClick(data) {
+      this.currentNode = data;
+      this.modalFlag = true;
+      this.inputValue = "";
+      console.log(this.common.guid());
+    },
+    // 确认添加节点
+    handleAddNode() {
+      if (this.inputValue != "") {
+        this.append(this.currentNode, this.inputValue);
+      } else {
+        this.modalFlag = false;
+      }
+    },
+    // 修改节点
+    handleUpdateNode() {
+      if (this.editValue != "") {
+        this.currentNode.title = this.editValue;
+      } else {
+        this.editFlag = false;
+      }
+    },
+    // 标题点击收缩展开
+    titleClick(root, node, data,event) {
+        const parentKey = root.find(el => el === node).parent;
+        const parent = root.find(el => el.nodeKey === parentKey).node;
+        const index = parent.children.indexOf(data);
+        let list = document.getElementsByClassName('singleClass');
+        for(let i=0;i<list.length;i++){
+          list[i].style.backgroundColor="transparent";
+          list[i].style.color="#515a6e";
+        }
+          this.currentLiNode = node;
+          event.currentTarget.style.backgroundColor = "rgb(84, 165, 255)";
+          event.currentTarget.style.color = "rgb(255, 255, 255)";
+          data.expand = !data.expand;
+    },
+
+    // 根目录点击事件
+    rootClick(data) { 
+      data.expand = !data.expand;
+    },
+    // 上移章节操作
+    moveUp(root, node, data) {
+      const parentKey = root.find(el => el === node).parent;
+      const parent = root.find(el => el.nodeKey === parentKey).node;
+      const index = parent.children.indexOf(data);
+      const nodeIndex = root.indexOf(node);
+      let currentTitle = data.title;
+      let currentExpand = data.expand;
+      let currentChildren = data.children || [];
+      let preChildren = (parent.children[index - 1])?(parent.children[index - 1]).children:[];
+      if (index != 0) {
+        data.title = parent.children[index - 1].title;
+        parent.children[index - 1].title = currentTitle;
+        parent.children[index - 1].expand = currentExpand;
+        data.children = preChildren;
+        data.expand = parent.children[index - 1].expand;
+        parent.children[index - 1].children = currentChildren;
+      }
+    },
+    // 下移章节操作
+    moveDown(root, node, data) {
+      const parentKey = root.find(el => el === node).parent;
+      const parent = root.find(el => el.nodeKey === parentKey).node;
+      const index = parent.children.indexOf(data);
+      let currentTitle = data.title;
+      let currentChildren = data.children || [];
+      let nextChildren = (parent.children[index + 1])?(parent.children[index + 1]).children:[];
+      if (index != parent.children.length - 1) {
+        data.title = parent.children[index + 1].title;
+        data.children = nextChildren;
+        parent.children[index + 1].title = currentTitle;
+        parent.children[index + 1].children = currentChildren;
+      }
+    },
+    // 更多操作
+    handleTools(root, node, data, event) {
+      let toolsDom = event.currentTarget.nextElementSibling;
+      const parentKey = root.find(el => el === node).parent;
+      const parent = root.find(el => el.nodeKey === parentKey).node;
+      const index = parent.children.indexOf(data);
+      let list = document.getElementsByClassName("tools");
+      let cFlag = toolsDom.style.display;
+      for(let i=0;i<list.length;i++){
+        list[i].style.display = "none";
+      }
+        // 判断TOOL显示与隐藏
+      if (cFlag == "none") {
+        toolsDom.style.display = "inline-flex";
+        toolsDom.classList.add("animated");
+        toolsDom.classList.add("slideInDown");
+      } else {
+        toolsDom.style.display = "none";
+      }
+    },
+    // 鼠标从工具条移开的时候隐藏
+    hideTools(event){
+        event.currentTarget.style.display = "none";
+    },
+    handleLiOver(event){
+        event.currentTarget.style.backgroundColor = "rgb(84, 165, 255)";
+        event.currentTarget.style.color = "rgb(255, 255, 255)";
+    },
+    handleLiLeave(node,event){
+      if(this.currentLiNode.nodeKey != node.nodeKey){
+        event.currentTarget.style.backgroundColor = "transparent";
+        event.currentTarget.style.color = "#515a6e";
+      }
+
+
+    },
+    // 添加教材
+    handleAddBook(){
+      this.addBookFlag = true;
+      this.periodList = this.$store.state.periodList;
+      this.periodSelect = this.periodList[0].value;
+
+      this.subjectList = this.periodList[0].children;
+      this.subjectSelect = this.subjectList[0].value;
+
+      this.versionList = this.subjectList[0].children;
+      this.versionSelect = this.versionList[0].value;
+
+      this.gradeList = this.versionList[0].children;
+      this.gradeSelect = this.gradeList[0].value;
+    },
+
+    // 学段选择变化
+    periodChange(val){
+      for(var i=0; i<this.periodList.length; i++){
+        if(val == this.periodList[i].value ){
+         this.subjectList = this.periodList[i].children;
+         this.subjectSelect = this.periodList[i].children[0].value;
+         this.subjectChange(this.subjectSelect);
+        }
+       }
+    }, 
+    // 学科选择变化
+    subjectChange(val){
+      for(var i=0; i<this.subjectList.length; i++){
+        if(val == this.subjectList[i].value ){
+         this.versionList = this.subjectList[i].children;
+         this.versionSelect = this.subjectList[i].children[0].value;
+         this.versionChange(this.versionSelect);
+        }
+       }
+    },
+    // 版本选择变化
+    versionChange(val){
+      for(var i=0; i<this.versionList.length; i++){
+        if(val == this.versionList[i].value ){
+         this.gradeList = this.versionList[i].children;
+         this.gradeSelect = this.versionList[i].children[0].value;
+        }
+       }
+    },
+    //册别选择变化
+    gradeChange(val){
+      // this.$Message.info(val);
+    },
+    // 确认添加教材
+    handleAddConfirm(){
+      console.log(this.periodSelect+this.subjectSelect+this.versionSelect+this.gradeSelect);
+    }
+  }
+};
+</script>
+<style>
+.ivu-icon-ios-paper-outline {
+  font-size: 16px;
+}
+.ivu-select {
+  width: 69% !important;
+}
+.ivu-select-single .ivu-select-selection {
+  height: 40px;
+}
+.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+}
+/* .ivu-tree ul li {
+  margin: 18px 0;
+} */
+.ivu-tree ul {
+  font-size: 14px;
+}
+.ivu-tree .ivu-tree-arrow{
+  width: 2%;
+  margin-right: 2%;
+}
+.ivu-input-wrapper {
+  width: 70% !important;
+}
+.modelRow {
+  margin: 20px;
+  font-size: 14px;
+}
+.tools {
+  position: absolute;
+  right: 60px;
+  display: inline-flex;
+  flex-direction: column;
+  z-index: 999;
+}
+.btn_more{
+  background: #fff;
+  border: 1px solid rgb(248,248,248);
+}
+.animated {
+  animation-duration: 0.5s;
+}
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, 30%, 0);
+    transform: translate3d(0, 30%, 0) !important;
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 40%, 0);
+    transform: translate3d(0, 40%, 0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, 30%, 0);
+    transform: translate3d(0, 30%, 0) !important;
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 40%, 0);
+    transform: translate3d(0, 40%, 0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+.singleClass{
+  display: inline-flex !important;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+}
+
+.btn-addClass{
+  width: 29%;
+  padding: 9px 6px !important;
+}
+.ivu-tabs-nav-scroll{
+  display: flex;
+  justify-content: center;
+}
+.addBookArea .ivu-select{
+  width: 80% !important;
+  margin-left: 30px;
+}
+.addBookArea .ivu-select-single .ivu-select-selection{
+  height: 32px;
+} 
+.addBookArea .ivu-row{
+  margin: 30px 20px;
+}
+.addBookArea .ivu-select-selected-value{
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 12px !important;
+}
+.ivu-tabs{
+  overflow: unset;
+}
+</style>

TEAMModelOS/ClientApp/common/header.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="header_content">
+    <div class="logo_box">
+      <img src="@/assets/logo.png">
+    </div>
+    <div class="header_module">
+      <li  v-for="(item,index) in header_data"  :class='["header_list",currentIndex==index ? "header_list_active" : ""]' @click="listClick(index)">
+        <div class="module_box">
+          <img :src="item.imageurl">
+        </div>
+        <div class="module_title">
+          <p>{{item.name}}</p>
+        </div>
+      </li>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "header",
+  data() {
+    return {
+      currentIndex:0,
+      header_data: [
+        {
+          id: "1",
+          name: "教材资源",
+          imageurl: require("../assets/icon/header_book.png")
+        },
+        {
+          id: "2",
+          name: "课前导学",
+          imageurl: require("../assets/icon/header_preview.png")
+        },
+        {
+          id: "3",
+          name: "同步备课",
+          imageurl: require("../assets/icon/header_synchronization.png")
+        },
+        {
+          id: "4",
+          name: "互动课堂",
+          imageurl: require("../assets/icon/header_interact.png")
+        },
+        {
+          id: "5",
+          name: "在线检测",
+          imageurl: require("../assets/icon/header_detection.png")
+        },
+        {
+          id: "6",
+          name: "课后作业",
+          imageurl: require("../assets/icon/header_task.png")
+        }
+      ]
+    };
+  },
+  methods:{
+    listClick(index){
+      this.currentIndex = index; 
+      switch (index) {
+        case 0:
+          this.$router.push('/BaseContent');
+          break;
+        case 1:
+          this.$router.push('/BasePreview');
+          break;
+        case 2:
+          this.$router.push('/BasePrepare');
+          break;
+        case 3:
+          // this.$router.push('/BasePreview');
+          break;
+        case 4:
+          // this.$router.push('/BasePreview');
+          break;
+        
+        default:
+          break;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.header_content {
+  width: 100%;
+  height: 140px;
+  background-image: linear-gradient(to top, #04befe 0%, #4481eb 100%);
+}
+.logo_box {
+  width: 12%;
+  height: 140px;
+  float: left;
+  margin-left: 8%;
+  padding-top: 15px;
+}
+.logo_box img {
+  width: 100px;
+  height: 100px;
+}
+.header_module {
+  width: 60%;
+  height: 140px;
+  float: left;
+  list-style-type: none;
+}
+.header_list {
+  width: 10%;
+  height: 140px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5%;
+  cursor: pointer;
+}
+.header_list:hover {
+  background-color: #ffffff54;
+}
+.header_list_active{
+  background-color: #ffffff54;
+}
+.module_box {
+  width: 100%;
+  float: left;
+}
+.module_box img {
+  width: 60%;
+  margin-left: 20%;
+  margin-top: 5%;
+}
+.module_title {
+  width: 100%;
+  font-size: 1rem;
+  text-align: center;
+  color: #fff;
+}
+
+
+</style>

TEAMModelOS/ClientApp/components/BaseContent.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="main">
+        <Row class="header">
+            <span :class='["menu-item",currentMenuIndex == 0 ? "menu-item-active" : ""]' @click="handleMenuClick(0)">
+                <Icon type="ios-cube" size="26" :color="currentMenuIndex == 0?'#2d8cf0':''"/><span>我的资源</span>
+            </span>
+            <span :class='["menu-item",currentMenuIndex == 1 ? "menu-item-active" : ""]' @click="handleMenuClick(1)">
+                <Icon type="ios-cloud-done" size="26" :color="currentMenuIndex == 1?'#2d8cf0':''"/><span>共享资源</span>
+            </span>
+            <span :class='["menu-item",currentMenuIndex == 2 ? "menu-item-active" : ""]' @click="handleMenuClick(2)">
+               <Icon type="ios-bookmarks" size="26" :color="currentMenuIndex == 2?'#2d8cf0':''"/><span>集备资源</span>
+            </span>
+            <span :class='["menu-item",currentMenuIndex == 3 ? "menu-item-active" : ""]' @click="handleMenuClick(3)">
+               <Icon type="ios-ribbon" size="26" :color="currentMenuIndex == 3?'#2d8cf0':''"/><span>精品资源</span>
+            </span>
+            <span class="btn-upload">
+               <Button type="primary" size="large" @click="handleUpload">上传资源</Button>
+            </span>
+            <span class="menu-more">
+                <Poptip content="content" placement="bottom-end" theme="dark"> 
+                    <Icon type="md-menu" size="36" color="#2d8cf0"/>
+                    <div class="pop-content" slot="content" style="width:350px;padding-bottom:10px;">
+                        <Tabs value="filter" :animated="false">
+                            <TabPane label="资源筛选" name="filter">
+                                <p class="filter-title">按格式</p>
+                                <RadioGroup v-model="filterFileType" type="button">
+                                    <Radio label="全部" value="0"></Radio>
+                                    <Radio label="图片" value="1"></Radio>
+                                    <Radio label="文档" value="2"></Radio>
+                                    <Radio label="视频" value="3"></Radio>
+                                    <Radio label="音频" value="4"></Radio>
+                                    <Radio label="动画" value="5"></Radio>
+                                </RadioGroup>
+                                <p class="filter-title">按类别</p>
+                                <RadioGroup v-model="filterCategory" type="button">
+                                    <Radio label="全部" value="0"></Radio>
+                                    <Radio label="教案" value="1"></Radio>
+                                    <Radio label="学案" value="2"></Radio>
+                                    <Radio label="课件" value="3"></Radio>
+                                    <Radio label="微课" value="4"></Radio>
+                                    <Radio label="习题" value="5"></Radio>
+                                    <Radio label="素材" value="6"></Radio>
+                                    <Radio label="拓展" value="7"></Radio>
+                                </RadioGroup>
+                            </TabPane>
+                            <TabPane label="选择排序" name="orderBy">
+                                <RadioGroup v-model="filterCategory" type="button">
+                                    <Radio label="默认" value="0"></Radio>
+                                    <Radio label="评分" value="1"></Radio>
+                                    <Radio label="收藏" value="2"></Radio>
+                                </RadioGroup>
+                            </TabPane>
+                        </Tabs>
+                       
+                    </div>
+                </Poptip>
+            </span>
+
+        </Row>
+        <Row class="contentWarp">
+            <div class="content-item" v-for="item in fileList">
+                <div class="c-item-pic">
+                    <img v-bind:src="item.img">
+                </div>
+                <p class="c-item-name" :title="item.name">{{item.name}}</p>
+                <p class="c-item-origin">来源：{{item.uploader}}</p>
+                <p class="c-item-download">下载次数：{{item.download}}</p>
+                <p class="c-item-rate">评分：<Rate allow-half disabled v-model="item.score" /> {{item.score}}</p>
+                <Dropdown trigger="click">
+                    <Button type="primary">
+                        预览
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem>收藏</DropdownItem>
+                        <DropdownItem>下载</DropdownItem>
+                        <DropdownItem>举报</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </div>
+            <Page :total="50" class="page" />
+            <Spin size="large" fix v-if="spinShow"></Spin>
+        </Row>
+        <!-- 上传文件弹出框 -->
+        <Modal v-model="uploadModal" class="upload-modal" scrollable title="上传资源" width="700px" ok-text="确认" cancel-text="取消" @on-ok="handleUploadConfirm">
+                <p class="upload-title">选择类型</p>
+                <RadioGroup v-model="uploadType" type="button">
+                    <Radio label="教案" value="0"></Radio>
+                    <Radio label="学案" value="1"></Radio>
+                    <Radio label="课件" value="2"></Radio>
+                    <Radio label="微课" value="3"></Radio>
+                </RadioGroup>
+                <p class="upload-title">选择资源</p>
+                <Upload
+                    multiple
+                    type="drag"
+                    action="//jsonplaceholder.typicode.com/posts/">
+                    <div style="padding: 60px 0">
+                        <Icon type="ios-cloud-upload" size="62" style="color: #3399ff"></Icon>
+                        <p>选择或者拖拽资源到此处上传</p>
+                    </div>
+                </Upload>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+    name: "BaseConent",
+    data(){
+        return{
+            currentMenuIndex:0,
+            fileList:[],
+            spinShow:false,
+            uploadModal:false,
+            uploadType:"教案",
+            filterFileType:"全部",
+            filterCategory:"全部",
+            data:[
+              {id:1,name:'文言文与阅读文言文与阅读PPT课件.ppt',img:require('../assets/icon/ppt50.png'),uploader:"向常州",score:4,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/ppt50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/xls50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/xls50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/zip50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/swf50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/video50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+             
+            ],
+            data2:[
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+            ]
+         }
+        },
+      created(){
+        this.spinShow = true;
+        setTimeout(() => {
+            this.fileList = this.data;
+            this.spinShow = false;
+        }, 500);
+      },
+      methods:{
+          handleMenuClick(index){
+              this.currentMenuIndex = index;
+              switch (index) {
+                  case 0:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 1:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data2;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 2:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 3:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data2;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+
+                  default:
+                      break;
+              }
+          },
+          handleUpload(){
+            this.uploadModal = true;
+          },
+          handleUploadConfirm(){
+
+          }
+      },
+    }
+</script>
+
+<style scoped>
+.main{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    font-family: "Helvetica Neue",Helvetica;
+}
+.header{
+    position: relative;
+    widows: 100%;
+    height: 100px;
+    border-bottom: 1px rgb(228, 227, 227) solid;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 99;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+}
+.header .menu-item{
+    margin-left: 30px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    color: rgb(134, 134, 134);
+}
+.menu-item-active{
+    color: #1B9DFF !important;
+}
+.menu-item span{
+    margin-left: 5px;
+}
+.menu-more{
+    position:absolute;
+    right: 32px;
+    top: 32px;
+    cursor: pointer;
+}
+.btn-upload{
+    position:absolute;
+    right: 100px;
+    top: 32px;
+    cursor: pointer;
+}
+.contentWarp{
+    width: 100%;
+    padding: 1%;
+    padding-bottom: 50px;
+    min-height: 768px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background: rgb(248, 248, 248);
+}
+.content-item{
+    width: 18%;
+    height: 320px;
+    margin: 1%;
+    font-size: 14px;
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+    background: #fff;
+    border: 1px rgba(233, 232, 231, 0.644) solid;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+    cursor: pointer;
+    border-radius: 5px;
+    min-width: 240px;
+    transition:transform .5s ease 0s;
+    transform-origin:center;
+}
+
+.c-item-pic{
+    width: 100%;
+    height: 120px;
+    padding-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+.c-item-pic img{
+    height: 60px;
+    width: 60px;
+}
+.c-item-name{
+    font-size: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding: 0 15px;
+}
+.c-item-origin{
+    margin: 10px 0;
+}
+.c-item-download{
+    /* font-weight: bold; */
+}
+.c-item-rate{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown .ivu-btn{
+    width: 100%;
+    font-size: 14px;
+    padding: 5px 30px 6px;
+}
+.page{
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.upload-title{
+    font-size: 14px;
+    font-weight: bold;
+    margin: 20px 5px;
+}
+
+.ivu-poptip-title-inner{
+    padding: 16px;
+    font-weight: bold;
+}
+.ivu-poptip-popper{
+    width: 400px;
+}
+.ivu-radio-group-button .ivu-radio-wrapper{
+    margin: 5px 10px;
+    border-radius: 0px !important;
+}
+.ivu-radio-group-button .ivu-radio-wrapper-checked{
+    background: #2b85e4 !important;
+    color: white !important;
+}
+.ivu-radio-group-button .ivu-radio-wrapper-checked .ivu-radio-focus{
+    box-shadow: 0 !important;
+}
+.ivu-radio-group-button{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.filter-title{
+    font-size: 14px;
+    margin: 10px 0;
+}
+</style>

TEAMModelOS/ClientApp/components/BasePrepare.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="main">
+        <Row class="header">
+            <span :class='["menu-item",currentMenuIndex == 0 ? "menu-item-active" : ""]' @click="handleMenuClick(0)">
+                <Icon type="ios-cube" size="26" :color="currentMenuIndex == 0?'#2d8cf0':''"/><span>我的备课</span>
+            </span>
+            <span :class='["menu-item",currentMenuIndex == 1 ? "menu-item-active" : ""]' @click="handleMenuClick(1)">
+                <Icon type="ios-cloud-done" size="26" :color="currentMenuIndex == 1?'#2d8cf0':''"/><span>共享备课</span>
+            </span>
+            <span class="btn-upload">
+               <Button type="primary" size="large" @click="handleUpload">上传资源</Button>
+            </span>
+            <span class="menu-more">
+                <Poptip content="content" placement="bottom-end" theme="dark"> 
+                    <Icon type="md-menu" size="36" color="#2d8cf0"/>
+                    <div class="pop-content" slot="content" style="width:350px;padding-bottom:10px;">
+                        <Tabs value="filter" :animated="false">
+                            <TabPane label="资源筛选" name="filter">
+                                <p class="filter-title">按格式</p>
+                                <RadioGroup v-model="filterFileType" type="button">
+                                    <Radio label="全部" value="0"></Radio>
+                                    <Radio label="图片" value="1"></Radio>
+                                    <Radio label="文档" value="2"></Radio>
+                                    <Radio label="视频" value="3"></Radio>
+                                    <Radio label="音频" value="4"></Radio>
+                                    <Radio label="动画" value="5"></Radio>
+                                </RadioGroup>
+                                <p class="filter-title">按类别</p>
+                                <RadioGroup v-model="filterCategory" type="button">
+                                    <Radio label="全部" value="0"></Radio>
+                                    <Radio label="教案" value="1"></Radio>
+                                    <Radio label="学案" value="2"></Radio>
+                                    <Radio label="课件" value="3"></Radio>
+                                    <Radio label="微课" value="4"></Radio>
+                                    <Radio label="习题" value="5"></Radio>
+                                    <Radio label="素材" value="6"></Radio>
+                                    <Radio label="拓展" value="7"></Radio>
+                                </RadioGroup>
+                            </TabPane>
+                            <TabPane label="选择排序" name="orderBy">标签二的内容</TabPane>
+                            <TabPane label="相关说明" name="name3">标签三的内容</TabPane>
+                        </Tabs>
+                       
+                    </div>
+                </Poptip>
+            </span>
+
+        </Row>
+        <Row class="contentWarp">
+            <div class="content-item" v-for="item in fileList">
+                <div class="c-item-pic">
+                    <img v-bind:src="item.img">
+                </div>
+                <p class="c-item-name" :title="item.name">{{item.name}}</p>
+                <p class="c-item-origin">来源：{{item.uploader}}</p>
+                <p class="c-item-download">下载次数：{{item.download}}</p>
+                <p class="c-item-rate">评分：<Rate allow-half disabled v-model="item.score" /> {{item.score}}</p>
+                <Dropdown trigger="click">
+                    <Button type="primary">
+                        预览
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem>收藏</DropdownItem>
+                        <DropdownItem>下载</DropdownItem>
+                        <DropdownItem>举报</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </div>
+            <Page :total="50" class="page" />
+            <Spin size="large" fix v-if="spinShow"></Spin>
+        </Row>
+        <!-- 上传文件弹出框 -->
+        <Modal v-model="uploadModal" class="upload-modal" scrollable title="上传资源" width="700px" ok-text="确认" cancel-text="取消" @on-ok="handleUploadConfirm">
+                <p class="upload-title">选择类型</p>
+                <RadioGroup v-model="uploadType" type="button">
+                    <Radio label="教案" value="0"></Radio>
+                    <Radio label="学案" value="1"></Radio>
+                    <Radio label="课件" value="2"></Radio>
+                    <Radio label="微课" value="3"></Radio>
+                </RadioGroup>
+                <p class="upload-title">选择资源</p>
+                <Upload
+                    multiple
+                    type="drag"
+                    action="//jsonplaceholder.typicode.com/posts/">
+                    <div style="padding: 60px 0">
+                        <Icon type="ios-cloud-upload" size="62" style="color: #3399ff"></Icon>
+                        <p>选择或者拖拽资源到此处上传</p>
+                    </div>
+                </Upload>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+    name: "BaseConent",
+    data(){
+        return{
+            currentMenuIndex:0,
+            fileList:[],
+            spinShow:false,
+            uploadModal:false,
+            uploadType:"教案",
+            filterFileType:"全部",
+            filterCategory:"全部",
+            data:[
+              {id:1,name:'文言文与阅读文言文与阅读PPT课件.ppt',img:require('../assets/icon/zip50.png'),uploader:"向常州",score:4,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/zip50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/xls50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+             
+            ],
+            data2:[
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+            ]
+         }
+        },
+      created(){
+        this.spinShow = true;
+        setTimeout(() => {
+            this.fileList = this.data;
+            this.spinShow = false;
+        }, 500);
+      },
+      methods:{
+          handleMenuClick(index){
+              this.currentMenuIndex = index;
+              switch (index) {
+                  case 0:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 1:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data2;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 2:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+                  case 3:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data2;
+                          this.spinShow = false;
+                      }, 500);
+                      break;
+
+                  default:
+                      break;
+              }
+          },
+          handleUpload(){
+              this.uploadModal = true;
+          },
+          handleUploadConfirm(){
+
+          }
+      },
+    }
+</script>
+
+<style scoped>
+.main{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    font-family: "Helvetica Neue",Helvetica;
+}
+.header{
+    position: relative;
+    widows: 100%;
+    height: 100px;
+    border-bottom: 1px rgb(228, 227, 227) solid;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 99;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+}
+.header .menu-item{
+    margin-left: 30px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    color: rgb(134, 134, 134);
+}
+.menu-item-active{
+    color: #1B9DFF !important;
+}
+.menu-item span{
+    margin-left: 5px;
+}
+.menu-more{
+    position:absolute;
+    right: 32px;
+    top: 32px;
+    cursor: pointer;
+}
+.btn-upload{
+    position:absolute;
+    right: 100px;
+    top: 32px;
+    cursor: pointer;
+}
+.contentWarp{
+    width: 100%;
+    padding: 1%;
+    padding-bottom: 50px;
+    min-height: 768px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background: rgb(248, 248, 248);
+}
+.content-item{
+    width: 18%;
+    height: 320px;
+    margin: 1%;
+    font-size: 14px;
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+    background: #fff;
+    border: 1px rgba(233, 232, 231, 0.644) solid;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+    cursor: pointer;
+    border-radius: 5px;
+    min-width: 240px;
+    transition:transform .5s ease 0s;
+    transform-origin:center;
+}
+
+.c-item-pic{
+    width: 100%;
+    height: 120px;
+    padding-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+.c-item-pic img{
+    height: 60px;
+    width: 60px;
+}
+.c-item-name{
+    font-size: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding: 0 15px;
+}
+.c-item-origin{
+    margin: 10px 0;
+}
+.c-item-download{
+    /* font-weight: bold; */
+}
+.c-item-rate{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown .ivu-btn{
+    width: 100%;
+    font-size: 14px;
+    padding: 5px 30px 6px;
+}
+.page{
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.upload-title{
+    font-size: 14px;
+    font-weight: bold;
+    margin: 20px 5px;
+}
+
+.ivu-poptip-title-inner{
+    padding: 16px;
+    font-weight: bold;
+}
+.ivu-poptip-popper{
+    width: 400px;
+}
+.ivu-radio-group-button .ivu-radio-wrapper{
+    margin: 5px 10px;
+    border-radius: 0px !important;
+}
+.ivu-radio-group-button .ivu-radio-wrapper-checked{
+    background: #2b85e4 !important;
+    color: white !important;
+}
+.ivu-radio-group-button .ivu-radio-wrapper-checked .ivu-radio-focus{
+    box-shadow: 0 !important;
+}
+.ivu-radio-group-button{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.filter-title{
+    font-size: 14px;
+    margin: 10px 0;
+}
+</style>

TEAMModelOS/ClientApp/components/BasePreview.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="main">
+        <Row class="header">
+            <span :class='["menu-item",currentMenuIndex == 0 ? "menu-item-active" : ""]' @click="handleMenuClick(0)">
+                <Icon type="ios-bookmarks" size="26" :color="currentMenuIndex == 0?'#2d8cf0':''"/><span>我的导学</span>
+            </span>
+            <span :class='["menu-item",currentMenuIndex == 1 ? "menu-item-active" : ""]' @click="handleMenuClick(1)">
+                <Icon type="ios-paper" size="26" :color="currentMenuIndex == 1?'#2d8cf0':''"/><span>共享导学</span>
+            </span>
+            
+            <span class="btn-upload">
+               <Button type="primary" size="large">上传资源</Button>
+            </span>
+            <span class="menu-more">
+               <Icon type="md-menu" size="36" color="#2d8cf0"/>
+            </span>
+
+        </Row>
+        <Row class="contentWarp">
+            <div class="content-item" v-for="item in fileList">
+                <div class="c-item-pic">
+                    <img v-bind:src="item.img">
+                </div>
+                <p class="c-item-name" :title="item.name">{{item.name}}</p>
+                <p class="c-item-origin">来源：{{item.uploader}}</p>
+                <p class="c-item-download">下载次数：{{item.download}}</p>
+                <p class="c-item-rate">评分：<Rate allow-half disabled v-model="item.score" /> {{item.score}}</p>
+                <Dropdown trigger="click">
+                    <Button type="primary">
+                        预览
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem>收藏</DropdownItem>
+                        <DropdownItem>下载</DropdownItem>
+                        <DropdownItem>举报</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </div>
+            <Page :total="50" class="page" />
+            <Spin size="large" fix v-if="spinShow"></Spin>
+        </Row>
+
+    </div>
+</template>
+
+<script>
+    export default {
+    name: "BaseConent",
+    data(){
+        return{
+            currentMenuIndex:0,
+            fileList:[],
+            spinShow:false,
+            data:[
+              {id:1,name:'文言文与阅读文言文与阅读PPT课件.ppt',img:require('../assets/icon/ppt50.png'),uploader:"向常州",score:4,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/ppt50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/xls50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/xls50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/zip50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/swf50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/video50.png'),uploader:"向常州",score:4.5,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+             
+            ],
+            data2:[
+                {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+              {id:1,name:'文言文与阅读PPT课件.ppt',img:require('../assets/icon/word50.png'),uploader:"向常州",score:3,download:"15"},
+            ]
+         }
+        },
+      created(){
+        this.spinShow = true;
+        setTimeout(() => {
+            this.fileList = this.data;
+            this.spinShow = false;
+        }, 500);
+      },
+      methods:{
+          handleMenuClick(index){
+              this.currentMenuIndex = index;
+              switch (index) {
+                  case 0:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data;
+                          this.spinShow = false;
+                      }, 1000);
+                      break;
+                  case 1:
+                      this.spinShow = true;
+                      setTimeout(() => {
+                          this.fileList = this.data2;
+                          this.spinShow = false;
+                      }, 1000);
+                      break;
+                  default:
+                      break;
+              }
+          }
+      },
+    }
+</script>
+
+<style scoped>
+.main{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    font-family: "Helvetica Neue",Helvetica;
+}
+.header{
+    position: relative;
+    widows: 100%;
+    height: 100px;
+    border-bottom: 1px rgb(228, 227, 227) solid;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 99;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+}
+.header .menu-item{
+    margin-left: 30px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    color: rgb(134, 134, 134);
+}
+.menu-item-active{
+    color: #1B9DFF !important;
+}
+.menu-item span{
+    margin-left: 5px;
+}
+.menu-more{
+    position:absolute;
+    right: 32px;
+    top: 32px;
+    cursor: pointer;
+}
+.btn-upload{
+    position:absolute;
+    right: 100px;
+    top: 32px;
+    cursor: pointer;
+}
+.contentWarp{
+    width: 100%;
+    padding: 1%;
+    padding-bottom: 50px;
+    min-height: 768px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background: rgb(248, 248, 248);
+}
+.content-item{
+    width: 18%;
+    height: 320px;
+    margin: 1%;
+    font-size: 14px;
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+    background: #fff;
+    border: 1px rgba(233, 232, 231, 0.644) solid;
+    box-shadow: 0 0 5px 0 rgb(213, 218, 226);
+    cursor: pointer;
+    border-radius: 5px;
+    min-width: 240px;
+    transition:transform .5s ease 0s;
+    transform-origin:center;
+}
+
+.c-item-pic{
+    width: 100%;
+    height: 120px;
+    padding-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+.c-item-pic img{
+    height: 60px;
+    width: 60px;
+}
+.c-item-name{
+    font-size: 16px;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding: 0 15px;
+}
+.c-item-origin{
+    margin: 10px 0;
+}
+.c-item-download{
+    font-weight: bold;
+}
+.c-item-rate{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown{
+    margin-top: 10px;
+}
+.content-item .ivu-dropdown .ivu-btn{
+    width: 100%;
+    font-size: 14px;
+    padding: 5px 30px 6px;
+}
+.page{
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+</style>

TEAMModelOS/ClientApp/components/bargraph.vue

@@ -17,9 +17,9 @@
             },
         computed:{
         //  	命令发布监听
-        mode () {
-          return this.$store.state.zhuxhuang.mode
-        },
+        //mode () {
+        //  return this.$store.state.zhuxhuang.mode
+        //},
         zhuxhuang () {
           return this.$store.state.zhuxhuang
         },
@@ -65,11 +65,12 @@
                   interval: 0,    //强制文字产生间隔
                   rotate: 50,     //文字逆时针旋转50°
                   textStyle: {    //文字样式
-                    color: "black",
-                    fontSize: 10,
+                    color: "#333",
+                    fontSize: 11,
                     fontFamily: 'Microsoft YaHei',
                   }
-                }
+                },
+
               }
             ],
             dataZoom: {
@@ -170,23 +171,25 @@
                 },
               },
             ]
-          });
+          })
             },
            init() {
              this.$get('/api/class/getExam?identity=EcharsZ')
                .then((response) => {
                  //console.log(response.result, 111112);
-                 this.$store.state.zhuxhuang.mode = true;
-                 this.drawLine(response.result.data)
+                 this.$store.state.zhuxhuang = response.result.data;
+                 //this.$store.state.zhuxhuang.mode = true;
+                 //this.drawLine(response.result.data)
+                 
                  //console.log(this.$store.state.zhuzhuang,33333344)
             })
         },
       },
       watch:{
 // 		监听指令
-        mode(a){
-          if(a){
-            this.drawLine(this.zhuxhuang)
+        zhuxhuang(a){
+          if (a) {
+            this.drawLine(a)
           }
         },
       }

TEAMModelOS/ClientApp/components/basics.vue

@@ -19,18 +19,23 @@
         name: "basics",
         data(){
           return{
-            basicsdata:[],
+           // basicsdata:[],
           }
     },
     created() {
       this.init();
     },
+    computed: {
+      basicsdata() {
+        return this.$store.state.basicsdata
+                  }
+                },
     methods:{
       init() {
         this.$get('/api/class/getBase?identity=Base')
           .then((response) => {
             //console.log(response.result.data, 11111);
-            this.basicsdata = response.result.data;
+            this.$store.state.basicsdata= response.result.data;
             //console.log(this.xueduan,333333)
           })
       }

TEAMModelOS/ClientApp/components/ChooseAttention.vue

@@ -29,13 +29,10 @@
     <Col span="24" class="choose">
       <div class="select">
         <p class="choose_box_tilte">选择关注年级</p>
-        <Cascader :data="xueduan" v-model="grade" placeholder="请选择年级"></Cascader>
+        <Cascader :data="selectgrade" v-model="grade" placeholder="请选择年级" @on-change="listchange"></Cascader>
         <p class="choose_box_tilte">选择关注学年期</p>
-        <Cascader :data="semesterList" v-model="semester" placeholder="请选择年级"></Cascader>
-        <!--<p class="choose_box_tilte">数据比较</p>-->
-        <!--<Select v-model="compare" style="width:100%"  placeholder="请选择数据比较">-->
-        <!--<Option v-for="item in compareList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
-        <!--</Select>-->
+        <Cascader :data="selectterm" v-model="semester" placeholder="请选择年级"></Cascader>
+
       </div>
     </Col>
   </Row>
@@ -48,9 +45,9 @@
         isCollapsed: false,
         value1: [],
         //年级数组
-        xueduan:[],
+        //xueduan: [],
         //学期数组
-        semesterList: [],
+        //semesterList: [],
         grade: [],
         semester: [],
       }
@@ -59,14 +56,23 @@
       this.init();
       this.inits();
     },
+    computed: {
+      //  	命令发布监听
+      selectgrade() {
+        return this.$store.state.selectgrade
+      },
+      selectterm(){
+        return this.$store.state.selectterm
+      },
+    },
     methods: {
       //获取关注年级数据
       init() {
         this.$get('/api/class/getGrade?identity=Grade')
           .then((response) => {
-            //console.log(response.result.data,11111);
-            this.xueduan = response.result.data;
-            //console.log(this.xueduan,333333)
+            //console.log(response.result.data, 11111);
+            this.$store.state.selectgrade = response.result.data;
+            //console.log(this.$store.state.selectgrade, 888855)
           })
       },
       //获取关注学年期
@@ -74,14 +80,17 @@
         this.$get('/api/class/getTerm?identity=term')
           .then((response) => {
             //console.log(response.result.data,11111);
-            this.semesterList = response.result.data;
-            //console.log(this.xueduan,333333)
+            this.$store.state.selectterm=response.result.data
           })
-                }
-              }
+      },
+      //获取关注年级值
+      listchange(value, selectedData){
+        //console.log(value,33333);
+          }
+    },
   }
 </script>
-<style>
+<style scoped>
   .ivu-select-selection {
     background-color: #cfd4da !important;;
   }

TEAMModelOS/ClientApp/components/ChooseExam.vue

@@ -1,7 +1,7 @@
 <template>
    <Row class="exam_box">
      <Col span="24">
-       <li v-for="item in list" class="list_box" @click="select_box(index)">
+       <li v-for="item in selectexam" class="list_box" @click="select_box(index)">
          <p class="box_title">{{item.title}}-{{item.type}}</p>
          <p class="box_time">{{item.time}}</p>
          <p class="box_type">诊断类型:{{item.typename}}</p>
@@ -36,7 +36,12 @@
     },
     created() {
       this.init();
-              },
+    },
+    computed: {
+      selectexam() {
+        return this.$store.state.selectexam
+            },
+            },
     methods: {
       onInfinite() {
         //setTimeout(() => {
@@ -56,7 +61,7 @@
         this.$get('/api/class/getExam?identity=Exam')
           .then((response) => {
             //console.log(response.result.data,11111);
-            this.list= response.result.data[0].data;
+            this.$store.state.selectexam= response.result.data[0].data;
             //console.log(this.list,333333)
           })
        }

TEAMModelOS/ClientApp/components/linechart.vue

@@ -3,7 +3,7 @@
     <Col span="24" class="select_box">
       <div class="type_box">
         <Select v-model="model1" style="width:180px;height:40px;">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+          <Option v-for="item in linechart" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
       </div>
       <div class="select">
@@ -31,15 +31,18 @@
           },
     computed: {
       //  	命令发布监听
-      mode() {
-        return this.$store.state.linechart.mode
-      },
-      linechart() {
+      //mode() {
+      //  return this.$store.state.linechart.mode
+      //},
+      linechart_standard() {
         return this.$store.state.linechart
+          },
+      linechart() {
+        return this.$store.state.examtype
       },
     },
     methods: {
-      drawLine(obj,line_data) {
+      drawLine(obj) {
         //this.$store.state.linechart.mode = false;
         let myChart = this.$echarts.init(document.getElementById('myChart_line'));
         myChart.setOption({
@@ -81,10 +84,10 @@
           },
           series: [
             {
-              name: line_data[0].name,
+              name: obj.obj_series[0].name,
               type: 'line',
               stack: '总量',
-              data: line_data[0].data,
+              data: obj.obj_series[0].data,
               itemStyle: {
                 normal: {
                   color: "rgba(255,48,48)",
@@ -113,10 +116,10 @@
               },
             },
             {
-              name: line_data[1].name,
+              name: obj.obj_series[1].name,
               type: 'line',
               stack: '总量',
-              data: line_data[1].data,
+              data: obj.obj_series[1].data,
               itemStyle: {
                 normal: {
                   color: "rgba(0,245,255)",
@@ -145,10 +148,10 @@
               },
             },
             {
-              name: line_data[2].name,
+              name: obj.obj_series[2].name,
               type: 'line',
               stack: '总量',
-              data: line_data[2].data,
+              data: obj.obj_series[2].data,
               itemStyle: {
                 normal: {
                   color: "rgba(65,105,225)",
@@ -178,10 +181,10 @@
               },
             },
             {
-              name: line_data[3].name,
+              name: obj.obj_series[3].name,
               type: 'line',
               stack: '总量',
-              data: line_data[3].data,
+              data: obj.obj_series[3].data,
               itemStyle: {
                 normal: {
                   color: "rgba(145,44,238)",
@@ -211,10 +214,10 @@
               },
             },
             {
-              name: line_data[4].name,
+              name: obj.obj_series[4].name,
               type: 'line',
               stack: '总量',
-              data: line_data[4].data,
+              data: obj.obj_series[4].data,
               itemStyle: {
                 normal: {
                   color: "rgba(255,130,71)",
@@ -254,9 +257,9 @@
         this.$get('/api/class/getExam?identity=EcharsZx')
           .then((response) => {
             //console.log(response.result.data, 7777);
-            let line_data = response.result.data.obj_series;
-            //console.log(line_data, 55555)
-            this.drawLine(response.result.data, line_data);
+            //let line_data = response.result.data.obj_series;
+            this.$store.state.linechart = response.result.data;
+            //this.drawLine(response.result.data, line_data);
             //this.list = response.result.data[0].data;
             //console.log(this.list,333333)
           })
@@ -265,7 +268,8 @@
         this.$get('/api/class/getExam?identity=ExamType')
           .then((response) => {
             //console.log(response.result.data, 111)
-            this.cityList = response.result.data;
+            //this.cityList = response.result.data;
+            this.$store.state.examtype = response.result.data;
           })
       },
       sss() {
@@ -274,9 +278,9 @@
     },
     watch: {
 // 		监听指令
-      mode(a) {
+      linechart_standard(a) {
         if (a) {
-          this.drawLine(this.linechart)
+          this.drawLine(a)
         }
       },
     }

TEAMModelOS/ClientApp/components/radargraph.vue

@@ -18,9 +18,9 @@
         },
       computed:{
         //  	命令发布监听
-        mode () {
-          return this.$store.state.leida.mode
-        },
+        //mode () {
+        //  return this.$store.state.leida.mode
+        //},
         leida () {
           return this.$store.state.leida
         },
@@ -145,17 +145,17 @@
             this.$get('/api/class/getExam?identity=EcharsL')
               .then((response) => {
                 //console.log(response.result,456);
-                this.$store.state.leida.mode = true;
-                this.drawLine(response.result.data)
+               this.$store.state.leida=response.result.data
+                //this.drawLine(response.result.data)
                 //console.log(this.$store.state.zhuzhuang,33333344)
               })
           }
       },
       watch:{
 // 		监听指令
-        mode(a){
+        leida(a){
           if(a){
-            this.drawLine(this.leida)
+            this.drawLine(a)
           }
         },
       }

TEAMModelOS/ClientApp/components/SubjectsManifestation.vue

@@ -1,162 +1,81 @@
 <template>
-  <!--<div class="subjects_box">
+  <div class="subjects_box">
     <div class="subjects_title"><p>科目表现对比</p></div>
       <li class="subjects_listbox">
         <div class="top">
           <p class="num">{{list_data[0].score}}</p>
-          <p class="title">{{list_data[0].title}}</p>
+          <p class="title">全校平均</p>
         </div>
         <div class="center">
           <div id="myChart_one" :style="{width: '100%', height: '150px'}"></div>
         </div>
         <div class="bottom">
-          <p class="num"><Icon :type="list_data[0].icon_type" :class="list_data[0].icon_color" />{{list_data[0].below_score}}</p>
-            <p class="title">{{list_data[0].below_title}}</p>
+          <p class="num"><Icon :type="list_data[0].icon_type" :class="list_data[0].icon_color" />{{list_data[0].belowscore}}</p>
+            <p class="title">全区平均</p>
         </div>
       </li>
     <li class="subjects_listbox">
       <div class="top">
         <p class="num">{{list_data[1].score}}</p>
-        <p class="title">{{list_data[1].title}}</p>
-      </div>
-      <div class="center">
-        <div id="myChart_two" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon :type="list_data[1].icon_type"  :class="list_data[1].icon_color" />{{list_data[1].below_score}}</p>
-        <p class="title">{{list_data[1].below_title}}</p>
-      </div>
-    </li>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">{{list_data[2].score}}</p>
-        <p class="title">{{list_data[2].title}}</p>
-      </div>
-      <div class="center">
-        <div id="myChart_three" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon :type="list_data[2].icon_type" :class="list_data[2].icon_color" />{{list_data[2].below_score}}</p>
-        <p class="title">{{list_data[2].below_title}}</p>
-      </div>
-    </li>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">{{list_data[3].score}}</p>
-        <p class="title">{{list_data[3].title}}</p>
-      </div>
-      <div class="center">
-        <div id="myChart_four" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon :type="list_data[3].icon_type" :class="list_data[3].icon_color" />{{list_data[3].below_score}}</p>
-        <p class="title">{{list_data[3].below_title}}</p>
-      </div>
-    </li>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">{{list_data[4].score}}</p>
-        <p class="title">{{list_data[4].title}}</p>
-      </div>
-      <div class="center">
-        <div id="myChart_five" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon :type="list_data[4].icon_type" :class="list_data[4].icon_color" />{{list_data[4].below_score}}</p>
-        <p class="title">{{list_data[4].below_title}}</p>
-      </div>
-    </li>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">{{list_data[5].score}}</p>
-        <p class="title">{{list_data[5].title}}</p>
-      </div>
-      <div class="center">
-        <div id="myChart_six" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon :type="list_data[5].icon_type" :class="list_data[5].icon_color" />{{list_data[5].below_score}}</p>
-        <p class="title">{{list_data[5].below_title}}</p>
-      </div>
-    </li>
-  </div>-->
-  <div class="subjects_box">
-    <div class="subjects_title"><p>科目表现对比</p></div>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">77.5</p>
-        <p class="title">全校平均</p>
-      </div>
-      <div class="center">
-        <div id="myChart_one" :style="{width: '100%', height: '150px'}"></div>
-      </div>
-      <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropup" style="color:green" />70.2</p>
-        <p class="title">全区平均</p>
-      </div>
-    </li>
-    <li class="subjects_listbox">
-      <div class="top">
-        <p class="num">54.1</p>
         <p class="title">全校平均</p>
       </div>
       <div class="center">
         <div id="myChart_two" :style="{width: '100%', height: '150px'}"></div>
       </div>
       <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropdown" style="color:red" />61.3</p>
+        <p class="num"><Icon :type="list_data[1].icon_type"  :class="list_data[1].icon_color" />{{list_data[1].belowscore}}</p>
         <p class="title">全区平均</p>
       </div>
     </li>
     <li class="subjects_listbox">
       <div class="top">
-        <p class="num">72.9</p>
+        <p class="num">{{list_data[2].score}}</p>
         <p class="title">全校平均</p>
       </div>
       <div class="center">
         <div id="myChart_three" :style="{width: '100%', height: '150px'}"></div>
       </div>
       <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropup" style="color:green" />68.5</p>
+        <p class="num"><Icon :type="list_data[2].icon_type" :class="list_data[2].icon_color" />{{list_data[2].belowscore}}</p>
         <p class="title">全区平均</p>
       </div>
     </li>
     <li class="subjects_listbox">
       <div class="top">
-        <p class="num">68.5</p>
+        <p class="num">{{list_data[3].score}}</p>
         <p class="title">全校平均</p>
       </div>
       <div class="center">
         <div id="myChart_four" :style="{width: '100%', height: '150px'}"></div>
       </div>
       <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropdown" style="color:red" />72</p>
+        <p class="num"><Icon :type="list_data[3].icon_type" :class="list_data[3].icon_color" />{{list_data[3].belowscore}}</p>
         <p class="title">全区平均</p>
       </div>
     </li>
     <li class="subjects_listbox">
       <div class="top">
-        <p class="num">77.3</p>
+        <p class="num">{{list_data[4].score}}</p>
         <p class="title">全校平均</p>
       </div>
       <div class="center">
         <div id="myChart_five" :style="{width: '100%', height: '150px'}"></div>
       </div>
       <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropup" style="color:green" />82</p>
+        <p class="num"><Icon :type="list_data[4].icon_type" :class="list_data[4].icon_color" />{{list_data[4].belowscore}}</p>
         <p class="title">全区平均</p>
       </div>
     </li>
     <li class="subjects_listbox">
       <div class="top">
-        <p class="num">85</p>
+        <p class="num">{{list_data[5].score}}</p>
         <p class="title">全校平均</p>
       </div>
       <div class="center">
         <div id="myChart_six" :style="{width: '100%', height: '150px'}"></div>
       </div>
       <div class="bottom">
-        <p class="num"><Icon type="md-arrow-dropdown" style="color:red" />72</p>
+        <p class="num"><Icon :type="list_data[5].icon_type" :class="list_data[5].icon_color" />{{list_data[5].belowscore}}</p>
         <p class="title">全区平均</p>
       </div>
     </li>
@@ -174,21 +93,23 @@
     created() {
       this.init();
      
+    },
+    mounted() {
+      this.init();
     },
       computed:{
         //  	命令发布监听
-        mode () {
-          return this.$store.state.pie.mode
-        },
-        pie () {
+        inquiredata() {
           return this.$store.state.pie
         },
-      },
+    },
+
       methods:{
           //图形一
         
         One(obj) {
-          this.$store.state.pie.mode = false;
+          console.log(obj,5656565656)
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_one'));
           myChart.setOption({
             grid: {
@@ -262,7 +183,7 @@
           })
         },
           Two(obj){
-          this.$store.state.pie.mode = false;
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_two'));
           myChart.setOption({
             grid:{
@@ -336,7 +257,7 @@
           })
         },
           Three(obj){
-          this.$store.state.pie.mode = false;
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_three'));
           myChart.setOption({
             grid:{
@@ -410,7 +331,7 @@
           })
         },
           Four(obj){
-          this.$store.state.pie.mode = false;
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_four'));
           myChart.setOption({
             grid:{
@@ -484,7 +405,7 @@
           })
         },
           Five(obj){
-          this.$store.state.pie.mode = false;
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_five'));
           myChart.setOption({
             grid:{
@@ -558,7 +479,7 @@
           })
         },
           Six(obj){
-          this.$store.state.pie.mode = false;
+          //this.$store.state.pie.mode = false;
           let myChart = this.$echarts.init(document.getElementById('myChart_six'));
           myChart.setOption({
             grid:{
@@ -637,28 +558,33 @@
             .then((response) => {
               //console.log(response.result.data, 8888888);
               //this.One(response.result.data);
-         
-              _this.list_data = response.result.data;
-              _this.One(response.result.data[0]);
-              _this.Two(response.result.data[1]);
-              _this.Three(response.result.data[2]);
-              _this.Four(response.result.data[3]);
-              _this.Five(response.result.data[4]);
-              _this.Six(response.result.data[5]);
+              _this.$store.state.pie = response.result.data;
+              //_this.Two(response.result.data[1]);
+              //_this.Three(response.result.data[2]);
+              //_this.Four(response.result.data[3]);
+              //_this.Five(response.result.data[4]);
+              //_this.Six(response.result.data[5]);
 
             })
         }
           },
       watch:{
 // 		监听指令
-        mode(a){
-          if(a){
-            this.One(this.pie);
-            this.Two(this.pie);
-            this.Three(this.pie);
-            this.Four(this.pie);
-            this.Five(this.pie);
-            this.Six(this.pie);
+        inquiredata(value){
+          if(value){
+            this.list_data = value;
+            let dataone= value[0];
+            let datatwo = value[1];
+            let datathree = value[2];
+            let datafour = value[3];
+            let datafive = value[4];
+            let datasix = value[5];
+            this.One(dataone);
+            this.Two(datatwo);
+            this.Three(datathree);
+            this.Four(datafour);
+            this.Five(datafive);
+            this.Six(datasix);
           }
         },
       }

TEAMModelOS/ClientApp/components/app-root.vue

@@ -19,4 +19,8 @@
 </script>
 
 <style>
+#app, body, html{
+  width: 100%;
+  height: 100%;
+}
 </style>

TEAMModelOS/ClientApp/components/graph/bar.vue

@@ -0,0 +1,174 @@
+<template>
+  <div id="myStudybar" style="width:89%;height:100%;margin-left: 1%;margin-top:0%;"></div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        modedata:{},
+        name: '',
+        ctitle:'',
+        schoolnames: {},
+      }
+    },
+    computed: {
+//    ------------------len-----------------
+     
+    },
+    created(){
+
+    },
+    mounted(){
+    	this.init(this.mode,this.obj,'sokratestotal','苏格拉底');
+    },
+    methods: {
+      drawLine(datas,datai,titles){
+        let _this = this
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById('myStudybar'));
+        // 绘制图表
+        myChart.setOption({
+          title : {
+            text:titles,
+            x:'left',
+            top: '1',
+            textStyle:{
+              color:'#fff',
+              fontSize:16,
+            }
+          },
+          color: ['#3398DB'],
+            tooltip : {
+              trigger: 'axis',
+              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+              },
+              formatter: function (params, ticket, callback) {
+                let rez = '';
+                params.forEach(item => {
+                  rez = '<p>'+ _this.schoolnames[item.name] +'<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color.colorStops[0].color + '"></span>' + item.value + '</p>';
+                });
+                return rez;
+              }
+            },
+            grid: {
+              left: '0',
+              right: '5',
+              top:"15%",
+              bottom: '1',
+              containLabel: true
+            },
+            xAxis : [
+              {
+                type : 'category',
+                data : datai,
+                axisTick: {
+                  alignWithLabel: true
+                }
+              }
+            ],
+            yAxis : [
+              {
+                type : 'value',
+                color:'#3e3e3e',
+                splitLine: {
+                  lineStyle: {
+                      color: '#9E9E9E'
+                  }
+                },
+              }
+            ],
+            textStyle:{
+              color:'#9E9E9E',
+            },
+            series : [
+              {
+                name:'',
+                color:['rgb(0, 220, 254,0.5)，rgb(0, 254, 224,0.5)'],
+                type:'bar',
+                barWidth: '60%',
+                data:datas,
+                itemStyle: {
+                  normal: {  
+                    // 渐变色
+                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                      offset: 0,
+                      color: "#0093AE" // 0% 处的颜色
+                    },{
+                      offset: 1,
+                      color: "#00BBA1" // 100% 处的颜色
+                    }], false)
+                    // color: function (params){
+                    //   // console.log(datas,235);
+                    //   return (params['company']==datas.xData[param.dataIndex])? 'rgb(204,0,51)': 'rgb(42,170,227)';
+                    // }
+                  }
+                }
+              }
+            ]
+        });
+      },
+      init(code,arr,name,c){
+      	let a = [] // Datas
+      	let b = [] // title
+        for(let i in arr){
+          if(this.schoolcode == arr[i].schoolcode.toUpperCase()){
+            a.push({
+                value: arr[i].dashboard.smartclasstable.schoolmessage[name],
+                itemStyle: {
+                    normal: {
+                      // 渐变色
+                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: "#00DBFF" // 0% 处的颜色
+                      },{
+                        offset: 1,
+                        color: "#00FFDF" // 100% 处的颜色
+                      }], false)
+                    },
+                },
+            });
+          } else {
+            a.push(arr[i].dashboard.smartclasstable.schoolmessage[name]);
+          }
+          this.schoolnames[arr[i].schoolcode] = arr[i].schoolname
+        	b.push(arr[i].schoolcode)
+        }
+        this.drawLine(a,b,c)
+      },
+    },
+    watch:{
+      numdata(a){
+      	if(a.num == 1){
+      		this.name = 'curriculum',
+          this.ctitle='课程总数'
+      	}else if(a.num == 2){
+          this.name = 'electronicalnote',
+          this.ctitle='电子笔记数'
+      	}else if(a.num == 3){
+          this.name = 'uploadmovie',
+          this.ctitle='上传影片数'
+      	}else if(a.num == 4){
+          this.name = 'production',
+          this.ctitle='作业作品数'
+      	}else if(a.num == 5){
+          this.name = 'overturnclass',
+          this.ctitle='翻转课堂数'
+        }else if(a.num == 7){
+          this.name = 'sokratestotal',
+          this.ctitle='苏格拉底'          
+        }
+        if(a.num != 6) this.init(this.mode,this.obj,this.name,this.ctitle); // 长条图没有学习历程资料
+        
+      },
+      mode(a,b){
+        this.init(a,this.obj,this.name,this.ctitle)
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

TEAMModelOS/ClientApp/components/graph/classline.vue

@@ -0,0 +1,156 @@
+<template>
+    <div :id="id" style="height: 100%;width:100%;"></div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    },
+    props:{
+        id:{
+            type: String
+        }
+    },
+    mounted(){
+        this.drawLine();
+    },
+    methods:{
+        drawLine(){
+            let _this = this
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById(this.id));
+            let arrlabel = ["","00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00", ""];
+            let arrTotal = ["0","0", "0", "0", "0", "0", "10", "20", "30", "25", "35", "40", "60", "10", "0", "20", "30", "60", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
+            myChart.setOption({
+                backgroundColor: '#343a4073',
+                tooltip: {
+                    trigger: 'axis',
+                    borderRadius: 0,
+                    // backgroundColor:'#7AD1A8',
+                    // formatter: function(pm) {
+                    //     var param = pm[0];
+                    //     var pht = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(166,154,228);"></span>';
+                    //     console.log(param.marker);
+                    //     var prm = "星期" + "日一二三四五六 ".charAt(new Date(param.name).getDay());
+                    //     return param.name + ":&nbsp;&nbsp;" + prm + "<br>" +
+                    //         pht + param.seriesName + ":&nbsp;&nbsp;" + param.value + "&nbsp;&nbsp;|&nbsp;&nbsp;80.33ttt%";
+                    // },
+                    //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                    //         type: 'none' // 默认为直线，可选为：'line' | 'shadow'
+                    //     },
+                },
+                grid: {
+                    left: '0',
+                    right: '0',
+                    bottom: '0',
+                    top: '0',
+                    containLabel: true,
+                },
+                xAxis: [{
+                    axisTick: {
+                        show: false,
+                    },
+                    type: 'category',
+                    axisLabel: {
+                        // show: false,
+                        margin: 10,
+                        textStyle: {
+                            fontSize: 12,
+                            color: '#fff'
+                        }
+                    },
+                    boundaryGap: false,
+                    splitLine: {
+                        lineStyle: {
+                            color: '#6c757d',
+                        },
+                        show: true
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#6c757d',
+                            width: 1,
+                        }
+                    },
+                    data: arrlabel
+                }],
+                yAxis: [{
+                    position: 'right',
+                    type: 'value',
+                    // name: '单 位（%）',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#6c757d'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        inside: true,
+                        textStyle: {
+                            fontSize: 14,
+                            color:'transparent'
+                        }
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#6c757d'
+                        }
+                    }
+                }],
+                series: [{
+                    // name: '实名率',
+                    type: 'line',
+                    // symbol: 'circle',
+                    //symbolSize: 5,
+                    // showSymbol: false,
+                    // markPoint: { // markLine 也是同理
+                    //   data: [{
+                    //     coord: [0,1,2,3,4], // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
+                    //     // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
+                    //     // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
+                    //     // 而只能写成 [string, string, ...]
+                    //   }]
+                    // },
+                    lineStyle: {
+                        normal: {
+                            width: 2
+                        }
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: 'rgba(166,154,228,0.40)',
+                            //  shadowColor: 'rgba(0, 0, 0, 0.1)',
+                            //shadowBlur: 10
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            areaStyle: {
+                                type: 'default'
+                            },
+                            color: 'rgba(166,154,228)',
+                        },
+                        emphasis: {
+                            // color: 'rgb(0,196,132)',
+                            borderColor: 'rgba(0,196,132,0.2)',
+                            extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
+                            // borderWidth: 10
+                        }
+                    },
+                    data: arrTotal
+                }]
+            });
+        }
+    }
+}
+
+</script>
+
+<style>
+</style>

TEAMModelOS/ClientApp/components/graph/legendPie.vue

@@ -0,0 +1,89 @@
+<template>
+    <div :id="id" style="height: 100%;width:100%;"></div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    },
+    props:{
+        id:{
+            type: String
+        }
+    },
+    mounted(){
+        this.drawLine();
+    },
+    methods:{
+        drawLine(){
+            let _this = this
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById(this.id));
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b}: {c} ({d}%)"
+                },
+                series: [
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            normal: {
+                                show: false,
+                                position: 'center',
+                                formatter: '{text|{b}}\n{value|{d}%}',
+                                rich: {
+                                    text: {
+                                        color: "#fefefe",
+                                        // fontSize: 14,
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                        padding: 5
+                                    },
+                                    value: {
+                                        color: "#fefefe",
+                                        // fontSize: 24,
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                    },
+                                }
+                            },
+                            emphasis: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 46,
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data:[
+                            {value:335, name:'直接访问'},
+                            {value:310, name:'邮件营销'},
+                            {value:234, name:'联盟广告'},
+                            {value:135, name:'视频广告'},
+                            {value:1548, name:'搜索引擎'}
+                        ]
+                    }
+                ]
+            });
+            myChart.dispatchAction({
+                type: 'highlight',
+                // seriesIndex: 1,
+                dataIndex: 2
+            });
+        }
+    }
+}
+
+</script>
+
+<style>
+</style>

TEAMModelOS/ClientApp/components/graph/nestingPie.vue

@@ -0,0 +1,124 @@
+<template>
+    <div :id="id" style="height: 100%;width:100%;padding: 20px;"></div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    },
+    props:{
+        id:{
+            type: String
+        }
+    },
+    mounted(){
+        this.drawLine();
+    },
+    methods:{
+        drawLine(){
+            let _this = this
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById(this.id));
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b}: {c} ({d}%)"
+                },
+                // legend: {
+                //     orient: 'vertical',
+                //     x: 'left',
+                //     data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
+                // },
+                series: [
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        selectedMode: 'single',
+                        radius: [0, '30%'],
+
+                        label: {
+                            normal: {
+                                position: 'inner'
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data:[
+                            {value:335, name:'直达', selected:true},
+                            {value:679, name:'营销广告'},
+                            {value:1548, name:'搜索引擎'}
+                        ]
+                    },
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        radius: ['40%', '55%'],
+                        label: {
+                            normal: {
+                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+                                backgroundColor: '#eee',
+                                borderColor: '#aaa',
+                                borderWidth: 1,
+                                borderRadius: 4,
+                                // shadowBlur:3,
+                                // shadowOffsetX: 2,
+                                // shadowOffsetY: 2,
+                                // shadowColor: '#999',
+                                // padding: [0, 7],
+                                rich: {
+                                    a: {
+                                        color: '#999',
+                                        lineHeight: 22,
+                                        align: 'center'
+                                    },
+                                    // abg: {
+                                    //     backgroundColor: '#333',
+                                    //     width: '100%',
+                                    //     align: 'right',
+                                    //     height: 22,
+                                    //     borderRadius: [4, 4, 0, 0]
+                                    // },
+                                    hr: {
+                                        borderColor: '#aaa',
+                                        width: '100%',
+                                        borderWidth: 0.5,
+                                        height: 0
+                                    },
+                                    b: {
+                                        fontSize: 16,
+                                        lineHeight: 33
+                                    },
+                                    per: {
+                                        color: '#eee',
+                                        backgroundColor: '#334455',
+                                        padding: [2, 4],
+                                        borderRadius: 2
+                                    }
+                                }
+                            }
+                        },
+                        data:[
+                            {value:335, name:'直达'},
+                            {value:310, name:'邮件营销'},
+                            {value:234, name:'联盟广告'},
+                            {value:135, name:'视频广告'},
+                            {value:1048, name:'百度'},
+                            {value:251, name:'谷歌'},
+                            {value:147, name:'必应'},
+                            {value:102, name:'其他'}
+                        ]
+                    }
+                ]         
+            });
+        }
+    }
+}
+
+</script>
+
+<style>
+</style>

TEAMModelOS/ClientApp/components/graph/ringPie.vue

@@ -0,0 +1,99 @@
+<template>
+    <div :id="id" style="height: 100%;width:100%;"></div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    },
+    props:{
+        id:{
+            type: String
+        },
+        mouseoverCallBack: {}, //[String] mouseover時emit的CallBack名
+    },
+    mounted(){
+        this.drawLine();
+    },
+    methods:{
+        drawLine(){
+            let _this = this
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById(this.id));
+            let data = [
+                {value:335, name:'直接访问'},
+                {value:310, name:'邮件营销'},
+                {value:234, name:'联盟广告'},
+                {value:135, name:'视频广告'},
+                {value:1548, name:'搜索引擎'}
+            ]
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b}: {c} ({d}%)"
+                },
+                series: [
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            normal: {
+                                show: false,
+                                position: 'center',
+                                formatter: '{text|{b}}\n{value|{d}%}',
+                                rich: {
+                                    text: {
+                                        color: "#fefefe",
+                                        // fontSize: 14,
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                        padding: 5
+                                    },
+                                    value: {
+                                        color: "#fefefe",
+                                        // fontSize: 24,
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                    },
+                                }
+                            },
+                            emphasis: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 46,
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data: data
+                    }
+                ]
+            });
+            myChart.dispatchAction({
+                type: 'highlight',
+                // seriesIndex: 1,
+                dataIndex: 2
+            });
+            //mouseover觸發項
+            if(typeof this.mouseoverCallBack !== "undefined") {
+                let callBackString = this.mouseoverCallBack;
+                myChart.on('highlight', function (params) {
+                    console.log(params)
+                    vm.$emit(callBackString, data[params.batch[0].dataIndex]);
+                });
+            }
+        }
+    }
+}
+
+</script>
+
+<style>
+</style>

TEAMModelOS/ClientApp/css/site.css

@@ -76,4 +76,61 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+}
+
+/* 邊角框設計 
+    使用時，最外層一定要有position: relative;
+*/
+.image-border {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+}        
+.image-border-left-top {
+    top: -1px;
+    left: -1px;
+    border-left: 2px solid #FFFFFF;
+    border-top: 2px solid #FFFFFF;
+}
+.image-border-right-top {
+    top: -1px;
+    right: -1px;
+    border-right: 2px solid #FFFFFF;
+    border-top: 2px solid #FFFFFF;
+}   
+.image-border-left-bottom {
+    bottom: -1px;
+    left: -1px;
+    border-bottom: 2px solid #FFFFFF;
+    border-left: 2px solid #FFFFFF;
+}    
+.image-border-lright-bottom {
+    bottom: -1px;
+    right: -1px;
+    border-right: 2px solid #FFFFFF;
+    border-bottom: 2px solid #FFFFFF;
+}
+
+/* 拉軸隱藏
+用兩個div將拉軸藏起來
+*/
+.scroll-outer-container{
+    position: relative;
+    overflow: hidden;
+}
+.scroll-outer-container .scroll-inner-container{
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: -18px;
+	bottom: 0;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+/* 省略字符*/
+.ellipsis {
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }

TEAMModelOS/ClientApp/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter)
 
 let router = new VueRouter(
 {
-  mode: 'history',
+  //mode: 'history',
   routes
 },
 )

TEAMModelOS/ClientApp/router/routes.js

@@ -1,11 +1,39 @@
 import Login from '@/view/login'
 import ServerSideLogin from '@/view/serverside/login'
 import HTTP404 from '@/view/404'
+import SAIndex from '@/view/SAindex'
 import Index from '@/view/index'
+import SmartDashBoard from '@/view/smart-dashboard/smart-dashboard'
 
 export const routes = [
-  { name: 'login', path: '/login', component: Login, display: 'Home', icon: 'home' },
-  { name: 'ServerSideLogin', path: '/serverside/login', component: ServerSideLogin, display: 'Home', icon: 'home' },
+  { name: 'login', path: '/login', component: Login },
+  { name: 'ServerSideLogin', path: '/serverside/login', component: ServerSideLogin},
+  { name: 'SmartDashBoard', path: '/smartdashboard', component: SmartDashBoard },  
   { name: 'index', path: '/', component: Index },
-  { name: 'HTTP404', path: '/*', component: HTTP404, display: 'Home', icon: 'home' },
+  { name: 'saindex', path: '/saindex', component: SAIndex },
+ // { name: 'HTTP404', path: '/*', component: HTTP404, display: 'Home', icon: 'home' },
+  {
+    path: '/Syllabus',
+    name: 'SyllabusIndex',
+    component: resolve => require(['@/view/SyIndex.vue'], resolve),
+    children: [
+      {
+        path: '/',
+        component: resolve => require(['@/components/BaseContent.vue'], resolve),
+      },
+      {
+        path: '/BaseContent',
+        component: resolve => require(['@/components/BaseContent.vue'], resolve),
+      },
+      {
+        path: '/BasePreview',
+        component: resolve => require(['@/components/BasePreview.vue'], resolve),
+      },
+      {
+        path: '/BasePrepare',
+        component: resolve => require(['@/components/BasePrepare.vue'], resolve),
+      },
+    ]
+  },
+
 ]

TEAMModelOS/ClientApp/store/index.js

@@ -31,42 +31,158 @@ export default new Vuex.Store({
   mutations,
   actions,
   state: {
+    //选择关注年级
+    selectgrade: [],
+    //选择关注学期
+    selectterm: {},
+    //选择某次考试
+    selectexam: {},
+    //基础数据
+    basicsdata: {},
+    //柱状图
     zhuxhuang: {
-      mode: false,
-      titledata: [],
-      object_name: [],
-      languagedata: [],
-      mathdata: [],
-      englishdata: [],
-      //物理
-      physicsdata: [],
-      //化学
-      chemistrydata: [],
-      //生物
-      biologydata: [],
-      area_score: [],
-    },
-    leida: {
-      mode: false,
-      titledata: [],
-      dataname: [],
-      data1: [],
-      data2: [],
-    },
-    pie: {
-      mode: false,
-      one: [],
-      one_num: [],
-      two: [],
-      two_num: [],
-      three: [],
-      three_num: [],
-    },
-    linechart: {
-      mode: false,
-      obj_name: [],
-      obj_data: [],
-      obj_series: [],
+      //"mode": false,
+      //"titledata": [],
+      //"object_name": [],
+      //"languagedata": [],
+      //"mathdata": [],
+      //"englishdata": [],
+      //"physicsdata": [],
+      //"chemistrydata": [],
+      //"biologydata": [],
+      //"area_score": []
     },
+    //雷达图
+    leida: {},
+    //饼图
+    pie: {},
+     //折线图（大）
+    linechart: {},
+    //考试类型选择
+    examtype: {},
+
+    periodList: [{
+      value: '1',
+      label: '1',
+      children: [
+        {
+          value: '1-1',
+          label: '1-1',
+          children: [
+            {
+              value: '1-1-1',
+              label: '1-1-1',
+              children: [
+                {
+                  value: '1-1-1-1',
+                  label: '1-1-1-1',
+                }
+              ]
+            },
+            {
+              value: '1-1-2',
+              label: '1-1-2',
+              children: [
+                {
+                  value: '1-1-2-1',
+                  label: '1-1-2-1',
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: '1-2',
+          label: '1-2',
+          children: [
+            {
+              value: '1-2-1',
+              label: '1-2-1',
+              children: [
+                {
+                  value: '1-2-1-1',
+                  label: '1-2-1-1',
+                }
+              ]
+            },
+            {
+              value: '1-2-2',
+              label: '1-2-2',
+              children: [
+                {
+                  value: '1-2-2-1',
+                  label: '1-2-2-1',
+                }
+              ]
+            }
+          ]
+        },
+
+      ]
+    }, {
+      value: '2',
+      label: '2',
+      children: [
+        {
+          value: '2-1',
+          label: '2-1',
+          children: [
+            {
+              value: '2-1-1',
+              label: '2-1-1',
+              children: [
+                {
+                  value: '2-1-1-1',
+                  label: '2-1-1-1',
+                }]
+            },
+            {
+              value: '2-1-2',
+              label: '2-1-2',
+              children: [
+                {
+                  value: '2-1-2-1',
+                  label: '2-1-2-1'
+                },
+                {
+                  value: '2-1-2-2',
+                  label: '2-1-2-2'
+                }
+              ]
+            },
+          ]
+        },
+        {
+          value: '2-2',
+          label: '2-2',
+          children: [
+            {
+              value: '2-2-1',
+              label: '2-2-1',
+              children: [
+                {
+                  value: '2-2-1-1',
+                  label: '2-2-1-1',
+                }]
+            },
+            {
+              value: '2-2-2',
+              label: '2-2-2',
+              children: [
+                {
+                  value: '2-2-2-1',
+                  label: '2-2-2-1'
+                },
+                {
+                  value: '2-2-2-2',
+                  label: '2-2-2-2'
+                }
+              ]
+            },
+          ]
+        },
+
+      ]
+    }]
   },
 })

TEAMModelOS/ClientApp/utils/http.js

@@ -8,7 +8,7 @@ axios.interceptors.request.use(
     // const token = getCookie('名称');
     config.data = JSON.stringify(config.data);
     config.headers = {
-      'Content-Type':'application/x-www-form-urlencoded'
+      'Content-Type':'application/json'
     }
     // if(token){
     //   config.params = {'token':token}
@@ -68,7 +68,8 @@ export function fetch(url,params={}){
  * @returns {Promise}
  */
 
-export function post(url,data = {}){
+export function post(url, data = {}) {
+  data.method = url;
   return new Promise((resolve,reject) => {
     axios.post(url,data)
       .then(response => {

TEAMModelOS/ClientApp/utils/public.js

@@ -0,0 +1,8 @@
+export default{
+    randomId:function(){
+        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+    },
+    guid:function(){
+        return (this.randomId()+this.randomId()+"-"+this.randomId()+"-"+this.randomId()+"-"+this.randomId()+"-"+this.randomId()+this.randomId()+this.randomId());
+    }
+}

TEAMModelOS/ClientApp/view/SAindex.vue

@@ -0,0 +1,215 @@
+<template>
+    <Row  class="index">
+     <Headers></Headers>
+    <Row class="index_box">
+     <Col span="24" class="content_box">
+      <div class="index_box_title"><p>学情分析服务</p></div>
+      <Row class="content">
+        <Col span="4" class="left_box">
+            <ChooseAttention></ChooseAttention>
+            <ChooseExam></ChooseExam>
+        </Col>
+        <Col  span="20" class="right_box">
+          <Basics></Basics>
+          <Col class="left_echarts">
+            <Bargraph></Bargraph>
+          </Col>
+          <Col class="center_echarts">
+            <Radargraph></Radargraph>
+          </Col>
+          <Col class="right_echarts">
+            <Subjectsmanifestation></Subjectsmanifestation>
+          </Col>
+        </Col>
+        <Col  span="20" class="bottom_linechart">
+          <LineChart></LineChart>
+        </Col>
+      </Row>
+      </Col>
+    </Row>
+    </Row>
+</template>
+
+<script>
+  import Headers from '../common/headers.vue'
+  import ChooseAttention from '../components/SAchooseattention.vue'
+  import ChooseExam from '../components/SAchooseexam.vue'
+  import Basics from '../components/SAbasics.vue'
+  import Bargraph from '../components/SAbargraph.vue'
+  import Radargraph from '../components/SAradargraph.vue'
+  import Subjectsmanifestation from '../components/SAsubjectsmanifestation.vue'
+  import LineChart from '../components/SAlinechart.vue'
+    export default {
+      components:{
+        Headers,
+        ChooseAttention,
+        ChooseExam,
+        Basics,
+        Bargraph,
+        Radargraph,
+        Subjectsmanifestation,
+        LineChart
+      },
+      data(){
+          return{
+
+                }
+      },
+      mounted(){
+        this.init();
+        this.ceshiApi();
+      },
+      methods: {
+        init(){
+          //柱状图
+          //let yuwen = ["103","110","108","99","103","110","120"];
+          //let shuxue = ["98","100","105","109","85","90","103"];
+          //let yingyu = ["110","102","103","100","99","93","83"];
+          //let wuli = ["77","80","75","69","80","77","82"];
+          //let huaxue = ["63","75","78","81","90","72","75"];
+          //let shengwu = ["68","70","72","78","74","76","79"];
+          //let quyu = ["526","526","526","526","526","526","526"];
+          //let object= ["成都七中","成都四中","成都九中","成都树德中学","师大一中","西川中学","成都市石室中学"];
+          //let name=["语文","数学","英语","物理","化学","生物"];
+          //this.$store.state.zhuxhuang.titledata = name;
+          //this.$store.state.zhuxhuang.object_name = object;
+          //this.$store.state.zhuxhuang.languagedata = yuwen;
+          //this.$store.state.zhuxhuang.mathdata = shuxue;
+          //this.$store.state.zhuxhuang.englishdata = yingyu;
+          //this.$store.state.zhuxhuang.physicsdata = wuli;
+          //this.$store.state.zhuxhuang.chemistrydata = huaxue;
+          //this.$store.state.zhuxhuang.biologydata = shengwu;
+          //this.$store.state.zhuxhuang.area_score = quyu;
+          //this.$store.state.zhuxhuang.mode = true;
+
+          //雷达图
+          //let mingcheng=["校级数据","区级数据"];
+          //let dataname=["校级 VS 区域"];
+          //let data1=["103","110","101","82","78","66"];
+          //let data2=["99","103","108","88","69","79"];
+          //this.$store.state.leida.titledata = mingcheng;
+          //this.$store.state.leida.dataname = dataname;
+          //this.$store.state.leida.data1 = data1;
+          //this.$store.state.leida.data2 = data2;
+          //this.$store.state.leida.mode = true;
+
+
+          //饼图
+          //let one=["80"];
+          //let one_num=["20"];
+          //let two=["54"];
+          //let two_num=["46"];
+          //let three=["72"];
+          //let three_num=["28"];
+          //let four=["66"];
+          //let four_num=["34"];
+          //let five=["60"];
+          //let five_num=["40"];
+          //let six=["82"];
+          //let six_num=["18"];
+          //this.$store.state.pie.one=one;
+          //this.$store.state.pie.one_num=one_num;
+          //this.$store.state.pie.two=two;
+          //this.$store.state.pie.two_num=two_num;
+          //this.$store.state.pie.three=three;
+          //this.$store.state.pie.three_num=three_num;
+          //this.$store.state.pie.four=four;
+          //this.$store.state.pie.four_num=four_num;
+          //this.$store.state.pie.five=five;
+          //this.$store.state.pie.five_num=five_num;
+          //this.$store.state.pie.six=six;
+          //this.$store.state.pie.six_num=six_num;
+          //this.$store.state.pie.mode = true;
+
+          //折线图
+          //this.$store.state.linechart.mode = true;
+          //let line_name=["成都七中","成都九中","成都树德","川师附中","成都四中"];
+          //let line_data=["2019第一次区级联考","2019第二次区级联考","2019第三次区级联考","2019第四次区级联考","2019第五次区级联考"];
+          //let line_series=[
+          //                  {"name":'成都七中',"data":["580","610","530","490","550"]},
+          //                  {"name":'成都九中',"data":["530","620","550","500","520"]},
+          //                  {"name":'成都树德',"data":["560","600","540","530","510"]},
+          //                  {"name":'川师附中',"data":["520","580","530","510","520"]},
+          //                  {"name":'成都四中',"data":["540","605","548","515","540"]},
+          //                ];
+          //this.$store.state.linechart.obj_name=line_name;
+          //this.$store.state.linechart.obj_data=line_data;
+          //this.$store.state.linechart.obj_series=line_series;
+
+        },
+        ceshiApi(){
+          //this.$get('/api/v2/movie/top250')
+          //  .then((response) => {
+          //    console.log(response,1111111)
+          //  })
+        }
+      },
+    }
+</script>
+<style>
+  body{
+    margin: 0px !important;
+    font-family: "微软雅黑";
+  }
+</style>
+
+<style scoped>
+.index{
+  width:100%;
+  height:auto;
+}
+.index_box{
+  background-color:#dee2e5 ;
+
+}
+.index_box_title{
+  width:100%;
+  font-size: 1.2rem;
+  color:#898d90;
+  padding: 1% 2%;
+}
+  .content{
+    width:96%;
+    height:980px;
+    /*border:1px solid blue;*/
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-bottom: 3%;
+    background-color: #fdfdfd;
+    box-shadow: -2px 0 5px #a5acb2, /*左边阴影*/
+                2px 0 5px #a5acb2, /*右边阴影*/
+                0 -2px 5px #a5acb2, /*顶部阴影*/
+                0 4px 5px #a5acb2; /*底边阴影*/
+  }
+  .left_echarts{
+    width:32%;
+    height:auto;
+    float: left;
+    border-right:1px solid #d9dadc;
+  }
+  .center_echarts{
+    width:26%;
+    height:auto;
+    float: left;
+    /*border:1px solid blue;*/
+    border-right:1px solid #d9dadc;
+  }
+  .right_echarts{
+    width:42%;
+    height:auto;
+    float: left;
+    /*border:1px solid green;*/
+  }
+  .bargraph_box{
+    width:100%;
+    font-size: 1.1rem;
+    font-weight: bold;
+  }
+  /*.left_box{*/
+    /*border: 1px solid red;*/
+  /*}*/
+  .right_box{
+    /*padding-bottom: 1%;*/
+    border-bottom:1px solid #d9dadc;
+  }
+</style>

TEAMModelOS/ClientApp/view/SyIndex.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="index">
+      <div class="header_box">
+        <SyHeader></SyHeader>
+      </div>
+      <div class="ztree_box">
+        <Ztree></Ztree>
+      </div>
+      <div class="select_box">
+      	<router-view></router-view>
+      </div>
+    </div>
+</template>
+<script>
+  import SyHeader from '@/common/header.vue'
+  import Ztree from '@/common/Ztree.vue'
+  import BaseContent from '@/components/BaseContent.vue'
+  import BasePreview from '@/components/BasePreview.vue'
+  import BasePrepare from '@/components/BasePrepare.vue'
+    export default {
+      name: "app",
+      components:{
+        SyHeader,
+        Ztree,
+        BaseContent,
+        BasePreview,
+        BasePrepare
+      },
+      data(){
+        return{
+          ys_box:'display:inline',
+          ys:'display:none',
+        }
+      },
+      methods:{
+
+      },
+    }
+</script>
+<style scoped>
+.index{
+  width:100%;
+  height:auto;
+  min-width: 1366px;
+  -o-user-select: none;
+  -moz-user-select: none; /*火狐 firefox*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10+*/
+  -khtml-user-select :none; /*早期的浏览器*/
+  user-select: none; 
+}
+.header_box{
+  width:100%;
+  height:140px;
+}
+.ztree_box{
+  width:19%;
+  min-height:840px;
+  padding-left: 15px;
+  padding-top:1% ;
+  float: left;
+}
+.select_box,.modification_box{
+  width:81%;
+  float: left;
+  border-left: 1px rgb(228, 228, 228) solid;
+  min-height: 840px;
+}
+</style>

TEAMModelOS/ClientApp/view/index.vue

@@ -1,215 +1,84 @@
 <template>
-    <Row  class="index">
-     <Headers></Headers>
-    <Row class="index_box">
-     <Col span="24" class="content_box">
-      <div class="index_box_title"><p>学情分析服务</p></div>
-      <Row class="content">
-        <Col span="4" class="left_box">
-            <ChooseAttention></ChooseAttention>
-            <ChooseExam></ChooseExam>
-        </Col>
-        <Col  span="20" class="right_box">
-          <Basics></Basics>
-          <Col class="left_echarts">
-            <Bargraph></Bargraph>
-          </Col>
-          <Col class="center_echarts">
-            <Radargraph></Radargraph>
-          </Col>
-          <Col class="right_echarts">
-            <Subjectsmanifestation></Subjectsmanifestation>
-          </Col>
-        </Col>
-        <Col  span="20" class="bottom_linechart">
-          <LineChart></LineChart>
-        </Col>
-      </Row>
-      </Col>
-    </Row>
-    </Row>
+  <div id="app">
+    <div class="main-content centerCol">
+      <img src="../assets/tmd_logo.png" class="logo" />
+      <div class="overlay-wrap center">
+        <div class="main-btn centerCol" @click="sa()">
+          <img src="http://chq.dygl.pujiaoyun.cn:80/static/img/pic.png" alt="">
+          <h4 class="color1">学情分析</h4>
+        </div>
+        <div class="main-btn centerCol" @click="sy()">
+          <img src="http://chq.dygl.pujiaoyun.cn:80/static/img/user.png" alt="">
+          <h4 class="color1">课纲系统</h4>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-
 <script>
-  import Headers from '../components/headers.vue'
-  import ChooseAttention from '../components/ChooseAttention.vue'
-  import ChooseExam from '../components/ChooseExam.vue'
-  import Basics from '../components/basics.vue'
-  import Bargraph from '../components/bargraph.vue'
-  import Radargraph from '../components/radargraph.vue'
-  import Subjectsmanifestation from '../components/SubjectsManifestation.vue'
-  import LineChart from '../components/linechart.vue'
-    export default {
-      components:{
-        Headers,
-        ChooseAttention,
-        ChooseExam,
-        Basics,
-        Bargraph,
-        Radargraph,
-        Subjectsmanifestation,
-        LineChart
-      },
-      data(){
-          return{
-
-                }
-      },
-      mounted(){
-        this.init();
-        this.ceshiApi();
-      },
-      methods: {
-        init(){
-          //柱状图
-          //let yuwen = ["103","110","108","99","103","110","120"];
-          //let shuxue = ["98","100","105","109","85","90","103"];
-          //let yingyu = ["110","102","103","100","99","93","83"];
-          //let wuli = ["77","80","75","69","80","77","82"];
-          //let huaxue = ["63","75","78","81","90","72","75"];
-          //let shengwu = ["68","70","72","78","74","76","79"];
-          //let quyu = ["526","526","526","526","526","526","526"];
-          //let object= ["成都七中","成都四中","成都九中","成都树德中学","师大一中","西川中学","成都市石室中学"];
-          //let name=["语文","数学","英语","物理","化学","生物"];
-          //this.$store.state.zhuxhuang.titledata = name;
-          //this.$store.state.zhuxhuang.object_name = object;
-          //this.$store.state.zhuxhuang.languagedata = yuwen;
-          //this.$store.state.zhuxhuang.mathdata = shuxue;
-          //this.$store.state.zhuxhuang.englishdata = yingyu;
-          //this.$store.state.zhuxhuang.physicsdata = wuli;
-          //this.$store.state.zhuxhuang.chemistrydata = huaxue;
-          //this.$store.state.zhuxhuang.biologydata = shengwu;
-          //this.$store.state.zhuxhuang.area_score = quyu;
-          //this.$store.state.zhuxhuang.mode = true;
-
-          //雷达图
-          //let mingcheng=["校级数据","区级数据"];
-          //let dataname=["校级 VS 区域"];
-          //let data1=["103","110","101","82","78","66"];
-          //let data2=["99","103","108","88","69","79"];
-          //this.$store.state.leida.titledata = mingcheng;
-          //this.$store.state.leida.dataname = dataname;
-          //this.$store.state.leida.data1 = data1;
-          //this.$store.state.leida.data2 = data2;
-          //this.$store.state.leida.mode = true;
-
-
-          //饼图
-          //let one=["80"];
-          //let one_num=["20"];
-          //let two=["54"];
-          //let two_num=["46"];
-          //let three=["72"];
-          //let three_num=["28"];
-          //let four=["66"];
-          //let four_num=["34"];
-          //let five=["60"];
-          //let five_num=["40"];
-          //let six=["82"];
-          //let six_num=["18"];
-          //this.$store.state.pie.one=one;
-          //this.$store.state.pie.one_num=one_num;
-          //this.$store.state.pie.two=two;
-          //this.$store.state.pie.two_num=two_num;
-          //this.$store.state.pie.three=three;
-          //this.$store.state.pie.three_num=three_num;
-          //this.$store.state.pie.four=four;
-          //this.$store.state.pie.four_num=four_num;
-          //this.$store.state.pie.five=five;
-          //this.$store.state.pie.five_num=five_num;
-          //this.$store.state.pie.six=six;
-          //this.$store.state.pie.six_num=six_num;
-          //this.$store.state.pie.mode = true;
-
-          //折线图
-          //this.$store.state.linechart.mode = true;
-          //let line_name=["成都七中","成都九中","成都树德","川师附中","成都四中"];
-          //let line_data=["2019第一次区级联考","2019第二次区级联考","2019第三次区级联考","2019第四次区级联考","2019第五次区级联考"];
-          //let line_series=[
-          //                  {"name":'成都七中',"data":["580","610","530","490","550"]},
-          //                  {"name":'成都九中',"data":["530","620","550","500","520"]},
-          //                  {"name":'成都树德',"data":["560","600","540","530","510"]},
-          //                  {"name":'川师附中',"data":["520","580","530","510","520"]},
-          //                  {"name":'成都四中',"data":["540","605","548","515","540"]},
-          //                ];
-          //this.$store.state.linechart.obj_name=line_name;
-          //this.$store.state.linechart.obj_data=line_data;
-          //this.$store.state.linechart.obj_series=line_series;
-
-        },
-        ceshiApi(){
-          //this.$get('/api/v2/movie/top250')
-          //  .then((response) => {
-          //    console.log(response,1111111)
-          //  })
-        }
+  export default {
+    data() {
+      return {}
+    },
+    methods: {
+      sa() {
+        this.$router.replace('/saindex')
       },
-    }
+      sy() {
+        this.$router.replace('/Syllabus')
+      }
+          }
+  }
 </script>
 <style>
-  body{
-    margin: 0px !important;
-    font-family: "微软雅黑";
+  html, body, #app {
+    height: 100% !important;
   }
-</style>
-
-<style scoped>
-.index{
-  width:100%;
-  height:auto;
-}
-.index_box{
-  background-color:#dee2e5 ;
-
-}
-.index_box_title{
-  width:100%;
-  font-size: 1.2rem;
-  color:#898d90;
-  padding: 1% 2%;
-}
-  .content{
-    width:96%;
-    height:980px;
-    /*border:1px solid blue;*/
-    margin-left: 2%;
-    margin-right: 2%;
-    margin-bottom: 3%;
-    background-color: #fdfdfd;
-    box-shadow: -2px 0 5px #a5acb2, /*左边阴影*/
-                2px 0 5px #a5acb2, /*右边阴影*/
-                0 -2px 5px #a5acb2, /*顶部阴影*/
-                0 4px 5px #a5acb2; /*底边阴影*/
+  .main-content {
+    width: 100%;
+    min-width: 1200px;
+    background: url("http://chq.dygl.pujiaoyun.cn/static/img/banner.jpg") center 100% no-repeat;
+    height: 100%;
+    position: relative;
+  }
+  .overlay-wrap {
+    width: 570px;
+    height: 290px;
+    background-color: rgba(218, 218, 218, 0.18);
+    margin-top:50px;
   }
-  .left_echarts{
-    width:32%;
-    height:auto;
-    float: left;
-    border-right:1px solid #d9dadc;
+  .overlay-wrap .main-btn {
+    height: 90%;
+    width: 45%;
+    cursor: pointer;
+    font-size: 18px;
+    color: #fff;
+    background-color:rgba(179,179,179,.22);
+    border: 0;
+    margin: 5% 2%;
   }
-  .center_echarts{
-    width:26%;
-    height:auto;
-    float: left;
-    /*border:1px solid blue;*/
-    border-right:1px solid #d9dadc;
+    .overlay-wrap .main-btn:hover {
+      background: rgba(179,179,179,.42);
+    }
+  .center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
-  .right_echarts{
-    width:42%;
-    height:auto;
-    float: left;
-    /*border:1px solid green;*/
+  .centerCol {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
-  .bargraph_box{
-    width:100%;
-    font-size: 1.1rem;
-    font-weight: bold;
+  .color1 {
+     margin-top:20px;
   }
-  /*.left_box{*/
-    /*border: 1px solid red;*/
-  /*}*/
-  .right_box{
-    /*padding-bottom: 1%;*/
-    border-bottom:1px solid #d9dadc;
+  .logo {
+     width:200px;
+     height:200px;
+     margin-bottom:50px;
   }
+
 </style>

TEAMModelOS/ClientApp/view/smart-dashboard/smart-dashboard.less

@@ -0,0 +1,197 @@
+#smart-dashboard{
+  width: 100%;
+  height: 100%;
+  background-color: #5981ad;
+  .Header{
+      width: 100%;
+      position: fixed;
+      padding: 10px 20px;
+      z-index: 1;
+      background-color: #fff;
+      .smart-mark{
+          letter-spacing: 3px;
+          color: #333;
+      }
+      .smart-markD{
+          letter-spacing: 3px;
+          color: #333;
+      }
+      .menu{
+          float: right;
+          height: initial;
+          background-color: transparent;
+          li{
+              color: #333;
+              line-height: initial;
+          }
+      }
+  }
+  .content{
+    padding-top: 40px;
+    height: 100%;
+    overflow: auto;
+    .box{
+      padding: 70px 0px 25px;
+      height: 100%;
+      margin: 0;
+      .block-1{
+        margin: 0 10px;
+        .classInfo{
+          padding: 15px 0 0 25px;
+          h5{
+            font-size: 1rem;
+          }
+          cursor: pointer;
+          &:hover{
+            background: -webkit-linear-gradient(left,transparent,#57a3f336);
+            background: -o-linear-gradient(right,transparent,#57a3f336);
+            background: -moz-linear-gradient(right,transparent,#57a3f336);
+            background: linear-gradient(to right,transparent,#57a3f336);
+          }
+        }
+      }
+      .block-2{
+        margin: 0 10px;
+        height: 100%;
+        .info-row{
+          height: 100%;
+          .info-col-main{
+            border-right: solid 1px #fff;
+            position: relative;
+            background-color: #343a4040;
+            .info-col-content{
+              h5{
+                font-size: 1.25rem;
+                font-weight: 100;
+              }
+              padding: 0 0 17px 25px;
+              color: #fefefe;
+              font-size: 0.82rem;
+              position: absolute;
+              bottom:0;
+            }
+          }
+          .info-col-secondary{
+            background-color: #343a4073;
+            position: relative;
+            .info-col-content{
+              padding: 0 0 17px 10px;
+              font-size: 0.82rem;
+              color: #fefefe;
+              position: absolute;
+              bottom:0;
+              width: 100%;
+              h5{
+                font-size: 1.18rem;
+                font-weight: 100;
+              }
+              &.border-right{
+                border-right: solid 1px #fff;
+              }
+            }
+          }
+        }
+      }
+      .block-3{
+        margin: 0 10px;
+        height: 100%;
+        .today-class-content{
+          height: 100%;
+          .title{
+            height: 20%;
+            font-size: 1rem;
+            color:#fff;
+            padding: 15px 0 15px 15px;
+            font-weight: 100;
+          }
+          .contents{
+            height: 80%;
+            .chart{
+              height: 100%;
+            }
+            .detail{
+              height: 100%;
+              .detail-row{
+                height: 100%;
+                padding: 5px 0;
+                .detail-col{
+                  height:32.3333%;
+                  color: #fefefe;
+                  .detail-title{
+                    display: block;
+                    color: #ccc;
+                    padding-left: 5px;
+                    border-left: 2px solid #333;
+                    &-border-red{
+                      border-left-color: red;
+                    }
+                    &-border-green{
+                      border-left-color: green;
+                    }
+                    &-border-pink{
+                      border-left-color: pink;
+                    }
+                    &-border-yellow{
+                      border-left-color: yellow;
+                    }
+                    &-border-blue{
+                      border-left-color: #2b85e4;
+                    }
+                    &-border-orange{
+                      border-left-color: orange;
+                    }
+                  }
+                  .detail-amount{
+                    font-size: 0.95rem;
+                    font-weight: 100;
+                  }
+                }
+              }
+
+            }
+          }
+        }
+      }
+      .block-4{
+        margin: 0 10px;
+        height: 100%;
+        .hours{
+          padding: 15px 0 0 15px;
+          .hours-title{
+            color: #ccc;
+          }
+          h5{
+            color: #ccc;
+            font-size: 1rem;
+            span{
+              padding:0 5px;
+              color: #fefefe;
+              font-size: 1.5rem;
+              font-weight: 300;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.block-border{
+  border: 1px solid #6c757d;
+}
+.scrollstyle::-webkit-scrollbar {
+    width: 5px;
+}
+.scrollstyle::-webkit-scrollbar-track {
+  margin: 6px;
+  background: transparent;
+}
+.scrollstyle::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #555;
+}
+.scrollstyle::-webkit-scrollbar-thumb:hover {
+  // background: #555;
+}
+.scrollstyle::-webkit-scrollbar-button {
+  display: none;
+}

TEAMModelOS/ClientApp/view/smart-dashboard/smart-dashboard.vue

@@ -0,0 +1,501 @@
+<style lang="less" scoped>
+  @import './smart-dashboard.less';
+</style>
+
+<template>
+    <div id="smart-dashboard">
+      <div class="Header">
+        <Row type="flex" justify="center" align="bottom">
+          <Col :span="4">
+            <h5 class="smart-mark">醍摩豆智慧雲</h5>
+          </Col>
+          <Col :span="7">
+            <span class="smart-markD"><Icon type="md-pin" />學情分數分析服務/學情儀表板</span>
+          </Col>
+          <Col :span="12">
+            <Menu class="menu" mode="horizontal" theme="dark">
+              <MenuItem name="1">
+                  <Icon type="ios-paper" />
+                  智慧程式管理
+              </MenuItem>
+              <MenuItem name="2">
+                  <Icon type="ios-people" />
+                  教材資源管理
+              </MenuItem>
+              <MenuItem name="3">
+                  <Icon type="ios-people" />
+                  學習活動服務
+              </MenuItem>
+              <MenuItem name="4">
+                  <Icon type="ios-construct" />
+                  班級智慧服務
+              </MenuItem>
+          </Menu>
+          </Col>
+          <Col :span="1" style="text-align: right;">
+            <Icon style="font-size: 24px; color: #333;" type="md-person" />
+          </Col>
+        </Row>
+      </div>
+      <div class="content">
+        <Row class="box" type="flex" justify="center">
+          <Col  :span="8"  class="block-1 block-border">
+            <!-- block-1 -->
+            <!-- 邊角設計 start-->
+            <div class="image-border image-border-left-top" ></div>
+            <div class="image-border image-border-right-top" ></div>
+            <div class="image-border image-border-left-bottom" ></div>
+            <div class="image-border image-border-lright-bottom" ></div>
+            <!-- 邊角設計 end-->
+            <div style="height: 100%;background-color: #f3f3f34a;">
+              <div style="height: 60%;width:100%;background-color: red;"></div>
+              <div style="height: 40%;width:100%;position: relative;overflow: auto;">
+                <div class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
+                  <div class="classInfo" v-for="(item, index) in classInfoData" :key="index">
+                    <Row type="flex" justify="center" align="bottom" style="border-bottom: solid 1px #fff;padding-bottom: 7px;">
+                      <Col :span="16">
+                        <h5 style="color: #fefefe;">{{ item.className }}</h5>
+                        <span class="ellipsis" style="display: block;margin-top: 5px;padding-right: 20px;color: #6c757d;">{{ item.classProduct }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.classDetail }}</span>
+                      </Col>
+                      <Col :span="8">
+                        <span class="ellipsis" style="color: #fefefe;max-width: 200px;display: inline-block;">{{ item.teacherName}}</span>&nbsp;<Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
+                        <Row  style="display: block;">
+                          <Col :span="12" style="color: #007bff;">
+                            教室熱度&nbsp;&nbsp;|&nbsp;&nbsp;{{item.classHot}}堂
+                          </Col>
+                          <Col :span="12" style="color: #00fb38;">
+                            {{ item.classMode == 0 ? '進行中' : '維護中'}}&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{item.classTime}}
+                          </Col>
+                        </Row>
+                      </Col>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Col>
+          <Col  :span="5" class="block-2">
+            <!-- block-2 -->
+            <div class="block-border" style="height: 12%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <Row type="flex" justify="center" class="info-row">
+                <Col :span="9" class="info-col-main">
+                  <div class="info-col-content">
+                    <span>教室開機數</span><br/><small>今日數量</small>
+                    <h5>8</h5>
+                  </div>            
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前7日平均</small>
+                    <h5>8</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前30日平均</small>
+                    <h5>8</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content">
+                    <br/><small>學期平均</small>
+                    <h5>8</h5>
+                  </div> 
+                </Col>
+              </Row>
+            </div>
+            <div style="height: 1.5%"></div>
+            <div class="block-border" style="height: 12%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <Row type="flex" justify="center" class="info-row">
+                <Col :span="9" class="info-col-main">
+                  <div class="info-col-content">
+                    <span>課堂開課數</span><br/><small>今日數量</small>
+                    <h5>54</h5>
+                  </div>            
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前7日平均</small>
+                    <h5>61.2</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前30日平均</small>
+                    <h5>58.9</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content">
+                    <br/><small>學期平均</small>
+                    <h5>53.1</h5>
+                  </div> 
+                </Col>
+              </Row>
+            </div>
+            <div style="height: 1.5%"></div>
+            <div class="block-border" style="height: 12%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <Row type="flex" justify="center" class="info-row">
+                <Col :span="9" class="info-col-main">
+                  <div class="info-col-content">
+                    <span>課堂參與人數</span><br/><small>今日數量</small>
+                    <h5>1,892</h5>
+                  </div>            
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前7日平均</small>
+                    <h5>2,542</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content border-right">
+                    <br/><small>前30日平均</small>
+                    <h5>2,301</h5>
+                  </div> 
+                </Col>
+                <Col :span="5"  class="info-col-secondary">
+                  <div class="info-col-content">
+                    <br/><small>學期平均</small>
+                    <h5>2,436</h5>
+                  </div> 
+                </Col>
+              </Row>
+            </div>
+            <div style="height: 1.5%"></div>
+            <div class="block-border" style="height: 29%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="background-color: #343a4040;height:20%;border-bottom: 1px solid #fff;">
+                <h5 style="font-size: 1rem;color:#fff;padding: 15px 0 15px 15px;font-weight: 100;">今日課堂數量變化</h5>
+              </div>
+              <div style="height: 80%;padding: 20px 0;">
+                <ClassLine :id="'line1'"></ClassLine>
+              </div>
+            </div>
+            <div style="height: 1.5%"></div>
+            <div class="block-border" style="height: 29%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="background-color: #343a4040;height: 20%;padding: 15px 0 15px 15px;border-bottom: 1px solid #fff;">
+                <h5 style="font-size: 1rem;color:#fff;font-weight: 100;">今日課堂效率值排名&nbsp;&nbsp;&nbsp;&nbsp;(8hr)</h5>
+              </div>
+              <div style="background-color: #343a4073;height: 80%;">
+                <Row type="flex" justify="center" align="middle" style="border-bottom: solid 1px #fff;color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
+                  <Col :span="16">
+                    <h5 style="font-size: 1rem;">GE303, 通識教室3</h5>
+                    <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數&nbsp;&nbsp;|&nbsp;&nbsp;4:23:09</span>
+                  </Col>
+                  <Col :span="8">
+                    <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">107.3%</h4>
+                  </Col>
+                  </Row>
+                <Row type="flex" justify="center" align="middle" style="border-bottom: solid 1px #fff;color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
+                  <Col :span="16">
+                    <h5 style="font-size: 1rem;">GE303, 通識教室7</h5>
+                    <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數&nbsp;&nbsp;|&nbsp;&nbsp;4:23:09</span>
+                  </Col>
+                  <Col :span="8">
+                    <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">69.4%</h4>
+                  </Col>
+                </Row>
+                <Row type="flex" justify="center" align="middle" style="color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
+                  <Col :span="16">
+                    <h5 style="font-size: 1rem;">GE303, 通識教室1</h5>
+                    <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數&nbsp;&nbsp;|&nbsp;&nbsp;4:23:09</span>
+                  </Col>
+                  <Col :span="8">
+                    <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">67.9%</h4>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+          </Col>
+          <Col  :span="5" class="block-3">
+            <div class="block-border" style="height: 23.91%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div class="today-class-content">
+                <h5 class="title">今日智慧教堂啟用類型</h5>
+                <Row class="contents">
+                  <Col :span="12" class="chart"><RingPie :id="'ringPie1'"></RingPie></Col>
+                  <Col :span="12" class="detail">
+                    <Row class="detail-row">
+                      <Col :span="12" class="detail-col">
+                        <span class="detail-title detail-title-border-red">新增檔案</span>
+                        <h5 class="detail-amount">33% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-green">書面問答</span>
+                        <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-pink" >匯入.pptx</span>
+                        <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-yellow" >PowerClick</span>
+                        <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-blue" >開啟.hte</span>
+                        <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-orange" >其他</span>
+                        <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      </Col>
+                    </Row>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+            <div style="height: 2.17%;"></div>
+            <div class="block-border" style="height: 23.91%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="height: 100%;" class="today-class-content">
+                <h5 class="title">今日各版本教室開課狀態</h5>
+                <Row class="contents">
+                  <Col :span="12" class="chart"><RingPie :id="'ringPie2'"></RingPie></Col>
+                  <Col :span="12" class="detail">
+                    <Row class="detail-row">
+                      <Col :span="12" class="detail-col">
+                        <span class="detail-title detail-title-border-red">HiTeach STD</span>
+                        <h5 class="detail-amount">26% <small>(8)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-green">HiTeach PRE</span>
+                        <h5 class="detail-amount" >25% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-pink" >HiTeach PRO</span>
+                        <h5 class="detail-amount" >18% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-yellow" >HiTeach Mobile</span>
+                        <h5 class="detail-amount" >10% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-blue" >HiTeach TBL</span>
+                        <h5 class="detail-amount" >21% <small>(168)</small></h5>
+                      </Col>
+                      <Col :span="12" class="detail-col">
+                        <span  class="detail-title detail-title-border-orange" >其他</span>
+                        <h5 class="detail-amount" >0% <small>(0)</small></h5>
+                      </Col>
+                    </Row>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+            <div style="height: 2.17%;"></div>
+            <div class="block-border" style="height: 47.84%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->              
+            </div>
+          </Col>
+          <Col  :span="4" class="block-4">
+            <div class="block-border" style="height: 10.43%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div class="hours">
+                <span class="hours-title">累積教堂時數</span>
+                <h5><span>4,234</span>h<span>43</span>m</h5>
+              </div>
+            </div>
+            <div style="height: 2.17%"></div>
+            <div class="block-border" style="height: 23.48%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="height: 100%;">
+                <h5 style="height: 20%;font-size: 1rem;color: #fff;padding: 10px 0 0 10px;font-weight: 100;">智慧教室版本</h5>
+                <Row type="flex" justify="center" align="middle" style="height: 80%;">
+                  <Col style="height: 100%;" :span="12"><RingPie :id="'ringPie3'"></RingPie></Col>
+                  <Col :span="12" style="padding-left: 7px;">
+                    <span>HiTeach3 STD</span>
+                    <h5 style="font-weight: 100;font-size: 2rem;color: #fefefe;">36.3%</h5>
+                    <span>累計 4 筆</span>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+            <div style="height: 2.17%"></div>
+            <div class="block-border" style="height: 23.48%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="height: 100%;">
+                <h5 style="height: 20%;font-size: 1rem;color: #fff;padding: 10px 0 0 10px;font-weight: 100;">課堂作業系統</h5>
+                <Row type="flex" justify="center" align="middle" style="height: 80%;">
+                  <Col style="height: 100%;" :span="12"><RingPie :id="'ringPie4'"></RingPie></Col>
+                  <Col :span="12" style="padding-left: 7px;">
+                    <span>windows 7 (SP3)</span>
+                    <h5 style="font-weight: 100;font-size: 2rem;color: #fefefe;">63.6%</h5>
+                    <span>累計 1185 次</span>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+            <div style="height: 2.17%"></div>
+            <div class="block-border" style="height: 36.1%;position: relative;">
+              <!-- 邊角設計 start-->
+              <div class="image-border image-border-left-top" ></div>
+              <div class="image-border image-border-right-top" ></div>
+              <div class="image-border image-border-left-bottom" ></div>
+              <div class="image-border image-border-lright-bottom" ></div>
+              <!-- 邊角設計 end-->
+              <div style="height: 100%">
+                <div style="height: 33.333333%">
+                  <Row type="flex" justify="center" align="middle" style="height: 100%;border-bottom: 1px solid #fff;margin-left: 20px;">
+                    <Col  :span="6">
+                      <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
+                    </Col>
+                    <Col style="height: 100%; padding: 10px;" :span="18">
+                      <span style="color: #ccc">最高效率課堂使用者</span>
+                      <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
+                      <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
+                      <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
+                    </Col>
+                  </Row>
+                </div>
+                <div style="height: 33.333333%">
+                  <Row type="flex" justify="center" align="middle" style="height: 100%;border-bottom: 1px solid #fff;margin-left: 20px;">
+                    <Col  :span="6">
+                      <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
+                    </Col>
+                    <Col style="height: 100%; padding: 10px;" :span="18">
+                      <span style="color: #ccc">最高效率課堂使用者</span>
+                      <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
+                      <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
+                      <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
+                    </Col>
+                  </Row>
+                </div>
+                <div style="height: 33.333333%">
+                  <Row type="flex" justify="center" align="middle" style="height: 100%;margin-left: 20px;">
+                    <Col  :span="6">
+                      <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
+                    </Col>
+                    <Col style="height: 100%; padding: 10px;" :span="18">
+                      <span style="color: #ccc">最高效率課堂使用者</span>
+                      <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
+                      <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
+                      <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
+                    </Col>
+                  </Row>
+                </div>
+              </div>
+            </div>            
+          </Col>
+        </Row>
+        <Row :gutter="20" type="flex" justify="center" style="padding-top: 10px;height: 100%;margin: 0;"> 
+          <Col :span="10"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
+          <Col :span="5"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
+          <Col :span="4"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
+          <Col :span="3"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
+        </Row>
+      </div>
+    </div>
+</template>
+
+<script>
+import LegendPie from '@/components/graph/legendPie'
+import RingPie from '@/components/graph/ringPie'
+import ClassLine from '@/components/graph/classline'
+
+
+export default {
+  name:'smart-dashboard',
+  data () {
+    return {
+      classInfoData:[
+        { 
+          'className': 'GE305, 通識教室5',
+          'classProduct': 'Hiteach 3 TBL',
+          'classDetail': '序號使用至2021-09-30, 50人, HBI082, RF05H',
+          'teacherName': '大明星杜美心',
+          'classHot': '7',
+          'classTime': '00:45:03',
+          'classMode': '0'
+        },
+        { 
+          'className': 'GE305, 通識教室5',
+          'classProduct': 'Hiteach 3 TBL',
+          'classDetail': '序號使用至2021-09-30, 50人, HBI082, RF05H',
+          'teacherName': '大明星杜美心',
+          'classHot': '7',
+          'classTime': '--:--:--',
+          'classMode': '1'
+        },
+      ]
+    }
+  },
+  components:{
+    LegendPie,
+    RingPie,
+    ClassLine
+  },
+  methods:{
+    pieHover: function(type, value) {
+      switch (type) {
+        case 'class':
+          
+          break;
+        case 'system':
+          
+          break;
+      }
+    }
+  }
+}
+</script>

TEAMModelOS/JsonFile/EcharsL.json

@@ -3,7 +3,7 @@
   "titledata": [ "校级数据", "区级数据" ],
   "dataname": [ "校级 VS 区域" ],
   "data1": [ "109", "95", "101", "82", "78", "66" ],
-  "data2": [ "120", "83", "108", "88", "69", "79" ],
+  "data2": [ "120", "108", "108", "88", "69", "79" ],
   "indicator": [
     {
       "name": "语文",

TEAMModelOS/JsonFile/EcharsY.json

@@ -1,14 +1,13 @@
 [
   {
-   
     "id": "1",
     "title": "全校平均",
+    "belowscore": "71.2",
     "score": "78",
     "subject": "语文",
     "occupy": "80",
     "surplus": "20",
     "below_title": "全区平均",
-    "below_score": "71.2",
     "icon_type": "md-arrow-dropup",
     "icon_color": "icon_top",
     "color": "#1cd0a1",
@@ -23,7 +22,7 @@
     "occupy": "55",
     "surplus": "45",
     "below_title": "全区平均",
-    "below_score": "68.5",
+    "belowscore": "68.5",
     "icon_type": "md-arrow-dropdown",
     "icon_color": "icon_down",
     "color": "#ff6b6b",
@@ -38,7 +37,7 @@
     "occupy": "70",
     "surplus": "30",
     "below_title": "全区平均",
-    "below_score": "69.5",
+    "belowscore": "69.5",
     "icon_type": "md-arrow-dropup",
     "icon_color": "icon_top",
     "color": "#1cd0a1",
@@ -53,7 +52,7 @@
     "occupy": "60",
     "surplus": "40",
     "below_title": "全区平均",
-    "below_score": "70",
+    "belowscore": "70",
     "icon_type": "md-arrow-dropdown",
     "icon_color": "icon_down",
     "color": "rgb(253,201,89,.7)",
@@ -68,7 +67,7 @@
     "occupy": "78",
     "surplus": "22",
     "below_title": "全区平均",
-    "below_score": "73",
+    "belowscore": "73",
     "icon_type": "md-arrow-dropdown",
     "icon_color": "icon_down",
     "color": "rgb(253,201,89,.7)",
@@ -83,7 +82,7 @@
     "occupy": "85",
     "surplus": "15",
     "below_title": "全区平均",
-    "below_score": "78",
+    "belowscore": "78",
     "icon_type": "md-arrow-dropup",
     "icon_color": "icon_top",
     "color": "#1cd0a1",

TEAMModelOS/JsonFile/EcharsZx.json

@@ -5,7 +5,7 @@
   "obj_series": [
     {
       "name": "成都七中",
-      "data": [ "500", "670", "530", "490", "550" ]
+      "data": [ "580", "670", "550", "490", "550" ]
     },
     {
       "name": "成都九中",
@@ -13,7 +13,7 @@
     },
     {
       "name": "成都树德",
-      "data": [ "550", "630", "540", "530", "510" ]
+      "data": [ "530", "630", "540", "530", "510" ]
     },
     {
       "name": "川师附中",

TEAMModelOS/Startup.cs

@@ -102,6 +102,10 @@ namespace TEAMModelOS
                 routes.MapRoute(
                     name: "default",
                     template: "{controller=Home}/{action=Index}/{id?}");
+
+                routes.MapSpaFallbackRoute(
+                    name: "spa-fallback",
+                    defaults: new { controller = "Home", action = "Index" });
             });
             seedDataService.SeedData();
         }

TEAMModelOS/package.json

@@ -17,10 +17,12 @@
     "update-packages": "npx npm-check -u"
   },
   "dependencies": {
+    "animate.css": "^3.7.0",
     "axios": "^0.18.0",
     "core-js": "^2.5.3",
     "echarts": "^4.2.1",
     "iview": "^3.3.0",
+    "less": "^3.9.0",
     "vue": "^2.6.9",
     "vue-infinite-loading": "^2.4.3",
     "vue-router": "^3.0.2",
@@ -66,6 +68,7 @@
     "event-source-polyfill": "^1.0.5",
     "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
+    "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.8.2",
     "optimize-css-assets-webpack-plugin": "^5.0.1",

TEAMModelOS/webpack.config.js

@@ -46,7 +46,8 @@ module.exports = () => {
         { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
         { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] },
         { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
-        { test: /\.(ttf|woff)$/, loader: 'file-loader' }
+        { test: /\.(ttf|woff)$/, loader: 'file-loader' },
+        { test: /\.less$/, use: [{ loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader", options: { javascriptEnabled: true }}] }
       ]
     },
     plugins: [